生成とプレビュー Open Graph メタタグ

✅ OpenGraph テスターは、ワンクリックで一か所でメタタグのプレビューと生成を可能にします

試してみてください: https://opengraph.dev
に適用 Facebook, Whatsapp, Twitter, LinkedIn, Wordpress...
Hero Image

Open Graph タグを使用してウェブサイトを最適化

Open Graph プロトコルがソーシャルメディアの共有をどのように強化するかを発見

Open Graph (OG) とは何ですか？

Open Graph プロトコル（OGP として一般に知られている）は、ウェブサイトのコンテンツがソーシャルネットワーク上でどのように表示されるかを定義する上で重要です。Open Graph タグの実装により、コンテンツがオンラインで共有されるときに特定の画像、タイトル、および説明が表示されることが保証されます。

オプティマルな Open Graph 画像サイズ

高解像度デバイスへの影響を最大化するために、少なくとも1200ピクセルの幅がある Open Graph 画像を使用してください。ソーシャルメディアのリーダーであるFacebookは、フィード内で画像をトリミングせずに完全に表示するために、1.91:1の比率の画像を推奨しています。

Open Graph タグの簡単な統合

OpenGraph.dev のようなツールを使用して、Open Graph タグを簡単に統合します。メタタグをウェブサイトの 'head' セクションに生成して挿入し、サイトのソーシャルメディアの可視性を高めます。

SEOにおけるOpen Graphの重要性

最適化されたOpen Graphタグは、ソーシャルメディア上でのコンテンツの目立つ度とクリック率を著しく向上させ、サイトへのトラフィックを増やします。これらは、混雑したソーシャルメディアのフィードでコンテンツを際立たせるために不可欠です。

Open Graph タグとは何ですか？

Open Graph タグは、ウェブページの <head> 内に配置される HTML の <meta> 要素で、その URL が他の場所（Facebook フィード、X の投稿、LinkedIn のアップデート、WhatsApp のチャット、Discord サーバー、iMessage のスレッド、Slack のチャンネルなど）で共有されたときに、ページがどのように表示されるべきかを記述します。Open Graph プロトコルは元々 2010 年に Facebook によって導入され、以来、主要なほぼすべてのプラットフォームでリンクプレビューの事実上の標準となっています。Open Graph メタタグの完全なセットは、リッチプレビューカード内に表示されるタイトル、説明、画像、タイプ、正規 URL を完全に制御できるようにし、単純なハイパーリンクを目を引くスニペットに変え、クリック率において常にプレーンなリンクを上回ります。

Open Graph メタタグの最小実用セット 

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling summary of the page." />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />

ソーシャルプラットフォーム全体での Open Graph

ほぼすべての主要なソーシャルネットワークやメッセンジャーは Open Graph メタデータを読み取りますが、それぞれが画像サイズ、キャッシュ、フォールバックに関する独自のルールを適用します。最も厳しい要件に合わせれば、同じ画像セットがどこでも機能します。

Facebook

Open Graph データの最大の利用者です。og:title、og:description、og:image を使用します。推奨画像は 1200×630 ピクセル、アスペクト比 1.91:1 で、ニュースフィードでトリミングされずに表示されます。キャッシュは積極的なため、変更後は Sharing Debugger を使って更新してください。

X (Twitter)

Twitter Card メタが欠けている場合は Open Graph タグにフォールバックしますが、大きなプレビューカードを得るには twitter:card を summary_large_image に設定し、twitter:image も宣言する必要があります。画像は 5 MB 未満で、最低 300×157 ピクセル必要です。1200×630 が安全なデフォルトです。

LinkedIn

og:title、og:description、og:image、og:type を読み取ります。画像は 5 MB 未満で、最低 1200×627 ピクセル（比率 1.91:1）が必要です。LinkedIn は最初のクロール結果を約 7 日間キャッシュします。変更を公開した後は Post Inspector を使って再取得を強制してください。

WhatsApp & iMessage

両方のメッセンジャーは HTTPS 経由で Open Graph タグを取得し、画像サイズに厳しい制限があります。WhatsApp は約 300 KB を超えるものを切り捨てるため、画像を最適化し、og:image:width と og:image:height を宣言してレンダリングを高速化してください。iMessage は利用可能な場合 1:1 の正方形画像を好むため、複数の og:image タグで両方の比率を提供することを検討してください。

Discord, Slack & Telegram

3 つのプラットフォームはすべて、標準の og:title、og:description、og:image のトリオからプレビューをレンダリングします。Discord はサイドバーのアクセントとして theme-color も尊重します。Telegram は iframe と JS を削除するため、タグはランタイムで挿入されるのではなく、最初のサーバーレンダリング HTML に含まれていることを確認してください。

Pinterest & Reddit

Pinterest は article:author と Rich Pin タイプで Open Graph を拡張します。Reddit はリンクが投稿されると og:title と og:image を取得し、画像を投稿のサムネイルとして使用します。どちらも幅広の 1.91:1 バナーよりも、ポートレートまたは正方形の画像（2:3 から 1:1）を好みます。

フレームワークに Open Graph メタタグを追加する

これらのスニペットをプロジェクトに追加して、最も一般的なスタックで Open Graph タグを接続してください。各例は同じ最小実用セットをサーバー側でレンダリングするため、クローラーは初回描画時にそれらを認識できます。

Next.js (App Router)

ts
// app/page.tsx
export const metadata = {
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A short, compelling summary of the page.',
    url: 'https://example.com/article',
    siteName: 'Example',
    images: [{ url: 'https://example.com/preview.png', width: 1200, height: 630 }],
    locale: 'en_US',
    type: 'website'
  }
}

Nuxt 3

ts
<script setup lang="ts">
useSeoMeta({
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  ogTitle: 'Your Page Title',
  ogDescription: 'A short, compelling summary of the page.',
  ogImage: 'https://example.com/preview.png',
  ogUrl: 'https://example.com/article',
  ogType: 'website',
  ogLocale: 'en_US'
})
</script>

Astro

astro
---
const { title, description, image, url } = Astro.props
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:url" content={url} />
  <meta property="og:type" content="website" />
</head>

WordPress

php
// functions.php — works without an SEO plugin
add_action('wp_head', function () {
  if (!is_singular()) return;
  global $post;
  $img = get_the_post_thumbnail_url($post->ID, 'full') ?: '';
  printf('<meta property="og:title" content="%s" />', esc_attr(get_the_title($post)));
  printf('<meta property="og:description" content="%s" />', esc_attr(wp_trim_words($post->post_excerpt ?: $post->post_content, 30)));
  printf('<meta property="og:image" content="%s" />', esc_url($img));
  printf('<meta property="og:url" content="%s" />', esc_url(get_permalink($post)));
  echo '<meta property="og:type" content="article" />';
});

Open Graph に関するよくある質問

開発者やコンテンツチームが Open Graph メタタグを実装する際に最もよく質問する内容への簡潔な回答です。

Open Graph タグは SEO に役立ちますか？
Open Graph タグは Google 検索の直接的なランキングシグナルではありませんが、間接的な SEO 成果を有意義に向上させます。見栄えの良いプレビューはクリック率の向上、シェアの増加、被リンクの増加につながり、それらすべてがランキングに反映されます。また、ページのタイトル、画像、言語をクローラーに明確に伝えるため、Google が無関係なサムネイルを選んだり独自のスニペットを生成したりする可能性を減らせます。
Open Graph と Twitter Cards の違いは何ですか？
Open Graph はクロスプラットフォームの標準です。Twitter Cards は X の並行フォーマットで、独自の twitter:* 名前空間を持ちます。X は Twitter 固有のタグが欠けている場合 Open Graph にフォールバックするため、ほとんどのサイトでは Open Graph に加えて 1 つの twitter:card 宣言を公開するだけで、大きな画像プレビューを有効にできます。
推奨される Open Graph 画像のサイズはいくつですか？
1200×630 ピクセル（比率 1.91:1）が安全なデフォルトです。Facebook、LinkedIn、X の大きなカード、Slack、Discord をトリミングなしで満たします。WhatsApp と iMessage が取得できるよう、ファイルを 1 MB 未満に保ってください。Pinterest 中心のオーディエンスがいる場合は、追加で 1000×1500 のポートレート画像を用意してください。
画像を変更した後でも、なぜプレビューに古い画像が表示されますか？
主要なプラットフォームはすべて Open Graph データをキャッシュします。Facebook、LinkedIn、X はそれぞれ異なるスケジュール（数分から 1 週間）で更新されます。Facebook の Sharing Debugger、LinkedIn の Post Inspector、X の Card Validator を使って再スクレイピングを強制し、同じ URL で画像を差し替えた場合は og:image にキャッシュバスティング用のクエリ文字列を追加してください。
シングルページアプリケーション（SPA）には Open Graph のためにサーバーサイドレンダリングが必要ですか？
ほぼすべてのソーシャルプラットフォームでそうです。WhatsApp、LinkedIn、Slack、Discord、Telegram は URL をクロールする際に JavaScript を実行しないため、クライアントのみでレンダリングされたメタタグは認識されません。SSR（Next.js、Nuxt、Astro）、静的生成、または専用のプリレンダリングサービスを使い、初期 HTML レスポンスにタグが含まれていることを確認してください。
ページに Open Graph タグがまったくない場合はどうなりますか？
プラットフォームはスクレイピングできるもの、つまり <title>、meta description、ドキュメント内で最初に見つけた十分なサイズの画像にフォールバックします。結果は予測できません。間違った画像、切り詰められたタイトル、あるいはプレビューがまったく表示されないこともあります。3 つのタグ（og:title、og:description、og:image）を追加するだけで推測をなくせます。
Open Graph タグ名は大文字小文字を区別しますか？
はい。プロトコルで定義されたとおり、小文字を使用してください。og:title であって OG:Title ではありません。大文字と小文字が混在したプロパティ名は、ほとんどのクローラーによって警告なしに無視されます。これはリファクタリング後にプレビューが突然動かなくなる最も一般的な理由の一つです。
Open Graph タグのデバッグにはどのツールが使えますか？
OpenGraph.dev のプレビューに加えて、各プラットフォームは独自のバリデーターを提供しています。Facebook の Sharing Debugger（developers.facebook.com/tools/debug）、LinkedIn の Post Inspector（linkedin.com/post-inspector）、developer.x.com の X Cards ドキュメント、Pinterest の Rich Pins Validator、そしてキャッシュをクリアするための Telegram の @WebpageBot です。