OGPとは？設定のありなしで変わる印象と、OGPの設定方法から確認方法まで解説

TwitterやFacebookのタイムラインを眺めていると、記事をシェアしている投稿の中に「お！ちょっと面白そうだな」「この記事読んでみたい」と思うものと、そうでないものがありませんか？投稿の内容や、記事タイトルによることもありますが、OGPが設定されているかどうか、で読んでもらえる可能性は大きく変わります。そんな、記事を読むきっかけを生み出すOGPについて解説していきます。OGPとは？OGPとは「Open Graph Protocol」の略で、WebページがSNSでシェアされた場合、タイトル、概要、サムネイル画像、URLをユーザーに表示するためのhtml要素です。OGPを設定しておくことで、ユーザーに与える印象は大きく変わります。OGPの設定あり、設定なしでは以下のように表示が変わります。左の投稿（OGPの設定あり）と右の投稿（OGPの設定なし）を見比べてみると、受け取る印象がまったく違いませんか？SNSのタイムラインは多くの投稿に溢れています。タイムラインを眺めるわずかな時間でユーザーの興味を惹くためにも、OGPの設定は非常に大事です。ここでひとつ注意点があります。OGPの設定がされていなくても、画像やURLやページタイトルは表示されます。しかしここで使われる画像は、Webページ内の画像が表示されるため、記事執筆者の意図しない画像となってしまうことがあります。SNSの読者にWebページの内容を適切に伝えるためにも、OGPの設定はしておいて損はないでしょう。OGPとSEOの関係性OGPの設定とSEOは直接的な関係はありません。設定のありなしだけで検索順位が変わることはないでしょう。しかし、OGPの設定のありなしでユーザーが受け取る印象は大きく変わるため、ページに訪れるユーザーの数に影響が出ると考えられます。そしてページに訪問したユーザーが記事をシェアすれば、また更に拡散の輪が広がり間接的にSEOにも影響してくる可能性はあります。OGPの設定OGPの設定では、基本的な設定に加え、TwitterとFacebook用の設定を行う必要があります。以下の内容についてそれぞれ解説していきます。基本的な設定Twitter用の設定Facebook用の設定基本的な設定HTMLファイルの中にあるhead要素にprefix属性を指定し、headタグ内にmetaタグで要素を追加します。その際に必要な記述は以下の通りです。 これらを記述すれば基本的な設定は完了です。ひとつずつ解説します。 OGPの設定では「これからOGPを使います」という宣言をする必要があり、その宣言をhead要素に記述する必要があります。上述の要素を忘れず記述しましょう。 OGPを設置するWebページのURLを指定します。ページのURLは相対パスではなく絶対パスで記述する必要があるため、ドメインも含めて目的のページまでのURLを記述をしましょう。 ページの種類によって以下のように設定しましょう。トップページ → websiteブログのトップページ → blog記事ページ → article ページのタイトルを記述します。基本的にはページに設定されているタイトルが表示されますが、このmetaタグで別のページタイトルを設定するとそちらが優先的に表示されます。20文字前後で記述するといいでしょう。 ページの説明文を記述します。タイトルだけでは伝わらない記事の概要や説明を80~90文字程度で記述するといいでしょう。 サイト名を記述しましょう。先ほどのページのタイトルはそのページ独自のタイトル、サイト名はサイト自体の名称を記述します。 サムネイル画像のURLを絶対パスで指定します。ここで指定された画像が、TwitterやFacebookでシェアされた際に、表示されます。画像のサイズは「横×縦 = 1200px×630px」比率では「横：縦 = 1.91：1」で作成すると、TwitterでもFacebookでも画像が切れることなく表示されます。Twitter用の設定Twitterでは上述の設定とは別に、headタグ内にmetaタグで「twitter:card」と「twitter:site」に関する記述を追加する必要があります。 こちらもそれぞれ解説します。 Twitter上での表示の仕方をこの「Twitterカードの種類」に関するタグで変えることができます。Twitterカードの種類は4つあります。Summary Card → タイトル、説明文、URL、サムネイル画像が表示Summary Card with Large Image → 「Summary Card」に比べてサムネイル画像が大きく表示されるApp Card → アプリダウンロードにつなげるときに使用するカードPlayer Card → videoやaudioを表示する際に使用するカードブログ記事やサービスページの「Twitterカードの種類」に困った場合は、「Summary Card with Large Image」がいいでしょう。サムネイルが大きく表示されるため、タイムラインで最も視認性の高いカードとなります。この場合、サムネイル画像のサイズは「横×縦 = 1200px×630px」比率では「横：縦 = 1.91：1」にしておくと、カードから見切れることなく丁度収まります。以下は「Summary Card with Large Image」を使用している例です。 @から始まるTwitterのユーザー名を指定しましょう。このときに「@」も忘れずに記述してください。Facebook用の設定Facebookでは上述の「基本的な設定」とは別に、headタグ内にmetaタグで「fb:app_id」に関する記述を追加する必要があります。 「FacebookのアプリID」は Meta for Developers にて取得することが可能です。OGPの設定に関する注意点OGPの設定に関する注意点がふたつあります。ページ独自のOGPを設定するOGPの設定が反映されない時はキャッシュをクリアするページ独自のOGPを設定するOGPの設定は、ページによって独自のものを設定するようにしましょう。ページのタイトルやサムネイル画像がすべて同じでは、ユーザーが見たときにページの具体的な情報が伝わりません。せっかく個別で設定できるものですし、一度設定してしまえば今後SNSでシェアされた際には個別の情報をユーザーにアピールすることができるので、OGPの設定はページ独自のものにしましょう。OGPの設定が反映されない時はキャッシュをクリアするOGPの設定をしたはずなのにSNSでシェアしようとすると、サムネイル画像が表示されなかったり、ページの古い情報が誤って表示されてしまうことがあります。このとき、SNSのクローラーが最新のページ情報を取得できていない可能性があります。シェアデバッガーやCard validatorを使用するとページの最新情報を取得し、正しいサムネイル画像やページ情報を取得してくれます。OGPの設定を最終確認するOGPの設定が完了したら、正しく設定されているか最終確認を行いましょう。以下のツールを使用することでプレビューで確認することができます。OGP確認 - ラッコツールズシェアデバッガー - Meta for DevelopersCard validator - Twitter Developerこの中でも特に「OGP確認 - ラッコツールズ」は弊社も頻繁に利用させてもらっている、無料OGP確認ツールです。ページのURLを入力することで、一括でFacebook、Twitter、はてなブックマーク、LINEで対象のページをシェアした際のサムネイル画像・タイトル・説明文をプレビューで確認することができます。URLを入力すると以下の画像のようにプレビューを確認できます。まとめOGPの設定をしておくことでユーザーが受け取る印象は大きく変わります。SNSのタイムラインは多くの投稿に溢れているため、タイムラインを眺めるわずかな時間でユーザーの興味を惹くためにも、OGPの設定は非常に大事です。基本的な設定（以下の記述を参照）とSNSごとの設定を行い、適切にOGPの設定を行いましょう。 関連記事：やるべきことを2つに絞り、コンバージョン数が160%増加した改善事例（製造業マーケティング戦略）