OGPタグとは？SNSシェア時の表示を確認する方法

TwitterやFacebookでリンクをシェアしたとき、タイトルや画像がきれいに表示されるのはOGP（Open Graph Protocol）タグのおかげです。この記事では、OGPの基本的な設定方法から、SNSでの表示を確認・デバッグする方法まで解説します。

OGPとは

OGP（Open Graph Protocol）は、Facebookが策定したメタデータの規格です。HTMLの<meta>タグで設定し、SNSやメッセンジャーでURLがシェアされた際のプレビュー（タイトル、説明文、画像）を制御します。

主要なOGPタグ一覧

タグ	説明	必須
og:title	ページタイトル	必須
og:description	ページの説明文	推奨
og:image	プレビュー画像のURL	必須
og:url	ページの正規URL	推奨
og:type	コンテンツ種別（website/article等）	任意
og:site_name	サイト名	任意
og:locale	言語設定（ja_JP等）	任意

OGP設定のHTMLコード例

<head>
  <!-- OGP基本タグ -->
  <meta property="og:title" content="ページのタイトル" />
  <meta property="og:description" content="ページの説明文" />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="サイト名" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="ページのタイトル" />
  <meta name="twitter:description" content="ページの説明文" />
  <meta name="twitter:image" content="https://example.com/image.jpg" />
</head>

Twitter Cardとの違い

OGPはFacebookが策定した標準規格で、多くのSNSが対応しています。Twitter Cardは、Twitter（X）独自のメタタグで、OGPと並行して設定するのが一般的です。

項目	OGP	Twitter Card
プレフィックス	og:	twitter:
属性名	property	name
カードタイプ	なし	summary / summary_large_image
対応SNS	Facebook / LINE / Slackなど	Twitter（X）

OGP画像のサイズ推奨

推奨サイズ：1200 x 630px（アスペクト比 1.91:1）
最低サイズ：600 x 315px
ファイルサイズ：5MB以下
形式：JPEG、PNG、GIF（アニメーションGIF非対応の場合あり）

よくある質問

OGPを設定したのにSNSに反映されない場合は？

SNSにはOGP情報のキャッシュがあります。Facebookは「シェアデバッガー」、TwitterはURL直接入力でキャッシュをクリアできます。当ツールでも最新のOGP情報を確認できます。

og:imageは相対パスで指定できますか？

いいえ。og:imageは必ず絶対URL（https://で始まるフルパス）で指定する必要があります。相対パスでは認識されません。

Next.jsでOGPを設定する方法は？

Next.js App RouterではMetadata APIを使い、openGraphオブジェクトでOGP情報を設定できます。Pages Routerではnext/headでmeta要素を直接記述します。