OGPとは？ — SNSシェア時の表示を制御するメタタグ
OGPの定義
OGP（Open Graph Protocol）とは、WebページがFacebook・X（旧Twitter）・LINEなどでシェアされた際に、タイトル・説明文・画像をどう表示するかを制御するメタタグの規格です。
2010年にFacebook（現Meta）が策定しました。HTMLの<head>セクション内にメタタグとして記述します。
<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/" />
OGPがない場合の問題
OGPを設定しないと、SNSでURLがシェアされた際に以下の問題が発生します。
|
問題 |
影響 |
発生頻度 |
|
画像が表示されない |
リンクが目立たずクリックされにくい |
非常に高い |
|
タイトルが不適切 |
SNS向けに最適化されていないタイトルが表示 |
高い |
|
説明文が切れる |
メタディスクリプションが中途半端に表示 |
高い |
|
レイアウトが崩れる |
サムネイルサイズが合わず見栄えが悪い |
中程度 |
つまり、OGPを設定しないことはSNSからの流入機会を大きく損失していることと同義です。
OGPの仕組み
OGPの動作原理は以下の通りです。
1. ユーザーがSNSにURLを投稿します
2. SNSのクローラーが該当URLにアクセスし、HTMLを取得します
3. <head>内のOGPメタタグを読み取ります
4. 読み取った情報をもとにカード型プレビューを生成・表示します
OGPの主要タグ一覧 — og:title・og:description・og:imageの書き方
OGPタグの一覧
|
タグ |
必須/任意 |
説明 |
記述例 |
|
og:title |
必須 |
ページタイトル |
<meta property="og:title" content="OGPとは？完全ガイド" /> |
|
og:description |
推奨 |
ページの説明文 |
<meta property="og:description" content="OGPの設定方法を解説" /> |
|
og:image |
必須 |
シェア時に表示される画像URL |
<meta property="og:image" content="https://example.com/ogp.jpg" /> |
|
og:url |
必須 |
ページの正規URL |
<meta property="og:url" content="https://example.com/page/" /> |
|
og:type |
必須 |
ページの種類 |
<meta property="og:type" content="article" /> |
|
og:site_name |
推奨 |
サイト名 |
<meta property="og:site_name" content="scale-basics" /> |
|
og:locale |
任意 |
言語・地域 |
<meta property="og:locale" content="ja_JP" /> |
og:titleの書き方
og:titleはSNSシェア時に最も目立つ要素です。
・文字数は30〜40文字程度 — 長すぎると各SNSで切り詰められます
・SEOのtitleタグとは別に最適化可能 — SNS向けにキャッチーな表現にできます
・ブランド名は省略してもOK — 「| サイト名」を入れる必要はありません
og:descriptionの書き方
・文字数は80〜120文字程度 — SNSによって表示文字数が異なります
・ページの内容と価値を端的に伝える — 「クリックしたい」と思わせる情報を含めます
・HTMLのmeta descriptionとは別に設定可能 — SNS向けの文言にカスタマイズします
og:imageの書き方
og:imageはシェア時のビジュアル面で最も重要な要素です。
<meta property="og:image" content="https://example.com/images/ogp-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="OGP設定の完全ガイド" />
|
項目 |
推奨値 |
|
画像サイズ |
1200 x 630 px |
|
アスペクト比 |
1.91:1 |
|
ファイル形式 |
JPEG or PNG |
|
ファイルサイズ |
1MB以下推奨 |
|
URL |
絶対URL（https://〜） |
og:typeの種類
|
タイプ |
用途 |
使用場面 |
|
website |
Webサイトのトップページ |
ホームページ |
|
article |
ブログ記事・ニュース記事 |
記事ページ |
|
product |
商品ページ |
ECサイト |
|
profile |
プロフィールページ |
個人・会社紹介 |
|
video.other |
動画ページ |
動画コンテンツ |
完全なOGPの記述例
<!DOCTYPE html>
<html lang="ja" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<title>OGPとは？SNSシェア時の表示を最適化する設定方法【2026年最新】</title>
<!– OGP基本タグ –>
<meta property="og:title" content="OGPとは？SNSシェア時の表示を最適化する完全ガイド" />
<meta property="og:description" content="OGP（Open Graph Protocol）の設定方法を徹底解説。主要タグの書き方、SNS別の最適画像サイズ、デバッグツールでの確認方法まで網羅。" />
<meta property="og:image" content="https://example.com/images/ogp-guide.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/ogp-guide/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="scale-basics" />
<meta property="og:locale" content="ja_JP" />
<!– X（Twitter）用タグ –>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />
</head>
SNS別OGP設定の最適化 — X（Twitter）・Facebook・LINE
SNS別の仕様比較
|
項目 |
X（旧Twitter） |
|
LINE |
|
カード表示形式 |
Summary / Summary Large Image |
リンクプレビュー |
リッチリンク |
|
推奨画像サイズ |
1200 x 628 px |
1200 x 630 px |
1200 x 630 px |
|
タイトル文字数上限 |
約70文字 |
約65文字 |
約100文字 |
|
説明文字数上限 |
約200文字 |
約155文字 |
表示なし |
|
独自タグ |
twitter:card等が必要 |
OGP標準タグのみ |
OGP標準タグのみ |
|
キャッシュ更新 |
Card Validatorで手動更新 |
Sharing Debuggerで手動更新 |
Page Pokerで手動更新 |
X（旧Twitter）向けの設定
Xでは、OGP標準タグに加えてTwitter独自のメタタグを設定します。
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@your_account" />
<meta name="twitter:creator" content="@author_account" />
|
twitter:cardの値 |
説明 |
推奨用途 |
|
summary |
小さなサムネイル + テキスト |
一般的な記事 |
|
summary_large_image |
大きな画像 + テキスト |
ブログ記事・ニュース |
|
player |
動画の埋め込みプレイヤー |
動画コンテンツ |
なぜなら、summary_large_imageの方がタイムラインでの視認性が高く、クリック率が向上するからです。
Facebook向けの設定
FacebookはOGPの策定元のため、標準タグをそのまま認識します。
<meta property="fb:app_id" content="あなたのApp ID" />
<meta property="article:published_time" content="2026-03-26T00:00:00+09:00" />
<meta property="article:author" content="https://www.facebook.com/author" />
LINE向けの設定
LINEはOGP標準タグを読み取りますが、注意点があります。
・og:descriptionは表示されない — タイトルと画像のみ表示されます
・画像が正方形にトリミングされる場合がある — 重要情報は画像中央に配置します
・キャッシュが強い — 変更反映に時間がかかることがあります
OGP画像の最適サイズとデザインのポイント
SNS別の推奨画像サイズ
|
SNS |
推奨サイズ |
アスペクト比 |
最小サイズ |
|
X（summary_large_image） |
1200 x 628 px |
1.91:1 |
300 x 157 px |
|
X（summary） |
144 x 144 px |
1:1 |
144 x 144 px |
|
|
1200 x 630 px |
1.91:1 |
600 x 315 px |
|
LINE |
1200 x 630 px |
1.91:1 |
200 x 200 px |
|
|
1200 x 627 px |
1.91:1 |
200 x 200 px |
|
|
1000 x 1500 px |
2:3 |
600 x 900 px |
全SNS共通の最適サイズ
すべてのSNSで最適に表示させるには、1200 x 630 px（アスペクト比1.91:1）が最も効率的です。
OGP画像のデザインポイント
|
ポイント |
説明 |
理由 |
|
テキストを入れる |
画像内に記事タイトルやキーワードを配置 |
テキストなし画像よりCTRが高い |
|
中央に重要情報を配置 |
トリミングされても問題ないように |
SNSによりトリミング位置が異なる |
|
ブランドロゴを入れる |
画像端にサイトロゴを配置 |
ブランド認知の向上 |
|
コントラストを確保 |
背景と文字のコントラストを十分に |
タイムラインで目立つ |
|
テンプレート化 |
統一フォーマットで効率的に制作 |
ブランド一貫性と制作効率 |
OGP画像のテンプレート設計
効率的にOGP画像を制作するため、テンプレートを用意しましょう。
┌─────────────────────────────────────┐
│ [ロゴ] [カテゴリ名] │
│ │
│ │
│ 記事タイトル（大きく配置） │
│ サブタイトルや補足情報 │
│ │
│ │
│ [サイトURL] [アイコン] │
└─────────────────────────────────────┘
サイズ: 1200 x 630 px
OGPの設定方法 — WordPress・HTML別の実装手順
静的HTMLサイトでの設定
各ページの<head>に直接OGPメタタグを記述します。
設定手順：
1. <html>タグにprefix="og: https://ogp.me/ns#"を追加します
2. <head>内にOGPメタタグを記述します
3. Twitter用メタタグも追加します
4. デバッグツールで確認します
WordPressでの設定方法
|
方法 |
難易度 |
推奨度 |
特徴 |
|
Yoast SEOプラグイン |
★☆☆☆☆ |
★★★★★ |
OGP画像・テキストを個別設定可能 |
|
All in One SEOプラグイン |
★☆☆☆☆ |
★★★★★ |
ソーシャルメディア設定が充実 |
|
Rank Mathプラグイン |
★☆☆☆☆ |
★★★★☆ |
Facebook・Twitter個別にOGP設定可能 |
|
OG — Better Open Graphプラグイン |
★★☆☆☆ |
★★★☆☆ |
OGP設定に特化 |
|
functions.phpに直接記述 |
★★★★☆ |
★★☆☆☆ |
プラグイン不要だが保守コスト高 |
Next.js / Reactでの設定
SPAやSSGフレームワークでは動的にOGPタグを生成します。
// Next.js (App Router) の例
export const metadata = {
openGraph: {
title: ‘ページタイトル’,
description: ‘ページの説明文’,
url: ‘https://example.com/page/’,
siteName: ‘scale-basics’,
images: [
{
url: ‘https://example.com/images/ogp.jpg’,
width: 1200,
height: 630,
alt: ‘OGP画像の代替テキスト’,
},
],
locale: ‘ja_JP’,
type: ‘article’,
},
twitter: {
card: ‘summary_large_image’,
site: ‘@example’,
},
};
Web制作におけるメタタグの基礎をより体系的に学びたい方は → 第4章 テクニカルSEO入門
OGPの確認・デバッグツール — 設定ミスを防ぐ方法
主要デバッグツール一覧
|
ツール名 |
対応SNS |
URL |
費用 |
|
Facebook Sharing Debugger |
|
https://developers.facebook.com/tools/debug/ |
無料 |
|
X Card Validator |
X（旧Twitter） |
https://cards-dev.twitter.com/validator |
無料 |
|
LINE Page Poker |
LINE |
https://poker.line.naver.jp/ |
無料 |
|
LinkedIn Post Inspector |
|
https://www.linkedin.com/post-inspector/ |
無料 |
|
OGP確認ツール（ラッコツールズ） |
全般 |
https://rakko.tools/tools/9/ |
無料 |
Facebook Sharing Debuggerの使い方
1. https://developers.facebook.com/tools/debug/ にアクセスします
2. 確認したいURLを入力します
3. 「デバッグ」ボタンをクリックします
4. 表示されたOGP情報を確認します
5. 問題があれば「もう一度スクレイピング」でキャッシュを更新します
キャッシュの問題と対処法
SNSのOGPキャッシュは一度取得されると一定期間保持されます。
|
SNS |
キャッシュ持続期間 |
手動更新方法 |
|
|
約24時間 |
Sharing Debuggerで「もう一度スクレイピング」 |
|
X |
約7日間 |
Card Validatorで再取得 |
|
LINE |
数日〜数週間（不明確） |
Page Pokerで再取得 |
|
|
約7日間 |
Post Inspectorで再取得 |
よくあるOGP設定ミスとチェックリスト
|
チェック項目 |
よくあるミス |
正しい設定 |
|
og:imageのURL |
相対パスで記述 |
絶対URL（https://〜）で記述 |
|
og:imageのサイズ |
小さすぎる画像を指定 |
1200 x 630 px以上 |
|
og:urlの指定 |
全ページにトップURLを設定 |
各ページ固有のURLを設定 |
|
twitter:cardの指定 |
未設定 |
summary_large_imageを設定 |
|
HTMLのprefix属性 |
未設定 |
prefix="og: https://ogp.me/ns#" |
|
画像のアクセス |
認証が必要な画像を指定 |
パブリックにアクセス可能な画像 |
OGPとSEOの関係 — 間接的な検索評価への影響
OGPは直接的なランキング要因ではない
まず明確にすべき点として、OGPはGoogleの検索ランキングの直接的な評価要因ではありません。Googleはog:titleやog:descriptionをランキング判断に使用していません。
OGPがSEOに間接的に影響するメカニズム
しかし、OGPの最適化はSEOに間接的な好影響をもたらします。
|
間接的効果 |
メカニズム |
SEOへの影響度 |
|
SNSでのシェア増加 |
魅力的なOGPカードがクリック・シェアを促進 |
★★★★☆ |
|
被リンクの獲得 |
SNSで話題になったコンテンツがブログ等で引用される |
★★★★★ |
|
ブランド認知の向上 |
OGP画像にロゴを含めることで認知が広がる |
★★★☆☆ |
|
サイトへの流入増加 |
SNS流入が増え間接的にSEO評価が向上 |
★★★☆☆ |
|
クリック率の向上 |
SNS露出が検索結果CTRにも好影響 |
★★★☆☆ |
つまり、OGP最適化は「SNS→被リンク→SEO評価向上」という間接ルートでSEOに貢献します。
Googleがog:imageを使用するケース
GoogleはランキングにはOGPを使用しません。しかし、Google Discoverのサムネイル画像としてog:imageを使用する場合があります。つまり、高品質なOGP画像の設定はDiscover流入にも重要です。
【実践事例】scale-basics.comでのOGP最適化施策
施策前の課題と対応
scale-basics.comでは、全記事のOGP設定を見直しました。
施策前の課題：
・OGP画像が未設定のページが多数存在していました
・設定済みページでも画像サイズが小さくSNSで見栄えが悪い状態でした
・twitter:cardが未設定でXでのサムネイルが小さく表示されていました
実施した施策：
|
施策 |
内容 |
対応工数 |
|
OGP画像テンプレート作成 |
ブランドカラー・ロゴ・記事タイトルを含むテンプレート設計 |
約1日 |
|
全記事のOGP画像制作 |
1200 x 630 pxの専用画像を全50記事分制作 |
約1週間 |
|
twitter:card設定 |
全ページにsummary_large_imageを設定 |
約半日 |
|
og:title・og:description最適化 |
SEO用titleとは別にSNS向け表現に調整 |
約2日 |
成果（3ヶ月後）：
|
指標 |
施策前 |
施策後 |
変化率 |
|
SNSからの月間流入数 |
320 |
1,450 |
+353% |
|
Xでのシェア数（月間合計） |
45 |
180 |
+300% |
|
SNS経由のCTR |
1.2% |
3.8% |
+217% |
|
Google Discoverからの流入 |
0 |
280/月 |
新規獲得 |
成功のポイント
1. 統一OGP画像テンプレートを使用 — ブランド一貫性が保たれ、タイムラインで自社コンテンツが認識されやすくなりました
2. 記事タイトルを画像内に配置 — テキストなし画像に比べてCTRが大幅に向上しました
3. twitter:cardをsummary_large_imageに統一 — 大きなサムネイルでXでの視認性が向上しました
4. デバッグツールで全ページを検証 — 設定ミスを事前に洗い出し修正しました
OGPに関するよくある質問
Q. OGPとメタディスクリプションの違いは？
A. メタディスクリプションは検索エンジン向けのページ説明文です。og:descriptionはSNSシェア時の説明文です。両者は独立して設定でき、それぞれのチャネルに最適化した文言にすることを推奨します。
Q. OGP画像は各ページ固有にすべき？
A. 理想的には固有の画像を用意すべきです。なぜなら、同じ画像がタイムラインに何度も表示されると「同じコンテンツ」と認識されてクリック率が低下するからです。
Q. OGP画像にテキストを入れるべき？
A. はい、推奨します。画像内に記事タイトルやキーメッセージを入れるとクリック率が向上します。ただし、テキスト量は画像面積の20%以下に抑えるのがベストです。
Q. 設定変更してもSNS表示が変わらないのはなぜ？
A. SNSのキャッシュが原因です。Facebook Sharing DebuggerやX Card Validatorで手動キャッシュ更新が必要です。
Q. SPAやSSRのサイトでOGPは正しく認識される？
A. CSRのみのSPAでは認識されない場合があります。なぜなら、SNSクローラーの多くはJavaScriptを実行しないからです。つまり、Next.jsのSSR/SSGなどサーバーサイドでOGPタグを出力する仕組みが必要です。
Q. 動画コンテンツのOGP設定は？
A. 動画の場合、以下のタグを追加します。
|
タグ |
説明 |
|
og:video |
動画ファイルのURL |
|
og:video:type |
動画の形式（例：video/mp4） |
|
og:video:width |
動画の幅 |
|
og:video:height |
動画の高さ |
|
og:type |
video.otherを指定 |
Q. OGP設定はSEOに直接影響しますか？
A. OGPは直接的なランキング要因ではありません。しかし、OGPを適切に設定するとSNSでのシェア時にリッチな表示になり、クリック率が向上します。結果としてSNSからのトラフィック増加→サイトの認知度向上→被リンク獲得という間接的なSEO効果が期待できます。——特にバイラルしやすいコンテンツでは、OGP設定の有無がシェア数に大きく影響します。
Q. 複数のSNSで異なるOGP表示にすることは可能ですか？
A. はい、可能です。たとえばX（旧Twitter）向けにはtwitter:titleやtwitter:descriptionで独自の値を指定できます。Facebook向けにはog:titleやog:descriptionが使われます。SNSごとに最適な文言や訴求を使い分けたい場合は、それぞれのタグを個別に設定しましょう。——ただし管理コストが増えるため、まずはog:〇〇タグの統一設定から始めるのが現実的です。
まとめ — OGP設定はSNSからの流入を最大化する必須施策
OGPは、SNSでのシェア表示を最適化し、クリック率と流入数を向上させる重要なメタタグ設定です。
・OGPはSNSシェア時の表示内容を制御するメタタグです
・主要タグはog:title・og:description・og:image・og:url・og:typeの5つです
・X向けにはtwitter:cardタグの追加設定が必要です
・OGP画像の最適サイズは1200 x 630 px（アスペクト比1.91:1）です
・環境に応じた実装方法（WordPress・HTML・Next.js）を選択します
・デバッグツールで必ず動作確認を行いましょう
・OGPは直接的なSEO要因ではありませんが、SNSシェア→被リンク→SEO向上の間接効果があります
まずは自社サイトの主要ページのOGP設定状況を確認し、未設定や不適切な設定があれば早急に対応しましょう。
参考リンク：
・Open Graph Protocol 公式サイト
・X (Twitter) Cards ドキュメント
・Facebook シェアデバッガー
