OGPタグとは

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

OGPタグが設定されていないページをシェアすると、タイトルや画像が正しく表示されなかったり、意図しない内容が表示されたりします。逆に、適切にOGPを設定すれば、SNS上でのクリック率（CTR）が大幅に向上し、サイトへの流入増加が期待できます。

実際に、OGP画像を設定したリンクは設定していないリンクと比べて、エンゲージメント率が2〜3倍になるというデータもあります。

必須の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上で表示されるタイトルです。<title>タグとは別に設定できるため、SNS向けに最適化した文言にすることも可能です。

文字数は25〜40文字程度が理想（長すぎると省略される）
キーワードを前方に配置する
サイト名を含める場合は末尾に「| サイト名」の形式が一般的

og:type

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

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

og:url

ページの正規URLを指定します。canonicalタグと同じURLを設定するのが基本です。

og:image

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

推奨するOGPタグ

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

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

og:description

ページの概要を記述します。meta descriptionとは別にSNS向けの文言を設定できます。70〜120文字程度が適切です。

og:site_name

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

og:locale

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

OGP画像の推奨サイズ

OGP画像のサイズはプラットフォームによって表示仕様が異なりますが、以下のサイズが最も幅広く対応できます。

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

画像作成のポイント

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

Twitter Card（Xカード）の設定

X（旧Twitter）では、OGPタグに加えてTwitter Card専用のメタタグを設定することで、表示をさらに制御できます。

<!-- 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 以上
`summary_large_image`	大きい画像付きカード	300 x 157 以上（推奨: 1200 x 630）
`player`	動画・音声プレイヤー	-

ほとんどのWebサイトでは**summary_large_image**を使用するのがベストです。画像が大きく表示されるため、タイムラインでの視認性が高くなります。

なお、Twitter Card用のメタタグが設定されていない場合、XはOGPタグの値をフォールバックとして使用します。最低限OGPタグさえ設定していればXでも表示されますが、twitter:cardだけは明示的に指定しないとカードタイプが決まりません。

OGPの完全な実装例

すべてのタグをまとめた実装例です。

<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タグを設定できます。

// 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`],
    },
  };
}

Next.jsのmetadata APIを使えば、HTMLのメタタグを手動で記述する必要がなく、型安全にOGPタグを管理できます。

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タグの内容を確認し、キャッシュをクリアできる
X Card Validator：Twitter Cardの表示をプレビューできる

OGPがうまく表示されないとき

よくある原因と対処法は以下のとおりです。

画像が表示されない：画像URLが絶対パスになっていない、画像サイズが小さすぎる、HTTPSでない
古い情報が表示される：SNSがOGP情報をキャッシュしているため、各プラットフォームのデバッガーでキャッシュを更新する
タイトルが意図と異なる：og:titleが未設定で、titleタグの内容がフォールバックされている

OGPタグがSEOに与える影響

OGPタグは直接的な検索ランキング要因ではありません。しかし、以下の間接的な効果を通じてSEOにプラスに働きます。

SNSからの流入増加：魅力的なOGP表示によりクリック率が向上し、サイトへのトラフィックが増える
被リンクの獲得：SNSで広くシェアされたコンテンツは、ブログや記事から自然な被リンクを獲得しやすい
ブランド認知の向上：統一感のあるOGP画像により、サイトの認知度と信頼性が高まる

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

まとめ

OGPタグの設定は、SNSでのコンテンツ拡散力を高めるために欠かせない施策です。特にog:imageは視覚的なインパクトが大きく、クリック率を大きく左右します。1200 x 630ピクセルの画像を用意し、OGPタグとTwitter Cardタグの両方を設定することで、すべての主要プラットフォームに対応できます。

設定後は必ずデバッガーツールで表示を確認し、意図した通りにシェアされるかをテストしましょう。

よくある質問（FAQ）

OGPタグを設定しないとどうなりますか？

OGPタグが設定されていない場合、SNSのクローラーがページの<title>タグや本文から情報を自動的に抽出して表示します。しかし、意図しないテキストや画像が選ばれることが多く、見栄えが悪くなります。結果として、クリック率が低下しSNS経由の流入機会を逃すことになります。

og:imageの画像URLは相対パスでも良いですか？

いいえ、og:imageには必ず**絶対パス（https://から始まる完全なURL）**を指定してください。相対パスでは、SNSのクローラーが画像を取得できず、サムネイルが表示されません。また、URLは**HTTPS**であることも重要です。

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

SNSのプラットフォームはOGP情報をキャッシュするため、タグを更新してもすぐには反映されません。Facebookの場合はシェアデバッガーにURLを入力して「もう一度スクレイピング」ボタンを押すことでキャッシュを更新できます。Xの場合も同様にCard Validatorを使用します。

OGPタグとmeta descriptionは同じ内容で良いですか？

同じ内容でも問題ありませんが、それぞれの用途に合わせて最適化するのが理想的です。meta descriptionは検索結果向けに70〜160文字で書き、og:descriptionはSNSのタイムラインで目を引くよう70〜120文字程度で簡潔にまとめるのがベストです。