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

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

162,472 view 更新日:2014年11月20日
  • はてなブックマーク 66
  • facebook 406
  • Google+ 18
  • Pocket 121
  • twitter

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

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

そこで対処法としまして、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 アプリ作成画面

1つは、<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">

もう1つは、<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が反映されなかったりとエラーやバグがある時がよくあるかも知れません。

当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

  • はてなブックマーク 66
  • facebook 406
  • Google+ 18
  • Pocket 121
  • twitter
162,472 view 2012年04月27日

後回しにしている買物はありませんか?

webmobile 著者

フリーランスWebデザイナーとして活動をはじめて13年。全国の私を必要としてくれる方々からWordPressでのWeb制作のご依頼を頂いております。

各地のコワーキングスペースやWordPressの勉強会(WordBench、WordCamp)などに顔を出し、様々な人達とご縁をいただき刺激を受け、学んだこと感じたことを、日々のお仕事や自社メディアへの開発・配信にと繋げております。妻、子、プードル2匹と里山暮らし。当ブログは230記事時点で月間120万PV超えを達成しています。コペン乗り。


書き手(webmobile)の紹介 ⇒ 仕事旅

facebookページでも更新情報を発信中♪

スマホ充電器大容量バッテリー
スマートフォンの充電切れ対策に携帯用バッテリーは持っておこう♪

当ブログで公開されているテキスト、画像、イラストなどに関する権利は、当方に帰属します。
著作者の許諾を得ることなく複製、改変、転載、販売、出版など著作権法そのほか法律に触れる行為は禁止されております。

© 2004-16 webmobile ALL COPYRIGHTS RESERVED.