OGPタグの書き方と設定方法｜必須タグ・画像サイズ・確認手順

2026-05-08

SNSでURLをシェアしたのに、画像もタイトルも表示されない——この問題の原因は、ほぼ100%OGPタグの設定ミスです。

OGPはSNS共有のための公式メタデータです。AI検索エンジンが補助的に参照する可能性はありますが、主要な情報源としての公式確認はありません。OGP設定の主な目的はSNSでの表示最適化であり、AI検索対策としては構造化データ（JSON-LD）の方が優先度が高いです。

この記事では、OGPタグの基本的な書き方から、og:imageの推奨サイズ、プラットフォーム別の設定方法、表示されない時のトラブルシューティングまで、コピペ可能なコード付きで解説します。

自社サイトのOGPタグ設定状況を確認したい方は、無料診断ツールで自動チェックできます。

OGPタグとは何か

OGP（Open Graph Protocol）は、Webページの内容をSNSやメッセージアプリに正しく伝えるためのメタデータ規格です。Facebookが2010年に策定し、現在はX（旧Twitter）、LINE、Slack、Discord等ほぼ全てのプラットフォームが対応しています。

HTMLの<head>内に<meta property="og:...">タグを記述することで、シェア時に表示されるタイトル・説明文・画像・URLを制御できます。

公式リファレンス:

OGP公式仕様 — Open Graph Protocolの仕様書
X Developer Docs — Cards — Twitter Cardの公式ドキュメント
Next.js Metadata API — Next.jsでのOGP設定方法

OGPタグがないとどうなるか:

SNSシェア時にタイトルや画像が表示されない、または意図しない内容が表示される
クリック率が大幅に低下する（画像付きリンクは画像なしと比べてエンゲージメントが向上する傾向があります）
AI検索エンジンがページ概要を正確に把握できない可能性がある

必須OGPタグ一覧と書き方

OGPタグは5つの基本タグで構成されます。全て<head>内に記述します。

og:title（ページタイトル）

<meta property="og:title" content="OGPタグの設定方法｜書き方・画像サイズ・表示されない時の確認ポイント">

SNSシェア時に表示されるタイトルです。<title>タグとは別に設定できるため、SNS向けに最適化した文言を指定できます。

ポイント:

40文字以内を推奨（長いとプラットフォームによって切れる）
<title>タグと同じでも問題ないが、SNS向けにキャッチーにするのも有効
サイト名は含めなくてよい（og:site_nameで別途指定可能）

og:description（ページ説明文）

<meta property="og:description" content="OGPタグの書き方を初心者向けに解説。og:imageの推奨サイズ、表示されない時の対処法、コピペ用コード例まで網羅。">

シェア時にタイトル下に表示される説明文です。

ポイント:

80〜120文字を推奨
ページの価値が伝わる1〜2文にまとめる
meta descriptionと同じ内容でも問題ない

og:image（シェア画像）

<meta property="og:image" content="https://example.com/images/ogp-guide.png">

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

ポイント:

必ず絶対URLで指定する（相対パスは無効）
HTTPS推奨（HTTPだと一部プラットフォームで表示されない）
推奨サイズは次のセクションで詳述

og:url（正規URL）

<meta property="og:url" content="https://example.com/blog/ogp-guide">

ページの正規（canonical）URLを指定します。パラメータ付きURLやリダイレクト先ではなく、正規のURLを記述します。

ポイント:

canonical URLと一致させる
末尾スラッシュの有無を統一する
HTTPSで指定する

og:type（コンテンツタイプ）

<meta property="og:type" content="article">

ページの種類を指定します。主な値は以下の通りです。

値	用途
`website`	トップページ、一般ページ
`article`	ブログ記事、ニュース
`product`	商品ページ
`profile`	プロフィールページ

完全なOGPタグセットの例

<head>
  <!-- 基本OGPタグ -->
  <meta property="og:title" content="OGPタグの設定方法｜書き方・画像サイズ・確認ポイント">
  <meta property="og:description" content="OGPタグの書き方を初心者向けに解説。og:imageの推奨サイズ、表示されない時の対処法まで網羅。">
  <meta property="og:image" content="https://example.com/images/ogp-guide.png">
  <meta property="og:url" content="https://example.com/blog/ogp-guide">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:locale" content="ja_JP">

  <!-- X（Twitter）カード用 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="OGPタグの設定方法｜書き方・画像サイズ・確認ポイント">
  <meta name="twitter:description" content="OGPタグの書き方を初心者向けに解説。">
  <meta name="twitter:image" content="https://example.com/images/ogp-guide.png">
</head>

X（旧Twitter）は独自のTwitter Cardタグを優先しますが、OGPタグへのフォールバックも行います。両方設定しておくのが確実です。

Twitter Cardタグの詳細

X（旧Twitter）はtwitter:プレフィックスの専用タグを持っています。OGPタグだけでも表示されますが、専用タグを設定することでより細かい制御が可能です。

タグ	必須	説明
`twitter:card`	✅	カードタイプ（`summary` / `summary_large_image`）
`twitter:title`	—	タイトル（未設定時は`og:title`を使用）
`twitter:description`	—	説明文（未設定時は`og:description`を使用）
`twitter:image`	—	画像URL（未設定時は`og:image`を使用）
`twitter:image:alt`	—	画像の代替テキスト
`twitter:site`	—	サイトの@ユーザー名
`twitter:creator`	—	記事著者の@ユーザー名

twitter:cardの種類:

summary — 小さい正方形サムネイル+テキスト。ニュース記事やブログ向け
summary_large_image — 大きい横長画像+テキスト。ビジュアル重視のコンテンツ向け（推奨）

<!-- Twitter Card: summary_large_image の例 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yoursite">
<meta name="twitter:creator" content="@author">
<meta name="twitter:title" content="OGPタグの設定方法">
<meta name="twitter:description" content="OGPタグの書き方を初心者向けに解説。">
<meta name="twitter:image" content="https://example.com/images/ogp-guide.png">
<meta name="twitter:image:alt" content="OGPタグ設定ガイドのサムネイル画像">

最小構成のOGPタグ（コピペ用テンプレート）

「とりあえずこれだけ設定すれば全プラットフォームで正しく表示される」最小構成です。

<!-- ===== 最小構成OGP（Minimum Viable OGP） ===== -->
<meta property="og:title" content="ページタイトル（40文字以内）">
<meta property="og:description" content="ページの説明文（80〜120文字）">
<meta property="og:image" content="https://example.com/images/ogp.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">

この6行だけで、Facebook・X・LINE・Slack・Discordの全てで画像付きリンクが表示されます。twitter:card以外のTwitter専用タグは省略可能で、OGPタグの値が自動的にフォールバックされます。

最小タグ構成としてはこれで十分なことが多いですが、画像の到達性（robots.txtでブロックされていないか）、キャッシュ、プラットフォーム固有の要件は別途確認が必要です。

ここまで読んで、自社サイトが気になった方へ

URLを入力するだけ。会員登録は一切不要で、30秒後に以下がわかります。

📊AI検索対応度
100点満点スコア

🔍優先して直すべき
改善点Top3

📄PDF / Markdown
改善レポート

無料で診断結果を見る →

URLを入力するだけ / 会員登録不要 / データ保存なし

og:imageの推奨サイズと仕様

og:imageはOGPタグの中で最も表示に影響する要素です。サイズや形式を間違えると、画像が切れたり表示されなかったりします。

推奨サイズ: 1200×630px

1200×630px（アスペクト比 1.91:1） が全プラットフォーム共通の推奨サイズです。

プラットフォーム	推奨サイズ	最小サイズ	アスペクト比	備考
Facebook	1200×630px	600×315px	1.91:1	600px未満は小サムネイル表示
X（Twitter）	1200×630px	300×157px	1.91:1	summary_large_imageの場合
X（summary）	240×240px	144×144px	1:1	正方形にクロップされる
LINE	1200×630px	200×200px	1.91:1	トーク画面では上下がクロップされる場合あり
LinkedIn	1200×627px	200×200px	1.91:1	フィード表示時に中央クロップ
Slack	1200×630px	250×250px	1.91:1	展開表示時のみ大きく表示
Discord	1200×630px	—	1.91:1	Embed表示で横幅最大400px
はてなブックマーク	1200×630px	—	1.91:1	エントリーページで表示

重要: LINEのトーク画面ではプラットフォームによって画像の上下がクロップされる場合があります。テキストや重要な要素は画像の中央80%に配置してください。

ファイル形式と容量

項目	推奨
ファイル形式	PNG（テキスト多め）、JPEG（写真）
ファイルサイズ	5MB以下（Facebook上限8MB、X上限5MB）
推奨容量	300KB〜1MB（表示速度とのバランス）
WebP	Facebook対応済み、X非対応の場合あり → PNG/JPEGが安全
AVIF	主要プラットフォーム未対応 → 使用しない
SVG	全プラットフォーム非対応 → PNG/JPEGに変換して使用

画像最適化のコツ

OGP画像は「見た目の品質」と「ファイルサイズ」のバランスが重要です。

テキスト中心の画像（ブログ記事のOGP等）:

# ImageMagickで最適化（PNG → 圧縮PNG）
convert input.png -strip -quality 95 -resize 1200x630 output.png

# pngquantで更に圧縮（ロスレスに近い品質）
pngquant --quality=80-95 --output optimized.png input.png

写真中心の画像:

# JPEGで保存（品質85%が視覚的に劣化なし）
convert input.png -resize 1200x630 -quality 85 output.jpg

# mozjpegで更に圧縮
cjpeg -quality 85 -optimize input.ppm > output.jpg

画像作成時のチェックリスト:

テキストは画像幅の80%以内に収める（左右に余白）
フォントサイズは最低32px以上（モバイルで視認可能）
背景色とテキスト色のコントラスト比4.5:1以上
ブランドロゴは右下または左下に小さく配置
重要な要素を中央に寄せる（プラットフォームによるクロップ対策）

og:image設定のベストプラクティス

<!-- 推奨: サイズ情報も明示 -->
<meta property="og:image" content="https://example.com/images/ogp.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="OGPタグの設定方法を解説する記事のサムネイル">

og:image:widthとog:image:heightを明示する理由: Facebookのクローラーは画像サイズを事前に知ることで、シェア時の表示を高速化します。指定がないと初回シェア時に画像が表示されないことがあります。

プラットフォーム別の設定方法

静的HTML

最もシンプルな方法です。<head>内に直接記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル</title>

  <!-- OGPタグ -->
  <meta property="og:title" content="ページタイトル">
  <meta property="og:description" content="ページの説明文（80〜120文字）">
  <meta property="og:image" content="https://example.com/images/ogp.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:type" content="website">
  <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:title" content="ページタイトル">
  <meta name="twitter:description" content="ページの説明文">
  <meta name="twitter:image" content="https://example.com/images/ogp.png">
</head>
<body>
  <!-- コンテンツ -->
</body>
</html>

WordPress

WordPressではSEOプラグインを使うのが最も簡単で確実です。

方法1: SEOプラグインを使う（推奨）

プラグイン	特徴	OGP設定場所
Yoast SEO	最も利用者が多い。無料版でOGP対応	投稿編集 → Yoast → ソーシャルタブ
All in One SEO	Yoastと同等機能。UIがシンプル	投稿編集 → AIOSEO → Social
SEOPress	軽量。広告なし	投稿編集 → SEOPress → Social
The SEO Framework	最軽量。設定項目が少ない	投稿編集 → SEO Settings → Social

Yoast SEOでの設定手順:

プラグインをインストール・有効化
Yoast SEO → ソーシャル → Facebook/Xタブでデフォルト画像を設定
各投稿の編集画面 → Yoast SEOパネル → 「ソーシャル」タブ
Facebook/Xそれぞれのタイトル・説明文・画像を個別に設定

プラグインを使うメリット:

投稿ごとにGUIで設定可能（コード不要）
デフォルト画像のフォールバック設定
Twitter Cardタグも自動出力
構造化データとの連携

方法2: functions.phpで自前実装（プラグインを増やしたくない場合）

// functions.php に追加
function add_ogp_tags() {
  if (is_singular()) {
    global $post;
    $title = get_the_title();
    $description = get_the_excerpt() ?: mb_substr(strip_tags($post->post_content), 0, 120);
    $url = get_permalink();
    $image = get_the_post_thumbnail_url($post->ID, 'full') ?: 'https://example.com/default-ogp.png';

    echo '<meta property="og:title" content="' . esc_attr($title) . '">' . "\n";
    echo '<meta property="og:description" content="' . esc_attr($description) . '">' . "\n";
    echo '<meta property="og:image" content="' . esc_url($image) . '">' . "\n";
    echo '<meta property="og:image:width" content="1200">' . "\n";
    echo '<meta property="og:image:height" content="630">' . "\n";
    echo '<meta property="og:url" content="' . esc_url($url) . '">' . "\n";
    echo '<meta property="og:type" content="article">' . "\n";
    echo '<meta property="og:site_name" content="' . esc_attr(get_bloginfo('name')) . '">' . "\n";
    echo '<meta property="og:locale" content="ja_JP">' . "\n";
    echo '<meta name="twitter:card" content="summary_large_image">' . "\n";
    echo '<meta name="twitter:title" content="' . esc_attr($title) . '">' . "\n";
    echo '<meta name="twitter:image" content="' . esc_url($image) . '">' . "\n";
  }
}
add_action('wp_head', 'add_ogp_tags');

自前実装の注意点:

SEOプラグインと併用するとOGPタグが重複出力される → どちらか一方に統一
アイキャッチ画像が未設定の投稿用にデフォルト画像を必ず用意する
is_front_page()の場合はog:typeをwebsiteにする分岐を追加

Shopify

Shopifyのテーマは多くの場合OGPタグを自動出力しますが、カスタマイズする場合はtheme.liquidを編集します。

{%- comment -%} theme.liquid の <head> 内に追加 {%- endcomment -%}
<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:url" content="{{ canonical_url }}">

{%- if template contains 'product' -%}
  <meta property="og:type" content="product">
  <meta property="og:title" content="{{ product.title }}">
  <meta property="og:description" content="{{ product.description | strip_html | truncate: 120 }}">
  <meta property="og:image" content="https:{{ product.featured_image | image_url: width: 1200 }}">
{%- elsif template contains 'article' -%}
  <meta property="og:type" content="article">
  <meta property="og:title" content="{{ article.title }}">
  <meta property="og:description" content="{{ article.excerpt | strip_html | truncate: 120 }}">
  <meta property="og:image" content="https:{{ article.image | image_url: width: 1200 }}">
{%- else -%}
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{ page_title }}">
  <meta property="og:description" content="{{ page_description }}">
  <meta property="og:image" content="https:{{ settings.share_image | image_url: width: 1200 }}">
{%- endif -%}

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

Next.js（App Router）

Next.js 13以降のApp Routerでは、metadataオブジェクトまたはgenerateMetadata関数でOGPを設定します。以下は実装例（概念）です。

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

export async function generateMetadata({ params }): Promise<Metadata> {
  // 実際のデータ取得関数に置き換えてください
  const post = await getPost(params.slug)

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      url: `https://example.com/blog/${params.slug}`,
      siteName: 'サイト名',
      images: [
        {
          url: post.ogImage || 'https://example.com/default-ogp.png',
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
      locale: 'ja_JP',
      type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.description,
      images: [post.ogImage || 'https://example.com/default-ogp.png'],
    },
  }
}

Next.jsのmetadata APIを使うと、OGPタグが自動的に<head>に出力されます。画像パスは必ず絶対URLで指定してください。

OGPが表示されない時の原因と対処法

OGPを設定したのにSNSで画像やタイトルが表示されない場合、以下の原因を順番に確認してください。

原因1: キャッシュが残っている（最も多い）

症状: OGPタグを修正したのに、シェア時に古い情報が表示される。

対処法:

各プラットフォームのキャッシュクリアツールを使います。

Facebook: https://developers.facebook.com/tools/debug/
X: 実際にポストしてプレビューを確認、またはcurlでOGPタグ出力を確認
LINE: https://poker.line.naver.jp/

Facebookの場合、Sharing Debuggerで「もう一度スクレイピング」をクリックするとキャッシュが更新されます。Xについては公式のCard Validatorの提供状況が変動するため、OpenGraph.xyz等のサードパーティツールでの確認も有効です。

原因2: og:imageのURLが相対パス

症状: 画像だけ表示されない。

<!-- ❌ 相対パスは無効 -->
<meta property="og:image" content="/images/ogp.png">

<!-- ✅ 絶対URLで指定 -->
<meta property="og:image" content="https://example.com/images/ogp.png">

OGPの仕様上、og:imageは必ず絶対URL（https://から始まる完全なURL）で指定する必要があります。

原因3: 画像サイズが小さすぎる

症状: 画像が表示されない、または小さいサムネイルになる。

プラットフォーム	最小サイズ
Facebook	200×200px（推奨600×315px以上）
X	144×144px（summary）、300×157px（summary_large_image）
LINE	200×200px

対処法: 1200×630pxの画像を用意すれば全プラットフォームで問題なく表示されます。

原因4: 画像がHTTPで配信されている

症状: 一部のプラットフォームで画像が表示されない。

<!-- ❌ HTTPだと表示されない場合がある -->
<meta property="og:image" content="http://example.com/images/ogp.png">

<!-- ✅ HTTPSで配信 -->
<meta property="og:image" content="https://example.com/images/ogp.png">

2026年現在、Facebook・XともにHTTPS配信の画像を推奨しています。サイト全体をHTTPS化していない場合は、まずSSL証明書の導入を検討してください。

原因5: クローラーがページにアクセスできない

症状: 全てのOGP情報が表示されない。

確認すべき項目:

robots.txtでFacebookbot/Twitterbotをブロックしていないか
Basic認証やIP制限がかかっていないか
JavaScriptレンダリングが必要なSPA構成になっていないか（クローラーはJSを実行しない）
サーバーがクローラーのIPをブロックしていないか

# robots.txt でブロックしていないか確認
User-agent: facebookexternalhit
Allow: /

User-agent: Twitterbot
Allow: /

原因6: OGPタグの記述位置が間違っている

症状: タグを設定したのに全く反映されない。

<!-- ❌ <body>内に書いても無効 -->
<body>
  <meta property="og:title" content="タイトル">
</body>

<!-- ✅ 必ず<head>内に記述 -->
<head>
  <meta property="og:title" content="タイトル">
</head>

また、<head>内でも他のmetaタグより前方に配置することを推奨します。一部のクローラーはHTMLの先頭部分しか読まない場合があります。

原因7: og:imageの画像ファイルが存在しない（404）

症状: 画像だけ表示されない。他のOGP情報（タイトル・説明文）は正常。

# 画像URLに直接アクセスして確認
curl -I https://example.com/images/ogp.png
# HTTP/2 404 → 画像が存在しない

よくある原因:

ファイル名のタイポ（大文字/小文字の違い含む）
デプロイ時に画像ファイルがアップロードされていない
CDNのキャッシュパージ後に画像が消えた
画像パスにスペースや日本語が含まれている

原因8: OGPタグが重複している

症状: 意図しない内容が表示される（古いプラグインの出力が優先される等）。

<!-- ❌ 重複: SEOプラグインとテーマの両方が出力 -->
<meta property="og:title" content="プラグインが出力したタイトル">
<meta property="og:title" content="テーマが出力したタイトル">

対処法:

ブラウザのDevToolsでog:を検索し、重複がないか確認
WordPressの場合、SEOプラグインとテーマのOGP出力が競合していないか確認
wp_headフックの優先度を調整するか、一方を無効化

原因9: リダイレクトが挟まっている

症状: Facebook Debuggerで「リダイレクトが多すぎます」エラー。

# リダイレクトチェーン確認
curl -sIL https://example.com/page | grep -E "^(HTTP|Location)"

対処法:

og:urlにはリダイレクト後の最終URLを指定する
HTTPからHTTPSへのリダイレクトは問題ないが、3回以上のリダイレクトチェーンは避ける
www有無の統一（301リダイレクト設定）

原因10: サーバーのレスポンスが遅い

症状: Facebook Debuggerで「スクレイピングできませんでした」エラー。

各プラットフォームのクローラーにはタイムアウトがあり、レスポンスが遅いとタイムアウトする場合があります。一般的に数秒以内にレスポンスを返す必要があります。

対処法:

サーバーのレスポンスタイムを改善（CDN導入、キャッシュ設定）
OGP画像を軽量化（300KB以下推奨）
動的生成ページの場合、OGPタグ部分だけでもキャッシュする

原因11: Content-Typeヘッダーが不正

症状: 画像URLにアクセスできるのに表示されない。

# Content-Type確認
curl -I https://example.com/images/ogp.png | grep content-type
# content-type: application/octet-stream → ❌
# content-type: image/png → ✅

対処法: Webサーバーの設定で画像ファイルに正しいMIMEタイプを設定する。

トラブルシューティング・フローチャート

OGPが表示されない時は、以下の順序で原因を切り分けてください。

OGPが表示されない
│
├─ タイトル・説明文も表示されない？
│   ├─ YES → クローラーがページにアクセスできていない
│   │         → robots.txt確認 → Basic認証確認 → サーバーログ確認
│   │
│   └─ NO（テキストは出るが画像だけ出ない）
│       ├─ og:imageのURLをブラウザで直接開ける？
│       │   ├─ NO → 画像が404 or パスが間違い → URL修正
│       │   └─ YES → 次へ
│       │
│       ├─ 画像URLはhttps://で始まる絶対URL？
│       │   ├─ NO → 絶対URLに修正
│       │   └─ YES → 次へ
│       │
│       ├─ 画像サイズは600×315px以上？
│       │   ├─ NO → 1200×630pxで再作成
│       │   └─ YES → 次へ
│       │
│       └─ キャッシュクリアした？
│           ├─ NO → Facebook Debuggerで再スクレイピング
│           └─ YES → Content-Type確認 → サーバーレスポンス速度確認
│
└─ 古い情報が表示される？
    └─ キャッシュの問題 → 各プラットフォームのデバッグツールで強制更新

トラブルシューティングチェックリスト

#	確認項目	確認方法
1	og:title + og:description が両方あるか	ソースコードを確認
2	og:imageが絶対URLか	`https://`で始まっているか
3	画像が1200×630px以上か	画像ファイルのプロパティ確認
4	画像がHTTPSで配信されているか	URLをブラウザで直接開く
5	画像が5MB以下か	ファイルサイズ確認
6	タグが`<head>`内にあるか	ソースコードを確認
7	クローラーがアクセスできるか	Facebook Debuggerでテスト
8	キャッシュをクリアしたか	各プラットフォームのツールで再取得

OGP確認ツール

OGPタグを設定したら、必ず以下のツールで表示を確認してください。

Facebook Sharing Debugger

URL: https://developers.facebook.com/tools/debug/

Facebookでのシェア表示をプレビューできます。エラーや警告も表示されるため、最初に確認すべきツールです。「もう一度スクレイピング」でキャッシュを強制更新できます。

X Card Validator

Xの公式Card Validator（cards-dev.twitter.com/validator）は提供状況が変動しています。Xでのカード表示を確認するには以下の方法を推奨します:

実際にポストしてプレビューを確認する
curlでOGPタグの出力を確認する
OpenGraph.xyz等のサードパーティツールを使用する
X Developer Docsでカード仕様を確認する

LINE OGP Checker

URL: https://poker.line.naver.jp/

LINEでURLを送信した際の表示をプレビューできます。日本市場ではLINEシェアが多いため、必ず確認してください。

その他の確認ツール

ツール	用途
OpenGraph.xyz	複数プラットフォームの表示を一括プレビュー
metatags.io	Google・Facebook・X・LinkedIn・Slackの表示を同時確認
Chrome DevTools	ソースコードでOGPタグの出力を直接確認

curlでの確認方法

# OGPタグの出力を確認
curl -s https://example.com | grep -i "og:" | head -20

# クローラーとしてアクセス（User-Agent偽装）
curl -s -A "facebookexternalhit/1.1" https://example.com | grep -i "og:"

OGP設定のベストプラクティス

OGPタグを正しく設定するだけでなく、運用面でも押さえておくべきポイントがあります。

Do's & Don'ts

✅ やるべきこと	❌ やってはいけないこと
全ページにog:title・og:image・og:urlを設定	OGPタグを一切設定しない
og:imageは1200×630pxの専用画像を用意	本文中の小さい画像をそのまま指定
絶対URL（https://）で指定	相対パス（/images/...）で指定
ページごとに固有のタイトル・画像を設定	全ページ同じOGP画像を使い回す
og:image:widthとog:image:heightを明示	サイズ情報を省略する
公開前にFacebook Debuggerで確認	確認せずに公開・シェア
twitter:cardを必ず設定	OGPだけ設定してTwitter Cardを省略
og:descriptionに具体的な価値を記述	「〜について」だけの曖昧な説明
画像内テキストを中央80%に配置	端ギリギリにテキストを配置
定期的にOGP表示を確認（リニューアル後等）	一度設定したら放置

運用上の注意点

1. CMSやフレームワークのアップデート時にOGPが消えることがある

テーマ更新やプラグイン更新後は、必ずOGPタグの出力を確認してください。特にWordPressのテーマ変更時は要注意です。

2. ステージング環境のOGPがインデックスされないようにする

<!-- ステージング環境では noindex + OGP無効化 -->
<meta name="robots" content="noindex, nofollow">
<!-- og:urlは本番URLを指定しない -->

3. A/Bテストの活用

OGP画像やタイトルを変えてシェアし、クリック率を比較することで最適な表現を見つけられます。Facebook広告マネージャーのA/Bテスト機能も活用可能です。

4. OGPタグの出力順序

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- OGPタグはできるだけ<head>の上部に配置 -->
  <meta property="og:title" content="...">
  <meta property="og:description" content="...">
  <meta property="og:image" content="...">
  <!-- ... 他のmetaタグ、CSS、JS ... -->
</head>

一部のクローラーはHTMLの先頭数KBしか読まないため、OGPタグは<head>内のできるだけ上部に配置します。

動的OGP画像の生成

ブログ記事ごとに手動でOGP画像を作成するのは手間がかかります。動的生成を導入すれば、タイトルやカテゴリに応じた画像を自動で作成できます。

Next.js OG Image Generation（推奨）

Next.js 13以降では、ImageResponse APIを使ってOGP画像をエッジで動的生成できます。以下は実装例（概念）です。

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og'

export const runtime = 'edge'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image({ params }: { params: { slug: string } }) {
  // 実際のデータ取得関数に置き換えてください
  const post = await getPost(params.slug)

  return new ImageResponse(
    (
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: '100%',
        backgroundColor: '#1a1a2e',
        color: '#ffffff',
        padding: '60px',
      }}>
        <h1 style={{ fontSize: '48px', textAlign: 'center', lineHeight: 1.4 }}>
          {post.title}
        </h1>
        <p style={{ fontSize: '24px', color: '#a0a0a0', marginTop: '20px' }}>
          example.com
        </p>
      </div>
    ),
    { ...size }
  )
}

メリット: ビルド不要、エッジで生成されるため高速。フォントやレイアウトをJSXで自由にカスタマイズ可能。

Cloudinary URL-based Transformation

Cloudinaryの画像変換URLを使えば、テキストオーバーレイ付きのOGP画像をURL指定だけで生成できます。

<!-- Cloudinaryで動的テキスト付きOGP画像 -->
<meta property="og:image" content="https://res.cloudinary.com/your-cloud/image/upload/w_1200,h_630,c_fill/l_text:Noto%20Sans%20JP_48_bold:OGPタグの設定方法,co_white,g_center/og-template.png">

メリット: サーバーサイドのコード変更不要。テンプレート画像を用意してURLパラメータでテキストを変えるだけ。

その他の動的生成手法

手法	特徴	適したケース
Next.js ImageResponse	エッジ生成、JSXでレイアウト	Next.jsプロジェクト
Cloudinary	URL変換、コード不要	既存サイトへの後付け
Puppeteer/Playwright	HTMLをスクリーンショット	複雑なデザインのOGP
Canvas API（Node.js）	node-canvasで描画	カスタムフォント・図形
Vercel OG（@vercel/og）	Vercel特化、高速	Vercelデプロイ環境

動的生成の注意点:

生成に時間がかかる場合はCDNキャッシュを設定する（Cache-Control: max-age=86400等）
日本語フォントを使う場合はフォントファイルのサイズに注意（Noto Sans JPは数MB）
Facebook Debuggerで初回アクセス時にタイムアウトしないか確認

AI検索とOGPの関係

AI検索エンジンがページ情報を取得する際の参照候補

ChatGPT検索（OAI-SearchBot）やPerplexityBotがWebページをクロールする際、ページの概要を把握するために以下の情報を参照する可能性があります:

<title>タグ
<meta name="description">
og:titleとog:description（補助的に参照される可能性）
構造化データ（JSON-LD）
本文の冒頭部分

og:descriptionは、meta descriptionが未設定の場合にフォールバックとして参照される可能性がありますが、AI検索対策として最も効果的なのは構造化データ（JSON-LD）と本文コンテンツの品質です。

OGP設定がAI検索に与える影響の位置づけ

og:descriptionに具体的な情報を含める — SNS最適化が主目的だが、副次的にAIの参照にも役立つ可能性がある
og:titleとページ内容の一致 — これはSEO全般のベストプラクティスでもある
og:imageのalt属性 — og:image:altを設定することでアクセシビリティも向上する

<!-- SNS最適化を主目的としたog:description -->
<meta property="og:description" content="OGP画像の推奨サイズは1200×630px。og:title・og:description・og:imageの3つを正しく設定すれば、Facebook・X・LINEの全てで適切に表示される。">

AI検索対策を本格的に行う場合は、OGPタグよりも構造化データ（JSON-LD）の実装を優先してください。OGPタグと構造化データを組み合わせることで、SNSとAI検索の両方に対応できます。

よくある質問

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

同じ内容でも問題ありません。ただし、meta descriptionは検索結果向け（120文字程度）、og:descriptionはSNSシェア向け（80〜120文字）と用途が異なるため、それぞれに最適化するのが理想です。SNS向けにはより簡潔で行動を促す表現が効果的です。

og:imageを設定していないとどうなりますか？

プラットフォームがページ内の画像を自動取得しようとしますが、意図しない画像（広告バナーやアイコン等）が選ばれることがあります。また、画像なしのリンクはクリック率が大幅に低下します。必ず明示的に設定してください。

全ページに同じOGP画像を使ってもいいですか？

技術的には問題ありませんが、推奨しません。全ページ同じ画像だと、SNSのタイムラインで複数記事がシェアされた際に区別がつかず、クリック率が下がります。少なくともブログ記事には個別の画像を用意することを推奨します。

SPAやCSR（クライアントサイドレンダリング）でOGPは使えますか？

SNSのクローラー（facebookexternalhit、Twitterbot等）はJavaScriptを実行しません。そのため、React/Vue等のSPAでクライアントサイドのみでOGPタグを生成しても認識されません。SSR（サーバーサイドレンダリング）またはSSG（静的サイト生成）でHTMLに直接出力する必要があります。

OGPタグの変更が反映されるまでどのくらいかかりますか？

各プラットフォームのキャッシュ期間は以下の通りです:

プラットフォーム	キャッシュ期間	強制更新方法
Facebook	最大7日	Sharing Debuggerで再スクレイピング
X	最大7日	Card Validatorでプレビュー
LINE	不明（数時間〜数日）	OGP Checkerで確認
Slack/Discord	数分〜数時間	URLを再投稿

まとめ

設定項目	推奨値
og:title	40文字以内、ページの核心を伝える
og:description	80〜120文字、具体的な価値を記述
og:image	1200×630px、HTTPS配信、5MB以下
og:url	canonical URLと一致
og:type	トップは`website`、記事は`article`
twitter:card	`summary_large_image`（大きい画像表示）

表示されない時の確認順序:

og:imageが絶対URL（https://）か
画像サイズが1200×630px以上か
クローラーがアクセスできるか
キャッシュをクリアしたか

OGPタグは一度正しく設定すれば、SNSシェア時のクリック率向上を実現できます。AI検索対策としては構造化データ（JSON-LD）が優先ですが、OGPタグも補助的に参照される可能性があるため、正しく設定しておくことを推奨します。設定後は必ずFacebook Sharing Debuggerで表示を確認してください。

自社サイトのOGPタグ設定状況を含むAI検索対応度を確認したい方は、無料診断ツールで7カテゴリの自動診断ができます。スコアと改善ポイントをMarkdown形式でダウンロード可能です。

この記事の内容、自社サイトではどこまでできていますか？

URLを入力するだけ。会員登録は一切不要です。

📊

AI検索対応度の総合スコア

7カテゴリ100点満点で評価

🔍

優先度つき改善ポイントTop3

具体的な修正手順つき

📄

PDF / Markdownレポート

AIに渡して改善提案をもらうことも可能

無料で診断する →

URLを入力するだけ / 会員登録不要 / 30秒で結果表示

診断結果イメージC

改善ポイント例:

❌構造化データ未実装+8点

❌AIクローラーブロック中+5点

🔶著者情報が不十分+3点

著者情報・更新日の設定方法｜SEOとAI検索に効く信頼性の高め方

著者情報と更新日の正しい書き方・構造化データ設定を解説。ProfilePage・Article構造化データのコード例、WordPress・Next.js別の実装...

meta descriptionの書き方と最適な文字数｜クリック率を上げる実践ルール

meta descriptionの書き方を7つのルールで解説。PC・モバイル別の最適文字数、ページ種別ごとのテンプレート、Googleに書き換えられる原因と対策...

noindexの確認方法と解除手順｜設定場所・SEO影響・反映の仕組み

noindexタグの確認方法・設定場所の特定・解除手順をプラットフォーム別に解説。CDNヘッダーやステージング移行ミスなどの見落としやすい原因と、解除後の反映タ...

OGPタグとは何か

必須OGPタグ一覧と書き方

og:title（ページタイトル）

og:description（ページ説明文）

og:image（シェア画像）

og:url（正規URL）

og:type（コンテンツタイプ）

完全なOGPタグセットの例

Twitter Cardタグの詳細

最小構成のOGPタグ（コピペ用テンプレート）

og:imageの推奨サイズと仕様

推奨サイズ: 1200×630px

ファイル形式と容量

画像最適化のコツ

og:image設定のベストプラクティス

プラットフォーム別の設定方法

静的HTML

WordPress

Shopify

Next.js（App Router）

OGPが表示されない時の原因と対処法

原因1: キャッシュが残っている（最も多い）

原因2: og:imageのURLが相対パス

原因3: 画像サイズが小さすぎる

原因4: 画像がHTTPで配信されている

原因5: クローラーがページにアクセスできない

原因6: OGPタグの記述位置が間違っている

原因7: og:imageの画像ファイルが存在しない（404）

原因8: OGPタグが重複している

原因9: リダイレクトが挟まっている

原因10: サーバーのレスポンスが遅い

原因11: Content-Typeヘッダーが不正

トラブルシューティング・フローチャート

トラブルシューティングチェックリスト

OGP確認ツール

Facebook Sharing Debugger

X Card Validator

LINE OGP Checker

その他の確認ツール

curlでの確認方法

OGP設定のベストプラクティス

Do's & Don'ts

運用上の注意点

動的OGP画像の生成

Next.js OG Image Generation（推奨）

Cloudinary URL-based Transformation

その他の動的生成手法

AI検索とOGPの関係

AI検索エンジンがページ情報を取得する際の参照候補

OGP設定がAI検索に与える影響の位置づけ

よくある質問

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

og:imageを設定していないとどうなりますか？

全ページに同じOGP画像を使ってもいいですか？

SPAやCSR（クライアントサイドレンダリング）でOGPは使えますか？

OGPタグの変更が反映されるまでどのくらいかかりますか？

まとめ

関連記事