Facebookで記事をシェアしたのに、サムネイル画像が出ない・タイトルや概要が空っぽ・しかも古い情報のまま貼りついて直らない――この厄介な現象は、ほぼOGP（Open Graph protocol）の設定とFacebook側のキャッシュが原因です。
私も自分のブログにシェアボタンを設置した直後、最新記事を試しにシェアしてみたら、本来出るはずの記事サムネイルも概要もまったく表示されませんでした。ソースを疑って何度も見直したのですが、不思議なことに過去の記事はちゃんと画像付きで表示される。つまりHTMLの書き方そのものが致命的に間違っているわけではなく、別のところに原因があったわけです。
Web制作を長くやっていると、この「シェアすると画像が出ない／古いまま」という相談は本当によく受けます。原因はだいたい決まっていて、対処の順番さえ知っていれば数分で直せます。この記事では、なぜ表示が崩れるのかという仕組みから、Facebook公式のシェアデバッガーでキャッシュを取り直す具体手順、WordPressでの正しいOGP設定、X（旧Twitter）のカードとの違いまで、ひととおり整理しておきます。
そもそもFacebookは何を見てサムネイルを出しているのか
Facebookでリンクをシェアすると、Facebookのクローラーがそのページにアクセスして、<head>内のOGPタグを読み取ります。このOGPタグに書かれた情報をもとに、あの「画像＋タイトル＋概要」のリンクカードが組み立てられる仕組みです。
逆に言うと、OGPタグが無い・URLが間違っている・画像が読み込めない、といった状態だとカードがうまく作れず、画像が出なかったり概要が空白になったりします。最低限おさえるべきタグは次の5つです。
<meta property="og:url" content="https://example.com/article.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の概要を2〜4文ほどで" />
<meta property="og:image" content="https://example.com/img/ogp.jpg" />og:urlはそのページの正規URL（パラメータを含まないもの）、og:typeは記事ならarticleを指定します。og:titleとog:descriptionはカードに出る見出しと説明文、og:imageがサムネイル画像です。Facebook公式ドキュメントでは、加えてog:image:widthとog:image:heightも指定しておくと、初回シェア時から画像が正しく読み込まれると案内されています。
出典：A Guide to Sharing for Webmasters – Meta for Developers
og:imageは「1200×630px」を基準にすると失敗しない
画像が出ない原因として地味に多いのが、og:imageの画像サイズが小さすぎて弾かれているケースです。Facebookは小さすぎるOG画像を表示してくれません。
現在の推奨は1200×630ピクセル（アスペクト比1.91:1）。これがニュースフィードで画像がトリミングされずにきれいに収まる基準サイズで、FacebookだけでなくX・LINE・Slack・Discordなど、ほぼすべてのリンクプレビューで通用する事実上の標準になっています。最低でも200×200ピクセルは必要で、これを下回ると画像として認識されません。文字や顔など見せたい要素は中央寄りに置いておくと、自動トリミングで切れる事故を防げます。
ファイルサイズは8MB以内が上限ですが、表示の速さと圧縮耐性を考えると1MB以下にしておくのが無難です。og:imageに指定するURLは、誰でもアクセスできる公開状態であることも忘れずに確認しておきましょう。会員限定ディレクトリやBASIC認証下の画像はクローラーが取得できません。
出典：How To Use Open Graph Protocol For Social Image Sharing – Yoast
古い情報・空のカードはシェアデバッガーで取り直す
正しく動作している場合、シェアボタンを押すとこのようにサムネイルや記事の概要のページが表示されます。
ところが、OGPタグは正しく直したのに「画像が出ない」「タイトルや概要が古いまま」という状態が残ることがあります。これはFacebookが一度読み取った情報をキャッシュ（保存）していて、新しい内容に更新されていないからです。og:imageはURL単位でキャッシュされる仕様なので、ファイル名を変えずに画像だけ差し替えても、Facebookは古い方を表示し続けます。
この場合は「シェアデバッガー（Sharing Debugger）」のページにアクセスし、対象記事のURLを入力します。
手順はシンプルです。
URLを入力して「デバッグ」を押すと、Facebookがいま認識しているOGP情報とプレビューが表示されます。情報が古い・画像が出ていない場合は、「もう一度スクレイピング（Scrape Again）」ボタンを押すと、Facebookがそのページを取得し直してキャッシュを更新してくれます。これでほとんどの「古いまま」「空のカード」が解消します。
ひとつコツがあって、1回押しただけでは反映されないことがあります。そのときは2〜3回続けてスクレイピングし直すと正しく取得されるケースが多いです。WordPressでキャッシュ系プラグインを使っている場合は、先にサイト側のキャッシュもクリアしてから取り直してください。サイト側が古いHTMLを返している限り、Facebookも古い情報しか拾えません。
なお、すでにタイムラインへ投稿してしまった古いカードを直したいときは、デスクトップ版で当該投稿のメニューから「シェア添付ファイルを更新（Refresh Share Attachment）」を選ぶのが今でも一番確実です。デバッガーでの再取得は、新たにシェアするときのプレビューに効きます。
出典：Sharing Debugger – Meta for Developers
WordPressならプラグインでOGPを出すのが早い
自力で<head>にOGPタグを書いてもいいのですが、WordPressを使っているならSEOプラグインに任せるのが確実で手間もかかりません。代表的なYoast SEOの場合、管理画面の「Yoast SEO → 設定 → サイト機能 → ソーシャル共有」でOpen Graphデータをオンにすれば、各ページにog:タグが自動出力されます。
記事ごとに画像やタイトルを上書きしたいときは、投稿編集画面のYoast SEOの「ソーシャル」タブ（Facebookの項目）から、その記事専用のog:image・og:title・og:descriptionを指定できます。記事にアイキャッチ画像が無いページ用に、サイト共通のデフォルトOG画像も設定しておくと、画像が出ない事故を防げます。
このときのデフォルト画像も、先ほどの1200×630pxを目安に用意しておけば見栄えが安定します。プラグインを入れ替えるとOGPタグが二重出力されてエラーになることがあるので、OGPを出力する機能は1つのプラグインに絞っておきましょう。
出典：How to add Facebook’s Open Graph meta tags – Yoast
X（旧Twitter）のカードはOGPだけで足りるのか
「OGPを入れておけばXのカードも出るのでは？」とよく聞かれます。半分正解で、半分は注意が必要です。
Xはまずtwitter:系のタグを見て、それが無ければOGPにフォールバックします。つまりtwitter:imageが無ければog:imageを代わりに使ってくれます。ただし、カードの種類を決めるtwitter:cardだけはOGPに該当タグが無いため、フォールバックでは補えません。大きな画像付きカードを確実に出したいなら、twitter:cardにsummary_large_imageを明示しておく必要があります。
<meta name="twitter:card" content="summary_large_image" />逆に言えば、画像・タイトル・説明はOGPを流用できるので、追記するのはtwitter:cardくらいで済むことが多いです。Xも重要な流入経路なら、OGPに加えてこの1行を足しておくと安心です。
出典：Twitter Cards and X Sharing – The SEO Framework
まとめ：表示が崩れたらこの順番で確認する
Facebookでシェアした記事の画像や概要が出ない・古いままになるときは、次の順番でチェックすれば大半は解決します。
まずOGPタグ（og:url / og:type / og:title / og:description / og:image）が正しく出力されているかを確認します。次にog:imageが1200×630px・公開URLになっているか。サイズが小さすぎたり非公開だと画像は出ません。タグが正しいのに反映されない場合はシェアデバッガーで「もう一度スクレイピング」を2〜3回押してキャッシュを取り直す。WordPressならキャッシュプラグインのクリアも忘れずに。
WordPressユーザーはYoast SEOなどでOGPを自動出力し、デフォルトOG画像を設定しておけば、そもそも画像が出ない事故をかなり減らせます。Xにもきれいなカードを出したいならtwitter:cardを1行足すだけ。一度この流れを身につけておけば、SNSでの見え方で悩むことはほぼ無くなります。私の一押しは、迷ったらまずシェアデバッガーを開くこと。原因の切り分けが一番速いです。
あわせて読みたい関連記事です。
・今見てるページをFacebookでシェアする方法｜PCとスマホの最新手順
