フェイスブックのリンクに表示させたい画像を指定する方法
フェイスブック(Facebook)でサイトを紹介する時サイトに付いている「いいね!」ボタンを押したり、フェイスブック側でURLを打ち込むと、紹介したいサイトの情報がフェイスブックに表示される。
ただしその場合、どういう情報が載るかは、フェイスブック側のアプリケーションで勝手に判断される。
だからサイトの画像をリンク先のアイコンとして表示させたいのになんか全然違った画像がリンクに載ってしまったりする。
これではサイトのアピールにならないから、「いいね!」ボタンがクリックされたときにフェイスブックにアイコン画像を載せたい。
そう言う場合はhtmlファイルのmetaタグで表示させたい画像のURLを指定しておく必要がある。
この指定方法として定められているのがOGP(The Open Graph protocol)というものだ。
OGPはソーシャル・ネットワークで、人とのつながり方を指定するタグだと言うことで、様々なモノがあるが、詳しくはこちらに載っている。
→The Open Graph protocol(英語の解説)ただし今回は紹介リンクで一緒に表示される画像を指定するだけなので必要最小限のタグだけ記入する例を挙げておくことにする。
因みに画像指定も必要最小限の情報になっている。
フェイスブックに表示させたい画像を指定する方法
まず<html>タグに、OGPを利用するという情報を書き込む
具体的には、prefix="og: http://ogp.me/ns#"
xmlns:og="http://ogp.me/ns#"と書いてあるサイトもあるが、上の方が新しいらしい。
よく分からなければ次のタグをコピペしておけばよい
<html>タグの属性情報の記述例
フェイスブック用の情報の最小限のメタタグ記入例
フェイスブック用の情報としては、次の5つは必須(Basic Metadata)のようだ
サイトのタイプは、website(ホームページ)かblog(日記)になる
以下は私の作っている価格比較サイトの場合だが、
サイトのタイプを何も書かなかったらwebsiteと判断されていた
- {$site_title}:サイトタイトル
- {$domain}:トップページのURL
- {$site_description}:サイトの説明
- {$domain}img/onepoint.jpg:表示させたいアイコン画像のURL
なおちゃんと指定されているかどうかは、フェイスブックのデバッガ・ページがあるので、そこにサイトのURLを記入して調べると分かる
※アイコン画像の名称は何でも良い
私のサイトの場合、onepoint.jpgで統一した。