OGPとは？設定する理由や設定方法を解説｜omuuu

Top

ノウハウ一覧

OGPとは？設定する理由や設定方法を解説

マーケティング

おすすめ

2023-02-28

8min

この記事では、OGPを設定する理由や設定方法を解説しています。

OGPとは

OGPとは、「Open Graph Protocol(オープン・グラフ・プロトコル)の略で、WebサイトをFacebook・Twitter・LINEなどのSNSで共有するときに表示されるタイトル、URL、画像、要約などを表示させるHTMLソースに記述するタグ情報のことです。

OGPを設定する理由

OGPを設定する理由は次のとおり3つあります。

・Facebook・TwitterなどのSNSクローラーがOGPがないと認識できないから
・SNSでのユーザーの興味関心を最大限引き出すから
・SNS側が自動的に画像や要約を表示してしまうから

一つずつ順番に解説していきます。

Facebook・TwitterなどのSNSクローラーがOGPがないと認識できないから

OGPを設定する理由1つ目は、Facebook・TwitterなどのSNSクローラーがOGPがないと認識できないから。

Webサイトを作成していざ、記事をFacebookやTwitterでシェアしようとしても、OGPの設定がなければ表示すらされません。

なぜなら、FacebookやTwitterに表示するにはOGPの設定が必須だからです。

例えば、この記事をFacebookに共有する際にも、「Facebookに記事を共有するときのタイトルは『OGPとは？設定する理由や設定方法を解説』と表示して、記事要約はメタディスクリプションを表示してください。」とあらかじめOGPで設定しなくてはいけないのです。

SNSでのユーザーの興味関心を最大限引き出すから

OGPを設定する理由2つ目は、SNSでのユーザーの興味関心を最大限引き出すためです。

OGPを設定すると、あなたが狙ったタイトルや説明文、画像がSNS上で表示されるので、ユーザーの興味関心や訴求力が最大限引き出せます。

サイトへのアクセス数やコンバージョン率などが悪い場合には、SNSのタイトルや説明文を改善するPDCAも回しやすくなります。

SNS側が自動的に画像や要約を表示してしまうから

OGPを設定する理由3つ目は、OGPを設定していないとSNS側が自動的に画像や要約を表示してしまうからです。

Webサイトや記事をSNSでシェアされたとき、OGPが設定されていないWebページでは、SNSのシステム側で自動的にタイトルや説明文、イメージ画像が設定されてしまいます。

せっかくシェアしても、ユーザーに「何が書かれているのか」「記事を読むとどんなことが知れるのか」がわかりにくくなる可能性があります。

OGPの設定方法

OGPの設定方法は、次の3つの流れで設定できます。

1.　Webページのhead要素を開く
2.　head要素内にOGPのプロパティを定義するmetaタグ(下記)を追加します
3.　OGPが正しく設定されたかFacebookやTwitterのデバッグツールで確認する

head要素内に定義するOGPのmetaタグは次のとおりです。

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

head要素に「<head prefix="og: https://ogp.me/ns#">」を記述すると、サイトやページでOGPを使用することを宣言できます。宣言後にページのURLやタイトル、説明文などを記述していきます。

記述方法を一つずつ順番に解説していきます。

og:title

og:titleはサイトやページのタイトルを指定できます。
タイトルは記事のタイトルをそのまま使うより、各種SNSに最適化したタイトルを設定するのがおすすめです。

例えば、この記事ではSEO観点で「OGPとは？設定する理由や設定方法を解説」といったタイトルとなっていますが、FacebookやTwitterで目を引くタイトルにはなっていません。

Twitterでのタイトルは「あなたのサイトは大丈夫？3分でできるOGPの設定方法」といったように、SNSのユーザーの目を引くタイトルを個別に設定できるのがOGPの強みです。

og:type

og:typeはページの種類を指定できます。
ページの種類によってSNSでの表示形式が違います。
OGPで指定できるページの種類は次のとおりいくつか種類があります。

1.　website: 一般的なウェブページで、主に企業や団体のウェブサイト、ブログなどに使用されます。
2.　article: ウェブ上で公開される記事やニュースなどのコンテンツに使用されます。
3.　book: 書籍に関するページに使用されます。書籍のタイトル、著者、出版社、発売日などの情報を含むことができます。
4.　profile: 個人のプロフィールページに使用されます。個人の名前、プロフィール画像、自己紹介文などの情報を含むことができます。
5.　video: 動画コンテンツに使用されます。動画のタイトル、説明、サムネイル画像、再生時間などの情報を含むことができます。
6.　music: 音楽コンテンツに使用されます。楽曲のタイトル、アルバム名、アーティスト名、再生時間などの情報を含むことができます。
7.　product: 商品ページに使用されます。商品名、価格、説明、画像などの情報を含むことができます。

その他のページ種類はThe Open Graph protocol(https://ogp.me/#types)で確認できます。

og:description

og:descriptionはサイトやページの説明文を指定できます。
説明文は80～100文字程度で記入するのがおすすめです。

なぜなら、SNSで表示されるのは100文字前後だからです。
すでにSEOのために記事ごとでディスクリプションを設定している場合にはそのまま使用してもいいです。
ただ先程タイトルでも説明したとおり、SEOの最適なディスクリプションとSNSで最適なディスクリプションは異なります。
使用するSNSに合わせて、OGPのディスクリプションも変えるのがおすすめです。

og:url

og:urlはサイトのURLを指定できます。
OGPでは、絶対URL(絶対パス)を使用する必要があります。つまり、「http://」や「https://」から始まる完全なURLを指定する必要があります。逆に「http://」や「https://」から始まらない「/articles/3pbvqae6yb9g」と記述する相対URL(相対パス)では正しく表示されません。

その他の注意点としては、リダイレクトされるURL、カノニカルタグで指定されているURLなどはSNSでの共有時にエラーが発生する可能性があるので注意しましょう。

og:site_name

og:site_nameはサイト名を指定できます。

例えば、このサイトでOGPを設定するなら、サイト名は「omuuu(オム－)」となりますので、記述は「<meta property="og:site_name" content="omuuu(オム－)" />」となります。

og:image

og:imageは画像を指定できます。

記事のアイキャッチ画像やサムネイル画像を指定します。
ただタイトルやディスクリプションと同様でSEO観点でのアイキャッチ画像と、SNSのユーザーの目を引く画像は異なる可能性が高いのでSNSに最適化された画像を指定するのがおすすめです。

SNSごとでの最適な画像サイズは次のとおりです。

・Facebook: 最低でも1200 x 630px
・Twitter: 最低でも1200 x 675px
・LinkedIn: 最低でも1200 x 627px
・Instagram: 最低でも1080 x 1080px

Facebook OGPの設定方法

Facebook OGPの設定方法は次のとおりです。

1.　Webページのhead要素を開く
2.　head要素内にOGPのプロパティを定義するmetaタグ(下記)を追加します
3.　FacebookのOGP設定「fb:App_id」を指定する
4.　OGPが正しく設定されたかFacebookデバッグツール「シェアデバッガー(https://developers.facebook.com/tools/debug/)」で確認する

head要素内に定義するOGPのmetaタグは次のとおりです。

<head prefix="og: https://ogp.me/ns#">
<meta property="og:url" content=" ページのURL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページのタイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像のURL" />
<meta property=”fb:app_id” content=”App-ID(15文字の半角数字)”>

FacebookのOGP設定「fb:App_id」

Facebookでは基本的なmetaタグに加えて、FacebookのOGP設定「fb:App_id」を指定する必要があります。

「app_id」とは、Facebookアプリケーションの識別番号（ID）です。
OGPで「app_id」を指定すると、Webサイトの運営者をFacebookに伝えられて、いいね数やどれくらいの人が見てくれたかなどのトラフィック分析やFacebookインサイトを確認できるようになります。

「app_id」は、Facebook for Developersの開発者ページから、Facebookアプリケーションを登録すると確認できます。

Facebook OGPの確認方法は後述しています。

Twitter OGPの設定方法

Twitter OGPの設定方法は次のとおりです。

1.　Webページのhead要素を開く
2.　head要素内にOGPのプロパティを定義するmetaタグ(下記)を追加します
3.　TwitterのOGP設定「twitter:card」「twitter:site」を指定する
4.　OGPが正しく設定されたかTwitterデバッグツール「Card validator(https://cards-dev.twitter.com/validator)」で確認する

head要素内に定義するOGPのmetaタグは次のとおりです。

<head prefix="og: https://ogp.me/ns#">
<meta property="og:url" content=" ページのURL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページのタイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像のURL" />
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />

TwitterのOGP設定「twitter:card」を指定する

TwitterのOGP設定「twitter:card」とは、Twitter上での記事の表示形式を指定するタグです。
表示形式を指定するカードは次のとおり4種類あります。

「summary」:タイトルと説明文、および指定された画像が表示される形式です。タイトルは70文字、説明文は200文字以内に設定できます。画像は最大で1枚まで指定することができ、最適な画像サイズは120px x 120px。
「summary_large_image」:「summary」と同様にタイトル、説明文、および画像を表示しますが、画像が大きく表示されます。画像は最大で1枚まで指定でき、最適な画像サイズは300px x 157px。
「app」:モバイルアプリのプロモーションに最適な形式です。アプリ名、アイコン、説明文が表示されます。画像は最大で1枚まで指定でき、最適な画像サイズは120px x 120px。
「player」:ビデオや音楽コンテンツを含むページに最適な形式です。ビデオまたは音楽プレーヤーが表示され、再生ボタンを押すと再生できます。画像は必須ではありませんが、設定する場合の最適な画像サイズは435px x 244px。

TwitterのOGP設定「twitter:site」を指定する

TwitterのOGP設定「twitter:site」とは、Twitterでのユーザー名のことです。

OGPを記述するときは、「@を含めたTwitterのアカウント名」を記述してください。
「twitter:site」は、必ず記述しなくてはいけないOGPではありませんが、投稿元がわかりやすくなるので、指定するのをおすすめします。

OGPを設定する際の注意点

OGPを設定するときの注意点は次のとおり3つあります。

1.　SNSに最適化されたOGP設定を意識する
2.　画像を最適化する
3.　必ずOGPが正しく表示されるか確認する

SNSに最適化されたOGP設定を意識する

OGP設定はページごとでSNSに最適化された設定を意識しましょう。

SEOを意識したタイトルやディスクリプションをそのままOGP設定に使ってしまうと、ユーザーへの記事誘導率や訴求力は低下します。

タイトルやディスクリプション、画像などをSNSのユーザー向けに考えて設定することで興味関心を引きやすいSNS投稿にできます。

画像を最適化する

FacebookやTwitterなどのSNSごとで画像のサイズが違います。
そのため、SNSごとで画像を最適化するのが大切です。

前述していますが再掲するとSNSごとでの最適な画像サイズは次のとおりです。

・Facebook: 最低でも1200 x 630px
・Twitter: 最低でも1200 x 675px
・LinkedIn: 最低でも1200 x 627px
・Instagram: 最低でも1080 x 1080px

Twitterでは「twitter:card」の指定によって最適な画像サイズが違うので注意が必要です。

OGPの確認方法

OGP設定の確認をするには、次のとおりSNSごとのデバッグツールで、かんたんに確認できます。

Facebookのデバッグツール：「Card validator(https://cards-dev.twitter.com/validator)」
Twitterのデバッグツール：「シェアデバッガー(https://developers.facebook.com/tools/debug/)」

それぞれでのOGPの確認方法を順番に解説していきます。

Facebook OGPの確認方法

Facebook OGPが正しく表示されるかは、Facebookのデバッグツール「シェアデバッガー(https://developers.facebook.com/tools/debug/)」で確認できます。

1.　シェアデバッガーにアクセスする
FacebookデベロッパーのWebページにアクセスし、シェアデバッガーを開きます。

2.　URLを入力する
OGPを確認したいWebページのURLを入力します。

3.　「シェア情報を取得」をクリックする
「シェア情報を取得」ボタンをクリックすると、OGPのプレビューが表示されます。

4.　必要に応じてOGP設定に修正を加える
表示されたOGPのプレビューを確認し、必要に応じてOGP設定に修正を加えます。たとえば、OGPの設定を変更した場合には、再度「シェア情報を取得」ボタンをクリックし、修正を反映させたプレビューを確認できます。

注意点としては、OGPの修正をした際には必ずシェアデバッガーの画面上部にある「スクレイプ情報を再取得」ボタンをクリックすることです。なぜなら、「シェア情報を取得」のボタンを押すことでキャッシュの削除もされるためです。キャッシュを削除せずに、FacebookにシェアするとOGP設定を修正する前の情報で表示される可能性があります。

Twitter OGPの設定方法

Twitter OGPが正しく表示されるかTwitterのデバッグツール「Card validator(https://cards-dev.twitter.com/validator)」で確認できます。

1.　Twitterデバッグツール「Card validator(https://cards-dev.twitter.com/validator)」にアクセスする
Twitterデバッグツール「Card validator(https://cards-dev.twitter.com/validator)」のWebページにアクセスし、ツールを開きます。

2.　URLを入力する
Twitterカードを設定したいWebページのURLを入力します。

3.　「プレビューを取得」をクリックする
「プレビューを取得」ボタンをクリックすると、Twitterカードのプレビューが表示されます。

4.　必要に応じてOGP設定に修正を加える
表示されたOGPのプレビューを確認し、必要に応じてOGP設定に修正を加えます。たとえば、OGPの設定を変更した場合には、再度「プレビューを取得」ボタンをクリックし、修正を反映させたプレビューを確認できます。

Facebook同様、こちらもOGP修正後に再度「プレビューを取得」ボタンをクリックしてキャッシュの削除を行いましょう。

まとめ

Webサイトを作成したもののOGP設定をしておらずSNSでのシェアがうまくできないということはよくあります。
OGPの設定を適切に行い、SNSごとで最適化されたOGPの設定をしてユーザーへの訴求力を高めていきましょう。
もし、思うようにSNSでの記事への誘導やコンバージョンにつながらない場合には、この記事を参考にOGP設定を最適化してください。