Facebook&Twitterボタンを最適化する

fbtwi

Facebook OGP

Facebookいいね!とシェアボタンはOGPを設定すると一段進化します。

OGPとは

OGPとはOpen Graph Protocolです。ソーシャルの仕様です。
名前から何となくわかりますが、その記事のURLの名前、概要、サムネイルを設定するものです。
OGPは以下の仕様になっています。

タイトル<title> </title> に設定しているタイトル
※設定していなければページのURL
概要説明<meta name=”description” content=”テキスト”> のテキストの部分
※設定していなければ本文テキストの冒頭部
URLページのURL
画像ページに使われている画像の中から一定の条件を満たす画像が無作為に3種類選ばれる。画像はトリミングされてしまう。

引用元:OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法 http://www.webtech.co.jp/blog/……news/6199/

OGPを設定することで得られるメリット

◎友達のニュースフィード(ウォール)に表示される。
普通のいいね!は自分のタイムラインのみの表示ですが、友達タイムラインにも表示されるようになるので記事の拡散率が向上します。

◎ニュースフィードでの表示内容を指定できる。
タイトル・サムネイル・概要説明を指定できるようになります。

◎いいねボタンをクリックしてくれたユーザーに記事の更新通知が送れる。
いいね!したURLページのFacebookページが作成されます。
その記事にいいねをしてくれたユーザーに記事の更新通知が送信できます。

OGPの設定

OGPを使えるようにするには、いいね!ボタンを作成し、appIDを取得し、HTMLタグ、metaタグの設定をします。

いいね!ボタン作成 – Facebook開発者
fb:app_id アプリ作成画面

<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">
<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" />

以下の4つは基本的な情報なので設定しておくべきでしょう。
og:title – ページのタイトル
og:type – ページのタイプ
og:image – ページのサムネイル画像
og:url – ページのURL

設定したOGPが正しく動いているか確認

以下から確認出来ます。
https://developers.facebook.co……ols/debug/

TwitterCard

スクリーンショット 2014-11-13 19.38.59

TwitterCardとは

要するにFacebookのOGP設定したシェアのようにTwitter上にもシェア出来るものです。

TwitterCardの設定方法

Facebook OGPを設定していれば、以下二つを追加するだけです。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@asklife_jp">

設定したTwitterCardが正しく動いているか確認

以下から確認できます。
https://cards-dev.twitter.com/validator

WordPressでの設定

wp

All in One SEOプラグインを利用する

All in One SEO → Feature Manager → Social Meta をActiveにします。
これでWordPressの記事毎に設定出来るようになります。

Facebookだけでなく、TwitterCardも同時に設定出来ます。便利!

参考サイト

勉強になりました。ありがとうございます。
facebook いいねボタン設置時のOGP設定方法♪ http://webdesignerwork.jp/web/……cebookogp/ @webboyjpさんから
OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法 http://www.webtech.co.jp/blog/……news/6199/
【備忘録】WordPressに「Twitter Cards」を設定してみる | Creator Clip http://creatorclip.info/2014/0……ter-cards/
All in One SEOプラグインでOGP作成 WordPressの記事をFacebookで紹介するときに便利 | For My Own Life http://fmol.be-ourselves.jp/?p=7878
FacebookのOGPを記事ごとに思い通りに!All in One SEO PackのSocial Metaが便利だった! | 男子ハック http://www.danshihack.com/2014……e-seo.html @danshihackさんから