Open Graph タグ：og:type、og:title、og:url などの一覧

Open Graph は、Facebook、LinkedIn、X、Slack、Discord、iMessage に対して、ページをリンクカードとしてどう表示するか（タイトル、説明、画像、URL）を伝えるメタタグです。このプロトコルは 2010 年に Facebook が作り、仕様は ogp.me にあります。どのタグも og: で始まるため、OG タグ、OG メタタグ、OG データなどと呼ばれます。

これらのタグがないと、各ネットワークが推測で表示します。HTML の title、ページ内の一部のテキスト、場合によっては適当な画像を使い、画像が出ないこともあります。タグがあれば、クリックされる前に人が目にする内容を自分で決められます。

このページでは、すべてのタグを例つきで紹介します。画像そのもの、サイズ、ページごとの作り方については、OG画像のガイドをご覧ください。

必須の 4 つのタグ

仕様では、すべてのページに次の 4 つのタグを求めています。

<meta property="og:title" content="We shipped dark mode" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/dark-mode" />
<meta property="og:image" content="https://example.com/og/dark-mode.png" />

og:title

カードのタイトルです。検索ではなくカードのために書きます。短くして、末尾にサイトの名前は入れません。サイト名は og:site_name が受け持ちます。Facebook と LinkedIn は、画面によって異なりますが、長いタイトルを 60〜90 文字ほどで切り捨てます。

og:type

ページがどんな種類のオブジェクトかを示します。ほとんどのページは website か article を使います。og:type がないページは website として扱われます。全一覧は次のセクションにあります。

og:url

ページの正規 URL です。link rel="canonical" と同じ URL を、https:// つきで、トラッキング用のパラメータなしで指定します。ネットワークはこの URL でシェアやいいねを集計するので、同じページに 2 通りの URL（たとえば ?utm_source= の有無）があると、数が分かれてしまいます。

og:image

カードに表示する画像の URL です。絶対 URL でなければなりません。サイズは 1200 × 630 ピクセルにして、ファイルは 5 MB 未満に抑えます。各ネットワークのサイズは OG画像のガイドにあります。

og:type の値

仕様では、次のタイプが定義されています。

website：デフォルトです。ホームページ、プロダクトのページ、ツールのページに使います。
article：ブログ記事、ニュース、ガイドに使います。article:published_time、article:modified_time、article:author、article:section、article:tag が追加で使えます。
profile：個人のページに使います。profile:first_name、profile:last_name、profile:username、profile:gender が追加で使えます。
book：書籍のページで、book:author、book:isbn、book:release_date、book:tag を使います。
music.song、music.album、music.playlist、music.radio_station：音楽のページ。
video.movie、video.episode、video.tv_show、video.other：動画のページ。

article のページは次のようになります。

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-10-28T09:00:00Z" />
<meta property="article:author" content="https://example.com/authors/duc-an" />
<meta property="article:section" content="Engineering" />
<meta property="article:tag" content="dark mode" />

ほとんどのネットワークは、website のカードと article のカードを同じように表示します。タイプが特に意味を持つのは Facebook と、日付を読み取るツール（一部のフィードリーダーやチャットアプリなど）です。

任意のタグ

og:description：タイトルの下に出る 1〜2 文の説明です。160 文字程度までにします。メタディスクリプションと同じ内容でかまいません。
og:site_name：「Bannerify」のようなサイトの名前です。Facebook と Slack は、タイトルの上か下に表示します。
og:locale：en_US のようなページの言語です。デフォルトは en_US です。ほかの言語版がある場合は、その言語ごとに og:locale:alternate を追加します。
og:determiner：文中でタイトルの前に置く「a」や「the」のような語です。使うネットワークは多くありません。
og:video と og:audio：カードに使う動画ファイルや音声ファイルの URL です。

画像のタグ

og:image には、画像を説明する追加のタグがあります。

<meta property="og:image" content="https://example.com/og/dark-mode.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Dark mode launch card with the app logo" />

og:image:width と og:image:height があると、Facebook はファイルをダウンロードする前に、最初のシェアから画像を表示できます。
og:image:alt は、スクリーンリーダー向けに画像を説明します。
og:image:secure_url は、og:image が http:// のときに指定する https:// の URL です。og:image がすでに https:// なら不要です。

og:image は複数指定できます。ほとんどのネットワークは、最初のものを使います。

完全な例

ブログ記事に必要なすべてのタグと、X に必要な 1 つのタグです。

<head>
  <title>We shipped dark mode | Example</title>
  <meta name="description" content="Every screen, both themes, no flash on load." />
  <link rel="canonical" href="https://example.com/blog/dark-mode" />

  <meta property="og:site_name" content="Example" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://example.com/blog/dark-mode" />
  <meta property="og:title" content="We shipped dark mode" />
  <meta property="og:description" content="Every screen, both themes, no flash on load." />
  <meta property="og:locale" content="en_US" />
  <meta property="og:image" content="https://example.com/og/dark-mode.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Dark mode launch card with the app logo" />
  <meta property="article:published_time" content="2026-10-28T09:00:00Z" />

  <meta name="twitter:card" content="summary_large_image" />
</head>

Open Graph と X（旧 Twitter）のカード

X には、twitter: で始まる独自のタグがあります。twitter: のタグがない場合、X は対応する Open Graph タグを読みます。twitter:title には og:title、twitter:description には og:description、twitter:image には og:image です。そのため、自分で追加が必要な X 用のタグは twitter:card だけです。大きな画像なら summary_large_image、小さな正方形の画像なら summary を使います。

カードが表示されなくなる間違い

property の代わりに name を使う。 仕様は property="og:title" です。多くのネットワークは name="og:title" も読みますが、すべてではありません。
JavaScript で追加したタグ。 SNS のクローラーはスクリプトを実行しません。タグはサーバーから HTML に入れて返すか、ページをプリレンダリングしてください。
相対パスの画像 URL。 /og/dark-mode.png は動きません。https:// から始まる完全な URL を使ってください。
ログインが必要な画像、 またはネットワークのクローラーを robots.txt がブロックしている画像。
古いカード。 ネットワークは取得した内容を、多くの場合数日間キャッシュします。変更したあとは、Facebook シェアデバッガーか LinkedIn Post Inspector でページを再取得してください。

Open Graph は SEO に効果がある？

直接の効果はありません。Google はコンテンツとリンクからページを順位づけしていて、og: タグを順位のシグナルには使っていません。ただし、わかりやすいカードはリンクが共有されたときのクリックを増やし、その訪問やシェアはページが見つけてもらう助けになります。また、より適切なタイトルや説明がないページでは、検索エンジンや AI ツールも og:title と og:description を読みます。

タグをテストする

無料の Open Graph チェッカーに URL を貼ってください。X、Facebook、LinkedIn のプレビューを一度に表示し、足りないタグを一覧にして、画像サイズも確認します。Twitter カードバリデーターも同じことができ、X のカードを先頭に表示します。

すべてのページの画像を作る

タグは簡単な部分です。難しいのは、すべてのページに良い画像を用意することです。無料の OG画像ジェネレーターで 1 枚ずつ作ることも、テンプレートからページごとに作ることもできます。Bannerify でテンプレートを一度デザインして、タイトルと著者を載せた URL をページごとに 1 つ署名します。コードは OG画像のガイドにあります。無料プランには月 100 回の生成が含まれています。