OGPの設定と画像が出ない原因｜シェアの見た目は、og:imageの1行とキャッシュで決まる

記事のURLをLINEやXに貼ると、タイトルと画像が入ったカードが出る。
あのカードの中身は、ページの head に書いた og: で始まる数行で決まっている。
これが OGP（Open Graph protocol）だ。
この記事では、最低限書く4つのタグと、画像が出ない・古い画像のまま、というときに見る場所をまとめる。

カードは、SNS側が勝手にページを要約して作っているわけではない。
シェアされたURLを、SNSのクローラーが取りに来る。
そしてHTMLの head にある og: のタグを読んで、そのとおりに組み立てている。
だから、出てほしい見た目があるなら、こちらから書いて渡すしかない。

最低限書くのは4つ

Open Graph protocol の公式ページ（ogp.me）は、どのページにも必要な基本のタグとして4つを挙げている。

• og:title … カードに出すタイトル
• og:type … ページの種類。記事なら article
• og:image … カードに出す画像のURL
• og:url … そのページの正規のURL。ずっと変わらない「ID」として扱われる

og:image のURLは、https から始まる絶対パスで書く。
/img/ogp.jpg のような書き方は、クローラーから見るとどのサイトの画像か分からない。
画像が出ないときに、僕が最初に疑うのはここだ。

このサイトの head を開いてみた

今日、このブログの記事のHTMLを取得して、og: のタグを確かめてみた。
og:title・og:type（article）・og:url・og:image の4つは入っていた。
X用の twitter:card も summary_large_image で出ている。

入っていなかったのは、og:image:width・og:image:height・og:image:alt の3つだ。
ogp.me には、og:image を書くなら og:image:alt（画像に何が写っているかの説明）も書くべきだ、とある。
Meta の開発者向けページには、幅と高さを書いておくと、最初にシェアされたときから画像がきちんと読み込まれる、と書いてある。
このサイトのアイキャッチは 1200×800 で作っているので、数字は分かっている。
僕は、この3行は足しておきたいと思っている。

画像を差し替えたのに、古いまま出る理由

OGPでいちばん多い相談は、「画像を直したのに、シェアすると前の画像が出る」だと思う。
これは設定ミスではなく、キャッシュのせいであることが多い。

Meta の開発者向けページには、画像はURLごとにキャッシュされ、URLが変わらない限り更新されない、と書いてある。
直し方も二つ載っている。
画像に新しいURLを付けること。
もう一つは、シェアデバッガーでページを読み直させることだ。

キャッシュはSNSの側だけにあるわけでもない。
このサイトの画像の応答ヘッダーを今日見てみたら、Cache-Control が max-age=31536000（1年）・immutable になっていた。
同じファイル名のまま中身を上書きすると、ブラウザも古い画像を持ち続けることになる。
だからこのサイトでは、アイキャッチの作りを変えたときはファイル名の末尾の版（_v3 など）を上げて、URLごと変えるようにしている。
上書きではなく、別のURLにする。
SNSのキャッシュにも、ブラウザのキャッシュにも、これがいちばん確実だと僕は思う。

キャッシュそのものの仕組みは、2回目に開くと速いのはなぜかに書いた。
画像がどこから配られているかの話は、CDNとは何かにまとめている。

画像が出ないときに見る順番

僕なら、次の順に見る。

• og:image が https から始まる絶対パスになっているか
• そのURLをブラウザで直接開いて、画像が表示されるか
• ページや画像が、ログインやIP制限の内側に置かれていないか（クローラーが取りに来られない）
• og:image:width・height を書いているか
• 直したあとなら、画像のURLを変えたか、デバッガーで読み直させたか

3つ目は見落としやすい。
公開前の確認用のサーバーでカードが出ないのは、クローラーがそこに入れないからで、本番に出せば普通に出ることがある。
逆に、本番でもBasic認証をかけたままだと、何をしても出ない。

まとめ

シェアしたときのカードは、head に書いた og:title・og:type・og:image・og:url の4つで決まる。
画像のURLは絶対パスで書き、幅・高さ・alt も添える。
画像を直したのに古いまま出るときは、上書きではなく画像のURLを変える。
このサイトにも、幅・高さ・alt の3行はまだ入っていない。
自分のサイトの head を一度開いてみると、足りない行がすぐ見つかると思う。

出典

• The Open Graph protocol（ogp.me）
• Meta for Developers「A Guide to Sharing for Webmasters」