SEO

公開日2024年2月13日

更新日2024年02月13日

OGP (Open Graph Protocol)とは？画像設定方法やタグの記述方法、表示されないときの対処法

甲斐龍之介

SEOツール「Nobilista（ノビリスタ）」の事業責任者。株式会社IIPにて取締役兼SEO担当者。中小企業庁が設置した経営相談所、福岡県よろず支援拠点にてSEOコンサルタントとしても活動。

詳細を見る

公的機関におけるセミナー実績

ソーシャルメディア

当サイトのコンテンツ制作ポリシー・運営体制について

Webサイトのコンテンツを広く知って欲しいのならば、欠かせないのがOGP（Open Graph Protocol）の設定です。
今やSEOと並んでWebサイトへのアクセスを集めるために重要なのが、FacebookやX（旧：Twitter）などのSNSでの「シェア」でしょう。
しかし、そのままではせっかくSNSで「シェア」されても、SNSの画面には無機質な文字列しか表示されません。

そこで必要となるのがOGPです。
設定すると大きな画像や説明文などを表示できるようになるので、SNSでシェアされた時の見栄えが上がり、クリック率も高まるでしょう。

そこでこの記事では、OGPの基本的な記述方法や設置場所、FacebookやX（旧：Twitter）における特有のタグなどを詳しく説明します。
また、設定の確認ツールや反映されないときの対処法、OGP画像を魅力的にするポイントなども紹介するので参考にしてください。

大手企業も続々導入中！

多機能型検索順位チェックツール「Nobilista(ノビリスタ)」

Nobilistaは、365日完全自動で大量の検索キーワードの順位を計測するSEOツールです。
※7日間の無料トライアル実施中

Nobilistaの詳細を確認する

メタタグ(meta tag)とは？確認方法やSEOに効く書き方、設定方法を初心者にもわかりやすく解説

OGPとは

OGPとは「Open Graph Protocol」の略で、FacebookやX（旧：Twitter）などのSNSでページリンクが貼られた際、コンテンツの内容を視覚的にプレビューさせる仕組みです。
設定するとSNSの画面上に、タイトル・画像・説明文などが表示できるようになります。

元々はFacebookが提唱したメタデータ形式であり、仕様が公開されているため、プラットフォームの壁を超えて適用できるのが特徴です。
Facebookでの表示のコントロールが最も自由度が高くなっていますが、X（旧：Twitter）でも独自のタグが利用できます。

他にも、下記のようなプラットフォームで利用できるので、設定は必須と言えるでしょう。

LinkedIn
Pinterest
Reddit
WhatsApp

OGPは、WebページのHTMLに専用のタグを挿入することで機能します。
また、WordPressなどのCMSでは管理画面から簡単に設定できるので、初心者の方でも安心です。

SEOに効果的なHTMLタグの書き方とは？基本構造やエラーがないかチェックする方法

OGP設定の必要性

OGP設定は、SNSからWebサイトへのアクセスを集めるために重要な要素です。
適切に設定すれば多くのユーザーの興味や関心を高められ、大きく拡散される可能性があります。

具体的には以下のようなメリットがあります。

伝えたい内容が一瞬で伝わる
画面占有率が増えて目に付くようになる
ブランドイメージに寄与する

総合すれば「ユーザーへの訴求力が高まり、シェアやクリック率が高まる」と言えるでしょう。
その結果、Webサイトの検索順位にも好影響を与える可能性が高まります。

伝えたい内容が一瞬で伝わる

OGPを使用すると、Webページのタイトル、画像、説明などがSNS上で魅力的に表示されます。
特に視覚的に訴求できる画像を活用すれば、コンテンツの内容をダイレクトに伝えることも可能です。

特にSNS上で他の投稿者の投稿をリポストした場合（Facebookなら「シェア」、X（旧：Twitter）なら「リポスト」）、特に新しい投稿文を添えることなく、リンクのみが拡散されることもあるでしょう。
そこでOGPの設定がなければ、それを見た他の人が目にするのは、元のWebページのURLのみになってしまう可能性があります。
それでは集まるアクセスも集まらないでしょう。

実際にどう見えるかはWebサイトやプラットフォームの設定によりますが、仮に自動で情報が表示されても、本来意図した内容が正しく反映される保証はありません。
そもそも画面の動きの速いSNSでは、こちらが伝えたいことを一瞬で伝えることが重要です。

画面占有率が増えて目に付くようになる

画像を有効に使うことで、SNSの画面における投稿の占有率を増やし、アクセスを高めることができます。
流れの速いSNSでは目立つ画像をはっきりと見せることで、その投稿に対する認知度が高まり、シェアやクリックに繋がるからです。

通常の投稿においても、画像や動画を使ったものは拡散されやすい傾向があります。
その中で、ページのタイトルと多少の説明文だけでは、訴求できる力に限界があるでしょう。

Nobilista
記事コンテンツSEO対策
100のチェックリスト

無料でダウンロードする

チェックリストイメージ図

無料でダウンロードする

ブランドイメージに寄与する

SNS上での見え方をコントロール出来るのがOGPの特徴です。
どんな見え方をするのか分からなければ、ブランドのイメージの維持にも支障が出ます。
イメージを毀損するような見え方をしてしまったら、大きな損失に繋がる危険もあるでしょう。

OGPを適切に設定することでブランドイメージへの一貫性を保つことができます。

OGPの基本的な記述方法と設置場所

OGPはWebページのHTMLのヘッダ内に、指定されたメタタグを追加することで設定します。
下記が基本的な記述方法です。

必須の情報
- OGPの使用を宣言する
- WebページのURLを指定する
- Webページのタイトルを指定する
- Webページの説明文を指定する
- サムネイル画像もしくは動画のURLを指定する
任意の情報
- 画像もしくは動画の詳細設定を指定する
- Webページの種類を指定する
- サイト名を指定する
- サイトの言語を指定する
プラットフォーム別の対応
- Facebookに対応させる
- X（旧：Twitter）に対応させる

HTMLの記述例

headタグ内にメタデータを追加します。
下記は、最低限の構成例です。

<head prefix="og: https://ogp.me/ns#">
<meta property="og:url" content="WebページのURL" />
<meta property="og:title" content="Webページのタイトル" />
<meta property="og:description" content="Webページの説明文" />
<meta property="og:image" content="サムネイル画像のURL" />

下記は、任意で追加できる要素です。

<meta property="og:type" content="Webページの種類" />
<meta property="og:site_name" content="Webサイトのタイトル" />
<meta property="og:locale:alternate" content="Webページの言語" />

個々を詳しく説明します。

OGPの使用を宣言する

最初に、headタグ内にprefix属性を指定してOGPの使用を宣言しておきます。
属性値は「og: https://ogp.me/ns#」で固定です。
下記をコピペしてください。

<head prefix="og: https://ogp.me/ns#">

WebページのURLを指定する

次に、埋め込むWebページのURLを指定します。
meta要素にproperty属性を指定、属性値は「og:url」。

続けて、同じくmeta要素にcontent属性を指定、属性値にはWebページのURLを記述します。

<meta property="og:url" content="WebページのURL" />

URLは絶対パスで記述してください。
相対パスは反映されません。

Webページのタイトルを指定する

Webページのタイトルは、meta要素にproperty属性を指定、属性値は「og:title」。
同じくmeta要素にcontent属性を指定、属性値にはWebページのタイトルを記述します。

<meta property="og:title" content="Webページのタイトル" />

タイトルは元ページと同じではなく、SNS用にアレンジしたものでも結構です。

Webページの説明文を指定する

Webページの説明文は、meta要素にproperty属性を指定、属性値は「og:description」。
meta要素にcontent属性を指定、属性値にはWebページの説明文を記述します。

<meta property="og:description" content="Webページの説明文" />

文字数が多いとSNS上で切れてしまう事もあるので調整しましょう。

サムネイル画像もしくは動画のURLを指定する

サムネイル画像は、meta要素にproperty属性を指定、属性値は「og:image」。
meta要素にcontent属性を指定、属性値にはサムネイル画像のURLを記述します。

<meta property="og:image" content="サムネイル画像のURL" />

動画を使う場合は、meta要素にproperty属性を指定、属性値は「og:video」。
meta要素にcontent属性を指定、属性値には動画のURLを記述します。

画像もしくは動画の詳細設定を指定する

画像では下記が指定できます。

「og:image:type」：
MIMEタイプとして、image/jpeg、image/gif、image/pngの3種類
「og:image:width」：
画像の幅（ピクセル）
「og:image:height」：
画像の高さ（ピクセル）

動画では下記が指定できます。

「og:video:secure_url」：
動画のセキュアなURL
「og:video:type」：
MIMEタイプとして、application/x-shockwave-flash、video/mp4の2種類
「og:video:width」：
動画の幅（ピクセル）
「ogvideo:height」：
動画の高さ（ピクセル）
「og:video:ima」：
高画質プレビュー用の画像を指定

Webページの種類を指定する

OGP設定では、ページの種類を指定できます。
meta要素にproperty属性を指定、属性値は「og:type」。
meta要素にcontent属性を指定、属性値にはWebページの種類を記述します。

<meta property="og:type" content="Webページの種類" />

種類は、サイトのトップページは「website」、記事ページは「article」。
特に指定しない場合は「website」がデフォルトとして適用されます。

Webサイトのタイトルを指定する

meta要素にproperty属性を指定、属性値は「og:site_name」。
meta要素にcontent属性を指定、属性値にはWebページのタイトルを記述します。

<meta property="og:site_name" content="Webサイトのタイトル" />

Webページの言語を指定する

meta要素にproperty属性を指定、属性値は「og:locale」。
meta要素にcontent属性を指定、属性値にはWebページの言語を記述します。

<meta property="og:locale:alternate" content="Webページの言語" />

種類は、ja_JP（日本語）、en_US（英語）など。
特に指定しない場合は「en_US」がデフォルトです。

複数言語を指定する場合は、「og:locale」ではなく、「og:locale:alternate」を使います。

<meta property="og:locale:alternate" content="ja_JP" />
<meta property="og:locale:alternate" content="en_US" />

OGP画像のパスの指定方法は？

OGP画像にパスを指定する場合、相対パスまたは絶対パスのどちらかを使用できます。

相対パスはWebサイト内のファイルの場所を基準にして、フォルダ構造によって指定されるものです。
例えば、Webサイトのルートディレクトリ（トップ階層）にある「imagesフォルダ」内の画像を指定する場合、以下のようになります。

<meta property="og:image" content="images/example.jpg">

一方、絶対パスはWebサイトのドメインを基準に指定されるものです
上記の画像を絶対パスで指定する場合は、以下のようになります。

<meta property="og:image" content="https://example.com/images/example.jpg">

相対パスを使用する場合は、指定したフォルダ構造が正しいことを確認してください。
絶対パスを使用する場合は、画像が正しい場所に置かれていることを確認します。

FacebookのOGP設定のやり方

Facebook向けのOGPを記述する場合、基本的な設定に加えて、下記のタグを追記する必要があります。

「fb:app_id」

app_id（アプリID）は、FacebookのタイムラインにOGPの情報を表示させるためのプロパティ情報です。

Facebookの開発者アカウントを取得する

アプリIDの取得には、開発者アカウントのIDが必要です。
通常のFacebookアカウントで「Meta for Developers」にアクセスすると、開発者アカウントが発行されます。

アプリID（App-Id）を取得する

次に、その開発者アカウントを使って「アプリID（App-Id）」を取得します。
Meta for Developersの「マイアプリ」から「アプリの作成」を選択。
表示名に名前を設定して「アプリIDを作成してください」をクリックすると、ダッシュボード上に15桁のアプリIDが発行されます。

アプリを公開する

Meta for Developersの「設定」から「ベーシック」を選択します。
プライバシーポリシーのURLを入力。
「プラットフォームの追加」でWebサイトのURLを入力して、「変更を保存」をクリック。
ページ上部の「ステータス：開発中」をオンにして、アプリのカテゴリを指定して「承認」を選択。
ステータスが「ライブ」になったら終了です。

metaタグに15桁のアプリIDを記述する

基本的な設定のタグに続けて、Facebook用のOGP設定を追記します。

<meta property=”fb:app_id” content=”xxxxxxxxxxxxxxx” />

X（旧：Twitter）のOGP設定のやり方

X（旧：Twitter)）向けのOGPを記述する場合、基本的な設定に加えて、下記のタグを追記する必要があります。

表示形式（twitter:card）を設定する

WebページがTwitterでシェアした場合の表示は「twitter:card」と呼ばれ、4種類のデザインがあります。
このうち、Webサイトの記事やブログ向けとなるのが、下記の2つです。

「summary」
「summary_large_image」

「summary」では、下記が表示されます。

小型で正方形のサムネイル画像
ページのタイトル
説明文

タイトルを強調したい時に使用します。

タグは、以下の通りです。

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

「summary_large_image」では、下記が表示されます。

大型で横長のサムネイル画像
ページのタイトル
説明文

summaryよりもサムネイルが大きいので、画像を強調したい時に使用します。

タグは、以下の通りです。

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

ユーザー名（twitter:site）を設定する

任意のTwitterユーザー名（アカウントID）を、OGPの表示内に出せる機能です。
Webページの執筆者やサイトの管理者などがTwitterアカウントを持っている場合、設定しておくことで情報の連携が図れます。
プロフィールページに飛ぶので、フォロワーが増えるかもしれません。

タグは、以下の通りです。

<meta name="twitter:site" content="@ユーザー名">

ユーザー名の前にアットマークを入れてください。

OGP画像を魅力的にするポイント

OGPでは効果的な画像の使い方が必須です。
画像を魅力的にするためには、以下のポイントに注意すると良いでしょう。

画像のサイズやアスペクト比
画像の色彩やコントラスト
魅力的な構図やストーリー性
ユーザーやテーマに合った絵柄

画像のサイズやアスペクト比

OGPに使用する画像のサイズに厳密な決まりはありませんが、一般的には以下のようなサイズが推奨されています。

推奨されるアスペクト比は「約1.91：1」です。
これは、画像の横幅が、高さの約1.91倍であることを意味します。

一般的に推奨される画像の最小サイズは「600×315ピクセル」です。
あくまで最小サイズなので、実際にはこれより大きなサイズが良いでしょう。

最適なサイズとして考えられるのは、この2倍となる「1200×630ピクセル」です。
このサイズであれば画像は鮮明に表示され、SNS上での視覚的な効果が期待できます。

一方、最大サイズはピクセル数より画像容量の方が肝心です。
SNSでは画像の最大サイズが決められており、最大でも5MBを超えないようにします。
容量が大きい画像はページの読み込み速度を遅くし、検索エンジンからの評価にも悪影響を与えるからです。

ただしプラットフォームによって表示方法が異なるため、複数のアスペクト比や画像サイズをテストして、最適な設定を見つけるようにしてください。

画像の色彩やコントラスト

サムネイルに高品質な画像を使用することはOGP施策の前提です。
ぼやけた画像では魅力的になりません。
クリアで鮮明であるほど、写真の魅力は高まります、高品質のストックフォトを使う手もあるでしょう。

自分で撮った写真を使う場合、色彩やコントラストなどを上手く調整するようにしてください。
多くの場合、撮ったままより手を加えた方が見栄えの良い写真になります。
スマホならアプリを使えば、明るさなどの調整も簡単です。

魅力的な構図やストーリー性

サムネイル画像には、その1点でユーザーの目を引くクオリティが求められます。
鮮やかな景色など写っている内容も重要ですが、写真として構図のバランスが取れていて、何らかのストーリーを感じさせるようなら文句なしです。
ユーザーの興味を引きつける要素を含ませましょう。

ユーザーやテーマに合った絵柄

写真を選ぶ際には、ページの目的やターゲットの属性に合ったものを選びましょう。
下記のように画像には様々なイメージを伝える力があります。

シンプルなイラスト：
分かりやすいイラストは幅広いユーザーにイメージを共有させます。
カラフルな色彩：
インパクトのある色使いは、多くの人の目を引きやすく、特に若いオーディエンスやカジュアルなコンテンツに適しています。
レトロなデザイン：
昭和や大正などノスタルジックな雰囲気を醸し出すデザインは、特定の年代の人に共感を与えるでしょう。
リアルな写真：
現実感や信頼性を強く伝える効果が期待できます。
人物写真：
社会や家庭など、生活に関わる情報を伝える時に効果的です。

OGP設定の確認ツールと使い方

OGPの設定が上手くできているか確認できる、便利なツールがいくつかあります。
特にプラットフォームの運営者が提供している下記のツールは、日常的に使いこなすようにしておきましょう。

Facebookシェアデバッガー
Twitter Card Validator

Facebookシェアデバッガー

Facebookが提供している「Facebookシェアデバッガー」は、OGPタグの記述内容の確認や修正ができる純正ツールです。
指定したURLにおける、タイトル・画像・説明文などのOGPタグの情報を表示します。

使い方は、まず「Facebookシェアデバッガー」にアクセス。
入力ボックスにWebページのURLを入れ、「デバッグ」ボタンをクリックしてください。

すると、以下の内容が表示されます。

前回のURLのスクレイピングの日時とリンク情報
設定されてるOGPのタグ情報

エラーが出る場合、取得されたOGPタグの情報を確認し、必要に応じて修正をしてください。

Twitter Card Validator

Twitterでは「Twitter Card Validator」というツールで、Twitterカードに関連するOGP情報を確認できます。
「Card Validator」のページにアクセス。
入力ボックスにWebページのURLを入れ、「Preview card」ボタンをクリックしてください。

すると、WebページのOGP設定が確認できます。

OGPが反映されないときの対処法

OGPの設定がうまく反映されない場合は、以下の対処を試してください。

キャッシュのクリア

ページのOGP情報を途中で変えた場合、すぐに反映されない事がよくあります。
その原因として考えられるのが、古い情報がキャッシュされているということです。
多くの場合、ブラウザのキャッシュをクリアし、ページを再読み込みすると解決します。

OGPタグのチェック

タグを記述したHTMLに誤りがあると、設定が反映されません。
ソースコードを確認し、タグが正しく記述されているか確認しましょう。
その際、「Facebookシェアデバッガー」や「Twitter Card Validator」を使うと効率的です。

画像のURL

URLの記述が間違っていると、画像が表示されません。
特に相対パスを使っている場合は、記述に間違いがないか確認しましょう。

また画像URLは「http://」ではなく「https://」で始まっている必要があります。
多くのプラットフォームでは、セキュリティ上の理由で「https://」で始まるURLのみをサポートしているからです。

推奨された画像のサイズ

推奨されたサイズや縦横比から大きく外れていると、画像が的確に表示されません。
またプラットフォームによっても推奨される内容が変わってくるので、下記を参考にしてください。

Facebook：
1200×630ピクセル
Twitter：
1200×675ピクセル
Instagram：
最大1080×1080ピクセル（正方形）、1080×1350ピクセル（縦長）、1080×608ピクセル（横長）
LinkedIn：
1200×627ピクセル
Pinterest：
1000×1500ピクセル以上

OGP (Open Graph Protocol)とは？画像設定方法やタグの記述方法、表示されないときの対処法

OGPとは

OGP設定の必要性

伝えたい内容が一瞬で伝わる

画面占有率が増えて目に付くようになる

ブランドイメージに寄与する

OGPの基本的な記述方法と設置場所

HTMLの記述例

OGPの使用を宣言する

WebページのURLを指定する

Webページのタイトルを指定する

Webページの説明文を指定する

サムネイル画像もしくは動画のURLを指定する

画像もしくは動画の詳細設定を指定する

Webページの種類を指定する

Webサイトのタイトルを指定する

Webページの言語を指定する

OGP画像のパスの指定方法は？

FacebookのOGP設定のやり方

Facebookの開発者アカウントを取得する

アプリID（App-Id）を取得する

アプリを公開する

metaタグに15桁のアプリIDを記述する

X（旧：Twitter）のOGP設定のやり方

表示形式（twitter:card）を設定する

ユーザー名（twitter:site）を設定する

OGP画像を魅力的にするポイント

画像のサイズやアスペクト比

画像の色彩やコントラスト

魅力的な構図やストーリー性

ユーザーやテーマに合った絵柄

OGP設定の確認ツールと使い方

Facebookシェアデバッガー

Twitter Card Validator

OGPが反映されないときの対処法

キャッシュのクリア

OGPタグのチェック

画像のURL

推奨された画像のサイズ

7日間0円トライアル実施中！