Open GraphとTwitter Cardsの完全ガイド

Open Graphのメタデータがリンクのプレビューを制御する仕組み、Googleのスニペットとの違い、タイトル・画像・説明文の検証方法を解説します。

2026年5月17日Updated 2026年10月7日11分で読めますseohead

ユーザーがFacebook、Telegram、LinkedIn、WhatsAppでリンクを共有すると、プラットフォームはサイトから任意のデータを取得するわけではありません。ページの<head>にある専用のメタタグを読み取ります。これが、Facebookが2010年に開発したOpen Graph Protocolです。

OGマークアップがないと、SNSはタイトル、説明文、画像を自分で推測します。結果は予測できません。正しくマークアップすれば、プレビューの見た目を完全に制御でき、共有されたリンクのCTRを最大限に高められます。

図：HTMLのOGタグ→SNS→タイトルと画像つきのプレビューカード — Open Graphは、共有されたリンクの見え方を制御します。`<head>`内のタグが、タイトル、説明文、画像を持つカードになります。

Open Graphは検索順位に直接は影響しません。SNSからの流入を増やすための手段です。ただし、魅力的なプレビューで共有されればリーチが広がり、間接的にリンク評価や指名検索のトラフィックに影響することがあります。

Open Graphとは

Open Graph Protocol（OGP）は、HTMLページの<head>に置くメタタグの集まりで、SNSで共有したときのページの見せ方を定義します。プロトコルはog:という名前空間を使い、Facebook、LinkedIn、Telegram、WhatsApp、Pinterest、Slackなど主要なプラットフォームすべてが対応しています。

基本のOGタグ

タグ	必須かどうか	説明
og:title	必須	プレビューに表示されるページのタイトル（60～70文字まで）
og:description	推奨	説明文（155～160文字まで）
og:image	必須	プレビュー画像のURL（最小200×200、推奨1200×630）
og:url	必須	ページの正規URL
og:type	必須	オブジェクトタイプ：website、article、product
og:site_name	推奨	サイト名（例：'seohead.tech'）
og:locale	推奨	ページの言語：en_US、ru_RU
og:image:width	推奨	画像の幅（ピクセル）
og:image:height	推奨	画像の高さ（ピクセル）
og:image:alt	推奨	プレビュー画像の代替テキスト

コードの実装例：

html

<!-- Full OG tag set for an article -->
<head>
  <meta property="og:title" content="Open Graph and Twitter Cards: complete guide" />
  <meta property="og:description" content="How to set up Open Graph markup for maximum CTR when sharing on social media" />
  <meta property="og:image" content="https://seohead.tech/images/blog/open-graph.webp" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Open Graph and Twitter Cards guide" />
  <meta property="og:url" content="https://seohead.tech/en/blog/open-graph" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="seohead.tech" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:locale:alternate" content="ru_RU" />

  <!-- Additional for article -->
  <meta property="article:published_time" content="2026-05-17T00:00:00Z" />
  <meta property="article:author" content="https://seohead.tech/en/about" />
  <meta property="article:section" content="On-Page SEO" />
</head>

og:image：要件とサイズ

OGイメージは、プレビューで最も重要な要素です。カード面積の80%以上を占め、リンクがクリックされるかどうかを左右します。サイズや形式が合っていないと、Facebookは画像を切り取るか、表示しません。

プラットフォーム	推奨サイズ	最小サイズ	形式
Facebook / Meta	1200×630px	600×315px	JPG、PNG、GIF、WebP
Twitter / X	1200×600px	300×157px	JPG、PNG、WebP、GIF
LinkedIn	1200×627px	200×200px	JPG、PNG、GIF
Telegram	1280×720px（16:9）	指定なし	JPG、PNG、WebP
WhatsApp	1200×630px	300×200px	JPG、PNG

どのプラットフォームにも使える方法：1200×630pxのWebP形式にします。比率は1.91:1で、主要なプラットフォームすべてで正しく表示されます。ファイルサイズの上限は8MB（Facebookの制限）で、300KB未満が最適です。

Twitter Cards

Twitter（X）はOGタグに対応していますが、独自のマークアップであるTwitter Cardsも持っています。プラットフォームはまずtwitter:タグを読み、なければog:タグにフォールバックします。両方を指定することをおすすめします。

Twitter Cardのタグ	対応するOGタグ	説明
twitter:card	—	カードの種類：summary、summary_large_image、app、player
twitter:title	og:title	タイトル（70文字まで）
twitter:description	og:description	説明文（200文字まで）
twitter:image	og:image	画像のURL
twitter:image:alt	og:image:alt	画像の代替テキスト
twitter:site	—	サイトのアカウントの@ユーザー名
twitter:creator	—	コンテンツの著者の@ユーザー名

コードの実装例：

html

<!-- Twitter Cards markup -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@seohead_tech" />
<meta name="twitter:creator" content="@seohead_tech" />
<meta name="twitter:title" content="Open Graph and Twitter Cards: complete guide" />
<meta name="twitter:description" content="Setting up OG markup for maximum CTR when sharing" />
<meta name="twitter:image" content="https://seohead.tech/images/blog/open-graph.webp" />
<meta name="twitter:image:alt" content="Open Graph guide" />

OGのオブジェクトタイプ

og:type	使う場面	追加のタグ
website	トップページ、サービスページ、ランディングページ	—
article	ブログ記事、ニュース、ガイド	article:published_time、article:author、article:section
product	オンラインストアの商品ページ	product:price:amount、product:price:currency
profile	著者ページ、ユーザープロフィール	profile:first_name、profile:last_name
video	動画コンテンツのあるページ	video:duration、video:release_date

Next.jsでの実装

Next.js 13以降（App Router）では、Metadata APIでOGタグを設定すると便利です。HTMLのメタタグを手で書かずに、型のある形で扱えます。

typescript

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

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const article = await getArticle(params.slug);

  return {
    title: article.titleEn,
    description: article.leadEn,
    openGraph: {
      title: article.titleEn,
      description: article.leadEn,
      url: `https://seohead.tech/en/blog/${params.slug}`,
      siteName: 'seohead.tech',
      images: [
        {
          url: `https://seohead.tech${article.coverImage}`,
          width: 1200,
          height: 630,
          alt: article.coverImageAltEn,
        },
      ],
      locale: 'en_US',
      type: 'article',
      publishedTime: article.date,
      authors: ['https://seohead.tech/en/about'],
      section: article.tagEn,
    },
    twitter: {
      card: 'summary_large_image',
      title: article.titleEn,
      description: article.leadEn,
      images: [`https://seohead.tech${article.coverImage}`],
      creator: '@seohead_tech',
    },
  };
}

検証とデバッグ

ツール	プラットフォーム	URL
Facebook Sharing Debugger	Facebook、Instagram、WhatsApp	developers.facebook.com/tools/debug/
Twitter Card Validator	Twitter / X	cards-dev.twitter.com/validator
LinkedIn Post Inspector	LinkedIn	linkedin.com/post-inspector/
Open Graph Checker	共通	opengraph.xyz
Telegram	Telegram	チャットにリンクを貼るだけで、すぐにプレビューが表示されます

FacebookはOGタグをキャッシュします。マークアップを更新してもプレビューが変わらないときは、Facebook Sharing Debuggerの「Scrape Again」ボタンを使います。Telegramのキャッシュは自動で更新されます。強制的に更新したい場合は、URLに?v=2を付けます。

よくある質問

直接の影響はありません。GoogleはOGタグをランキングに使いません。間接的には影響します。魅力的なプレビューは共有を増やし、それがリンクの増加や指名検索のトラフィックにつながることがあります。

検索では<title>、SNSではog:titleが重要です。両者は異なっていて構いません。検索向けのtitleはキーワードに合わせて最適化し（50～60文字）、SNS向けはクリックや感情に訴える内容にします（70文字まで）。どちらのタグも必要です。

主な理由は3つです。1）画像にHTTPSでアクセスできない、またはボットにブロックされている。2）og:imageがない、またはURLが無効。3）ページがクローラーに対して閉じられている（noindex、robots.txt、CloudflareのBot Fight Mode）。画像にアクセスできるかは、curl -A 'TelegramBot' URLで確認します。

多くのプラットフォームはOpen Graphにフォールバックできますが、プラットフォーム固有のタグを使えば、対応している範囲でより細かく制御できます。実際に共有するURLでテストしてください。すべてのプラットフォームでのキャッシュやプレビューの表示を保証できるタグの組み合わせはありません。

Next.jsは、next/ogのImageResponseでOG画像を動的に生成できます。JSXのテンプレートをもとに、サーバー側でPNG／WebP形式の画像が生成されます。画像を手作業で用意しなくても、記事ごとに固有のプレビューを作れます。

Check it with SpiderHead

Free and local: run the audit on your own machine.

Try it

Open GraphとTwitter Cardsの完全ガイド

Open Graphとは

基本のOGタグ

og:image：要件とサイズ

Twitter Cards

OGのオブジェクトタイプ

Next.jsでの実装

検証とデバッグ

よくある質問

Read next

メタディスクリプションとは？書き方と設定方法

画像SEO：代替テキスト・形式・圧縮・遅延読み込み

Schema.org JSON-LD：Google検索の構造化データ