[wordpress] あなたの記事をより魅力的に表示されることができるfacebookのOGPの設定方法

   

wordpressFacebookの「いいね!ボタン」や「like box」を設定しているのなら、OGP(Open Graph Protocol)の設定をしてみてはいかがでしょうか?これを設定すれば、facebook内でのあなたの記事をより魅力的に表示されることができます。クリックを上げるためにも、是非この記事を見て設定をしてください。


OGPを設定すれば、Facebook上で掲載される情報を適切に表示することができます。
例えば、アイキャッチ(赤枠)を設定したり、抜粋記事(青枠)を表示されたりできます。
2013 1 11 2


OGP(Open Graph Protocol)の設定方法


Social Plugins – Facebook開発者

上記、Facebookの開発者ページに入り、「Like Button」を選択します。
201311102

画面の下の方に「step2 Get Open Graph tags」という項目があります。
ここに必要な情報を入力します。
2013 1 11 221

TitleやSite nameに関しては、適当に入力して後で変更した方がいいです。
typeはブログの記事なのでarticleがいいと思います。
adminに関してはfacebookにログインした上で、このページに入ると自動的に入力されています。

get tagのボタンを押せば、OGPに必要なタグがでてきます。
次に、これらの情報をwordpressのheaderに埋め込みます。

wordpress


まずは、先ほど取得したタグを修正します。

<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:image" content="任意の画像URL" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"  />
<meta property="fb:admins" content="あなたの数字" />


次に、ローケーションと抜粋記事を追加します。
<meta property="og:locale" content="ja_JP" />
<meta property="og:description" content="下記で修正します。" />

それ以外にも、色々追加できるみたいですので、詳しくはこちらを参考にしてください
Open Graph Protocol – Facebook開発者

抜粋記事を抽出する

抜粋記事を抽出するやり方は色々あると思いますが、functions.phpに以下のような関数を作り、先ほどのタグに埋め込んであげます。

functions.php
function get_facebook_content($content) {

  $content = strip_tags($content);

  $content = mb_substr($content, 0, 120, 'UTF-8');

  $content = preg_replace('/\s\s+/', '', $content);

  $content = preg_replace('/[\r\n]/', '', $content);

  $content = esc_attr($content) . ' ...';

  return $content;

}



先ほどのタグを修正します。
<meta property="og:description" content="<?php echo get_facebook_content($post->post_content); ?>" />



ここでできたTagをheader.phpに埋め込めば、完了です。

デバック

下記のページで埋め込んだOGPが上手く設定できているかをテストできます。
デバッガー – Facebook開発者

このページにOGPを埋め込んだURLを入力します。
2013 1 11 22

もし何かしらの警告があれば、下記のように表示されますので、header.php内の、タグの修正をしましょう。
2012 1 11 23 2


さいごに

OGPの設定をすれば、「いいね」を押してくれた方のfacebookのページに自分の記事が綺麗に表示されますので、クリックされる可能性もあがります。
もし設定をされていないのであれば、是非設定をしてみてください。


Related Posts Plugin for WordPress, Blogger...