OGPとは? — SNSシェア時の表示を制御するメタタグ
OGPの定義と成り立ち
OGP(Open Graph Protocol)とは、WebページがFacebook・X(旧Twitter)・LINEなどでシェアされた際に、タイトル・説明文・画像をどう表示するかを制御するメタタグの規格です。2010年にFacebook(現Meta)が策定したもので、仕様はHTMLの<head>要素内にメタタグとして記述します。仕様の一次情報はOpen Graph Protocol公式サイトで確認できます。
最小構成は次の4タグです。og:title・og:description・og:image・og:urlを設定するだけでも、多くのSNSでリッチなカード表示が生成されます。
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="https://example.com/image.png">
<meta property="og:url" content="https://example.com/page/">
OGPの仕組み — クローラーがカードを生成するまで
OGPが表示に反映されるまでの流れは次の4ステップです。ユーザーがSNSにURLを投稿すると、SNS側のクローラーがそのURLへアクセスし、<head>内のOGPタグを読み取って、カード型プレビューを生成・表示します。
- ユーザーがSNSにURLを投稿する
- SNSのクローラーが該当URLにアクセスしてHTMLを取得する
- <head>内のOGPメタタグを読み取る
- 読み取った情報をもとにカード型プレビューを生成・表示する
ここで重要なのは、多くのSNSクローラーはJavaScriptを実行しない前提で読み取る点です。クライアントサイドだけでOGPタグを描画する構成では認識されないことがあり、サーバー側でタグを出力する必要があります(詳細は後述の実装方法で解説します)。
OGPを設定しないと起きる問題
OGPが未設定だと、SNSでURLがシェアされた際に次のような不利が生じます。いずれも「せっかくシェアされたのにクリックされない」という機会損失に直結します。
| 問題 | ユーザー側で起きること | 影響 |
|---|---|---|
| 画像が表示されない | リンクがテキストだけで目立たない | クリック率の低下 |
| タイトルが不適切 | SNS向けに最適化されていない文言が出る | 訴求力の低下 |
| 説明文が意図と違う | 本文から自動抽出された中途半端な文が表示 | 内容が正しく伝わらない |
| レイアウトが崩れる | サムネイルのサイズが合わず見栄えが悪い | ブランド印象の低下 |
つまりOGPを設定しないことは、SNSからの流入機会を自ら手放すことと同義です。OGPはWeb制作で押さえるべきメタタグの一つであり、SEOに効くHTMLタグ全体の中での位置づけはSEO対策に必須のHTMLタグ一覧で優先度別に整理しています。
OGPの主要タグ一覧 — og:title・og:description・og:imageの書き方
主要タグの一覧
まず、押さえておくべき主要タグを一覧で示します。og:title・og:image・og:url・og:typeは実質必須、og:description・og:site_nameは推奨です。
| タグ | 必須/推奨 | 役割 | 記述例 |
|---|---|---|---|
| og:title | 必須 | カードに表示するタイトル | content=”OGPとは?完全ガイド” |
| og:description | 推奨 | カードに表示する説明文 | content=”OGPの設定方法を解説” |
| og:image | 必須 | シェア時に表示する画像URL | content=”https://example.com/ogp.png” |
| og:url | 必須 | ページの正規URL | content=”https://example.com/page/” |
| og:type | 必須 | ページの種類 | content=”article” |
| og:site_name | 推奨 | サイト名 | content=”サイト名” |
| og:locale | 任意 | 言語・地域 | content=”ja_JP” |
og:titleの書き方
og:titleはカードで最も目立つ要素です。SEO用のtitleタグとは別に、SNS向けにキャッチーな表現へ最適化できます。ポイントは3つです。文字数は各SNSで切り詰められにくい30〜40文字程度に収めること、伝えたいキーワードを前半に置くこと、そして「|サイト名」のようなブランド名の付記は省いてもよいことです。カードにはサイト名が別途表示されるため、タイトルは内容の訴求に集中させます。
og:descriptionの書き方
og:descriptionは、HTMLのmeta descriptionとは別にSNS向けの文言へ調整できます。文字数の目安は80〜120文字程度で、SNSによって表示される長さが異なります。ページの価値を端的に伝え、「クリックしたい」と思わせる情報を前半に含めるのが基本です。
og:imageの書き方
og:imageはシェア時のビジュアルを決める、最も効果の大きいタグです。画像URLに加えて幅・高さ・代替テキストを添えると、クローラーがカードを組み立てやすくなります。
<meta property="og:image" content="https://example.com/images/ogp-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="OGP設定の完全ガイド">
og:imageで守るべき要件を表にまとめます。画像は絶対URL(https://〜)で指定し、認証なしで誰でもアクセスできる場所に置くのが鉄則です。
| 項目 | 推奨値 |
|---|---|
| 画像サイズ | 1200 × 630 px |
| アスペクト比 | 1.91:1 |
| ファイル形式 | JPEG または PNG |
| ファイルサイズ | 1MB以下が目安 |
| URLの指定 | 絶対URL(https://〜)・公開アクセス可 |
og:typeの種類
og:typeはページの種別を伝えるタグです。一般的なページはwebsite、ブログやニュースの記事ページはarticleを指定します。
| 値 | 用途 | 使用場面 |
|---|---|---|
| website | Webサイトの通常ページ | トップページなど |
| article | ブログ記事・ニュース記事 | 記事ページ |
| product | 商品ページ | ECサイト |
| profile | プロフィールページ | 個人・会社紹介 |
| video.other | 動画ページ | 動画コンテンツ |
headに書く完全なOGP記述例
ここまでのタグを実際の<head>にまとめると次のようになります。X向けのtwitter:cardも合わせて記述しておくと、Xでの表示品質が安定します。
<!DOCTYPE html>
<html lang="ja" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<title>OGPとは?設定方法・画像サイズ・確認ツールを完全解説</title>
<!-- OGP基本タグ -->
<meta property="og:title" content="OGPとは?SNSシェア時の表示を最適化する完全ガイド">
<meta property="og:description" content="OGPの設定方法を徹底解説。主要タグ・SNS別の最適画像サイズ・確認ツールでの確認方法まで網羅。">
<meta property="og:image" content="https://example.com/images/ogp-guide.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://example.com/ogp/">
<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:site" content="@your_account">
</head>
og:urlには各ページ固有の正規URLを入れます。ここが全ページ共通のトップURLになっているとシェア先の集計がぶれるため、canonicalタグと考え方をそろえておくと安全です。正規化の詳しい判断基準はcanonicalタグとURL正規化の解説を参照してください。
SNS別のOGP最適化 — X・Facebook・LINE
SNS別の仕様比較
OGPは共通仕様ですが、SNSごとに読み取り方や表示の細部が異なります。主要3プラットフォームの違いを押さえておきましょう。
| 項目 | X(旧Twitter) | LINE | |
|---|---|---|---|
| カード表示形式 | Summary / Summary Large Image | リンクプレビュー | リッチリンク |
| 推奨画像サイズ | 1200 × 628 px | 1200 × 630 px | 1200 × 630 px |
| 独自タグ | twitter:card等が必要 | OGP標準タグでよい | OGP標準タグでよい |
| 説明文の表示 | あり | あり | 表示されない場合がある |
| キャッシュ更新 | 第三者ツール・再投稿で確認 | Sharing Debuggerで再取得 | Page Pokerで再取得 |
X(旧Twitter)向けの設定
Xでは、OGP標準タグに加えてTwitter独自のカードタグを設定します。twitter:cardを指定しないと小さなサムネイル表示になりやすいため、記事コンテンツではsummary_large_imageを指定します。
<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_large_imageが基本です。
| 値 | 表示 | 推奨用途 |
|---|---|---|
| summary | 小さなサムネイル+テキスト | 一般的なページ |
| summary_large_image | 大きな画像+テキスト | ブログ記事・ニュース |
| player | 動画の埋め込みプレイヤー | 動画コンテンツ |
なお、twitter:titleやtwitter:descriptionを省略した場合、Xはog:title・og:descriptionの値を流用します。まずはOGP標準タグをそろえ、Xで別の文言を出したいときだけtwitter:専用タグを追加する運用が現実的です。
Facebook向けの設定
FacebookはOGPの策定元のため、標準タグをそのまま認識します。記事ページでは、必要に応じて公開日時や著者などの補足タグを追加できます。かつて必須とされたfb:app_idは現在は任意で、なくてもプレビューは生成されます。
<meta property="article:published_time" content="2026-03-26T00:00:00+09:00">
<meta property="article:modified_time" content="2026-07-23T00:00:00+09:00">
<meta property="article:author" content="https://www.facebook.com/author">
LINE向けの設定
LINEもOGP標準タグを読み取りますが、表示上の注意点があります。次の3点を踏まえ、画像の重要情報は中央寄せにしておくと崩れにくくなります。
- og:descriptionが表示されないことがある(タイトルと画像が中心)
- 画像が正方形にトリミングされる場合がある(重要情報は中央に配置)
- キャッシュが強く、変更の反映に時間がかかることがある
OGP画像の最適サイズとデザインのポイント
SNS別の推奨画像サイズ
画像サイズはSNSごとに微妙に異なりますが、いずれも横長(アスペクト比1.91:1前後)が基本です。代表的な推奨サイズを一覧にします。
| SNS | 推奨サイズ | アスペクト比 |
|---|---|---|
| X(summary_large_image) | 1200 × 628 px | 1.91:1 |
| X(summary) | 正方形(例: 144 × 144 px以上) | 1:1 |
| 1200 × 630 px | 1.91:1 | |
| LINE | 1200 × 630 px | 1.91:1 |
| 1200 × 627 px | 1.91:1 | |
| 1000 × 1500 px(縦長) | 2:3 |
迷ったら1200×630pxに統一する
Pinterestのような縦長前提のプラットフォームを除けば、すべてのSNSで無難に表示させるには1200 × 630 px(アスペクト比1.91:1)に統一するのが最も効率的です。これはog:imageの推奨値としても広く使われる標準サイズで、Facebook・X・LINE・LinkedInのいずれでも大きく崩れません。1枚を使い回せるため、制作コストも抑えられます。
OGP画像のデザインポイント
サイズを満たしたうえで、タイムラインで埋もれないための設計上のコツがあります。
| ポイント | 具体策 | 理由 |
|---|---|---|
| タイトルを画像に入れる | 記事タイトルや要点を画像内に配置 | テキストなし画像より内容が伝わる |
| 重要情報は中央に | 端が切れても意味が通る配置にする | SNSごとにトリミング位置が違う |
| ブランドロゴを入れる | 画像の端にサイトロゴを配置 | 発信元の認知が広がる |
| コントラストを確保 | 背景と文字の明度差を十分に取る | 小さく表示されても読める |
| テンプレート化する | 共通フォーマットで量産する | ブランド一貫性と制作効率 |
OGP画像テンプレートの構成
毎回ゼロから作らず、配置の型を決めておくと効率的です。1200 × 630 pxのキャンバスを次のゾーンに分けて設計すると、量産しても一貫性を保てます。
- 上部:サイトロゴ/カテゴリ名(発信元をひと目で伝える)
- 中央:記事タイトルを大きく(トリミングされても残る主役エリア)
- 下部:サイトURLやアイコンなどの補足情報
- 全体:文字は中央寄りのセーフエリアに収め、端はロゴや装飾に留める
OGPの実装方法 — WordPress・HTML・Next.js別の手順
静的HTMLサイトでの設定
静的サイトでは、各ページの<head>に直接OGPメタタグを記述します。手順は次のとおりです。
- <html>タグに prefix=”og: https://ogp.me/ns#” を追加する
- <head>内にOGP基本タグを記述する
- X向けにtwitter:card等のタグを追加する
- 確認ツールで表示をチェックする
WordPressでの設定方法
WordPressでは、SEO系プラグインを使えばコードを書かずにOGPを設定できます。多くのテーマ・プラグインが投稿ごとにOGP画像やSNS向けの文言を個別指定できます。
| 方法 | 難易度 | 特徴 |
|---|---|---|
| All in One SEO | 易しい | ソーシャル設定が充実。投稿別にOGPを指定可能 |
| Yoast SEO | 易しい | OGP画像・テキストを個別設定できる定番 |
| Rank Math | 易しい | Facebook・X個別にOGPを設定可能 |
| OGP特化プラグイン | 普通 | OGP設定に機能を絞ったシンプル系 |
| functions.phpに直接記述 | 難しい | プラグイン不要だが保守コストが高い |
Next.js / Reactでの設定
Next.jsなどのフレームワークでは、サーバー側でメタタグを出力してクローラーに確実に読ませます。App RouterではmetadataオブジェクトでOGPを宣言できます。
// Next.js (App Router) の例
export const metadata = {
openGraph: {
title: 'ページタイトル',
description: 'ページの説明文',
url: 'https://example.com/page/',
siteName: 'サイト名',
images: [
{
url: 'https://example.com/images/ogp.png',
width: 1200,
height: 630,
alt: 'OGP画像の代替テキスト',
},
],
locale: 'ja_JP',
type: 'article',
},
twitter: {
card: 'summary_large_image',
site: '@example',
},
};
ポイントは、SNSクローラーの多くがJavaScriptを実行しないため、CSR(クライアント側描画)だけではOGPが読まれない可能性がある点です。Next.jsのSSR/SSGのように、サーバー側でタグを出力する構成にしておきましょう。メタタグを含むHTML実装の基礎を体系的に押さえたい方は、SEOに強いコーディングの実装解説と、コピペで使える雛形をまとめたSEO対策済みHTMLテンプレートも参考になります。
OGPの確認・デバッグツール — 設定ミスを防ぐ
主要な確認ツール一覧
OGPは「書いたつもり」でもタグの誤りやキャッシュで意図どおり出ないことが多いため、公開前後に確認ツールでチェックします。無料で使える代表的なツールを挙げます。
| ツール | 対応 | 費用 |
|---|---|---|
| Facebook Sharing Debugger | 無料 | |
| LINE Page Poker | LINE | 無料 |
| LinkedIn Post Inspector | 無料 | |
| OGP確認ツール(ラッコツールズ等の第三者製) | 全般 | 無料 |
Xについては、かつて広く使われた公式のCard Validator(cards-dev.twitter.com/validator)は現在は提供終了しています。Xでの見え方を確認したいときは、第三者製のOGP確認ツールでタグを検証したうえで、実際に非公開・下書きの投稿でプレビューを見るのが実務的な方法です。
Facebook Sharing Debuggerの使い方
Facebook Sharing Debuggerは、OGPの読み取り結果とエラーを一度に確認でき、キャッシュの再取得もできる定番ツールです。手順はシンプルです。
- Facebook Sharing Debugger(developers.facebook.com/tools/debug/)にアクセスする
- 確認したいURLを入力する
- 「デバッグ」を実行し、読み取られたOGP情報を確認する
- 内容が古い場合は「もう一度スクレイピング」でキャッシュを更新する
キャッシュの問題と対処法
「タグを直したのにSNSの表示が変わらない」というトラブルの大半は、SNS側のキャッシュが原因です。各SNSは一度取得したOGP情報を一定期間保持するため、変更後は手動での再取得が必要になることがあります。
| SNS | 手動更新の方法 |
|---|---|
| Sharing Debuggerで「もう一度スクレイピング」 | |
| X | 時間経過を待つ/第三者ツールで確認し再投稿でプレビュー |
| LINE | Page Pokerで再取得(反映に時間がかかる場合あり) |
| Post Inspectorで再取得 |
よくある設定ミスとチェックリスト
公開前に、次の項目を確認しておくと典型的なミスを防げます。
| チェック項目 | よくあるミス | 正しい設定 |
|---|---|---|
| og:imageのURL | 相対パスで記述 | 絶対URL(https://〜)で記述 |
| og:imageのサイズ | 小さすぎる画像を指定 | 1200 × 630 px以上 |
| og:urlの指定 | 全ページにトップURLを設定 | 各ページ固有の正規URLを設定 |
| twitter:card | 未設定でサムネイルが小さい | summary_large_imageを設定 |
| prefix属性 | 未設定 | prefix=”og: https://ogp.me/ns#” |
| 画像のアクセス権 | 認証が必要な場所に配置 | 公開アクセス可能な場所に配置 |
OGPとSEO・AI検索の関係 — 2026年の計測事情
OGPは直接のランキング要因ではない
前提として、OGPはGoogle検索ランキングの直接的な評価要因ではありません。Googleはog:titleやog:descriptionをランキング判断に使っていません。したがって「OGPを整えれば検索順位が上がる」というのは誤りです。
間接的にSEOへ効くメカニズム
一方で、OGPの最適化はSEOに間接的な好影響をもたらします。魅力的なカードがシェアやクリックを増やし、その一部が被リンクやブランド指名検索につながるという流れです。
| 間接効果 | メカニズム |
|---|---|
| SNSでのシェア増加 | 魅力的なカードがクリック・拡散を促す |
| 被リンクの獲得 | 話題化したコンテンツが他サイトで引用される |
| ブランド認知の向上 | 画像内のロゴ・世界観で発信元が記憶される |
| 指名検索・再訪の増加 | 認知の広がりが検索・直接流入に波及する |
つまりOGP最適化は「SNS→拡散・被リンク→検索評価」という間接ルートで効きます。この経路は数値で断言できるものではありませんが、シェアされやすさを底上げする投資として合理的です。なお、GoogleはDiscoverのフィードで大きなサムネイルを表示することがあり、robotsメタタグのmax-image-preview:largeを許可し高品質な代表画像を用意しておくと、Discover面での見栄えにも寄与します。
SNS投稿の「検索での成績」も計測できる時代へ
2026年はAI検索の普及で検索からのクリックが目減りしやすくなり、SNSやDiscoverなど検索以外の入口の比重が増しています。この流れに合わせて、Googleは計測の枠組みも広げています。2026年7月、Search Consoleに新プロパティ「プラットフォームプロパティ」が追加され、Instagram・TikTok・X・YouTubeの投稿がGoogle検索やDiscoverでどれだけ表示・クリックされているかを確認できるようになりました。詳細はSearch Consoleプラットフォームプロパティの解説記事にまとめています。
この計測拡張をどう受け止めるべきかについては、AI検索によるクリック減という文脈で読み解いたSearch Consoleのソーシャル計測追加の分析記事も参考になります。要点は、表示回数のようなバニティ指標と、クリック・コンバージョン・指名検索といった事業成果の指標を混同しないことです。OGPを整えてシェアの見栄えを高めつつ、SNSと検索を横断で計測し、成果ベースで効果を測る——これが2026年のOGP運用の現実的な姿です。
当サイトのOGP運用で実際にやっていること
scale-basics.comでも、全記事のOGPを次の方針で運用しています。特別な近道はなく、テンプレート化と確認の徹底が基本です。
- ブランドカラー・ロゴ・記事タイトルを含む1200 × 630 pxのOGP画像テンプレートを用意し、記事ごとにタイトルだけ差し替える
- 記事ページはtwitter:cardをsummary_large_imageに統一し、Xでの表示を大きなカードにそろえる
- SEO用のtitle・meta descriptionとは別に、og:title・og:descriptionをSNS向けの文言に調整する
- 公開時はデバッグツールで読み取り結果を確認し、設定ミスを事前に洗い出す
OGP運用で実際に効いたのが、URL移行時のog:urlの扱いです。当サイトは2026年7月にNext.js(SSG)からWordPressへ基盤を移行し、記事URLを/blog/記事名/から/記事名/へ変更しました。このときog:urlとcanonicalを新URLへ統一し、主要ページはデバッガーでキャッシュを再取得しています。旧URLから新URLへの301リダイレクトも全記事分設定した結果、移行にともなうインデックスの問題は起きていません。URLを変える場面では、og:url・canonical・301リダイレクトを一貫させて「正規のURLはどれか」を各チャネルへ同じ形で伝えることが実務上の要点です。移行の詳細と実測はSEOに強いコーディングの実測レポートで公開しています。
OGPに関するよくある質問
Q. OGPとメタディスクリプションの違いは?
メタディスクリプションは検索エンジンの検索結果向けのページ説明文です。og:descriptionはSNSシェア時のカードに表示する説明文です。両者は独立して設定でき、それぞれのチャネルに最適な文言にすることを推奨します。
Q. OGP画像は各ページ固有にすべき?
理想は固有の画像です。同じ画像がタイムラインに何度も並ぶと「同じコンテンツ」と受け取られてクリック率が下がりやすいためです。テンプレートを使い、タイトル部分だけ差し替えると、固有化と制作効率を両立できます。
Q. OGP画像にテキストを入れるべき?
入れることを推奨します。画像内に記事タイトルや要点があると、テキストなし画像より内容が伝わりクリックされやすくなります。ただし詰め込みすぎると小さな表示で読めなくなるため、要点を大きく・余白を確保するのがコツです。
Q. 設定を変えてもSNS表示が変わらないのはなぜ?
SNS側のキャッシュが原因です。Facebook Sharing Debuggerで再取得するなど、各SNSの方法で手動更新すると反映されます。
Q. SPAやSSRのサイトでOGPは正しく認識される?
クライアント側だけで描画するSPAでは認識されないことがあります。SNSクローラーの多くはJavaScriptを実行しないためです。Next.jsのSSR/SSGなど、サーバー側でOGPタグを出力する仕組みを用意しましょう。
Q. 動画コンテンツのOGP設定は?
動画では次のタグを追加し、og:typeにvideo.otherを指定します。
| タグ | 役割 |
|---|---|
| og:video | 動画ファイルのURL |
| og:video:type | 動画の形式(例: video/mp4) |
| og:video:width / og:video:height | 動画の幅・高さ |
Q. SNSごとに異なるOGP表示にできる?
可能です。X向けにtwitter:titleやtwitter:descriptionで独自の値を指定すれば、Facebook(og:〇〇)と別の文言を出せます。ただし管理コストが増えるため、まずはog:タグの統一設定から始め、必要な箇所だけ個別化するのが現実的です。
まとめ — OGPはSNSからの流入を最大化する土台
OGPは、SNSシェア時の表示を最適化し、クリックと流入を底上げするメタタグ設定です。要点を振り返ります。
- 主要タグはog:title・og:description・og:image・og:url・og:typeの5つ。og:urlは各ページ固有の正規URLにする
- X向けにはtwitter:card(記事はsummary_large_image)を追加する
- 画像は迷ったら1200 × 630 px(1.91:1)に統一し、絶対URL・公開アクセス可で用意する
- WordPress・静的HTML・Next.jsなど環境に応じた実装を選ぶ。SPAはサーバー側出力が必要
- 公開前後にデバッグツールで確認し、変わらないときはキャッシュを手動更新する
- OGPは直接のランキング要因ではないが、シェア→拡散・被リンクの間接効果がある。SNSと検索は横断で計測し、成果指標で測る
まずは自サイトの主要ページのOGP設定状況を確認し、未設定や不適切な箇所があれば早めに整えましょう。タグ単位でのHTML最適化を広く押さえたい場合はSEO対策に必須のHTMLタグ一覧もあわせてご覧ください。
執筆根拠: 本記事は2026年7月時点の情報に基づき、Open Graph Protocol公式仕様・各SNSの公開仕様・GoogleのSearch Console関連発表(プラットフォームプロパティ/ソーシャル計測)と、当サイトのNext.js→WordPress移行時のog:url更新・301リダイレクト運用の実体験(詳細はSEOに強いコーディングの実測レポート参照)をもとに執筆しています。画像サイズはog:image推奨の1200×630pxを基準とし、SNS別サイズは各プラットフォームの公開仕様に基づく目安です。