X (Twitter) で従来のようにOGP画像にタイトル等のテキストを表示する方法まとめ

2023年10月5日頃、X (Twitter) でOGP画像が設定されたWebページの URLをツイート（ポスト）しても従来のようにページのタイトルや概要が表示されなくなり、OGP画像とドメイン名だけが表示されるようになりました。

このままでは、画像の投稿なのか、リンクの投稿なのかが分かりにくくなり、「画像だと思ってタップしたら外部のページに遷移してしまった」とか、逆に「リンクだと思ってタップしたら画像だった」ということで困っている方もいらっしゃるようです。

Webメディアを運用している方や、私のようにブログを運用している場合などは、このままではサイトへの流入が減少するため困ると言う方もいらっしゃると思います。

そこで、この記事では、「閲覧者側」と「メディア運営者側」と「ツイート（ポスト）投稿者側」それぞれにできる対策をまとめました。
投稿者側の対策については、閲覧者側の対策の下に書いています。

閲覧者向け: Chrome拡張機能でタイトルテキストを表示する

従来のTwitterの表示に戻す拡張機能を使う

WindowsやMac、iOS版SafariやAndroid版FirefoxなどでWeb版X (Twitter) を表示している場合は、「Control Panel for Twitter」という従来のTwitterの表示に戻す拡張機能を使うことで、OGP画像はもちろんXのさまざまなUIをTwitter時代に戻せます。

早速試したところ、OGP画像の下に［ドメイン名タイトル］が小さく表示されて、詳細な文章は表示されません。

Control Panel for TwitterはChromeだけでなく、Firefox（Android版Firefoxを含む）やSafari版（MacおよびiOS）の拡張機能もあり、ソースコードはGitHubで公開されています。
Chrome・Firefox版は無料、Safari版はおそらく審査コストがかかるため有料になっています。

Chrome用: Control Panel for Twitter – Chrome ウェブストア
Firefox用: Control Panel for Twitter – 🦊 Firefox (ja) 向け拡張機能を入手
Safari用: 「Control Panel for Twitter」をApp Storeで

インストール方法は以下の記事で解説されています。
「タイムラインを常に時系列順に表示」「おすすめ非表示」などTwitterの各種項目を選んで消せてスマホにも導入可能なブラウザ拡張機能「Control Panel for Twitter」 – GIGAZINE

CSSを上書きする

多くの場合は「Control Panel for Twitter」で良いと思いますが、Web版を以前のTwitterの表示により近づけたいといった場合は、CSSを上書きするChrome拡張機能などを使用することで、より以前の見た目に近づけることができます。

twitter.com に対して、以下のCSSを適用してください。

X (Twitter) をライトモードで使用している方向け

div[data-testid="card.layoutLarge.media"] a::after {
    display: block;
    content: attr(aria-label);
    padding: 0.5rem;
    font-family: "Twitterchirp", -apple-system, BlinkMacsystemFont, "Segoe UI", Roboto, sans-serif;
    color: #333;
}
/* Hide the URL floating over the image */
div[data-testid="card.layoutLarge.media"] > a > div + div {
    display:none;
}

X (Twitter) をダークモードで使用している方向け

div[data-testid="card.layoutLarge.media"] a::after {
    display: block;
    content: attr(aria-label);
    padding: 0.5rem;
    font-family: "Twitterchirp", -apple-system, BlinkMacsystemFont, "Segoe UI", Roboto, sans-serif;
    color: #eee;
}
/* Hide the URL floating over the image */
div[data-testid="card.layoutLarge.media"] > a > div + div {
    display:none;
}

このCSSは、以下のツイート（ポスト）を参考にさせていただきました。

XユーザーのControl Panel for さん: 「We might be able to restore headlines under external links, but this is dependent on Twitter continuing to make them available for accessibility purposes Quick CSS hack version: https://t.co/nie0a6A3mm」 / Twitter

CSSを上書きする拡張機能はいくつかありますが、私は Stylus を使用しています。
Stylusのインストール方法や使い方は以下のページなどに書かれています。

Chrome / Firefoxの拡張機能 Stylus の基本的な使い方 – 小技チョコレート

メディア運営者向け: 画像内にタイトルテキストを含める

これは皆さん既に思いついていると思うので、詳細は省略します。
画像に文字を入れる作業を手動で行った場合、手間はかかると思います。

メディア運営者向け: OGP画像から summary_large_image を削除する

タイムラインを見ていると、summary_large_image（大きな横長画像）が設定されている投稿はタイトルのテキストが消えている一方、summary_large_image が設定されていない投稿はタイトルのテキストが表示されていることに気づきました。

たとえばWordPressプラグインのコードをいじるなどして
content=”summary_large_image” を削除し、content=”summary” のみにするのが良いかと思います。
content=”summary” は小さな正方形の画像です。

以下の投稿は、content=”summary” のみのリンクをツイート（ポスト）した例です。
リンク先の記事も参考になりました。

X (旧Twitter) の改悪アップデートについての対応策は summary_large_image をやめる事 https://t.co/7Atdiqh2yk

— なつき🐰Webデザイナー (@Stocker_jp) October 5, 2023

この投稿をご覧いただいている方で、WordPressなどのCMSにOGPを表示するためのプラグインを開発している方がいらっしゃったら、「設定画面で summary_large_image を削除する設定を追加し、ユーザーが任意にオンオフできるようにする」、「summary_large_image 画像にタイトルテキストを合成する設定を追加する」などの機能を追加することをお勧めします。

追記: このブログでの対策: デフォルトで正方形のOGP画像を指定する

色々考えた末、このブログではOGP画像は以下のようにすることにしました。

今後新しく公開する記事など、横長で文字を入れた画像が用意できる場合はそれを「アイキャッチ画像」に指定する
過去記事など、文字を入れた画像がない場合はデフォルトの小さな正方形の画像を使用する

WordPressで「Jetpack」というプラグインでOGP画像を出力している場合、WordPressテーマの functions.php に以下のように書くとデフォルトのOGP画像を指定できます。
この場合、「完全に正方形のJPEGまたはPNG画像」をあらかじめアップロードする必要があるので気をつけてください。縦と横のピクセル数が1px違うだけでも正しく表示されませんでした。

// デフォルトOGP画像
function my_jetpack_default_image() {
    // 画像URL
    return 'https://独自ドメイン/ogp-image.jpg';
}
add_filter( 'jetpack_open_graph_image_default', 'my_jetpack_default_image' );

アイキャッチ画像が指定されていない投稿では、以下のようになります。

本日公開した記事です。閲覧者の方はWeb版であれば従来のように表示でき、メディアの方もちょっとした工夫で記事へのリンクだとわかりやすくできます。

X (Twitter) で従来のようにOGP画像にタイトル等のテキストを表示する方法まとめ https://t.co/pqNc6A9ZTr .

— なつき🐰Webデザイナー (@Stocker_jp) October 6, 2023