カテゴリ:Tech投稿日:
OGPをX(Twitter)で表示させるときは画像を相対パスではなく絶対パスにしようのサムネイル

OGPをX(Twitter)で表示させるときは画像を相対パスではなく絶対パスにしよう

弊ブログは OGP を設けています。しかし X に投稿したとき画像が表示されていませんでした。
結論としては X においては相対パスだと表示されない、絶対パスだと表示されるようになります。

Slack や Facebook 上では相対パスであっても問題なく表示できていたため、原因の特定に時間がかかりました。
X で OGP が表示できているサイトと弊ブログの meta タグを比較して、og:image の content の内容の違いを発見して解決に至りました。

ちなみに弊ブログでは
<meta property="og:image" content="" />を使用しており
<meta name="twitter:image" content="" />は使用していません。
また X で OGP が表示されなくなったら、このあたりを疑ってみようと思います。

ブログ運営者
muuuuminn
経歴:
SE:1年半 → FE:5年 → ?
スキル:
Next.js, TypeScript, React, Notion
趣味:
ゲーム, 手品, 開発, コレクション, 映画