Uenishi.Web

OGPで定期的に色々躓いていて、特にTwitterがある時期から画像表示されんな…

と思っていたら、鬼のような凡ミスが原因だったので書き記しておきます。

TwitterのOGPが表示されない…

見た感じmetaタグも問題なさそうだし、TwitterのCard ValidatorもINFOになっている…

なんでや…

なんでなんや……

時間を見つけては悩み、忘れていました。

ある日突然、冷静になって、もう一度見返してみました（そしてChatGPTにもいろいろ質問した）

お分かりいただけただろうか

https://www.uenishi.blog//images/blog-og-image.jpg

「uenishi.blog//image」

スラッシュ2個入っとるやん…

Facebookのシェアデバッガー見に行ったらちゃんと書いていた

改めて、https://www.uenishi.blog//images/blog-og-image.jpgを叩いてNetworkを見てみると、以下のような結果が返っていました。

The HyperText Transfer Protocol (HTTP) 308 Permanent Redirect リダイレクトステータスコードは、リクエストされたリソースが Location ヘッダーで示された URL へ完全に移動したことを示します。ブラウザーはこのページにリダイレクトし、検索エンジンはリソースへのリンクを更新します (「SEO 用語」では、「リンクジュース」が新しい URL に送られたと言われます)。

正しいURL（https://www.uenishi.blog/images/blog-og-image.jpg）だと304になる。

HTTP 304 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 とすることで、無事解決しました。めでたしめでたし……

こんなしょーもない凡ミスに時間溶かしすぎたと思いつつ、勉強になったなぁと思うこととします。