株式会社リピート

株式会社リピートは東京秋葉原のweb制作会社 website design html5 css3 PHP MySQL

既存サイトをOGPを使ってソーシャルメディア化する

既存サイトをOGPを使ってソーシャルメディア化することが重要です

既存サイトをソーシャル・メディア化しない3つのデメリット

1:既存サイトのページをソーシャルメディア上で共有出来ない
(ページを視聴者がシェアして投稿してくれたときに正しい「画像」「タイトル」「紹介文章」が表示されない→だから、再共有されない)
2:共有時、魅力的な写真や概要が伝わらない
3:いいね!してくれたユーザー属性を把握出来ない

最初にやるのは「いいね!」ボタンの設置ですね。
ただ「いいね!」ボタンを設置しただけですと、ユーザーのウォール、タイムラインに表示されたときにおかしなサムネール画像や紹介文章になってしまう場合があります。これをコントロールするのがOGPの設定です。

OGPとは Open Graph Protocolのことで、webページの情報を共通化したフォーマットで記載しよう、ということです。facebookやGoogle+、Mixi、GREEなどのプログラムで利用されています。
ここまでなら、meta keywordやmeta descriptionと同じですが、facebookなどのソーシャル・メディア・ユーザーにとっては、OGP記載の有無は大きな差となって表れます。

 

「いいね!」ボタンをクリックした際に、ユーザー画面に表示される情報と、更にその「友達」の画面に表示される情報をコントロールすることが出来ます。OGP記載していないと「友達」のニュースフィードには”表示されません”!

 

OGPは既存サイトをfacebookページと同じように「共有、シェアすることの出来るソーシャルメディアに変身させる」のに必須です。当社は、既存サイトのOGP付与、ソーシャルメディア化に進みます。

また、既存サイトとオーナーのfacebookアカウントがひもづけられるのでEdge rankにおいてもリンクされます。
OGPとfacebookでのadmin登録とアプリIDを登録すると「いいね!」することで、facebookページになります。「歩」が「金」に「成る」みたいに

facebookページと同じなので、インサイト(誰がいいね!してくれたか、見られたか、アクセスログ)を取得することも出来ます。このサイトはWordpressで全ページを作成していますので、全ページが一挙にfacebook化してしまいました。
今回は複数のサイトで汎用化して導入できるように独自のphpプログラムを1つ作成し、読み込んで利用しています。

株式会社リピートは「既存サイトのソーシャルメディア化」コンサルティング、コーディング、最適化を業務としております。お問い合せください。

現在のソースは、こんな感じです。

<meta property=”og:locale” content=”ja_JP” />
<meta property=”og:title” content=”既存サイトをOGPを使ってソーシャルメディア化する”/>
<meta property=”og:type” content=”website” />
<meta property=”og:url” content=”http://www.repeat.co.jp/wp303/archives/437″ />
<meta property=”og:site_name” content=”株式会社リピート” />
<meta property=”og:image” content=”http://www.repeat.co.jp/img/r.png” />
<meta property=”fb:app_id” content=”公式ページのAPP_ID” />
<meta property=”fb:admins” content=”管理者のFB_ID” />

最後の2行がキモ!

【2011/12/20追記】
○公式ページのAPP_IDはfacebookページを作る際にアプリ登録すると思います。この際発行されるのがApp_IDです。facebook dveloppersの該当アプリ概要に書かれています。

○管理者のFB_IDはアプリを制作したfacebookユーザーIDです。自分のプロフィール写真を右クリックして「リンクをコピー」の中に出てくる数字が自分のadmins_IDです
<www.facebook.com/photo.php?fbid=289021187776682&set=a.156554521023350.32244.100000064091579&type=1/&gt;
の100000064091579が私のIDです

○facebokがタイムライン表示に移行したことでこれまでのサムネール表示の両側が切れてしまう場合が多数発生しています。90ピクセル以上の幅の横長の画像は、90ピクセル四方で作成する事をお勧めします。

幅広い画像を使った場合

正方形の場合

【2012/1/26追記】
○MixiではOGPイメージのサイズを180×180ピクセルと推奨しています。
技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)

○FacebookのLike Buttonだけであれば、90×90ピクセル
Like Button – Facebook開発者

○Google+長辺が45ピクセル

【2012/1/24追記】
「こども心理学科」公式webサイトにソーシャル・リンクを設置しました。
facebookアプリを作成し、OGP設定することで「いいね!」ボタンをクリックしていただくと「いいね!」だけではなく「シェア」されます。
つまり「アクティビティログ」に掲載されるだけでなく「ウォール」に表示されます。露出度を増やし、リーチを伸ばすことが出来ます。
同時にOGP設定よりシェアされたときに表示される「画像」を指定し「タイトル」「紹介文」を各ページ個別に表示しています。
ページ管理者は誰がページに「いいね!」してくれたかを見ることが出来ます

facebook外のページをfacebookアプリ化するとfacebook内にページが作られます。このページのウォールに投稿すると「いいね!」してくれたユーザーの「リアルタイム・フィード」にメッセージが流れます。
つまり、外部サイトであっても、一度「いいね!」してくれたユーザーに最新情報を随時流すことが出来るようになります。

(追記以上)

【参考情報】

 

どのように記載すると、どのようにユーザー画面上で表示されるのかは、下記が詳しいです。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

facebook公式 Likeボタン付けページ

Object Debugger(旧URLリンター)
OGPがどのように設定できているか、問題がないか確認できます。

Facebookインサイト 「いいね!」でわかるアクセス解析!簡単設定!

Facebookページを自分のサイトに統合する方法

WP-OGP costomized
CMSのWord PressにOGPを導入するプラグイン

WordPressのスマホ対応と「いいねボタン」等の追加方法

時代はSEOからFEO?!Facebookエッジランク最適化の7ステップ

Facebook ソーシャルプラグイン(いいね!やコメント)を「正しく」設置する方法 | iPhone 研究室(iPadもね)