どや!?SEOの2倍のアクセスを稼ぐFacebook活用術!ワードプレス向け「OGP」の設定方法

11 5月

  • このエントリーをはてなブックマークに追加

SEOの2倍のアクセスを稼ぐFacebook活用術!ワードプレス向け「OGP」の設定方法

SEOの2倍のアクセスを稼ぐFacebook活用術ということで、「いいね!」ボタンの魅力とワードプレスユーザ向け「OGP」の設定手順をご紹介。プラグインなしで設定する方法です。合わせて、記事の最後に「シェア」ボタンと「いいね!」ボタンの違いにも触れてみたので気になる方はご覧くださいませ。

4月末に「<遂に公開>SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね!」ボタンと「OGP」の設定方法、超解説」という記事がアップされました。
記事の冒頭で気になる文章が・・・。

Blogや自社サイトに、「いいね!」ボタンを設置している方は多いと思いますが、ところで皆さん、「超重要」なOGP(Open Graph Protocol)の設定は出来てますか?

できていません!っていうかOGP(Open Graph Protocol)の設定って何?って感じ。
記事を読んでいくと、OGPを設定することでFacebookからのアクセスが増加すると書かれていました。

簡単に図に書くと…

Facebookを使ったアクセスアップ方法

こんな形で色々な方に見ていただけるチャンスが増えるわけです。
OGPを設定するだけで「必ず」Facebookからの流入数が増加します。
増加率はサイトによっては2倍どころではありません。

そんな魅力的な「OGP」の設定手順をご説明します。
<遂に公開>SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね!」ボタンと「OGP」の設定方法、超解説」にも説明がありますが、livedoorBlogの設定方法だったため、ワードプレス用もまとめておきます。
 

目次

  1. アプリID取得
  2. 「いいね!」ボタンのコードを組み込み
  3. 「OGP」を設置
  4. URLリンターで動作チェック
  5. まとめ+α

1. アプリID取得

OGPを設置する際にアプリIDが必要になるため、事前に取得しておきます。
Facebookデベロッパーズサイトのアプリ作成画面にアクセスします。

Create an App

①OGPを設置したサイト名・URLを入力

アプリID取得

②セキュリティチェックの単語を入力

セキュリティチェックの単語を入力

③アプリIDをメモ

アプリIDをメモ

2. 「いいね!」ボタンのコードを組み込み

ワードプレスに「いいね!」ボタンを設置します。
記事ページ「loop-single.php」の任意の場所に下記コードを記述してください。
デザインは3種類あるため、ブログのデザインや好みに合わせて選びましょう。

タイプ1:standard

standard

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

タイプ2:button_count

button_count

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

タイプ3:box_count

box_count

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;layout=box_count&amp;show_faces=true&amp;width=70&amp;action=like&amp;colorscheme=light&amp;scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:60px;" allowTransparency="true"></iframe>

3. 「OGP」を設置

①OGPタグを発行

下記サイトにアクセスし、「Step 2 – Get Open Graph Tags」の入力欄に必要項目を入力します。

Like Button – Facebook開発者

Step 2 - Get Open Graph Tags

入力を終えたら、「GetTags」ボタンをクリックしタグを発行します。

OGPタグを発行

②OGPタグをワードプレス用に修正

発行されたOGPタグをワードプレス用に最適化します。
先ほど未記入だった部分にワードプレスのコードを追加します。

■ Title:ページタイトル
記事タイトルを表示するテンプレートタグを追加します。

<meta property="og:title" content="<?php the_title(); ?>" />

■ URL:ページURL
記事URLを表示するテンプレートタグを追加します。

<meta property="og:url" content="<?php echo get_permalink(); ?>" />

■ Image:画像(サムネイル)
アイキャッチ画像を表示するテンプレートタグを追加します。

<?php if(has_post_thumbnail()) { ?>
<meta property="og:image" content="<?php get_featured_image_url(); ?>" />
<?php } else { ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/noimage.gif" />
<?php } ?>

アイキャッチ画像がある場合は、記事に設定されている画像が表示されます。
アイキャッチ画像なない場合は、「noimage.gif」が表示されます。

■ Description:記事の要約(抜粋)
発行されたOGPタグには「Description」がありません。
「Description」とは、記事の要約(抜粋)を表示させるタグです。

<meta property="og:description" content="<?php if( has_excerpt() ){ echo mb_substr(get_the_excerpt(), 0, 420); } ?>"/>

抜粋を表示させるテンプレートタグで、420文字まで取得するコードです。

③「OGP」タグを内に追加

「header.php」の<head>タグ内に、発行した「OGP」タグを追加します。

<head>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="<?php echo get_permalink(); ?>" />
<?php if(has_post_thumbnail()) { ?>
<meta property="og:image" content="<?php get_featured_image_url(); ?>" />
<?php } else { ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/noimage.gif" />
<?php } ?>
<meta property="og:site_name" content="デザインどや!?" />
<meta property="fb:app_id" content="116468375102443" />
<meta property="og:description" content="<?php if( has_excerpt() ){ echo mb_substr(get_the_excerpt(), 0, 420); } ?>"/>
</head>

④xmlns属性を追加

「header.php」の<html>タグに、xmlns属性を追加します。

<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>

4. URLリンターで動作チェック

下記サイトで、動作チェックします。

URLリンター

記事URLを入力して「Lint」ボタンをクリックします。

URLリンターで動作チェック

問題が無ければ設置が完了です。

URLリンターで動作チェック

問題がある場合は、下記のように「ご注意」や「エラー」と言った表記と、その理由が表示されます。それをご覧頂ければ、簡単に間違い修正できるかと思います。

まとめ+α

これでアクセスアップ間違いなし!!と思ったら大間違い。
「いいね!」ボタンを押してもらわないことには、折角書いた記事がシェアされません。
アクセスアップを目指すのであれば、読者が「いいね!」を押したくなるような記事を書きましょうw

もう1点、SEO関連の情報です。
海外SEO情報の記事で「Google上位サイトはFacebookのシェアが多いらしい(Twitterのツイートよりも)」とありました。

Googleで上位表示しているサイトは、Facebookのシェアの数が多い傾向にあり、Twitterのツイートよりもその傾向が大きいという調査データを、SEOmozのRand Fishkin(ランド・フィッシュキン)氏が公開しました。
この調査によれば、GoogleのランキングとFacebookのシェアには非常に高い相関関係が見られたそうです。

となるとシェアボタンを設置したほうが良いのでは??と思いますがどうなのでしょうか。
テスト的に、「いいね!」ボタンと「シェア」ボタンを2つ配置してみました。
そうすると2つとも同じカウントをしています…。
(気になる方は、記事下のボタンを押してみてください。)

「シェア」ボタンと「いいね!」ボタンの違い

シェアといいねの違いは、コメントが「入るか」「入らないか」ぐらいかもしれません。
となれば、気軽に押すことが出来る「いいね!」ボタンを使いたいですねw

この記事を読んで「いいね!」と思ったら、下の「いいね!」ボタンをクリックしていただければ幸いですw

トラックバック

  1. […] Facebookページを自分のサイトに統合する方法(OGP設定) 導入方法ははっきり言って難しいですが ブログサービスによっては比較的簡単な所もあるようです。 ↓ページ参考にして下さい。 Facebookページを自分のサイトに統合する方法 FC2ブログをFacebookのOpen Graph protocol(OGP)に対応させる どや!?SEOの2倍のアクセスを稼ぐFacebook活用術! […]


  2. Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">

トラックバックURL

この記事のトラックバック URL