TwitterのOGP画像が表示されない問題
OGPで定期的に色々躓いていて、特にTwitterがある時期から画像表示されんな…
と思っていたら、鬼のような凡ミスが原因だったので書き記しておきます。
現象
TwitterのOGPが表示されない…
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/993e6a0e-70bf-4d45-ab38-efb7474f6d2b/0bc4ce63-913d-469a-bfb5-f83418d02a32/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T121447Z&X-Amz-Expires=3600&X-Amz-Signature=719a30587eebfad6301a816ce092146cd2fc9b993a6c81f0acd98c3af038246c&X-Amz-SignedHeaders=host&x-id=GetObject)
見た感じmetaタグも問題なさそうだし、TwitterのCard ValidatorもINFOになっている…
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/993e6a0e-70bf-4d45-ab38-efb7474f6d2b/86f17a34-19c7-449b-9abf-67b413a6b1c9/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T121447Z&X-Amz-Expires=3600&X-Amz-Signature=adba0b976a42b3b956b93879ea16d65f58beff9b0bd03e1c73571c791554362a&X-Amz-SignedHeaders=host&x-id=GetObject)
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/993e6a0e-70bf-4d45-ab38-efb7474f6d2b/525d4a0a-fecd-4542-b85d-ed4385f701ff/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T121447Z&X-Amz-Expires=3600&X-Amz-Signature=1bf69063d65e7064d969508566ed0681412fb0288f768d454abdbc74ac3fd846&X-Amz-SignedHeaders=host&x-id=GetObject)
なんでや…
なんでなんや……
時間を見つけては悩み、忘れていました。
ある日突然、冷静になって、もう一度見返してみました(そしてChatGPTにもいろいろ質問した)
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/993e6a0e-70bf-4d45-ab38-efb7474f6d2b/86f17a34-19c7-449b-9abf-67b413a6b1c9/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T121447Z&X-Amz-Expires=3600&X-Amz-Signature=adba0b976a42b3b956b93879ea16d65f58beff9b0bd03e1c73571c791554362a&X-Amz-SignedHeaders=host&x-id=GetObject)
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/993e6a0e-70bf-4d45-ab38-efb7474f6d2b/9020310e-8b05-484c-8e2b-58e211c84740/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T121447Z&X-Amz-Expires=3600&X-Amz-Signature=3586977385ea1141e38ec5de17242a2dd96f22cd45fef51d6da947f490e25245&X-Amz-SignedHeaders=host&x-id=GetObject)
お分かりいただけただろうか
https://www.uenishi.blog//images/blog-og-image.jpg
「uenishi.blog//image」
スラッシュ2個入っとるやん…
Facebookのシェアデバッガー見に行ったらちゃんと書いていた
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/993e6a0e-70bf-4d45-ab38-efb7474f6d2b/96aafe52-f8ce-4838-b283-d766db64cc73/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T121447Z&X-Amz-Expires=3600&X-Amz-Signature=fccec9dd377add082f64a0780176f929bcd5d556b241a3ebedd31ef041d4d2c4&X-Amz-SignedHeaders=host&x-id=GetObject)
308が返る
改めて、https://www.uenishi.blog//images/blog-og-image.jpgを叩いてNetworkを見てみると、以下のような結果が返っていました。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/993e6a0e-70bf-4d45-ab38-efb7474f6d2b/29ed00c1-c077-4e58-9902-3c67cf8fa591/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T121447Z&X-Amz-Expires=3600&X-Amz-Signature=a67c9e2486b228cb6e9af4ef19597e14c7ffdb07025d9619f1517088462df5d4&X-Amz-SignedHeaders=host&x-id=GetObject)
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/993e6a0e-70bf-4d45-ab38-efb7474f6d2b/8f42016c-eb68-4e26-811d-5fe54f0536bc/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T121447Z&X-Amz-Expires=3600&X-Amz-Signature=f40741c7a1fc18d6a4c3866c901423a5c5deba191f056b1da74f9015e8e42234&X-Amz-SignedHeaders=host&x-id=GetObject)
The HyperText Transfer Protocol (HTTP)308 Permanent Redirect
リダイレクトステータスコードは、リクエストされたリソースがLocation
ヘッダーで示された URL へ完全に移動したことを示します。ブラウザーはこのページにリダイレクトし、検索エンジンはリソースへのリンクを更新します (「SEO 用語」では、「リンクジュース」が新しい URL に送られたと言われます)。
正しいURL(https://www.uenishi.blog/images/blog-og-image.jpg)だと304になる。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/993e6a0e-70bf-4d45-ab38-efb7474f6d2b/27c47079-3f11-4b40-bcdb-102d13f3a43e/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T121447Z&X-Amz-Expires=3600&X-Amz-Signature=26fce27b90f696e1f7640a975917b2f54f754e219ded087b8f9fbd1b2b33bc94&X-Amz-SignedHeaders=host&x-id=GetObject)
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/993e6a0e-70bf-4d45-ab38-efb7474f6d2b/59f99980-61b4-49cd-812c-4d05c6b54beb/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T121447Z&X-Amz-Expires=3600&X-Amz-Signature=97defb4d3398b3da4ac844b9ebb78c61dd42e971292977fd6b9bf592fc06698e&X-Amz-SignedHeaders=host&x-id=GetObject)
HTTP304 Not Modified
クライアントリダイレクトレスポンスコードは、リクエストされたリソースを再送する必要がないことを示します。これはキャッシュされたリソースへの暗黙のリダイレクトです。これは、GET
やHEAD
リクエストのようなリクエストメソッドが safe である場合、またはリクエストが条件付きでIf-None-Match
もしくはIf-Modified-Since
ヘッダーを使用しているときに発生します。
metaタグにある画像のURLを読みに行った際、308が返ってきていたせいで画像として認識できておらず、結果としてツイートに画像が表示されなくなっていた感じかと思われます。
twitter:imageにあるURLを https://www.uenishi.blog/images/blog-og-image.jpg とすることで、無事解決しました。めでたしめでたし……
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/993e6a0e-70bf-4d45-ab38-efb7474f6d2b/bdae6d76-7f2b-41ae-a9d8-06ee96e69b98/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T121447Z&X-Amz-Expires=3600&X-Amz-Signature=f10221b95f49db5483290b91ff5f29141416710390aa177d8e29111feb17333b&X-Amz-SignedHeaders=host&x-id=GetObject)
こんなしょーもない凡ミスに時間溶かしすぎたと思いつつ、勉強になったなぁと思うこととします。