この記事の所要時間： 約 3分38秒
最近、OGPって聞いたことありませんか？ ないかなぁ〜。
では、「いいね！」ボタンは、どうでしょうか？
さすがに、見てるし聞いてるのではないかなと。
「いいね！」ボタンを設定する際に、必要になってくるのが
OGP(Open Graph protocol)です。
OGPは、リッチ情報（たとえばカテゴリとか、イメージ画像とか）を
定義しておくとソーシャルメディア上に表示してくれるという技術です。
って書くと難しそうに聞こえますが、決まったルールがあるので
それ通りに、Webページに書いておいてもらえると、
ソーシャルメディアに、分かりやすく表示するよって事です＾＾
たとえば、facebookとかmixiとかに、リンクを投稿すると
ユーザーはWebページを読めば分かるけど、facebookなどの
ソーシャルメディアは、Webページの事を理解できません。
あらかじめ、こんな事が書いてありますよっていうルールを
統一化して書いておきます。
そうするとリンク元からも、こんなページですよって表示されて
リンクを押す前に、分かりやすく表示してくれます。
BLOGとかにはOGPを設定しておくと、記事の中身をチラ見できて
内容が分かりやすくなったり、画像を設定して分かりやすくしたりと
ただのURLのリンクよりも押しやすくなります。
具体的な設定方法は、下記のようなHTMLタグを
head部分に追加します。
作ったbot一覧ページに実際に設定しているタグです。
1 2 3 4 5 6 7 | <meta property="og:title" content="bot.vc -mauekusaのbot一覧-"/> <meta property="og:type" content="website"/> <meta property="og:url" content="http://bot.vc"/> <meta property="og:image" content="http://profile.ak.fbcdn.net/hprofile-ak-ash2/162059_191329184218216_1313551_n.jpg"/> <meta property="og:site_name" content="bot.vc"/> <meta property="fb:admins" content="100001334755695"/> <meta property="og:description" content="mauekusaが作った、twitter botの一覧です。"/> |
og:title Webサイトのタイトルを記述します。
og:type ページのタイプを指定します。websiteはウェブサイト。
他にblogやarticleなどがあります。
http://developers.facebook.com……aph/#types
og:url ページのURLを記述します。
og:image サムネイルに表示される画像URLを記述します。
ぱっと見て目立つので、この画像が重要です。
og:site_name サイトの名前を記述します。
fb:admins 管理者のfacebookのIDを記述します。
https://developers.facebook.co……/explorer/
このページにアクセスするとLoginしているIDが id:に表示されます。
og:description ページの説明文を記述します。
設定すると、こんな感じで表示されるようになります。
詳細は下記のページに詳しく書いてあります。英語です＾＾
http://developers.facebook.com……opengraph/
OGPが正しく設定されてか確認するには
facebookのDebuggerが便利です。
下記のURLへアクセスして、確認したいURLを入力すれば
設定されているか確認できます。
http://developers.facebook.com……ools/debug
head部分に記述しないと１つも反映されないって事があるので
注意して見て下さい。結構ハマりました＾＾
実際に、「いいね！」ボタンを付ける場合は
下記のURLで、付けるページのURLを設定して
生成されたHTMLタグを貼り付ければボタンを設置できます。
http://developers.facebook.com……gins/like/
今回説明したOGPの詳しい説明は、このページに書いてあります。
これもまた英語ですが＾＾
http://ogp.me/
あと、WordpressであればPluginで自動設定されるので
是非設定してみて下さい。「Open Graph Pro」だと
ほとんど設定が必要ないのでプラグインを入れてみて下さい。
http://wordpress.org/extend/plugins/ogp/
OGPは簡単に設定出来るので、自分のWebページには
是非設定してみて下さい。
