Learning site for website creation

Facebookシェア用OGPの表示確認

  • 投稿日:2017年11月01日

Facebookでシェアした時に表示されるOGP(Open Graph protocol)の表示確認方法。
※SNSでシェアされた時に、シェアしたページのタイトル・URL・概要・アイキャッチ画像を表示させる仕組み

<meta property="fb:app_id" content="FBアプリIDを記述">
<meta property="og:title" content="タイトルを記述">
<meta property="og:type" content="サイトタイプを記述(website等)">
<meta property="og:description" content="説明文を記述">
<meta property="og:url" content="URLを記述">
<meta property="og:image" content="表示画像パスを記述">
<meta property="og:site_name" content="サイト名を記述">
<meta property="og:locale" content="ja_JP">

シェアデバッガーにアクセス:Facebook要ログイン

https://developers.facebook.com/tools/debug/sharing/

Facebookにログインしてシェアデバッガーを表示。調査したいURLを入力して「デバッグ」ボタンをクリック

対象ページのOGPをもとに各情報や実際の表示内容が確認できる。