tomo 
SEO対策として重要な役割を果たす、OGP設定について調べてみたので記事にします。
OGP設定とは？
FacebookやTwitterなどのSNS上でシェアした際に、Webページのタイトルや抜粋記事、イメージ画像を正確に表示させるための設定です。
headタグ内にmetaタグを使って記述することで設定できます。
設定している場合と、設定していない場合では、SNS上での表示が下記のように異なってきます。
ちなみにOGPとは、「Open Graph Protcol」の略です。
OGP設定しないことによるデメリットとは？
OGP設定をしなかった場合、SNS側で自動的に説明文や画像を設定されてしまいます。
そうなると、Webページの内容が意図したとおりに正しくユーザーに伝わらなくなり、SEOで不利な結果を招きかねません。
特にSNSによる記事拡散が重要な役割を担うようになった現代において、大きな影響を与えるため必ず設定しましょう。
OGP設定方法
冒頭でも説明しましたが、OGP設定はheadタグ内にmetaタグを使って記述します。
ここでは具体的な記述方法について説明します。
OGP設定には様々な種類が存在しますが、必須で設定したいものは「基本タグ」、「Facebook用タグ」、「Twitter用タグ」の3つになります。
（多くのサイトを調査しましたが、この3つ以外の設定はほとんど使われていませんでした。。）
基本タグ
OGPの使用を宣言するタグ
まず始めに、OGPを使用することを宣言するため、headタグにprefix属性を追加します。
末尾の部分は、Topページの場合は「website」、その他のページの場合は「article」とします。
<!-- Topページの場合 -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<!-- その他のページの場合 -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">ちなみにprefix属性をhtmlタグに付ける人もいるようなのでどちらが正しいのか調べてみたのですが、結局はどちらに付けても問題無いようでした。
一応、facebookのガイドラインではheadタグに付けることを推奨しているので、このページではheadタグに付けることとします。
ページのURL【og:url】
OGPを設定するWEBページのURLを記述します。URLは相対パスではなく絶対パスを記述しましょう。
<meta property="og:url" content="【ページの URL】" />ページのタイプ【og:type】
ページのタイプを「website」「blog」「article」「profile」中から選択して記述します。
（ページタイプの選択肢は他にもあります。）
選択したタイプにより、SNS上での表示形式が変わってきます。
トップページは「website」か「blog」、投稿記事には「article」を使用しているサイトが多いです。
<meta property="og:type" content="【ページのタイプ】"/>ページのタイトル【og:title】
ページのタイトルを記述します。
サイト名などのブランド情報を含まず、20文字以内で設定することが好ましいとされています。
<meta property="og:title" content="【ページの タイトル】" />ページの説明文【og:description】
ページの説明文を記述します。
文字数は80～90文字が最適であり、検索結果上の要約文（スニペット）の最適文字数160文字より少なめなので注意しましょう。
<meta property="og:description" content="【ページの説明文】" />サイト名【og:site_name】
ページのサイト名を記述します。
<meta property="og:site_name" content="【サイト名】" />画像のURL【og:image】
表示させたい画像を絶対パスを記述します。
Facebookでは、縦横比率1：1.91、画像サイズは315px×600px以上を推奨しています。
Twitterでは、サイズは最小で144px×144pxまで設定可能です。
FacebookとTwitterで画像を併用する場合は、315px×600px以上、出来れば630px×1200pxの画像としましょう。
<meta property="og:image" content="【画像のURL】" />Facebook用タグ
【fb:app_id】
FacebookにOGP表示するための必須タグになります。
設定することで、Facebookインサイト（Facebookからサイトへの流入を測るトラフィック分析などのページ分析機能）ができるを利用できるようになります。
<meta property="fb:app_id" content="【App ID】" />【fb:admins】
【fb:app_id】が設定されていれば不要です。
【fb:app_id】の代わりに使用できるタグですが、個人IDを晒すことになりセキュリティ上の懸念もあるため、こちらを使用することはオススメしません。
<meta property="fb:admins" content="【FB Admin】" />Twitter用タグ
Twitterカード【Twitte:card】
Twitterでの表示タイプを指定するタグになります。
「summary」「summary_large_image」「photo」「gallery」「app」の5種類から選択できます。
調べたところ「summary」や「summary_large_image」タイプが多く使われていそうでした。
<meta name="twitter:card" value="【Twitterカード】"/>Twitterユーザー名【twitter:site】
@から始まる、Twitterのアカウント名を入力します。
<meta name="twitter:site" value="【Twitterユーザー名】" />その他のタグ
上記以外にも「場所・地域情報」「連絡先情報」「動画」「音楽」などの情報も細かく設定可能です。
ただし、多くのサイトを調べてみたのですが、このあたりのタグを記述しているサイトは殆どありませんでした。。。
それでも詳しく知りたい方は、公式ホームページをご確認してみてください。
OGP設定確認用の便利ツール
OGP設定がちゃんと反映されているかチェックするための便利なツールがあるので紹介します。
Facebookの表示確認ツール「シェアデバッカー」
Twitterカードの表示確認ツール「Card validator」
画像の表示確認ツール「OGP画像シミュレータ」
【おまけ】全コードのまとめ
<!-- Topページの場合 -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<!-- その他のページの場合 -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<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】" />
<!-- Facebook用タグ -->
<meta property="fb:app_id" content="【App ID】" />
<!-- Twitter用タグ -->
<meta name="twitter:card" value="【Twitterカード】"/>
<meta name="twitter:site" value="【Twitterユーザー名】" />
</head>以上がSNS上で最適な表示をさせるためのOGP設定になります。
最後までお読みいただき、ありがとうございました。