OGPとはなんぞや？という方のために、OGPの概要とOGP設定方法について解説したいと思います。
OGP設定は難しくないので、Facebookでユーザーへの訴求力を高めるために早めに設定しておきましょう。
OGPとは？
OGPは「Open Graph Protocol」の略で、Facebook、TwitterなどのSNSでWebページがシェアされた際に、タイトル、アイキャッチ画像、概要などページの内容を正しく伝えるためのプロコトルです。OGP設定をしておくと、あらかじめ指定したタイトルや説明文、画像を表示させることができるので、リンク先のページがユーザーに伝わりやすくなります。
OGP設定なしの場合、「いいね！」された時に友達のニュースフィードに表示されないため、拡散が期待できません。
正しくOGP設定しておくことにより、Facebookでユーザーへの訴求力が高まります。
OGPの設定
OGPはhtmlのhead内に記述します。設定は大きく分けて2つあり、1つはPrefix属性、もうひとつはOGPタグの設定です。
【Prefix属性】
Prefix属性はメタデータ設定で使用する「og:」や「fb:」を使えるようにするためのものです。
html prefix="og: http://ogp.me/ns#"
【OGPタグの設定】
OGPタグは以下のように設定します。
meta property="og:title" content="記事のタイトル"
meta property="og:type" content="article"（トップページはwebsite、個別ページはarticle）
meta property="og:description" content="記事の説明"
meta property="og:url" content="記事のURL"
meta property="og:image" content="画像のURL"
meta property="og:site_name" content="サイトのタイトル"
meta property="og:locale" content="言語（ja_JP）"
meta property="fb:admins" content="facebookのユーザーID / fb:app_id"
meta property="fb:app_id" content="facebookのアプリID"
（必須のOGPタグ）
og:title・・・ページタイトル
og:type・・・ページの種類
og:image・・・サムネイル画像の設定
og:url・・・サイトURL
（任意のOGPタグ：一部抜粋）
og:description・・・Webページの説明文
og:site_name・・・サイト名
og:locale・・・言語設定。日本語のみ対応は「ja_JP」と設定し、複数言語対応の場合は「alternate」と設定します
og:email、またはog:phone_number・・・連絡先
fb:app_id・・・サイトの情報をFacebookに登録すると得られるID
Debugger - Facebook Developers（Facebookデバッグツール）
正しくOGPが設定されているかどうかは、Facebookの公式デバッグツール「Debugger」で確認します。使い方は簡単で、URLを入力するだけです。
設定しているOGP情報が表示され、エラーがある場合はその内容を知らせてくれます。
Facebook側にキャッシュが残っていることでOGP設定を修正しても反映されない場合がありますので、キャッシュをクリアしたい時も「Debugger」を使います。
デバッグ後、「Fetch new scrape infomation」をクリックするとキャッシュを再取得して前回のキャッシュがクリアされます。
https://developers.facebook.com/tools/debug/
