OGP（Open Graph Protcol）とは？設定方法や画像の確認方法を詳しく解説

最終更新日: 2023-11-27

SEO

最終更新日: 2023-11-27

SEO

OGPとは、SNSでWebページがシェアされた際に、ページのタイトル、URL、概要、画像などの情報を伝えるために設定されるHTML要素です。適切にOGPを設定することで、視覚情報が増えるため、ユーザーのクリックを促す効果があります。

当記事では、OGPを設定する方法や注意点について詳しく解説します。

SNSでWebページをシェアすることでサイトの流入数を増加させたい方は、ぜひ参考にしてみてください。

検索順位を上げるためのヒント「SEOチェックリスト100選」を今すぐ無料でダウンロードする

OGPとは

OGPとは、「Open Graph Protocol」の略称であり、WebページがTwitterやFacebookなどのSNSでシェアされる際に、ページのタイトル、URL、概要、画像などの情報を伝えるために設定されるHTML要素です。

▼Facebook、Twitterで表示される場合の例

OGPを設定していれば、SNSなどでWebページのタイトルや画像、URL、概要などの情報を表示させることができます。ユーザーに訴求できる情報量が増えるため、クリックを促しやすくなります。

OGP設定を行うべき理由

OGP設定を行わずに、自社サイトのWebページがSNSでシェアされると、SNSのクローラーがOGPを認識できず、本来表示させたい内容と異なる説明文や画像がSNS上に表示されることがあります。

以下はOGP設定を適切に行わずにTwitterでシェアした例です。

タイトルが途中で切れている
ディスクリプションには、意図しない形（記事の冒頭箇所を抜粋）で反映されている
画像が小さく切り取られている

などWebページの内容が分かりにくい状態です。

一方、OGPを適切に設定していれば、SNSで表示させるタイトルやサムネイル画像を自由に設定でき、意図しない説明文や画像が表示されることを防げます。その結果、ユーザーに正しく情報を伝えられるため、（とくに画像で目を引くことにより）クリックを促してWebページへの送客数の増加に役立ちます。

検索順位を上げるためのヒント「SEOチェックリスト100選」を今すぐ無料でダウンロードする

OGPの基本的な設定方法

OGPは、HTMLに専用の記述を行うことで設定することができます。はじめに、head要素にOGPに関する指令を出すことを示す「prefix属性」を指定し、OGPの使用を明記します。

次に、metaタグ（HTMLに記述されるタグ）でページの各要素の情報を以下のように記述します。

＜要素の説明＞

meta：検索エンジン、ブラウザ（Chomeなど）にWebページの内容を認識させるためのHTMLタグ。文書の文字コードに関する情報であることを示す。
property属性：操作の対象が持つ固有の性質・属性を指す。
og:~：「og」の記述はOGBの種類を指定しています。ページのタイトル、URLなど、どの種類のOGPなのかを示している。
content属性：メタデータの内容を設定する属性。サイト名、URLなどが記述される。

具体的に設定するフローについてみていきましょう。

➀prefix属性を指定する

先述したように、OGPを設定するには、まずHTMLのhead要素内にprefix属性を指定する必要があります。prefix属性には、「og:https//ogp.me/ns#」を記述することが一般的です。具体的には、以下のように記述します。

なお、prefix属性はなくても問題ありませんが、OGPの公式ドキュメントでは設定が推奨されています。

②サイト名を記載する

OGPでサイト名を記載する場合は、「og:site_name」という属性値を使用します。

具体的には、meta要素にproperty属性を指定し、属性値として「og:site_name」と記述します。さらに、content属性を指定して、サイト名を記述します。記述方法は以下の通りです。

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

OGPでページタイトルを指定する場合は、属性値に「og:title」を使用します。

具体的には、meta要素にproperty属性を指定し、属性値として「og:title」と記述します。さらにcontent属性を指定し、ページタイトルを記述します。記述方法は、以下の通りです。

④ページタイプを指定する

OGPでページタイプを指定する場合は、属性値に「og:type」を使用します。ページタイプは以下の3種類から選択するといいでしょう。

ページタイプ	記述内容
トップページ	website
トップページ以外	article
製品紹介ページ	product

具体的には、meta要素にproperty属性を指定し、属性値に「og:type」と記述。そして、content属性にはページタイプを記述します。記述方法は、以下の通りです。

⑤ページURLを指定する

OGPでページURLを指定する場合は、属性値に「og:url」を使用します。

具体的には、meta要素にproperty属性を指定し、属性値として「og:url」と記述しましょう。さらに、content属性にはページURLを記述します。記述方法は、以下の通りです。

ただし、ページURLを指定する際には、以下の点に注意してください。

相対URLでなく絶対URLで記述する
誤ったURLを記述しない

適切にページURLが記述されていないと、OGPにより表示されたリンクをクリックしたユーザーが、コンテンツを閲覧できなくなります。

⑥サムネイル画像を指定する

OGPでサムネイル画像を指定する場合は、属性値に「og:image」を使用します。

具体的には、meta要素にproperty属性を指定し、属性値として「og:image」と記述します。さらに、content属性にはサムネイル画像のURLを指定します。記述方法は以下の通りです。

サムネイル画像を設定する際はページURLと同様に、以下の点に注意してください。

相対URLでなく絶対URLで記述する
誤ったURLを記述しない

適切にサムネイル画像のURLが記述されていないと、本来表示させたかった画像が表示されません。

⑦ページ説明文を指定する

OGPでページ説明文を指定する場合は、属性値に「og:description」を使用します。

具体的には、meta要素にproperty属性を指定し、属性値として「og:description」と記述します。content属性にはページの説明文（概要）を記述しましょう。記述方法は、以下の通りです。

ページの説明文の文字数は、80〜90文字程度が適しています。

説明文を100文字以上にした場合は、説明文が途中で途切れてしまいます。説明文は100文字から120文字で設定されることが多いため、OGPに活用する目的で短い説明文を用意することをおすすめします。

Twitterでシェアするための設定方法

TwitterでWebページをシェアする場合には、上記の基本的なOGPの記述に加えて「Twitterカードの種類」と「＠Twitterユーザー名」を記述する必要があります。記述例は以下の通りです。

それぞれについて詳しく解説します。

Twitterカードを指定する

Twitterカードを指定してOGP設定を行う場合は、twitter:cardを使用します。Twitterカードとは、ツイートに記載したURLの画像やページタイトルが表示される機能です。

▼Twitterカードの例

Twitterカードを設定することで、ページタイトルや画像がツイート内に表示されるため、ユーザーのクリックを促す効果が期待できます。

Twitterカードを指定してOGPを設定する際は、meta要素にnameproperty属性を指定し、属性値として「twitter:card」を記述します。そして、content属性には「summary」「summary_large_image」「app」「player」といったTwitterカードの種類を記述しましょう。記述方法は、以下の通りです。

Twitterカードのcontent属性を設定する際は、以下の表の内容を参考にしてください。

名称	内容
summary	ブログ記事で使用する。OGPの画像は、1:1にトリミングした小さいものが表示される。
summary_large_image	ブログ記事で使用する。OGPの画像は、1.91:1の比率で表示される。
app	アプリで使用する。
player	動画やスライドショーで使用する

ユーザー名を指定する

Twitterのユーザー名を指定してOGP設定を行う場合は、属性値「twitter:site」を使用します。

Twitterのユーザー名とは、Twitterアカウント固有の名前であり、@から始まる英数字の文字列です。Twitterのユーザー名は、アカウントへのログインに使用されるだけでなく、ツイートやリプライ、ダイレクトメッセージの送信元として表示されます。

Twitterのユーザー名を指定してOGPを設定する際は、meta要素にname属性を指定し、属性値として「twitter:site」と記述します。そして、content属性には「@」から始まるTwitterのユーザー名を記述してください。記述方法は、以下のようになります。

Facebookでシェアするための設定方法

Facebookでシェアする場合は、基本的なOGPの記述に加えて「Facebook App-ID」の記述が推奨されています（記述がなくても特に問題はありません）。

Facebook用にOGPを設定する際は、meta要素にproperty属性を指定し、属性値として「fb:app_id」を記述します。そして、content属性にはFacebookアプリのID(App-ID）を記述してください。FacebookアプリのIDは15文字の半角数字になります。記述方法は、以下の通りです。