OGP設定とは？SNSごとの設定方法や最適な画像サイズ、注意点などを解説

2025.1.9

OGP設定は、SNSでコンテンツをシェアする際、そのコンテンツの魅力を最大限に引き出すために欠かせません。
現代では、SNSでコンテンツがシェアされ、拡散されることが当たり前になっています。
爆発的な拡散力により、一夜にして知名度が急上昇することもあります。
このような状況下において、GDP設定は必要不可欠な要素といえるでしょう。
この記事では、OGP設定の概要のほか、OGP設定をすべき理由を解説します。
OGP設定をする方法のほか、サムネイル画像の適切なサイズや縦横比、設定時の注意点なども解説しますので、ぜひ最後までご覧ください。

執筆者

マーケティングサポート「バンソウ」のメディア管理人

株式会社クリエイティブバンクのマーケティングサポート「バンソウ」のメディア管理人。得意分野は、SEO全般・サイト分析・オウンドメディア・コンテンツマーケティング。バンソウはクライアント様のBtoBマーケティングをサポートするサービスです。詳しい内容はこちらをご覧ください。

OGP設定とは
OGPを設定すべき理由とは
OGP設定をする方法
1. STEP❶head要素にprefix属性を追加する
2. STEP❸head内に項目を追加する
OGP設定に適したフォーマット・画像サイズとは
X（旧Twitter）でOGP設定をする方法
1. twitter:card
2. twitter:site
FacebookでOGP設定をする方法
1. fb:app_id
OGP設定をする際の注意点
OGP設定が反映されないときの対処法
OGP設定を確認できるツール
まとめ

OGP設定とは

AdobeStock_928201692

OGP（Open Graph Protocol）とは、SNSでコンテンツをシェアした際に、任意で設定したタイトルや画像、コンテンツの概要などの情報を伝えるためのHTML要素です。
OGPを設定することをOGP設定と呼びます。
OGP設定をすることで、SNSでシェアされた際に設定した情報が反映されるため、ユーザーにWebページの情報が伝わりやすくなります。

OGP設定をすると、SNSに記事をシェアした際に以下のように表示されます。

OGPを設定すべき理由とは

AdobeStock_845657878-4

OGP設定は、SNSでコンテンツがシェアされた際にWebページの概要への視認性を高めるものです。
HTML要素であるOGP設定には手間がかかることが予想されますが、設定すべきなのでしょうか。
ここでは、OGP設定をすべき理由を解説します。

認知拡大へとつながる

OGP設定をしてSNSでの視認性を高めることにより、企業やサービス、商品などの認知拡大へとつながります。
目を引くサムネイル画像や、魅力的なタイトルなどを設定すると、投稿された際に投稿が目立ち、訴求力が高まることが考えられます。
多くの人の目を引くOGP設定をすることで、Webページにアクセスする人が増加したり、さらにシェアされたりする可能性があり、結果として認知拡大へとつながるでしょう。

SNSでシェアされSEO評価の向上が見込める

ユーザーが、思わずシェアしたくなるような画像やタイトルなどが設定されているコンテンツがSNSで広まれば、被リンクも増加する可能性があり、SEO評価が向上することも考えられます。
被リンクとは、外部のWebサイトに設置された自社のWebページへのリンクのことです。

Googleは、「Google が掲げる 10 の事実」にて、被リンクをユーザーによる投票とし、票が集まっているWebページをユーザーにとって有益な情報を提供しているコンテンツだと判断すると述べています。
参照：4. ウェブ上の民主主義は機能する。｜Google が掲げる 10 の事実

SNSで数多くのシェアが獲得できればSEO評価の向上が見込めることから、OGP設定はすべきであるといえるでしょう。

信頼性の向上が見込める

OGP設定がされておらず、情報が何もない場合は、リンク先への信頼性が乏しくなり、クリックを控える人もいるでしょう。
その中に今後顧客になる可能性のある見込み客が含まれていた場合、さまざまな機会損失につながる可能性もあります。
OGP設定をすることで、ユーザーはアクセスする前にWebページの概要を知れるため、リンク先に不信感を抱くことが少なくなります。
機会損失のリスクを減らし、リンク先の信頼性を向上させられる点もメリットといえるでしょう。

OGP設定をする方法

AdobeStock_338807683-2

企業や商品、サービスの認知拡大へとつながったり、SNSでシェアされSEO評価の向上も見込めたりすることから、OGP設定はすべきであることがわかったのではないでしょうか。
ここからは、実際にHTML内にOGP設定をする方法を解説します。

STEP❶head要素にprefix属性を追加する

はじめに、HTMLソースコード内のhead要素に、prefix属性を追加します。
prefix属性とは、簡潔に言うと、これからOGP設定をすることを宣言するものです。

HTMLソースコードのhead要素内に、以下のように記述しましょう。


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

STEP❸head内に項目を追加する

続いて、head内に設定したいOGPをmetaタグを使用して記述していきます。
metaタグとは、検索エンジンやブラウザに対してWebページの情報を伝える役割を担うタグです。

記述例は以下のとおりです。


<meta property="og:url" content="WebページのURL">
<meta property="og:type" content="Webページの種類">
<meta property="og:title" content="Webページのタイトル">
<meta property="og:description"content=" Webページの説明文">
<meta property="og:site_name"content="Webサイト名">
<meta property="og:image"content=" サムネイル画像のURL">

ここからは、それぞれの項目の詳細についてご紹介します。

og:url

「og:url」は、OGP設定をするWebページを指定する属性値です。
このとき、URLは相対パスではなく、絶対パスで記述しましょう。

絶対パスの記述例は以下のとおりです。


<meta property="og:url" content="https://www.sales-dx.jp/blog">

絶対パスについてより詳しく知りたい方は「サイトルート相対パスとは？相対・絶対パスの意味や記述例・確認方法を解説」の記事をご覧ください。

og:type

「og:type」とは、Webページの種類を指定する属性値です。

代表的なWebページの種類は以下のとおりです。

website：Webサイトのトップページ
blog：ブログのトップページ
article：コンテンツページなどのトップページ以外のページ
product：製品紹介ページ

例えば、Webサイトのコンテンツページを指定する場合は以下のように記述します。


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

og:title

「og:title」とは、Webページのタイトルを指定する属性値です。
SNSでシェアされた際の読みやすさを考慮して、20文字以内で設定するのが好ましいとされています。

og:description

「og:description」とは、Webページの説明文を指定する属性値です。
「og:title」と同様に、SNSでシェアされた際にユーザーが読みやすいよう、80文字から90文字以内で設定するのがよいとされています。

og:site_name

「og:site_name」は、Webサイトの名前を指定する属性値です。
バンソウサイトを指定する場合は、以下のように記述します。


<meta property="og:site_name" content="バンソウ">

このように指定することで、SNSにシェアされた際にWebサイト名を表示させることができます。

og:image

「og:image」とは、SNS上にシェアされた際に表示されるサムネイル画像を指定する属性値です。
「og:url」と同様に、こちらも絶対パスで記述する必要があるため、記述時には気をつけるようにしましょう。

OGP設定に適したフォーマット・画像サイズとは

AdobeStock_176687939-1

OGP設定で画像を設定するために、「og:image」を使用するのは先述のとおりです。
画像に関するフォーマットは、JPEGやPNG、GIFなどがありますが、推奨されているのはJPEGです。
PNGはJPEGよりも画質がよくなるものの、ファイルサイズが大きくなるというデメリットがあります。
ファイルサイズが大きくなるという点ではGIFも同様です。
OGP設定をする際には、画像サイズが大きくなると表示に時間がかかることもあるため、フォーマットはJPEGを使用するのがおすすめです。

どのSNSにおいても、JPEGが望ましいことは共通ですが、画像サイズはSNSによって推奨されているピクセル数と縦横比が違います。
適切なサイズで設定することで、画像が見切れてしまったり、比率が変わってしまったりせず、より効果的に表示させられるでしょう。

それぞれのSNSにおける推奨ピクセル数や縦横比は下記のとおりです。

SNS	推奨ピクセル数	推奨縦横比
X	1200×630	1.91：1
Facebook	1200×630	1.91：1

※詳しくはそれぞれのSNSのヘルプページをご覧ください。

X（旧Twitter）でOGP設定をする方法

AdobeStock_668569409

「OGP設定に適したフォーマット・画像サイズ」でご紹介したように、Xでは画像サイズが「1200×630」、縦横比は「1.91：1」が推奨サイズです。
これを踏まえ、こちらではXでOGP設定をする方法を解説します。

Xでは、「OGP設定をする方法」で紹介した内容と同様に、head内に以下のように記述することでOGP設定ができます。

<meta name="twitter:card" content="カードの種類">
<meta name="twitter:site" content="@ユーザー名">

それぞれの項目の詳細について解説します。

twitter:card

「twitter:card」とは、Xでどの種類でOGP設定の内容を表示させるかを指定する属性値です。
Xで使用できるカードの種類は主に4つあります。

summary

「summary」は、縦横比約1：1のサムネイル画像と、Webサイトの名前やコンテンツのタイトル、URLが表示されるタイプのカードです。
後述する「summary_large_image」と比較して、カード内に表示される情報が多くなります。

summary_large_image

「summary_large_image」とは、「summary」と比較してサムネイル画像が大きく表示されるタイプのカードです。
画像の下部に重なるかたちで、タイトルが表示されるようになっています。

app

「app」とは、アプリを配布するタイプのカードです。
アプリ名だけではなく、アプリアイコンや概要、評価や価格なども表示できます。

player

動画や音楽などを表示するタイプのカードです。
X上で、指定した動画や音楽を再生することができます。

twitter:site

「twitter:site」とは、＠から始まるXのユーザーIDを記述する属性値です。
例えばGoogle Japanの公式Xアカウントの場合、「@googlejapan」となります。

FacebookでOGP設定をする方法

AdobeStock_472647893

「OGP設定に適したフォーマット・画像サイズ」でご紹介したように、Facebookでは画像サイズが「1200×630」、縦横比は「1.91：1」が推奨サイズです。
Facebookでは、「OGP設定をする方法」でご紹介した項目のほかにも、「fb:app_id」という独自の属性値が使用できます。

fb:app_id

「fb:app_id」とは、Meta for Developersから取得できるFacebook用のアプリIDが指定できる属性値です。
「fb:app_id」は、head内に以下のように記述します。

<meta property="fb:app_id" content="App_id（15文字の半角数字）">

OGP設定をする際の注意点

AdobeStock_582432908-3

ここまで、XやFacebookでOGP設定をする方法についてご紹介しました。
次に、OGP設定をする際の注意点を解説します。

同じ内容のOGP設定をしない

OGP設定は、Webページの内容の視認性を高めるものであり、URLをクリックする前にユーザーにWebページの情報を伝えるためにあります。
そのため、1つずつそのWebページに沿った内容のOGP設定をするのが好ましいといえます。
SNSにシェアされても、同じOGP設定の場合は伝わる内容が限定的になってしまうため、それぞれのWebページに合ったOGP設定をしましょう。

URLは誤りなく絶対パスで記述する

「og:url」を使用してURLを指定する場合、先述のとおり必ず絶対パスで記述しましょう。
また、URLに誤りがないように記述することも重要です。
もしURLに誤りがあり、リンク切れを起こしている場合はシェアされてもユーザーがWebページにアクセスできません。
URLを記述する際には、正確なものを入力しましょう。

SNSごとに画像サイズを変更する

「OGP設定に適したフォーマット・画像サイズとは」でも紹介したように、SNSごとに推奨されている画像サイズや縦横比が違います。
そのため、各SNSに合ったサイズの画像を用意する必要があります。
サイズが異なると、レイアウトが崩れてしまい見づらくなってしまうため、画像サイズには気をつけましょう。
Xの場合は、Google Chromeの拡張機能である「Twitter Card Validator」でどのように表示されるのかが確認できます。
Facebookの場合は、Meta社が運営している「シェアデバッガー」で確認するようにしましょう。

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

対処法 (2)-2

ここまでご紹介した注意点に抵触するようなこともなく、正常に設定できているにもかかわらず、OGP設定が反映されないことがあります。
このようなケースでは、XやFacebookなどのクローラーが新しいWebページの情報を取得できていない可能性が高いと考えられます。
「Twitter Card Validator」や「シェアデバッガー」でOGP設定が機能しているのに、実際の画面で反映されていない場合は、対処法としてキャッシュクリアをお試しください。

OGP設定を確認できるツール

AdobeStock_525040386-2

先にご紹介した、「Twitter Card Validator」や「シェアデバッガー」以外にも、OGP設定が機能しているかどうかを確認できるツールはあります。
XやFacebookだけでなく、すべてのOGP設定の確認ができるようになっているため、OGP設定後には必ず機能しているか確認しましょう。
最後に、OGP設定を確認できるツールをご紹介します。

OGP確認ツール

引用：OGP確認ツール

「OGP確認ツール」とは、Webサイト内のOGPとTwitter（X）カードを表示するツールです。
対象となるURLを入力したら、「解析する」をクリックすることで結果が表示されます。

ラッコツールズ

引用：OGP確認｜ラッコツールズ

「ラッコツールズ」の中にある「OGP確認」を使用することでも、OGP設定が機能しているか確認できます。
Facebook、Xなどの表示が確認できるほか、パソコン版だけではなく、スマートフォン版とアプリ版にも対応しています。

OGP画像シミュレータ

引用：OGP画像シミュレータ

「OGP画像シミュレータ」では、画像をドラッグ＆ドロップするだけで、それぞれの画像サイズにおいてどのような表示になるかが確認できます。
サムネイルが長方形なのか正方形なのかで、画像が引き延ばされたり、部分的な表示になってしまったりと、変化がある可能性も考えられるため、あらかじめ確認しておくとよいでしょう。

まとめ

この記事では、OGP設定について詳しくご紹介しました。
OGP（Open Graph Protocol）とは、SNSでコンテンツをシェアした際に、任意で設定したタイトルや画像、コンテンツの概要などの情報を伝えるためのHTML要素のことです。
OGP設定をすることで、SNSでシェアされた際にコンテンツの視認性を高め、ユーザーがアクセスする前にWebページの情報を伝えられます。
まだOGP設定をしていないという方は、この記事でご紹介した「OGP設定をする方法」を参考にしながら設定してみましょう。
設定が済んだら、「OGP確認ツール」や「ラッコツールズ」などを使用して、OGP設定が機能しているか確認することをおすすめします。