Web、モバイル（スマホ・格安SIM）、ソーシャルメディア活用術、フリーランスの働き方などを綴ります！

facebook いいねボタン設置時のOGP設定方法♪

Web全般

facebookの使い方 Web制作のTips

162,846 view

更新日：2014年11月20日投稿日 : 2012年04月27日

ホームページやブログにいいね！ボタンを設置しただけじゃ意味が無い！

何故ならば、いいねボタンを設置しただけじゃ友達のニュースフィード（ウォール）には表示されないからです！
これでは幾らいいねボタンをクリックしても（して貰っても）友達には何にも伝わりません（爆）

そこで対処法としまして、htmlを知らない人には難しいことかも知れませんがOGPタグをhtmlのmeta部分に挿入する必要があります。

OGPとは？

OGPの正式名称は “Open Graph Protocol” と言い、ホームページやブログの記事をソーシャルグラフに流すための規格というべきものです。
OGPは、facebookだけの規格というわけではなく、google+、gree、mixiなどでも使われております。

OGPのルール通りにhtmlを書かないとfacebookのシステムがホームページやブログの情報を上手く理解できず、いいねボタンをクリックされても記事が友達のニュースフィードに表示される事はありません。

OGP対応していないページ上のいいねボタンをクリックした時は、いいねボタンをクリックしてくれた人の”プロフィール”（個人のウォール）には表示されるのですが、”ニュースフィード”には表示されないという事です。
誰かが意図的にプロフィールページを見てくれない限り、いいねされた記事の内容には全く気が付きません。

せっかくいいねボタンをクリックして貰っても、他の人の目に触れる事が少ないので、拡散の確立はかなり少ないと言っていいでしょう。
しかし、OGPタグを挿入する事で、いいねボタンを押して貰った時にホームページやブログ記事がより多くの人の目に触れるようになります。

OGP設定方法

ホームページやブログのhtmlにOGPタグを挿入する事で対応できます。
先ずその前に、いいね！ボタンを設置して、且つアプリIDを取得する事をお忘れなく。
⇒ いいね！ボタン作成 – Facebook開発者
⇒ fb:app_id アプリ作成画面

１つは、<html>タグにxmlnsを追加します。

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

もう１つは、<head>～</head>内に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="言語" />
<meta property="fb:admins" content="facebookのユーザーID" /> //できればfb:app_idを利用
<meta property="fb:app_id" content="facebookのアプリID" />

OGPタグについての詳細は、facebook developersページを参照にして下さい。
⇒ Open Graph protocol – Facebook開発者
”og:image”メタタグは複数指定できますし、意図的に外しても良いです（画像サイズは、180px（縦） × 180px（横）以上のjpg or png）。
※ facebookやgoogle+では、本文内やサイト内の画像を自動で取得する為

OGPタグの動作確認

以前は「URLリンター」というページがあったのですが、現在では「Debugger」というネーミングに変わり、OGPタグが正しく認識されているかを確認できます。
⇒ Debugger
もし、必須になっているOGPタグが挿入されていないと”Required Property Missing”と警告が表示されます。

まとめ（OGPタグを挿入するメリット）

♪ 友達のニュースフィード（ウォール）に表示される。
facebookのいいね！ボタンを設置するだけでは、いいねボタンを押しても友達のニュースフィードには表示されないので、ホームページやブログのhtmlにOGPタグを挿入する事により、友達のニュースフィード（ウォール）にもいいねボタンがクリックされた記事が表示がされ、記事の拡散率も向上します。

♪ ニュースフィードでの表示内容を指定できる。
OGPタグを挿入する事で、記事の内容にそった表示が可能。

♪ いいねボタンをクリックしてくれたユーザーに記事の更新通知が送れる。
OGPタグを挿入すれば、普通のfacebookページとは違う、いいねボタンをクリックした（された）”記事専用のfacebookページ”が生成されます。記事を更新すれば、この記事にいいねをしてくれたユーザーに記事の更新通知が送信できます。

いいねボタンを設置するだけでは勿体無い！

是非、OGPタグ挿入のひと手間をお忘れなく！

※ facebookの仕様はよく変わるので、タイミングによってはOGPが反映されなかったりとエラーやバグがある時がよくあるかも知れません。