1.OGPタグをWordpress用に書き換え

まずは、事前準備の段階で取得したFacebookのOGPタグを確認します。

<meta property="og:title" content="" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="" />
<meta property="fb:admins" content="youradmins" />

ここに必要なタグを追加しつつ、Wordpress用にcontentの内容を埋めていきます。

1-1.og:title

このタグにはページのタイトルを設定します。静的サイトであればここに直接タイトルを入力すればOKですが、今回はWordpressで制作したサイトが前提ですので、タイトルを呼び出すテンプレートタグ「」を入力します。それが下記の状態です。

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

1-2.og:url

このタグにはページのURLを設定します。URLを呼び出すテンプレートタグ「」を入力します。それが下記の状態です。

<meta property="og:url" content="<?php the_permalink() ?>" />

1-3.og:image

このタグには表示させたいサムネイル画像を設定します。ここには画像ファイルへのパスを下記のように入力します。

<meta property="og:image" content="<?php bloginfo('template_url'); ?>/image/thum.jpg" />

1-4.og:site_name

このタグにはサイト名を設定します。

<meta property="og:site_name" content="WEBマスター×ハンター" />

これでFacebookで取得したタグは全て埋められましたが、実はこれだけではOGPタグは不十分なのです。追加で以下のタグを設定する必要があります。

<meta property="fb:app_id" content="" />
<meta property="og:locale" content="" />
<meta property="og:description" content=""/>

では、これらを入力していきましょう。

1-5.og:app_id

このタグには「2-1.アプリIDの取得」で取得したIDを設定します。

<meta property="fb:app_id" content="yourAppID" />

1-6.og:locale

このタグには使用言語を設定します。日本語でのブログなら下記の通りです。

<meta property="og:locale" content="ja_JP" />

1-7.og:description

このタグには表示させる説明文or記事の概要文を設定します。このタグは、サイト情報のどの部分を使用するかによって、書きこむタグが変わってきます。

抜粋を使用する場合

<meta property="og:description" content="<?php the_excerpt(); ?>"/>

All in One SEO Packを使用している場合

<meta property=”og:description” content=”<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>”/>

以上で、Wordpressにおける基本的なOGPタグの設定は完了しました。あとは、これらをheader.phpのhead内に書きこめばOKです。

2.プラグインを使ってしまう・・・

長々とFacebookのOGPについて説明をしてきたのですが、実はWordpressにはOGP設定用のプラグインがあります。それを導入してしまえば、上述のようにタグをいちいち入力する必要はないのです・・・。

WP Facebook Open Graph protocol

これを使えば、いちいちタグの内容を書き換えたりする必要はありません。

じゃあなんで長々と必要のないことを説明したんだ？

そんな声が聞こえてきそうですが・・・・理由のひとつは自分の勉強のためです笑。プラグインで一発というのはOGPについて調べ始めてすぐに行き着いた情報だったのですが、そこでプラグインで終わらせるのは味気ないと思いまして・・・・。

理由はもうひとつあります。それはプラグインのデフォルトの設定に納得がいかない場合があるからです。その場合には、プラグイン自体の設定をいじくって、自分好みの出力する必要があります。その際、最初からプラグインに頼っていては、どこをどういじれば良いのかわからないでしょう。しかし、これまで記述してきたことを理解していれば、プラグインのいじる箇所も自然と理解出来るはずです。

そんな思いも込めて、プラグイン一発でOKという記事にはせずに、長々と初歩的なことを書いた次第であります。まぁほんとは、homeとsingleでの条件分岐や、サムネイル画像あるなしの条件分岐についてなど触れたかったのですが、そこまで書いてしまうと長くなってしまうので・・・・そこら辺は「Facebook・いいね！ ボタンとOGPの注意点」この記事あたりが参考になるかと思います。