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タグで要素を追加します。その際に必要な記述は以下の通りです。
<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 prefix="og: https://ogp.me/ns#">OGPの設定では「これからOGPを使います」という宣言をする必要があり、その宣言をhead要素に記述する必要があります。上述の要素を忘れず記述しましょう。
<meta property="og:url" content=" ページのURL" />OGPを設置するWebページのURLを指定します。ページのURLは相対パスではなく絶対パスで記述する必要があるため、ドメインも含めて目的のページまでのURLを記述をしましょう。
<meta property="og:type" content=" ページの種類 " />ページの種類によって以下のように設定しましょう。
- トップページ → website
- ブログのトップページ → blog
- 記事ページ → article
<meta property="og:title" content=" ページのタイトル " />ページのタイトルを記述します。基本的にはページに設定されているタイトルが表示されますが、このmetaタグで別のページタイトルを設定するとそちらが優先的に表示されます。20文字前後で記述するといいでしょう。
<meta property="og:description" content=" ページの説明文 " />ページの説明文を記述します。タイトルだけでは伝わらない記事の概要や説明を80~90文字程度で記述するといいでしょう。
<meta property="og:site_name" content=" サイト名 " />サイト名を記述しましょう。先ほどのページのタイトルはそのページ独自のタイトル、サイト名はサイト自体の名称を記述します。
<meta property="og:image" content=" サムネイル画像のURL " />サムネイル画像のURLを絶対パスで指定します。ここで指定された画像が、TwitterやFacebookでシェアされた際に、表示されます。画像のサイズは「横×縦 = 1200px×630px」比率では「横：縦 = 1.91：1」で作成すると、TwitterでもFacebookでも画像が切れることなく表示されます。
Twitter用の設定
Twitterでは上述の設定とは別に、headタグ内にmetaタグで「twitter:card」と「twitter:site」に関する記述を追加する必要があります。
<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@Twitterのユーザー名" />こちらもそれぞれ解説します。
<meta name="twitter:card" content="Twitterカードの種類" />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」を使用している例です。
<meta name="twitter:site" content="@Twitterのユーザー名" />@から始まるTwitterのユーザー名を指定しましょう。このときに「@」も忘れずに記述してください。
Facebook用の設定
Facebookでは上述の「基本的な設定」とは別に、headタグ内にmetaタグで「fb:app_id」に関する記述を追加する必要があります。
<meta property="fb:app_id" content="FacebookのアプリID" />「FacebookのアプリID」は Meta for Developers にて取得することが可能です。
OGPの設定に関する注意点
OGPの設定に関する注意点がふたつあります。
- ページ独自のOGPを設定する
- OGPの設定が反映されない時はキャッシュをクリアする
ページ独自のOGPを設定する
OGPの設定は、ページによって独自のものを設定するようにしましょう。ページのタイトルやサムネイル画像がすべて同じでは、ユーザーが見たときにページの具体的な情報が伝わりません。
せっかく個別で設定できるものですし、一度設定してしまえば今後SNSでシェアされた際には個別の情報をユーザーにアピールすることができるので、OGPの設定はページ独自のものにしましょう。
OGPの設定が反映されない時はキャッシュをクリアする
OGPの設定をしたはずなのにSNSでシェアしようとすると、サムネイル画像が表示されなかったり、ページの古い情報が誤って表示されてしまうことがあります。
このとき、SNSのクローラーが最新のページ情報を取得できていない可能性があります。シェアデバッガーやCard validatorを使用するとページの最新情報を取得し、正しいサムネイル画像やページ情報を取得してくれます。
OGPの設定を最終確認する
OGPの設定が完了したら、正しく設定されているか最終確認を行いましょう。以下のツールを使用することでプレビューで確認することができます。
この中でも特に「OGP確認 – ラッコツールズ」は弊社も頻繁に利用させてもらっている、無料OGP確認ツールです。ページのURLを入力することで、一括でFacebook、Twitter、はてなブックマーク、LINEで対象のページをシェアした際のサムネイル画像・タイトル・説明文をプレビューで確認することができます。URLを入力すると以下の画像のようにプレビューを確認できます。
まとめ
OGPの設定をしておくことでユーザーが受け取る印象は大きく変わります。SNSのタイムラインは多くの投稿に溢れているため、タイムラインを眺めるわずかな時間でユーザーの興味を惹くためにも、OGPの設定は非常に大事です。
基本的な設定（以下の記述を参照）とSNSごとの設定を行い、適切にOGPの設定を行いましょう。
<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 " />
