まいの雑記帳

TwitterではOGPにWebPが使えないみたい

テクノロジープログラミング
投稿した日
2026/01/29
読了まで
3.77分で読み終われます (2,264文字)

# はじめに

どうも、私です。

先日、Twitterを何気なく眺めていたときに相互の子がここのURLを投稿してくれているのが目に留まりました。

自分の書いた記事が共有されているのは嬉しいことですが、その投稿を見て一つ気になる点がありました。本来ならアイキャッチ画像が表示されるはずのOGPが、画像なしのグレーの表示になっていたのです。

環境の問題かと思い何度かリロードしてみたり、別の端末で確認してみたりしましたが、状況は変わりません。どうやら、私のサイトのOGP設定に何か不具合が起きているようでした。

# WebP移行の落とし穴

実はこのサイト、かなり前の改修でパフォーマンス向上を目的として、配信する画像のフォーマットを全面的にWebPへ統一していました。WebPは軽量で取り回しやすく、現代においては事実上のスタンダードと言える形式です。

その際、主要なブラウザでの表示確認は行っていましたが、TwitterでのOGP表示に関しては特に個別の検証をしていませんでした。というのも、Twitterの公式ドキュメント🔗にはサポートされる画像形式としてWebPが明記されていたため、「公式が言ってるんだから大丈夫だろう」と高を括っていたのです。

おそらく、その改修を行った時点からずっと、Twitter上では画像が表示されない状態が続いていたのだと思われます。

# 記事ページだけ表示されない

状況を詳しく確認してみると、サイト内のすべてのページで画像が表示されないわけではありませんでした。

サイト内にある/, /aboutのような固定ページは、Twitter上でも問題なく画像が表示されています。一方で、ブログのメインコンテンツである記事ページやタグページのURLを投稿すると、画像が表示されません。

特定のページだけが表示されないという挙動から、metaタグの記述ミスではなく、画像ファイルそのものや配信方法に原因があるのではないかと推測しました。そこで、正常に表示されているページと、表示されないページの違いを比較してみることにしました。

# 原因

調査の結果、両者の決定的な違いは画像のファイル形式にありました。

表示されている固定ページのOGP画像は、サーバー上に配置された静的なPNGファイルを指定していました。対して、表示されない記事ページの画像は、記事ごとにアイキャッチを生成するAPIを経由しており、動的に生成されたWebP画像を指定していました。

このサイトの仕様として、APIはリクエストに応じてWebP形式で画像を返し、レスポンスヘッダーのContent-Typeも image/webp を正しく設定しています。Webの標準仕様に準拠した実装であり、ブラウザで直接URLを開けば画像は問題なく表示されます。

mq1-web/server/api/og/article/[contentId].ts at 33aabbbebed9ab839ce6d6759753be2cbcd06a3e · chan-mai/mq1-web
49505152535455
        const arrayBuffer = await imageResponse.arrayBuffer();
        const buffer = Buffer.from(arrayBuffer);

        setHeader(event, 'Content-Type', 'image/webp');
        setHeader(event, 'Cache-Control', 'public, max-age=31536000, immutable');
        
        return buffer;
View on GitHub

このサイトでは、通常のブラウザ向けにはWebPを標準としていますが、どうやらTwitterのクローラーに対しては、WebP形式の画像は正しく認識されないようです。私のサイト環境においては、動的・静的問わず、WebPを指定している箇所でOGPが表示されるケースはありませんでした。

# 公式ドキュメントと実挙動の乖離

納得がいかないのは、Twitter公式のDeveloper Platform🔗にあるtwitter:imageの仕様記述です。そこには明確にこう書かれています。

URL of image to use in the card. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.

「JPG, PNG, WEBP and GIF formats are supported」と、はっきりと書かれているのです。

しかし現実は、ドキュメント通りにWebPを設定しても表示されません。この現象について相互の子に話を聞いたところ、全く同じ挙動に悩まされた経験があり、結局はWebPを諦めてPNG配信に切り替えることで解決したそうです。個別の環境依存というよりは、プラットフォーム側でWebPへの対応が不完全、あるいは不安定である可能性が高そうです。

ドキュメント通りの正しい実装をしているにもかかわらず、プラットフォーム側の都合で弾かれてしまうというのは納得しづらい部分ですが、外部サービスに依存している以上、こちらが合わせるしかありません。

# PNG形式に戻して解決

原因がプラットフォーム側のWebP対応状況にあると判断したため、OGP画像の生成ロジックを変更することにしました。

mq1-web/server/api/og/article/[contentId].ts at 8899159ec6a9901fcdc70933b572cf63a4f47ddc · chan-mai/mq1-web
49505152535455
        const arrayBuffer = await imageResponse.arrayBuffer();
        const buffer = Buffer.from(arrayBuffer);

        setHeader(event, 'Content-Type', 'image/png');
        setHeader(event, 'Cache-Control', 'public, max-age=31536000, immutable');
        
        return buffer;
View on GitHub

バックエンドの処理を修正し、OGP用画像のリクエストに対しては、PNGを強制して返すように変更しました。本来であればファイルサイズの小さいWebPを使いたいところですが、OGPが表示されないデメリットの方が大きいため、ここはやむを得ない対応です。

修正をデプロイして確認したところ、PNGになった画像はTwitterに認識され、カードが正常に表示されるようになりました💩

# さいごに

公式ドキュメントには「WebP対応」と明記されているのに、実際には動かない。開発者としてはモヤっとしますが、プラットフォーム側の都合には逆らえません。

同じようにTwitterのOGP問題で頭を抱えている方の参考になれば嬉しいです。

Previous Article

「おっと、何かがうまくいかなかった。」Ad-Shieldをなんとかしたい

どうも、私です。私のおうちネットワーク環境には少々癖がありまして、なぜか広告配信やユーザーを追跡するトラッキングに関連するFQDN全般の名前解決が、ことごとく失敗するようになっています。これらのドメインから配信されるコンテンツは視覚的にも内容的にも不快なものが多いため、個人的にはこの「不具合」のおか

Next Article

SpeedTestで回線品質を語らないでね

YouTubeやTwitterを眺めていると、頻繁に目にする光景があります。SpeedTestの計測結果画面を貼り付け、「国内最速級のネットワークを構築した」「自分の回線は最強だ」とドヤ顔で語る、自称コンピュータに詳しい方々の姿です。正直に申し上げます。お前らのどこが詳しいんだと。それらの投稿からは

ブログの更新をお知らせ

RSSで購読すると新しい記事の投稿を知ることができます。