もはやSNS上で重要なシェアを実施するために欠かせないプロトコルとなったOGP。
上手に設定することでWEBページの情報をわかりやすく伝えられるだけでなく、視覚的にもアピールできるため、重要性はきわめて高いと言えます。
この記事ではOGPの設定におけるすべてを詳しくまとめています。
OGPとは?
OGPについて説明します。
Open Graph Protocol(オープン・グラフ・プロトコル)の略称
OGPとは「Open Graph Protocol(オープン・グラフ・プロトコル)の略称です。
FacebookやTwitterをはじめとしたSNS上にて、Webサイトやページの内容をわかりやすく伝えるためのプロトコルになります。
設定することの意義
OGPを設定する意義としては、WebページのURLがシェアされたとき、以下の設定された情報(要素)が表示されるようになります。
・画像…サムネイルや設定した画像
・記事タイトル(サイト名)…任意のタイトルで表示することも可
・説明文…Webサイトやページの要約
OGPはSNSユーザーに対し、フィードもしくはウォール上でWebページの内容をわかりやすく伝えることができるプロトコルです。
わかりやすく簡潔に設定することでシェア率を高められるだけでなく、視覚的にもアピールできるため、Webサイトやページのアクセスアップはもちろんのこと、宣伝には欠かせません。
OGPを設定するメリット
OGPを設定するメリットについて解説します。
WEBページの内容がピックアップされて表示される
OGPを設定すると以下の3点がピックアップされて表示されます。
1) Webページ内の画像
2) Webサイトもしくはページのタイトル
3) 文章
要するにOGPはWebページが適切に要約されたわかりやすい状態で表示されるので、内容が的確になるだけでなく、訴求力の高いシェアが可能になります。
また、それぞれ要素を任意にピックアップして表示させることも可能です。
OGPを設定することによって得られるメリットは計り知れないものがあります。
意図した内容でシェアできるようになる
SNS上で効果的なシェアを行うためには、次の3点を意識する必要があります。
1) アピール力を高めること
2) 拡散力を高めること
3) Webページに対して適切な表示がされるよう工夫すること
OGPを設定することで上記3点をクリアできるだけでなく、意図した内容でシェアできるようになります。
よって、多くのユーザーからのレスポンスを期待できるようになります。
OGPの設定方法
OGPの設定方法について詳しく解説します。
metaタグを記述する
OGPを機能させるためには、以下のmetaタグをhtml内のhead内に記述する必要があります。
1 2 3 4 5 6 |
<meta property="og:title" content="WEBページのタイトル" /> <meta property="og:type" content="WEBサイトの種類を設定" /> <meta property="og:url" content="WEBページのURL" /> <meta property="og:site_name" content="WEBサイトのタイトル" /> <meta property="og:description" content="WEBページの要約" /> <meta property="og:image" content="サムネイル画像のURL" /> |
このようにOGPでは適切な設定ができるため、それぞれを正しく入力することでWEBページの情報を要約することができます。
それでは各記述の内容について具体的に解説していきます。
og:title
フィード上もしくはタイムライン上に表示されるシェアの「WEBページのタイトル」を指定する記述になります。
1 |
<meta property="og:title" content="WEBページのタイトル" /> |
og:type
SNS上でシェアされるWebページの種類を指定する記述になります。
例えば、WEBサイトのトップページの場合は「content=”website”」と記述、記事ページなどは「content=”article”」を指定します。
1 |
<meta property="og:type" content="WEBサイトの種類を設定" /> |
og:url
SNS上でシェアされるWebページのURLを指定する記述になります。
注意すべきは指定するURLを原則として“絶対パス”で記述する点です。
1 |
<meta property="og:url" content="WEBページのURL" /> |
og:site_name
SNS上でシェアされるWebページのサイト名を指定する記述になります。
1 |
<meta property="og:site_name" content="WEBサイトのタイトル" /> |
og:description
SNS上でシェアされるWebページにおける要約文(紹介文)を指定する記述になります。
Webページがどういった情報を配信しているのかを伝える重要な部分になるので、わかりやすい要約文になっていることが前提になります。
1 |
<meta property="og:description" content="WEBページの要約" /> |
og:image
SNS上でシェアされた場合に表示される「サムネイル画像(アイキャッチ画像)」のURLを指定する記述になります。
注意すべきは指定するURLを原則として“絶対パス”で記述する点です。
1 |
<meta property="og:image" content="サムネイル画像のURL" /> |
その他任意で設定できる記述
以下の記述は任意で設定できるものです(そこまで重要性はなく、必要に応じて記述する内容になります)。
なお、どの記述も以下タグの○○部分を設定したいものにすることで反映することができます。
1 |
<meta property="og:○○" content="○○" /> |
例)メールアドレスを設定する場合
1 |
<meta property="og:email" content="××@aaa.com" /> |
任意で設定できる記述は次のように「連絡先情報」「地域情報」「動画情報」「音楽情報」の4種類があります。
連絡先情報
「og:email」
メールアドレスを設定する記述になります。
「og:phone_number」
電話における連絡先を設定する記述になります。
「og:fax_number」
FAX番号を設定する記述になります。
地域情報
「og:locale”」
サポートしている言語を設定する記述になります。日本語のみで作成されている場合は「ja_JP」と記述します。
「og:latitude」
緯度を設定する記述になります。
「og:longitude」
経度を設定する記述になります。
「og:street-address」
住所(番地)を設定する記述になります。
「og:locality」
市区町村を設定する記述になります。
「og:region」
都道府県を設定する記述になります。
「og:postal-code」
郵便番号を設定する記述になります。
「og:country-name」
国名を設定する記述になります。
動画情報
「og:video」
動画のファイルパスを設定する記述になります。
「og:video:height」
動画の高さサイズを設定する記述になります。
「og:video:width」
動画の横幅サイズを設定する記述になります。
「og:video:type」
動画のファイルタイプを設定する記述になります。
音楽情報
「og:audio」
音楽のファイルパスを設定する記述になります。
「og:audio:title」
音楽のタイトルを設定する記述になります。
「og:audio:artist」
音楽のアーティスト名を設定する記述になります。
「og:audio:album」
音楽のアルバム名を設定する記述になります。
「og:audio:type」
音楽のファイルタイプを設定する記述になります。
これらの情報はあくまで必要な場合のみに記述すればOKです。
少しでも有意義なシェアを実現しようと欲張ると、情報量が増え過ぎてしまうために残念なシェア表示になってしまいます。
有効なOGP設定を心がける上でのポイントは、あくまで伝えたい情報をわかりやすく完結にまとめて表示させることです。
極力ムダを省いた簡潔なシェアを目指すことが大切です。
Facebookでの設定方法
FacebookでのOGP設定は以下の2パターンあります。
1) fb:app_id
2) fb:admins
おすすめとしては1です。2は「adminID」といった個人IDを用いるため、ほぼ個人情報を晒すような形での設定になります(個人情報漏洩などのリスクが生じやすくなる)。
よって安全に設定したい場合は「fb:app_id」を選択すべきです。
では、それぞれの設定手順を解説します。
fb:app_id
設定手順は次のとおりです。
1:Facebookにログインし、「Facebook開発者」⇒「アプリ」を選択
2:右上に表示されている「+新しいアプリケーションを作成」から、新規アプリケーションを作成を選択
3:アプリケーションの名前(サイト名)を入力(下の2項目は空欄でOK )
4:セキュリティチェックを入力
5: app_idが表示される
なお、app_idを確認する方法は「Facebook開発者」⇒「アプリ」を選択することでいつでもチェックできます。
fb:admins
設定手順は次のとおりです。
1:Facebookにログインし、「Like Button」⇒「Facebook開発者」を選択
2:ページ中段あたりにある<Step 2 – Get Open Graph Tags>内にある「Get Tags」ボタンを押す
3:fb:adminsの値が表示される
特に難しい作業はありません。
両者の使い分け
fb:app_idのメリットとデメリットは次のとおりです。
メリット
管理者権限で複数の値を取得できるため複数人でサイトを運営しているケースにおすすめ
デメリット
個人IDを取得・入力する必要があるために個人情報を晒してしまうリスクがある
一方のfb:adminsにメリットとデメリットは次のとおりです。
メリット
安全性を確保できるので個人でサイトを運営している方におすすめ
デメリット
取得するまでの手順が複雑で面倒くさい
それぞれメリット・デメリットを持っているので、最適と思える方を選びましょう。
Twitterでの設定方法
TwitterでOGP設定をするには「Twitter Cards」を用います。
Twitter CardsはURLを含んだツイートを行うことで、Webページのタイトル・要約文・アイキャッチ画像(サムネイル)を表示させる仕組みのことです。
なお、タグは次のとおりです。
1 2 3 |
<meta name="twitter:card" content="Twitterカードの種類を選択" /> <meta name="twitter:site" content="@TwitterアカウントのIDを入力" /> <meta name="twitter:player" content="@TwitterアカウントのIDを入力" /> |
注目すべきは”twitter:card”の記述。
全部5種類の表示形式に対応しており、目的に応じて以下のパターンから最適な表示を実施することができます。
1)content=”summary”
OGPにおける一般的な表示形式になります。
2)content=”summary_large_image”
大きな画像が表示される形式になります。
3) content=”photo”
画像が優先されて大きく表示される形式になります。
4)content=”gallery”
複数の画像が表示される形式になります。
5)content=”app”
Webサイトではなくアプリケーションの紹介に特化した形式になります。
このようにTwitterでのOGP設定は、表示形式を選べるようになっています。
Webサイトやページのイメージに合わせて適切な形式で表示を設定し、シェア率を高めましょう。
OGP設定で得られる効果
OGPはWEBページの各情報を設定する重要なプロトコルです。
HTML内に適切な情報を記述することで、意図した内容でのシェアが可能になります。
わかりやすく丁寧な設定を心がけることで、FacebookやTwitterをはじめとしたSNSにおける拡散効果を期待できます。
OGPの設定がうまく反映されない時の対処法
OGPの設定がうまく反映されない時の対処法について解説します。
Facebookでの対処法
Facebook上でOGPがうまく反映されない時の対処法としては、「手動でクリアする」やり方をおすすめします。
Facebook公式のDebug ページを用いることで簡単に対処可能です。
「Object Debugger」
https://developers.facebook.com/tools/debug/og/object/
操作方法としては対象となる URL を入力し、「Fetch new scrape information」をクリックするだけ。たったこれだけでキャッシュがクリアされ、新しく取得したページの情報が反映されます。
さらに表示イメージも確認できるため、変更されていることをしっかり把握できます。
Twitterでの対処法
Twitterk上でOGPがうまく反映されない時の対処法としては、専用ツールの実施をおすすめします。
次のTwitter公式の強制クロールページを用いることで簡単に対処できます。
「Twitter Card Validator」
https://cards-dev.twitter.com/validator
使い方はとても簡単でURLを入力してプレビューを確認するだけ。プレビューが表示されれば、ほぼ正常に稼働していると判断してOK。
TwitterはFacebookとは異なり、キャッシュをクリアするという考え方ではなく、クロールされているかどうかが判断基準になります。
よって、クロールされていない場合はOGPがうまく表示されない可能性があるので、上記ツールを用いて強制クロールさせるといいでしょう。
OGP設定の確認方法
OGPが正しく設定されているかを確認する方法について解説します。
Facebookでの確認方法
Facebook上でOGPが正しく設定されているかどうか確認するためには以下のツールを用います。
「シェアデバッカー」
https://developers.facebook.com/tools/debug/
Facebookの公式ツールということもあって、Facebook上でのOGPの設定確認はこれひとつで問題ありません。
使い方はとても簡単で、OGP設定を確認したいWebページのURLを入力⇒「Debug」ボタンを押すだけ。エラーがあれば詳細が表示されるため、スムーズな修正作業を行うことができます。
Twitterでの確認方法
Twitter上でOGPが正しく設定されているかどうか確認するためには以下のツールを用います。
「Card validator(Twitterカード)」
https://cards-dev.twitter.com/validator
Twitter公式のTwitterカード向けの確認ツールとなっています。
使い方はとても簡単でWebページのURLを入力するだけ。簡単にTwitter上のOGP表示を確認できます。
正しく設定して拡散効果を高めよう
OGPはSEOと同様、Webコンテンツへのアクセスアップにおいてきわめて重要になっています。
誰でも簡単に導入できるプロトコルではあるものの、わかりやすく具体的に表示させているケースは意外にも少ないと言えます。
OGPは拡散効果を高めたり、ライバルサイトに差をつける意味でも正しく設定することが重要です。
特に画像の推奨サイズをクリアすることはとても重要。縦横比をいい加減に設定していると残念な画像表示になってしまいます。未然に防ぐためにも、Webページを作成する段階で画像の縦横比を強く意識しましょう。
関連記事
筆者紹介
片山_03.png)
株式会社doubLe ソリューション事業部 SEO部門 部門長
2017年4月新卒として株式会社doubLeに入社。
WEBデザイン、リスティング広告運用、SEO内部対策と幅広い分野の業務を経験し、2019年6月SEO部門の部門長に就任。
ファイナルSEOブログの運用を担当し、「効果の出るSEO対策」を追及している。ソリューション事業部の元気印として日々奮闘中。