BrainChain
Facebookシェアで画像やタイトルが表示されない？OGP設定とデバッグの要点
PT
PT
2026-05-08
開発したサイトをSNSでシェアした際に画像やタイトルが表示されない問題の解決策を解説します。OGPタグの正しい記述方法から、画像サイズや絶対パスの注意点、Google Cloud Runの認証設定、robots.txtの確認まで網羅。さらに、curlコマンドやFacebook公式デバッグツールを用いた検証手順も紹介し、リッチなプレビュー表示を実現するための具体的なステップをまとめました。

Facebookシェアで画像やタイトルが表示されない？OGP設定とデバッグの要点

自社の技術共有サイトをSNSでシェアした際、タイトルやサムネイル画像が表示されず、ドメイン名だけが寂しく表示されてしまうことがあります。本記事では、自社の「www.brainchain.jp」 の開発過程で直面したこの問題を解決し、正しくリッチなプレビューを表示させるための手順を解説します。

1. 根本的な原因：OGPタグの不足

FacebookなどのSNSは、サイトを読み込む際にHTMLのhead内にある「OGP（Open Graph Protocol）」という特定のメタタグを探します。これがないと、SNS側はどの画像やタイトルを表示すべきか判断できません。

解決策：HTMLにOGPタグを追加する

シェアしたいページのheadセクション内に、以下のコードを実装してください。

<head>
  <meta property="og:title" content="記事のタイトル（例：最新のAI動向について）" />
  <meta property="og:description" content="記事の簡単な説明文をここに記載します。" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://www.brainchain.jp/blog/1778206760998" />
  <meta property="og:image" content="https://www.brainchain.jp/path/to/your/thumbnail.jpg" />
  <meta property="og:site_name" content="BRAINCHAIN" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

2. 実装・運用の注意点

タグを追加する際は、以下の2点に注意が必要です。

  • 画像のパス: og:imageに指定するURLは、必ず https:// から始まる絶対パスで記述してください。
  • 推奨サイズ: Facebookで綺麗に表示される推奨サイズは 1200 × 630 ピクセル（アスペクト比 1.91:1）です。最小でも 200 × 200 ピクセル以上が必要です。

3. インフラ・クローラー設定の確認

タグを設定しても改善しない場合は、以下の項目を確認してください。

Cloud Run のセキュリティ設定

Google Cloud Runを利用している場合、セキュリティ欄の認証が「公開アクセスを許可する（未認証のアクセスを許可）」になっているか確認してください。制限されているとSNSのクローラーがアクセスできません。

robots.txt の確認

SvelteKitプロジェクトなどの static/robots.txt でクローラーを拒否していないか確認します。以下のように許可されている必要があります。

User-agent: *
Allow: /

4. 調査・検証方法

設定が反映されているかは、以下の方法でテストできます。

ターミナルでの確認

自分のPCからFacebookのクローラーを装ってアクセスし、HTTPステータスを確認します。

curl -A "facebookexternalhit/1.1" -I あなたのシェアしたいURL

ここで HTTP/2 200 が返ってくれば正常です。

Facebook Sharing Debugger の活用

Facebook公式のデバッグツールにURLを入力して「デバッグ」を押してください。現在の認識状況が表示されます。画像が出ない場合は「もう一度スクレイピング」を何度か押すとキャッシュが更新され、正しいプレビューが表示されるようになります。