SEO

OGPとは?設定方法からSEO効果、主要SNS別最適化まで徹底解説【2026年最新版】

OGPとは?設定方法からSEO効果、主要SNS別最適化まで徹底解説【2026年最新版】
WebサイトのコンテンツをX(旧Twitter)やFacebookでシェアした際、意図しない画像やテキストが表示されてしまい、困惑した経験はありませんか? この表示をコントロールし、ソーシャルメディア上での魅力を最大限に引き出す技術が「OGP(Open Graph Protocol)」です。
OGPを正しく設定することは、もはや単なる技術的なお作法ではありません。SNSからの流入を増やし、ブランド認知度を高め、ひいてはWebサイト全体のコンバージョン(CV)を向上させるための、極めて重要なマーケティング戦略の一環です。

しかし、「OGP」というキーワードはWebマーケティングの文脈以外にも、国際的な取り組みである「Open Government Partnership」や精密測定機器メーカーの「Optical Gaging Products」を指す場合があり、情報が混在しがちです。
この記事では、Web集客とSEOの観点に特化した「Open Graph Protocol」について、その戦略的な重要性から、具体的な設定方法、各SNSプラットフォームに最適化された高度なテクニック、そして頻発するトラブルの解決策まで、網羅的かつ専門的に解説します。

この記事を最後まで読めば、あなたはOGPを完全に理解し、自社のWebサイトのポテンシャルを最大限に引き出すための具体的なアクションプランを手にすることができるでしょう。

OGPとは?読み方・何の略か・仕組みを30秒で理解する

👉 このパートをまとめると!
OGPはOpen Graph Protocolの略。SNSシェア時の表示を指定する仕組み

OGPとは、「Open Graph Protocol(オープングラフプロトコル)」の略で、WebページがSNSでシェアされたときに表示されるタイトル・説明文・画像を、ページ側から指定するための仕様です。読み方はアルファベットのまま「オージーピー」です。

2010年にFacebook(現Meta)が策定し、現在はX(旧Twitter)、LINE、はてなブックマーク、Slackなど多くのサービスが読み取る事実上の共通規格になっています(仕様: The Open Graph protocol)。

仕組みはシンプルです。HTMLの<head>内に<meta property="og:title" content="値">のようなタグを書いておくと、SNSのクローラーがそれを参照してフィード上のカード表示を組み立てます。OGPタグがないページでは、クローラーがページ内から画像やテキストを推測して拾うため、意図しない表示になります。

SNS運用そのものの設計は ソーシャルメディアとは?SNSとの違いや企業で活用する方法を解説 で解説しています。

OGP(Open Graph Protocol)がWebマーケティングで不可欠な理由

👉 このパートをまとめると!
CTR向上・ブランド統一・間接的なSEO効果の3点が設定する理由

OGPは、WebページがSNSでシェアされた際に、そのページのタイトル、説明文、画像といったリッチな情報を表示させるための国際的なルール(プロトコル)です。このシンプルな仕組みが、なぜWebマーケティングにおいて不可欠なのでしょうか。その理由は、単に「見た目が良くなる」という次元にとどまりません。

1. SNSでのクリック率(CTR)とエンゲージメントの劇的な向上

OGPが設定されていないURLは、SNSのフィード上でリンクだけの素っ気ない表示になったり、プラットフォームが拾った意図しない画像・テキストが並んだりします。これでは、無数の情報が流れるタイムラインの中でユーザーの注意を引くことは困難です。

一方、OGPを適切に設定すると、URLは魅力的な画像、興味をそそるタイトル、内容を要約した説明文を伴う「リッチオブジェクト」に変わります。この視覚的なインパクトは絶大で、ユーザーの目に留まりやすくなるだけでなく、コンテンツの内容が瞬時に伝わるため、クリック率(CTR)や「いいね」「シェア」といったエンゲージメントを大幅に向上させる効果があります。いわば、SNSフィード内に自社コンテンツの「ミニ広告」を無料で出稿するようなものです。

2. ブランドイメージの統一と認知度向上

OGPは、SNS上でのブランド表現を完全にコントロールする手段を提供します。設定を怠ると、SNSプラットフォームがページ内から自動で不適切な画像やテキストを抽出してしまい、ブランドイメージを損なう可能性があります。

意図した画像、統一されたトーンのタイトルと説明文をOGPで指定することにより、どのページがシェアされても、一貫したプロフェッショナルなブランドイメージをユーザーに届けることができます。この積み重ねが、ユーザーの記憶にブランドを刻み込み、認知度と信頼性の向上に直結します。

3. 間接的なSEO効果:Googleが評価するユーザー体験と社会的シグナル

「OGP設定はSEOに効果がありますか?」という問いに対して、専門的な回答は「直接的な影響はないが、極めて強力な間接的効果がある」となります。GoogleのランキングアルゴリズムはOGPタグを直接の評価指標とはしていません。しかし、OGPがもたらす副次的な効果が、Googleが重視するシグナルを間接的に強化します。

このメカニズムは以下の通りです。

  • 質の高いトラフィックの増加: 適切に設定されたOGPはSNSでのCTRを高め、Webサイトへの参照(リファラル)トラフィックを増加させます。
  • 良好なユーザー行動シグナルの発生: 魅力的なOGPによって訪れたユーザーは、コンテンツへの期待値が高まっているため、ページ滞在時間が長く、直帰率が低い傾向にあります。ただしGoogleは、滞在時間や直帰率そのものを個々の検索結果の順位決定に使っているとは公表していません。これらはコンテンツ改善の指標として扱い、順位への直接効果を期待しない姿勢が安全です。
  • 被リンク獲得機会の創出: SNSでのシェアが活発化すると、より多くの人の目に触れることになります。その中には、ブロガーやジャーナリスト、他のWebサイト運営者が含まれているかもしれません。彼らがあなたのコンテンツを発見し、自身のサイトからリンク(被リンク)を設置する可能性が高まります。この「自然な被リンクの獲得」は、Googleの評価を押し上げる最も強力な要因の一つです。

このように、OGPはSNS上でのユーザー体験を最適化することを通じて、Googleが「質の高いサイト」と判断するための重要な間接的シグナルを生み出す、SEO戦略上、無視できない要素なのです。

OGPタグの構造:必須プロパティと推奨プロパティの完全ガイド

👉 このパートをまとめると!
必須6プロパティと、og:image:altなど推奨プロパティを一覧で解説

OGPを実装するには、HTMLドキュメントの<head>セクション内に、特定の<meta>タグを記述します。これらのタグは、Facebookが策定し、現在では多くのSNSで採用されている「The Open Graph protocol」の仕様に基づいています。公式ドキュメント(The Open Graph protocol)には多くのプロパティが定義されていますが、まずはビジネスで必須となる6つの基本プロパティを確実に押さえましょう。

必須および最重要のOGP基本プロパティ

以下の表は、OGPを設定する上で核となる6つのプロパティをまとめたものです。これらを正しく設定するだけで、SNSでの表示は劇的に改善されます。

なお公式仕様(The Open Graph protocol)で必須と定義されているのは og:title・og:type・og:image・og:url の4つで、og:description と og:site_name は「推奨(Optional Metadata)」に位置づけられています。ただし実務では6つすべてを設定するのが標準です。

プロパティ (Property) 役割 (Role) 推奨事項・ベストプラクティス コード例 (Code Example)
og:title ページのタイトル ユーザーの興味を引く、具体的で魅力的なタイトル。SNSのフィード上で全文表示されるよう、PCでは60文字、スマートフォンでは40文字以内が理想。 <meta property="og:title" content="OGP設定の完全ガイド【2026年版】" />
og:type ページの種類 トップページはwebsite、記事や商品ページなどの下層ページはarticleを指定するのが一般的です。 <meta property="og:type" content="article" />
og:image 表示される画像 最も重要な要素。推奨サイズは1200x630px(アスペクト比1.91:1)。https://から始まる絶対パスで指定します。 <meta property="og:image" content="https://example.com/images/ogp-image.jpg" />
og:url ページの正規URL 必ず正規化(canonical)されたURLを絶対パスで指定します。これにより、パラメータ付きURLなどでシェアが分散するのを防ぎます。 <meta property="og:url" content="https://example.com/blog/ogp-guide" />
og:description ページの説明文 ページの内容を正確に要約し、ユーザーのクリックを促す魅力的な文章。80〜120文字程度が最適とされています。 <meta property="og:description" content="OGPの基本から応用まで、この記事一本で全てがわかります。設定方法、SEO効果、トラブルシューティングを徹底解説。" />
og:site_name サイト名 ページが属するWebサイト全体の名前。ブランド名を簡潔に記述します。20文字以内が推奨されます。 <meta property="og:site_name" content="Web集客ラボ" />

og:typeに指定できる値は公式仕様で定義されています。website・article・book・profileのほか、music.song や video.movie などの music.* / video.* 系サブタイプも用意されています(出典: The Open Graph protocol)。企業サイトやオウンドメディアでは、トップページにwebsite、記事詳細ページにarticleを指定すれば十分です。

og:descriptionは、検索結果に出るmeta descriptionとは役割が異なります。書き方は メタディスクリプションとは?文字数・例文・確認方法を紹介 で整理しています。

理解を深めるための推奨・構造化プロパティ

基本の6つに加えて、より詳細な情報をクローラーに伝えるためのプロパティも存在します。これらを設定することで、さらにリッチな表示や正確な情報伝達が可能になります。

  • og:locale: コンテンツの言語と地域を指定します(例: ja_JP)。多言語サイトでは特に重要です。
  • 構造化プロパティ: og:imageには、さらに詳細な情報を付与できます。
    • og:image:width / og:image:height: 画像の幅と高さをピクセル単位で指定します。これを設定すると、SNSのクローラーが画像を事前にダウンロードすることなく、正しいサイズで即座に表示領域を確保できるため、レンダリングが高速化します。
    • og:image:alt: 画像の代替テキストを指定します。視覚障害を持つユーザーのためのスクリーンリーダーが読み上げるほか、画像が表示されない場合にテキストが表示されるため、アクセシビリティの観点から設定が推奨されます。
    • og:image:type: 画像のMIMEタイプ(例: image/jpeg)を指定します。

og:image:altの考え方は、img要素のalt属性と同じです。書き方は alt属性とは?SEOに効く書き方とファイル名・画像最適化を解説 にまとめています。

これらの詳細な設定は、技術的な完成度を高め、サイトが各種プラットフォームから正しく、そして効率的に解釈されることを保証します。

OGPの実装方法:HTML手動設定からWordPressまで

👉 このパートをまとめると!
HTML直書き・Yoast SEO・AIOSEOの3通りの実装手順を解説

OGPの理論を理解したら、次はいよいよ実装です。Webサイトの構築方法に応じて、いくつかの実装アプローチがあります。

HTMLへの直接記述(コード例付き)

静的なHTMLサイトや、独自のシステムで構築されたWebサイトの場合、<head>セクションに直接OGPタグを記述します。

まず、<html>タグにprefix属性を追加し、このページでOpen Graph Protocolを使用することを宣言します。これは、より厳密な仕様に準拠するための作法です。

HTML

<html lang="ja" prefix="og: https://ogp.me/ns#">

次に、<head>内に、各プロパティを<meta>タグとして記述します。以下は、ブログ記事ページにおける完全な記述例です。

HTML

<head>
<meta charset="UTF-8">
<title>OGPとは?設定方法からSEO効果まで徹底解説【2026年最新版】</title>
<meta name="description" content="OGPの基本から応用まで、この記事一本で全てがわかります。設定方法、SEO効果、トラブルシューティングを徹底解説。">
<link rel="canonical" href="https://example.com/blog/ogp-guide">

<meta property="og:title" content="OGPとは?設定方法からSEO効果まで徹底解説【2026年最新版】" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/ogp-guide" />
<meta property="og:image" content="https://example.com/images/ogp-guide-main.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Web集客ラボ" />
<meta property="og:description" content="OGPの基本から応用まで、この記事一本で全てがわかります。設定方法、SEO効果、トラブルシューティングを徹底解説。" />
<meta property="og:locale" content="ja_JP" />
</head>

WordPressでの設定:人気プラグインとテーマ機能の活用

世界のWebサイトの大多数を占めるWordPressでは、プラグインを利用することで、コードを直接編集することなく簡単にOGP設定が可能です。WordPress全体のSEO設定手順は WordPressのSEO対策で初心者がやることリスト にまとめています。なお、画面名称はプラグインのバージョンで変わることがあります。

Yoast SEOでの設定方法

世界的に人気の高いSEOプラグイン「Yoast SEO」では、OGP設定が標準機能として組み込まれています。

  • 全体設定: WordPressダッシュボードから Yoast SEO > 設定 > サイトの機能(Site features)へ進み、「ソーシャル共有(Social sharing)」グループの「Open Graph data」と「X card data」をオンにします。これでサイト全体のOGP・Xカードタグの出力が有効になります。
  • 投稿タイプ共通の既定値: 設定 > コンテンツタイプ > 投稿 の「Social appearance(ソーシャル外観)」タブで、投稿全体に適用されるソーシャル画像・タイトル・説明文のテンプレートを指定します(このタブはYoast SEO Premiumの機能です)。
  • 個別記事の設定: 記事編集画面のYoast SEOサイドバー(またはエディタ下部のメタボックス)で、そのページ専用のソーシャルタイトル・説明文・画像を指定します。プレビューを見ながら個別指定する「Social previews」はPremium機能のため、無料版で記事ごとのOGP画像を確実に指定したい場合は、アイキャッチ画像を設定するか、後述のAll in One SEOのように無料で個別指定できるプラグインを検討します。

OGP画像だけを差し替えたい場合も入口は同じで、投稿タイプ共通の画像は「Social appearance」タブ、記事ごとの画像は編集画面のYoast SEOメタボックスで指定します。記事ごとの指定を空のままにすると、投稿タイプ共通のテンプレート画像が使われます。

All in One SEO (AIOSEO)での設定方法

「All in One SEO (AIOSEO)」もまた、非常に人気のあるSEOプラグインです。

  • 全体設定: ダッシュボードから All in One SEO > ソーシャルネットワーク へ進みます。FacebookとXのタブで、それぞれのプラットフォーム向けのデフォルト設定(デフォルト投稿画像など)を行います。
  • 個別記事の設定: 記事編集画面のエディタ下部にある「AIOSEO設定」セクション内の「ソーシャル」タブを開きます。ここで、そのページに特化したOGP情報を個別に上書き設定することが可能です。

OGP画像は「ソーシャル」タブのFacebook・Twitterそれぞれの画像ソース欄で指定します。アイキャッチ画像の流用か記事専用画像かを選べ、記事単位の指定が全体設定より優先されます。

テーマ機能を利用する場合の注意点

一部のWordPressテーマ(例えば、日本の人気テーマ「Cocoon」など)には、テーマ自体にOGP設定機能が内蔵されている場合があります。これはプラグインを増やさずに済むというメリットがありますが、将来的にテーマを変更した場合、設定内容が引き継がれずにすべて失われてしまうという大きなデメリットがあります。長期的なサイト運営を考えると、OGP設定はテーマ機能に依存せず、「Yoast SEO」や「AIOSEO」のような専門のSEOプラグインで一元管理することを強く推奨します。

プラットフォーム別最適化戦略:Facebook, X(旧Twitter), LINEで差をつける

👉 このパートをまとめると!
Facebookのキャッシュ、Xのカード、LINEの正方形クロップに対応する

基本的なOGPタグを設定するだけでは、すべてのSNSで最適に表示されるとは限りません。各プラットフォームは独自の拡張仕様や表示のクセを持っており、これらを理解し対応することが、競合に差をつける鍵となります。

Facebook (Meta)での最適化:キャッシュとの戦いを制す

Facebook(およびInstagram、Threads)は、一度読み込んだOGP情報を自社のサーバーに強力にキャッシュ(一時保存)します。そのため、ページのOGP画像やタイトルを更新しても、シェアした際に古い情報が表示され続けることが頻繁にあります。

この問題を解決するために、Meta社は公式ツール「シェアデバッガー」を提供しています。
(参照元: Meta for Developers)

このツールにページのURLを入力して「デバッグ」ボタンを押すと、Facebookが現在どのOGP情報を認識しているかを確認できます。情報を更新したい場合は、「もう一度スクレイピング」ボタンをクリックしてください。これによりFacebookのキャッシュが強制的にクリアされ、最新のOGP情報が再取得されます。ページのOGP情報を変更した際は、必ずこのツールでキャッシュをクリアする習慣をつけましょう。

なお、デバッガーで「fb:app_idがありません」という警告が出ることがありますが、これはFacebookのアクセス解析(インサイト)を詳細に利用する場合に必要なIDであり、通常のOGP表示には影響ありませんので、無視して問題ありません。

X (旧Twitter)カードの完全攻略

X(旧Twitter)は、OGPをベースとしつつも、「Twitterカード」という独自の拡張メタタグで表示形式をコントロールします。Xで最適化された表示を実現するには、OGPタグに加えてTwitterカード用のタグを設定する必要があります。

  • twitter:card: カードの種類を指定します。最も視認性が高く推奨されるのは、大きな画像が表示されるsummary_large_imageです。
  • twitter:site: Webサイトの運営主体となるXアカウントの@ユーザー名を指定します。
  • twitter:creator: コンテンツの作成者(著者)の@ユーザー名を指定します。twitter:siteと同じでも構いません。

記述例:

HTML

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@gmo_tech" />
<meta name="twitter:creator" content="@author_account" />

twitter:titleやtwitter:imageなども存在しますが、これらが設定されていない場合は、対応するog:titleやog:imageが自動的に利用されるため、基本的には上記3つの設定で十分です。画像の代替テキストを渡すtwitter:image:altというタグもありますが、og:image:altを設定していれば代替テキスト自体は用意できるため、追加は任意です。

タグ名は現在もtwitter:で始まる表記のまま使われていますが、呼称は「Twitterカード」と「Xカード」が併存しています。X公式の開発者向けドキュメント(docs.x.com)は2026年8月時点でCards(X for websites)の章自体が公開されていないため、実装後は確認ツールでプレビューを取り、実際の表示で検証してください。

Twitterカード確認ツールの現状

かつてX(旧Twitter)は公式の「Card Validator」を提供していましたが、現在は廃止されています。そのため、表示確認にはサードパーティ製のツールを利用する必要があります。以下に信頼性の高い代替ツールを挙げます。

Twitter独自の追加設定

LINEやその他のプラットフォームでの表示

LINEやはてなブックマークなど、他の多くのプラットフォームは、基本的に標準のOGPタグを読み込んで表示を生成します。特別な設定は不要ですが、一点、非常に重要な注意点があります。

LINEは、og:imageで指定された横長の画像を、正方形(アスペクト比1:1)に中央でトリミングして表示する傾向があります。この仕様を理解していないと、画像の重要な部分(人の顔や商品、キャッチコピーなど)が見切れてしまい、意図したメッセージが伝わらなくなります。この問題への対処法は、次の「OGP画像の設計」で詳しく解説します。

成果を左右するOGP画像の設計と技術仕様

👉 このパートをまとめると!
1200x630pxとセーフゾーン630x630pxがOGP画像設計の基準

OGPにおいて、ユーザーの視線を最も強く引きつけるのは画像です。このog:imageをいかに戦略的に設計するかが、クリック率を大きく左右します。

OGP画像の技術仕様:主要SNS対応チートシート

まず、各プラットフォームで美しく表示されるための技術的な要件を把握しましょう。以下の表は、複数の情報を統合した、2026年時点のベストプラクティスです。

プラットフォーム 推奨画像サイズ アスペクト比 最大ファイルサイズ 対応形式 注意事項
Facebook 1200 x 630px 1.91:1 8MB JPG, PNG, GIF(WebPは公式一覧に記載なし) 高解像度デバイスでの表示を最適化するため、このサイズを強く推奨します。
X (旧Twitter) 1200 x 630px 2:1(最小300 x 157px/最大4096 x 4096px) 5MB未満 JPG, PNG, WebP, GIF(SVGは非対応) summaryカードは1:1。1200 x 630pxを使う場合、2:1に合わせて上下がわずかに切り取られます。
LINE 1200 x 630pxで作成 1:1に中央クロップ – JPG, PNG 重要な要素は中央の630 x 630pxの「セーフゾーン」内に配置する必要があります。

この表からわかるように、「1200 x 630px」のサイズで画像を作成することが、FacebookとX(summary_large_image)の両方に対応する上での「黄金比」と言えます。

数値の出典はプラットフォームごとに分かれます。Facebook(Meta)側の基準は公式ドキュメントで確認でき、1200 x 630px以上を推奨、リンク投稿を大きな画像で表示させたい場合は600 x 315px以上、許容される最小サイズは200 x 200px、上限は8MB、アスペクト比はフィードで切り取られないよう1.91:1に近づけることが示されています(出典: Meta for Developers「Sharing Images」)。

一方、X(旧Twitter)側の数値の出典は、現行のX開発者向けドキュメント(docs.x.com)にCards(X for websites)の章が残っていないため、公開停止前の公式ドキュメント「Summary Card with Large Image」を根拠とします。そこではsummary_large_imageの画像要件を、アスペクト比2:1(最小300×157px/最大4096×4096px)・5MB未満・JPG/PNG/WebP/GIF対応(SVGは非対応)と定義していました。Metaの基準(1200×630px・1.91:1)で作った画像はXでもそのまま使えますが、2:1に合わせて上下がわずかに切り取られるため、ロゴやキャッチコピーを画像の上端・下端ぎりぎりに置かないようにしてください。

対応形式は、og:imageにJPG(JPEG)・PNG・GIF・WebPといったラスター画像を指定します。SVGは使用できません。 判断の基準になるのは、Metaが公式にog:image:typeの値として挙げている3つのMIMEタイプです(出典: Meta for Developers「Webmasters Sharing Guide」)。

  • JPG(JPEG)・PNG・GIF: 公式に明記された3形式。確実に表示させたい場合はこの3つから選ぶ
  • WebP: X(旧Twitter)は公式に対応形式として挙げていますが、Metaのog:image:type一覧には記載がありません。プラットフォームによって扱いが分かれます
  • SVG: 公式の一覧に含まれず、OGP画像には使用できない

画像最適化プラグインでサイト全体をWebP配信している場合も、og:imageのURLだけはJPGまたはPNGを残しておくと、対応差による表示崩れを避けられます。

デザインのベストプラクティス:「セーフゾーン」を意識した画像作成

最も重要なデザイン上の考慮事項は、LINEの正方形クロップに対応することです。せっかく作った画像がLINEで共有された途端に台無しになるのを防ぐため、「セーフゾーン」という考え方を取り入れましょう。

これは、1200 x 630pxの画像の、中央部分にあたる630 x 630pxの正方形領域を指します。このセーフゾーン内に、ロゴ、主要なビジュアル、キャッチコピー、人物の顔など、絶対に伝えたい情報をすべて収めるようにデザインします。

こうすることで、FacebookやXでは横長の全体像が美しく表示され、LINEでは中央の重要な部分がしっかりと切り取られて表示されるため、どのプラットフォームでもメッセージ性を損なうことがありません。

CanvaやFigma、Photoshopなどのデザインツールで、1200 x 630pxのテンプレートを作成し、その中央に630 x 630pxのガイドを引いておくと、毎回効率的に高品質なOGP画像を作成できます。

サイト全体のSEO改善まで含めて進める場合は、SEO Dash! byGMOが支援内容をまとめた資料を公開しています。

SEO Dash! byGMOの資料を無料ダウンロード

SNS流入と検索流入をまとめて伸ばす設計を確認する

OGPで増やしたSNS流入を、検索流入の改善とあわせて成果につなげる支援内容をまとめた資料です。

OGP設定のトラブルシューティングと確認方法

👉 このパートをまとめると!
表示されない原因はキャッシュ・相対パス・robots.txtの3つが中心

OGPを正しく設定したつもりでも、予期せぬ問題が発生することがあります。ここでは、よくある問題とその解決策、そして必須の確認ツールをまとめて紹介します。

よくある問題と解決策

問題1: 意図しない画像が表示される / 画像を更新したのに古いまま

  • 原因: ほぼ100%、SNSプラットフォーム側のキャッシュが原因です。
  • 解決策: Facebookの場合は、「シェアデバッガー」を使い、「もう一度スクレイピング」を実行してキャッシュを強制的にクリアします。Xやその他のプラットフォームでも、同様のキャッシュ問題が起こりえます。時間を置くか、確認ツールでプレビューを再生成してみてください。

問題2: 画像がまったく表示されない

  • 原因1: 画像URLのパスが間違っている
    • 解決策: og:imageのcontent属性に指定するURLは、./images/pic.jpgのような「相対パス」ではなく、https://example.com/images/pic.jpgという「絶対パス」で記述されているか確認してください。外部のSNSサーバーがあなたのサイトの画像を見つけるためには、完全なアドレス(URL)が必要です。
  • 原因2: 画像のサイズや形式が不適切
    • 解決策: ファイルサイズが大きすぎないか(5MB未満を推奨)、形式がJPG, PNG, WEBP, GIFのいずれかになっているかを確認してください。
  • 原因3: robots.txtでクローラーがブロックされている
    • 解決策: サイトのrobots.txtファイルを確認し、facebookexternalhit(Facebookのクローラー)やTwitterbotなどをDisallowしていないか確認してください。

問題3: タイトルや説明文が古い、または正しくない

  • 原因: これも多くはキャッシュが原因です。
  • 解決策: 問題1と同様に、各プラットフォームのデバッグツールでキャッシュをクリアしてください。また、WordPressプラグインの設定が正しく保存されているか、HTMLソースコードに意図した通りの<meta>タグが出力されているかも確認しましょう。

必須のOGP確認・デバッグツール

トラブルシューティングと日常的な設定確認のために、以下のツールをブックマークしておくことを強く推奨します。

  • Meta シェアデバッガー
  • ラッコツールズ OGP確認
    • URL: https://rakko.tools/tools/9/
    • 用途: Facebook, X, LINE, はてなブックマークなど、主要なSNSでの表示をPC版・スマホ版の両方で一度にシミュレーションできます。日本のマーケターにとって非常に実用的なツールです。
  • OGP画像シミュレーター
    • URL: https://ogimage.tsmallfield.com/
    • 用途: 作成したOGP画像をドラッグ&ドロップするだけで、各SNSのタイムライン上でどのように表示・トリミングされるかを視覚的に確認できます。デザインの最終チェックに最適です。

まとめ:OGPを制してWeb集客を最大化する

👉 このパートをまとめると!
1200x630px・セーフゾーン・キャッシュ対策の3点が実務の要点

WebマーケティングにおけるOGP(Open Graph Protocol)の戦略的な重要性から、技術的な実装、各プラットフォームへの最適化、そしてトラブルシューティングまで、網羅的に解説しました。

最後に、OGPを成功させるための重要なポイントを再確認しましょう。

  • OGPは技術ではなくマーケティング戦略である: OGPは単なるHTMLタグの設定作業ではありません。SNS上での第一印象を決定づけ、クリック率、エンゲージメント、ブランドイメージ、そして間接的なSEO効果にまで影響を及ぼす、コンテンツマーケティングの核となる要素です。
  • 「1200 x 630px」と「セーフゾーン」が画像の鍵: ほとんどの主要SNSで美しく表示させるには、1200 x 630pxの画像を用意します。そして、LINEでの表示崩れを防ぐため、重要な要素は必ず中央の630 x 630pxのセーフゾーン内に配置してください。
  • プラットフォームの「クセ」を理解する: Facebookのキャッシュ問題とシェアデバッガーの活用、X(旧Twitter)独自のカード設定は、必ず押さえておくべきポイントです。
  • 確認とデバッグを怠らない: OGPを設定したら、必ず各種確認ツールを使って意図通りに表示されるかチェックし、問題があればキャッシュクリアなどの対処を行う習慣が、安定した成果につながります。

OGPを正しく理解し、戦略的に活用することで、あなたのWebサイトはソーシャルメディアという広大な海で、その他大勢のコンテンツの中から頭一つ抜け出すことができるようになります。

OGPの整備が終わったら、次の課題は検索流入そのものの改善です。SEO Dash! byGMOがサービス資料を公開しています。

SEO Dash! byGMOの資料を無料ダウンロード

OGPの次に着手すべきSEO施策を資料で整理する

SEO Dash! byGMOが、支援メニューと改善の進め方をまとめた資料を公開しています。

OGPに関するよくある質問

👉 このパートをまとめると!
SEO効果・WebP・og:type・alt・反映されない原因の5問に回答

Q1. OGPを設定するとSEO(検索順位)は上がりますか?

検索順位が直接上がることはありません。GoogleのアルゴリズムはOGPタグを評価指標としていないためです。ただしSNSでのクリック率が高まると参照トラフィックが増え、滞在時間や自然な被リンクなど間接的なシグナルの改善につながります。

Q2. OGP画像はWebPでも使えますか?

表示できる環境は多いものの、Metaの公式ドキュメントがog:image:typeの値として挙げているのはimage/jpeg・image/gif・image/pngの3つで、WebPの記載はありません。確実性を優先するならJPGまたはPNGを指定します。SVGは使用できません。

Q3. og:typeは何を指定すればよいですか?

トップページにはwebsite、ブログ記事や商品などの下層ページにはarticleを指定するのが一般的です。公式仕様にはbookやprofile、music.song、video.movieなどもありますが、通常のWebサイトはこの2つで足ります。

Q4. og:image:altは必須ですか?

必須ではありませんが、設定を推奨します。og:image:altは画像の代替テキストを指定するプロパティで、スクリーンリーダーでの読み上げや、画像が表示されないときの代替表示に使われます。og:imageとセットで用意しておくと安全です。

Q5. OGPを更新したのに反映されないのはなぜですか?

ほとんどの場合、SNSプラットフォーム側のキャッシュが原因です。Facebookではシェアデバッガーで対象URLを読み込み、「もう一度スクレイピング」を実行するとクリアされます。Metaの画像キャッシュはURL単位のため、画像URL自体を変更する方法も有効です。

SEO対策でビジネスを加速させる
seo-dash!bygmo

SEO対策でこんな思い込みしていませんか?

  • 大きいキーワードボリュームが取れないと売上が上がらない・・
  • コンサルに頼んでもなかなか改善しない
  • SEOはコンテンツさえ良ければ上がる

大事なのは自社にあったビジネス設計です。
御社の課題解決に直結するSEO施策をご提案します

無料資料請求はこちら

プロフィール
大澤 健人(おおさわ けんと)
GMO TECH株式会社 大澤 健人(おおさわ けんと) 大澤 健人(おおさわ けんと)のウェブサイト 大澤 健人(おおさわ けんと)のFacebook 大澤 健人(おおさわ けんと)のTwitter
2012年より一貫して検索エンジン領域のコンサルティング業務に従事。 2017年にGMO TECH社に参画。営業組織の構築、新商材開発、マーケティング部門立ち上げをおこなう。 現在、MEOコンサルティング、SEOコンサルティング、運用型広告などSEM領域全体を統括し、 お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。
CONTACT US

デジタルマーケティングに関することならお気軽にご相談ください

メルマガ登録

メールマガジンはこちらからご登録ください。

デジタルマーケティングに関するホットな情報をお届けいたします。

フォームからのお問い合わせ

GMO TECHへの業務依頼、発注を希望される方はこちらよりご連絡ください。