及川WEB室｜ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > Facebook > Facebook の投稿でリンク先のプレビューを指定の画像にする:ogp の設定

Facebook の投稿でリンク先のプレビューを指定の画像にする:ogp の設定

Facebook でリンクをシェア(コメントにURLを入れて投稿)する時、リンク先のコンテンツがコメントと一緒にプレビューされます。
自分のサイトのページのURLをFacebook でシェアする時、リンク先プレビューに表示される画像が内容とは関係ない画像が表示されると、リンクのクリック数に影響が出そうなので、その画像を適切な画像に指定したい。

The Open Graph protocol　（以下OGP）というプロトコルを使用して設定すると、
リンク先のプレビューの画像を指定出来ます。

Facebook 表示サンプル
こちら↑のコメントのリンクの画像は、マンションの画像が表示されるように、リンク先のWEBページでOPGの設定がされています。

いいね！ボタンちなみに、このページでは
←この画像がリンク画像になるように設定しています。
Facebook でリンクをシェアしたときの見え方
投稿 by 及川 明美.

OGPを設定する - 手順

  1. WEBページの<html>タグに「prefix="og: http://ogp.me/ns#"」を追加する。
    【例】 
    <html prefix="og: http://ogp.me/ns#">
  2. 画像を用意する。
    サイズは、200×200px以上にする。
    小さすぎると表示されない場合があるらしい。

    こちら↓を参考にさせていただきました。
    はじめてのOGP設置方法とどこまで設定するかを考える
  3. head 内に meta タグを入れる。
    metaタグに「property="og:image"」を入れ、「content」属性で表示したい画像のURLを入力。
    【例】 
    <meta property="og:image" content="http://***/images/***.jpg" />
  4. きちんと設定できているかどうかはFacebook の デバッガー で確認できます。
    デバッガー
    URLを入力して、[デバッグ]ボタンをクリック。
    「オブジェクトのプロパティ」の項目で「og:image;」に画像が表示されていればOK。
  5. 試しに、Facebook でコメント投稿欄にWEBページのURLを入力してみてください。
    コメントと一緒に表示される、リンク先のコンテンツの画像に、指定した画像が表示されます。

その他の設定

OGPでは、画像以外にも、色々設定ができます。
最初の4つは必須プロパティ。 
<meta property="og:title" content="タイトル" />
<meta property="og:type" content="webページのタイプ。ドメインルートの場合websiteかblog、トップページ以外は article" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="画像のURL" />

<meta property="og:description" content="紹介文" />
<meta property="og:determiner" content="タイトルの頭に付く語。(a/an/the/''/auto のいずれか)" />
<meta property="og:locale" content="言語(デフォルトはen_US)" />
<meta property="og:locale:alternate" content="他の言語" />
<meta property="og:site_name" content="サイトの略語。たとえばThe Open Graph protocolならOGPなど。" />

<meta property="og:image:secure_url" content="HTTPSでの画像のURL" />
<meta property="og:image:type" content="画像のファイルタイプ" />
<meta property="og:image:width" content="画像の横幅" />
<meta property="og:image:height" content="画像の高さ" />

<meta property="og:video" content="動画ファイルのURL" />
<meta property="og:video:secure_url" content="HTTPSでの動画のURL" />
<meta property="og:video:type" content="動画のファイルタイプ" />
<meta property="og:video:width" content="動画の横幅" />
<meta property="og:video:height" content="動画の高さ" />

<meta property="og:audio" content="オーディオファイルのURL" />
<meta property="og:audio:secure_url" content="HTTPSでのオーディオファイルへのURL" />
<meta property="og:audio:type" content="オーディオファイルのタイプ" />
など。
詳細は、The Open Graph protocol（英語サイト）でご確認ください。
MENU Ξ