本文へスキップ

OGP 入門：SNS で正しく表示されるための基本

・対象: 初学者,Web エンジニア・タグ: tool:og-check, seo, ogp

「SNS で URL を貼ったのに、サムネやタイトルが変…」——そんな経験はありませんか？ 本記事では、OGP の“そもそも”から、なぜ崩れるのか、どう直すのかまでを分かりやすく整理します。

1. 導入：よくある悩み・初心者の疑問

  • X や Facebook に URL を貼ると、昔のタイトルやサムネのままになる
  • サイトでは meta タグを設定したのに、SNS では反映されない
  • 複数の SNS で表示が微妙に違うのはなぜ？

2. 基本の構造（定義と構文）

**OGP（Open Graph Protocol）**は、ページのタイトル・説明・画像などを SNS に伝えるためのメタ情報仕様です。 代表的なタグ:

  • og:title — タイトル
  • og:description — 説明
  • og:image — サムネイル画像 URL（推奨は絶対 URL）
  • og:url — ページの正規 URL

SNS はページ取得時にこれらの meta タグを読み取り、プレビューを生成します。Twitter（X）はtwitter:*系タグも参照しますが、基本は OGP と近い考え方です。

歴史的には Facebook 発の仕様で、他 SNS にも広く採用されています。検索エンジンの SEO とは直接別物ですが、共有時のクリック率（CTR）に直結します。

3. 仕組み・構造：簡単な図と例

  1. ユーザーが SNS に URL を貼る
  2. SNS クローラがページを取得
  3. HTML の<head>内のmeta property="og:*"を解析
  4. キャッシュに保存してプレビュー生成

コード例:

      <meta property="og:title" content="記事タイトル" />
<meta property="og:description" content="要約テキスト" />
<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:url" content="https://example.com/post" />

4. よくあるつまずき／勘違い

  • 画像 URL が相対パス → SNS が解決できず表示不可（必ず絶対 URL に）
  • 画像比率が不適切 → トリミングや余白が出る（横長 1200×630 程度が実用的）
  • リダイレクト多段 → 最終 URL で OGP が取れないことがある
  • キャッシュ更新待ち → すぐに変わらない（SNS ごとにキャッシュ刷新ツールあり）
  • og:urlとcanonicalの不一致 → シェア数が分散することがある

5. 実例：具体的に使う場面

  • 記事公開前に SNS プレビューを確認して、画像の余白や文字切れを修正
  • 旧 URL から新 URL への移行時に、プレビュー崩れやリダイレクト不備を早期発見
  • マーケ施策で複数 LP のプレビューを一括確認

6. セキュリティ・運用上の注意

  • 画像ホスティングの可用性を確保（CDN 推奨）
  • 画像は HTTPS で提供
  • 大量の外部 URL を機械取得する場合、クローリングポリシーとレート制御を遵守

7. 手を動かす：関連ツール /tools/og-check の紹介

  • /tools/og-check にアクセス
  • URL を入力 → 「OG タグ解析」
  • 最終 URL・HTTP ステータス・OG/Twitter タグの一覧を確認
  • 画像チェックでog:imageの到達性も検証

8. 3 分クイズ

  • OGP は何のため？ → SNS にタイトル/説明/画像を伝えてプレビュー生成
  • 崩れやすいポイントは？ → 画像 URL の相対指定、比率不適切、キャッシュ
  • まず何を確認？ → 最終 URL・ステータス・og:image絶対 URL・タグの有無
クイズ（3問）
  1. og:imageは相対 URL でもよい？ → いいえ、原則絶対 URL
  2. og:urlの目的は？ → 正規 URL を SNS に伝え、共有を集約
  3. 変更が反映されない時は？ → SNS のキャッシュ更新ツールを使う

9. 関連リンク

関連ツール: /tools/og-check