IndexReady
内部対策SEO構造化データ

OGPタグ設定ガイド｜SNSシェアを最適化するOpen Graph Protocolの書き方

OGPタグとは

OGP（Open Graph Protocol）とは、WebページがSNSでシェアされた際に、タイトル・説明文・画像などをリッチに表示するためのメタタグ仕様です。2010年にFacebook（現Meta）が策定し、現在ではX（旧Twitter）、LinkedIn、Slack、Discord、LINEなど、ほぼすべての主要プラットフォームが対応するユニバーサルスタンダードとなっています。

OGPタグが設定されていないページのリンクがシェアされると、プラットフォーム側がタイトルや説明文、画像を推測しなければなりません。その結果、ただのURLが表示されたり、意図しない内容の見た目の悪いプレビューになったりします。逆に、適切にOGPを設定すれば、コンテンツの内容が一目で伝わるリッチでビジュアルに訴えるカードが表示され、クリック率（CTR）が大幅に向上します。

実際に、OGP画像が適切に設定されたリンクは、設定されていないリンクと比べてエンゲージメント率が2〜3倍になるというデータもあります。コンテンツを公開しているのにOGPタグを設定していないのは、クリックの機会を逃しているのと同じです。

必須のOGPタグ

OGPの仕様では、すべてのページに含めるべき4つの必須タグが定義されています。

<head>
  <meta property="og:title" content="ページのタイトル" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:image" content="https://example.com/images/og-image.png" />
</head>

og:title

SNSのシェアカードに表示されるタイトルです。HTMLの<title>タグとは独立して設定できるため、ソーシャルフィード向けに最適化した文言にすることも可能です。

  • 文字数は40文字以内が理想（多くのプラットフォームで省略されないため）
  • 主要なキーワードを前方に配置する
  • 混雑するフィードの中でもクリックしたくなる魅力的な表現にする

og:type

コンテンツの種類を指定します。主に使用される値は以下のとおりです。

  • website：トップページやサイト全体のページ
  • article：ブログ記事やニュース記事
  • product：ECサイトの商品ページ
  • profile：個人やプロフィールページ

og:url

ページの正規URLを指定します。<link rel="canonical">タグと同じURLを設定して、情報の不整合を防ぎましょう。

og:image

SNSでシェアされた際に表示されるサムネイル画像です。OGPタグの中でクリック率に最も大きな影響を与える要素です。

推奨するOGPタグ

必須の4タグに加えて、以下のタグの設定を強く推奨します。

<meta property="og:description" content="ページの概要を70〜120文字で記述" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />

og:descriptionはページの短い概要で、ほとんどのプラットフォームでタイトルの下に表示されます。70〜120文字程度が最適な表示長さです。

og:site_nameはサイト全体の名前を指定します。ページタイトルとは別に表示するプラットフォームがあります。

og:localeはコンテンツの言語とリージョンを指定します。日本語サイトならja_JP、英語サイトならen_USを設定します。

OGP画像の推奨サイズとデザイン

OGP画像はシェアカードの中で最も大きな視覚的スペースを占めるため、正しく設定することが極めて重要です。

推奨仕様値
サイズ1200 x 630 ピクセル
アスペクト比1.91:1
ファイル形式PNG または JPEG
ファイルサイズ1MB以下（5MB未満が必須）

デザインのポイント

  • テキストを含める場合は画像の中央部分に配置する（プラットフォームによって端のトリミング範囲が異なるため）
  • ロゴやブランドカラーを統一して使い、一目でどのサイトのコンテンツかわかるようにする
  • 文字サイズは最小でも24px以上にする（モバイル表示でも読めるように）
  • 高コントラストな配色を使用して視認性を確保する
  • 画像の端から10%以内の範囲には重要な要素を配置しない

Twitter Card（Xカード）の設定

X（旧Twitter）はOGPタグに加えて独自のメタタグを使用しています。Twitter専用タグが設定されていない場合はOGPタグの値にフォールバックしますが、カードの表示タイプを制御するには twitter:card を明示的に設定する必要があります。

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@your_account" />
<meta name="twitter:title" content="ページのタイトル" />
<meta name="twitter:description" content="ページの概要" />
<meta name="twitter:image" content="https://example.com/images/og-image.png" />

Twitter Cardの種類

タイプ説明最小画像サイズ
summary小さいサムネイル付きカード144 x 144 px
summary_large_image大きい画像付きカード300 x 157 px（推奨: 1200 x 630）
player動画・音声プレイヤー可変

ほとんどのWebサイトでは**summary_large_image**を選択するのがベストです。画像が大きく表示されるフォーマットはタイムラインでの存在感が圧倒的に高く、小さいサムネイル版と比べてはるかに多くの注目を集めます。

OGPの完全な実装例

ブログ記事向けのOGPタグとTwitter Cardタグの完全なセットです。

<head>
  <!-- OGP基本タグ -->
  <meta property="og:title" content="OGPタグ設定ガイド｜SNSシェアを最適化する方法" />
  <meta property="og:description" content="OGPタグの基本から実装方法まで、コード例付きで完全解説。SNSでのクリック率を向上させましょう。" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://example.com/blog/ogp-tags-guide" />
  <meta property="og:image" content="https://example.com/images/ogp-tags-guide.png" />
  <meta property="og:site_name" content="サイト名" />
  <meta property="og:locale" content="ja_JP" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@your_account" />
  <meta name="twitter:title" content="OGPタグ設定ガイド" />
  <meta name="twitter:description" content="OGPタグの基本から実装方法まで完全解説" />
  <meta name="twitter:image" content="https://example.com/images/ogp-tags-guide.png" />
</head>

Next.jsでのOGP実装

Next.js（App Router）では、metadataオブジェクトをエクスポートすることで型安全にOGPタグを管理できます。HTMLのメタタグを手動で記述する必要がなく、Next.jsが <head> 内のレンダリングを自動的に処理します。

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = getPostBySlug(params.slug);

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      url: `https://example.com/blog/${params.slug}`,
      type: 'article',
      images: [
        {
          url: `https://example.com/images/${params.slug}.png`,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
      siteName: 'サイト名',
      locale: 'ja_JP',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.description,
      images: [`https://example.com/images/${params.slug}.png`],
    },
  };
}

WordPressでのOGP実装

WordPressでは、プラグインを使うのがコードを書かずに設定できる最も手軽な方法です。

  • Yoast SEO：記事編集画面の「ソーシャル」タブからOGPのタイトル、説明文、画像を個別にカスタマイズ可能
  • All in One SEO：同様のOGPタグ管理機能をユーザーフレンドリーなインターフェースで搭載
  • SEO SIMPLE PACK：日本語環境に特化した軽量プラグイン。OGPの基本設定が簡単に行える

プラグインなしでコードベースで実装したい場合は、テーマのfunctions.phpにwp_headアクションフックでOGPタグを出力する関数を追加します。この方法は完全な制御が可能ですが、テーマ更新時にメンテナンスが必要になります。

OGPの確認・デバッグ方法

OGPタグを設定したら、必ず公開前にバリデーションを行いましょう。小さなタイプミスでもプレビューカード全体が崩れることがあります。

公式デバッガー

  • Facebookシェアデバッガー（developers.facebook.com/tools/debug/）：OGPタグの内容を検証し、任意のURLのキャッシュ済み情報をクリアできる
  • X Card Validator：Twitter Cardがタイムラインでどのように表示されるかをプレビューできる

よくある問題と対処法

画像が表示されない：画像URLがhttps://から始まる絶対パスになっていることを確認してください。相対パスは動作しません。また、画像ファイルがrobots.txtや認証でブロックされていないかも確認しましょう。

タグを更新しても古い情報が表示される：SNSプラットフォームはOGPデータを積極的にキャッシュします。タグを変更した後は、各プラットフォームのデバッガーツールで強制的にリフレッシュしてください。Facebookの「もう一度スクレイピング」ボタンやXのCard Validatorで再取得をトリガーできます。

タイトルが意図した内容と違う：og:titleが未設定の場合、プラットフォームは<title>タグにフォールバックしますが、サイト名のサフィックスなど不要な文字列が含まれることがあります。og:titleは常に明示的に設定してください。

OGPタグがSEOに与える影響

OGPタグはGoogleの直接的なランキング要因ではありません。しかし、以下の間接的ながら重要なチャネルを通じてSEOにプラスの影響を及ぼします。

  • SNSからの流入増加：見栄えの良いシェアカードはクリック率を向上させ、サイトへのトラフィック増加につながる
  • 自然な被リンクの獲得：SNSで広くシェアされたコンテンツは、ブロガーやジャーナリストの目に留まり、記事からの自然なリンクを獲得しやすくなる
  • ブランド認知の向上：統一感のあるプロフェッショナルなOGP画像は、時間とともにブランドの認知度と信頼性を構築する

当サイトの無料スコアリングツール「IndexReady」では、OGPタグの設定状況をSEOカテゴリの一項目として8点満点でチェックしています。og:title、og:description、og:imageの3つのタグが適切に設定されているかを確認できるので、自サイトの設定漏れがないかぜひチェックしてみてください。

まとめ

OGPタグの設定は、コンテンツがシェアされるたびに成果を生む、少ない時間投資で大きなリターンが得られる施策です。必須の4タグ（og:title、og:type、og:url、og:image）をog:descriptionとog:site_nameとともに設定し、Twitter Cardタグはsummary_large_imageで最大限の露出を確保しましょう。画像は1200 x 630ピクセルですべてのプラットフォームに対応できます。公開前に必ず公式デバッガーツールですべてのバリデーションを行ってください。

よくある質問（FAQ）

OGPタグとTwitter Cardタグの両方を設定する必要がありますか？

OGPタグはユニバーサルスタンダードとして最低限必須です。Twitter専用タグが未設定の場合、XはOGPの値にフォールバックします。ただし、カードタイプを制御するにはtwitter:cardを明示的に設定する必要があります。すべてのプラットフォームでの表示を完全にコントロールしたい場合は、OGPとTwitter Cardの両方を設定するのがベストです。

og:imageを設定しないとどうなりますか？

og:imageが設定されていない場合、ほとんどのプラットフォームは画像を表示しないか、ページ内から関係のないロゴ、アイコン、広告などを自動的に選んで表示してしまいます。画像はシェアカードの最も目立つ視覚的要素であるため、設定しないとクリック率が50%以上低下する可能性があります。

OGPタグの変更がSNSに反映されないのですが？

各プラットフォームはOGPデータを独立してキャッシュしています。Facebookとそのクローラーを使用するプラットフォームの場合は、Facebookシェアデバッガーにこの場合はURLを貼り付けて「もう一度スクレイピング」をクリックしてください。Xの場合はCard Validatorを使用します。LinkedInには独自のPost Inspectorツールがあります。強制リフレッシュ後、数分以内に更新されたタグが反映されるはずです。

og:titleとog:descriptionは、SEO用のtitleやmeta descriptionと同じ内容で良いですか？

同じ内容でも問題ありませんが、それぞれの用途に合わせて最適化するのが理想的です。SEO用のtitleやmeta descriptionは検索結果ページ向けにキーワードを戦略的に含める傾向がありますが、OGPタグはSNSのフィード向けに好奇心やクリック訴求力を優先すべきです。また、og:descriptionはmeta descriptionよりも短くしましょう。SNSプラットフォームは表示できるテキスト量が少ないためです。

あなたのサイトもチェックしてみませんか？

URLを入力するだけで、SEO・GEO対策の状況を無料で診断できます。

無料で採点する

関連記事

IndexReadyで実サイトを3件診断してみた｜SEO・GEOの実測スコアと採点根拠

続きを読む →

【採点ロジック完全公開】IndexReadyが26項目でWebサイトを評価する理由と配点の設計思想

続きを読む →

FAQ構造化データ(FAQPage)の実装ガイド｜JSON-LDコード付きで徹底解説

続きを読む →