備忘録：WordPressにFacebookのOGPを設定する（プラグイン無し）
FacebookのOGPを、このブログに設定してみました。
説明しているサイトによって書いてあることがバラバラで、いろいろつまずきましたが、友達の助けなどもあって無事設定できました。これは結構ややこしいので、備忘録としてメモしておきます。
OGPとは
簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記
Facebookの「いいね！」ボタンを設置してるブログが今ではほとんどだと思います。このブログもご多分に漏れず、記事の上下に置いています。
そんな「いいね！」ボタンですけど、例えば「いいね！」を押すとポップアップが表示され、コメントを書けるようになったりしますよね。コメント付きでリンクをFacebookに投稿出来るんです。その時に、記事とは関係ない画像とか、抜粋が正しく表示されない、などなど、問題が出てくることがあるんですね。
それを解決するのがOGP(Open Graph Protocol)です。ざっくり言うと、Webサイトの情報をしっかりと記述しておいて、Facebookに正しい情報を拾ってもらおう、というものです。間違いをなくすだけでなく、何も設定しない時では取得し切れない、細かい情報も付加できたりします。
引用先にも書かれていますが、OGPを設定するのとしないのとでは、リンクをシェアした時の見た目が全然違います。アクセス数に大きな差が出そうです。
つまりブログのPV伸ばしたいならOGP設定しとけってこと。
ざくっとした作り方はこれで完璧
＜遂に公開＞SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね！」ボタンと「OGP」の設定方法、超解説:ガイアックスソーシャルメディア ラボ／Facebook・twitterの企業利用法についての研究機関このリンクを見ていただければ、OGPがなんたるかということから、いいねボタンの設置方法、OGPの設定方法まで全て分かります。ただ、URLがLivedoorブログ用になってるので、そこはWordPress用のものに書き換える必要があります。
どや！？SEOの2倍のアクセスを稼ぐFacebook活用術！ワードプレス向け「OGP」の設定方法 | デザインどや！？
WordPressでのOGP設定はこちらがよくまとまっています。
OGPのコードをheadタグ内に貼るところでつまずいた
FacebookのOGPのページでタグを出力し、URLをWordPress用に直し、テンプレートのheader.phpのheadタグ内に貼り付ける…。ここでつまずきました。なぜかURLリンターでエラーが出る。多分記事の抜粋についての記述が原因っぽいなぁ、と思いながらも、抜粋は絶対表示させたい…と色々悩んでいたところ、Blitz – ウェブデザインのブログの管理人、@redxiii_に、「抜粋タグはループ外やと使えへんよ！」と教えてもらいました。そんなことも知らない僕。
で、彼も自身のブログでOGPの設定をしているのですが、それのコードを教えてもらいました。
コードはこんな感じ
まず、header.phpのhtmlタグに以下の属性を追加。<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
そして、以下のコードを同じくheader.phpのheadタグ内に記述。
<!-- ↓Facebook OGP -->
<?php
global $post; // 記事情報を取得
setup_postdata($post);
if ( is_single()) { //single.phpのとき
?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="<?php the_permalink() ?>" />
<meta property="og:description" content='<?php the_excerpt_rss(); ?>' />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:image" content="<?php echo get_post_meta($post->ID, thumbnail_url, true); ?>" />
<meta property="fb:app_id" content="[アプリケーションID]" />
<?php }else{ //single.php以外
?>
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="[ブログのURL]" />
<meta property="og:site_name" content="[ブログの名前]" />
<meta property="og:description" content="[ブログの説明]" />
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/image/logo_fbogp.jpg" />
<meta property="fb:app_id" content="[アプリケーションID]" />
<?php } ?>
<!-- ↑Facebook OGP -->
抜粋タグは記事ループの外では普通は使えないのですが、global $post;と書くことでループ外でも抜粋タグなどが使えるようになる、らしいです。もっとphp勉強しないと…。
さらにこのコードの凄いところは、個別記事（single.php）とそれ以外（index.php）などで条件分岐させて、取得する値を変えているんですね。トップページやアーカイブページなどでは、どれも同じく、トップページの情報をシェア。そうではない、個別の記事では、その記事のタイトルや抜粋をシェア。いい感じですね。
“[アプリケーションID]“など、括弧で囲んで書いているところは各自変更して下さい。
コードが貼れたら一応、URLリンターを使ってみて、エラーが出ないかチェックを。
……
ということで、僕1人ではなんとも解決しがたいFacebookのOGP設定でした。
まぁWordPressならプラグインがあって、超簡単にOGPの設定ができます。
僕がプラグインを使わなかったのは、今後他のサイトでもOGPの設定をする流れが加速しそうだし、WordPress以外のサイトにもOGP設定ができるようにとの練習も兼ねていたからです。まぁちゃんと出来て良かった。
このブログをシェアした時にちゃんと適切な情報が取得されているか？ ぜひ試してみてくださいw
