WEB

Facebookでのウケ方が段違い!もはや必須なOGPを設定する方法

Facebookでのウケ方が段違い!もはや必須なOGPを設定する方法

こんにちは。sekoです。

昨今、ウェブサイトを多くの人に見てもらう為に、SNSを利用して広めていく事はもはや常識となっています。
その際、とても重要となるのがウェブサイトにOGPの設定することです。

今回はOGPについて紹介していきます。

OGPとは

OGPの正式名称は”Open Graph Protocol”と言います。
facebookやmixi、google+などのSNSとウェブページを連携させる為に設定する記事情報で、各種ウォール、ニュースフィードに「こういうサイトです」と明言するために必要な仕様です。

例えばfacebookにおいて、OGPを設定していないサイトで「いいね!」を押すと「〇〇さんがリンクについていいね!と言ってます」と自分のウォールには投稿されますがニュースフィードには反映されないため他の人の目に記事がさらされる事はなかなかありません。

しかしOGP設定をしたサイトで「いいね!」を押すと指定したURL、タイトル、ディスクリプション、サムネイル画像が友達のニュースフィードにも表示されます。さらにその友達がニュースフィードを「いいね!」すると記事情報が次から次へと広がっていくわけです。

つまりOGP設定をするとSNSを利用して多くの人に記事を見てもらえ、結果的にサイトのアクセスを増やす事につながっていきます。

設定方法

OGPの設定はmetaタグをサイトのhead内に記述するだけです。

弊社のサイトで見てみましょう。

</pre>
<meta property="og:title" content="ブログを読んだ早稲田大学生から思い出のグローブが送られてきた。 | お空の下で遊ぶしねぇ?" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://liginc.co.jp/osora/archives/1766" />
<meta property="og:image" content="http://liginc.co.jp/wp-content/uploads/thum/1/fa846ff84f3a5d03cec8efe8e2be1894" />
<meta property="og:site_name" content="お空の下で遊ぶしねぇ?" />
<meta property="og:description" content="皆様、こんにちは。LIG野球部 7番ライト 紳さんです。先日、LIG野球部が設立され、道具を持っていないメンバーの為に使わなくなった野球用品をブログ上で募集しました。&nbsp;□LIG野球サークル設..." />
<pre>

これで設定完了。各タグの持つ情報は以下の通りです。

“og:title”ページの名前です。
“og:type”ページが何のページであるか(例:blog, website, cafe, hotel, restaurantなど)
“og:url”ページのURLです。
“og:image”サムネイル画像のURL。サイト内の画像でなくても構いません。
“og:site_name”サイトの名前です。
“og:description”ページの説明文です。facebookでページタイトルの下に表示されます。

OGPの設定をしたページの「いいね!」を押すとfacebookではこのように見えます。

 

 

SNSを使って沢山の人にみてもらう為のサイト作りをしていきましょう。

この記事を書いた人

勢古口
勢古口 イベントディレクター 2012年入社
いいオフィス支配人の勢古口です。3年間お世話になったスペインから帰国してWebディレクターに返り咲き、2014年夏からお酒の力を借りつつラテンのノリで楽しませる特技を活かして、いいオフィスの支配人に。あっ、教育事業のSTUDIO上野 by LIGの支配人にもなりました。