FacebookのOGP対応に使っていたプラグインが最近不調だったので、数日前から自前での対応に切り替えました。以前から他のブロガーさんがやり方を紹介していたのは知っていたのですが、何となく難しそうだなぁと思っていて今までやってなかったんですよね。。。でもいざ挑戦してみたら拍子抜けするほどに簡単でした！ほぼコピペだけでOKなので、難しそうっていうイメージで躊躇されていた方は是非チャレンジしてみてください。

OGPとは

The Open Graph protocolの略。ざっくり言うと、サイトの内容をSNS上でより伝わりやすくするための情報、みたいなものです。設定しておくとシェアされた時の見栄えも良くなるし、Facebookだったら「いいね！」を押された時の効果も高まる。ブログやサイトを運営している人なら基本設定した方がいいと思います。

OGPについては以下の記事で懇切丁寧に説明してくれているので、詳しく知りたい方はチェキしてみてください。

OGPとは? 改めてOGPの重要性について考える時が来た。 | Last Day. jp

プラグインからの卒業

WordPressには、OGPの対応を自動でやってくれる便利なプラグインがいくつかあって、このブログでは今まで「WP-OGP」というプラグインを使っていました。

ところが、このプラグインが最近不調でして、OGPの情報が正しく取得できない状態が頻発するようになってしまったのです。

このままではあかん！と思い、最初は「Open Graph Pro」というプラグインに乗り換えようとしたのですが、なぜかこいつはわたしの環境だとまったく動いてくれませんでした。

プラグインでうまくいかないなら自分でやるしかないやんけ。というわけで、長いこと敬遠してきた自前でのOGP対応に向き合ってみようと思った次第。

実装方法

（※作業はすべて自己責任でお願いします。何かトラブルになっても責任は負いかねますので、バックアップを取った上でチャレンジすることを推奨します。）

対応方法については、基本的にすべて以下の記事をTTP（徹底的にパクる）させていただきました。

[Å] 私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由 | あかめ女子のwebメモ

ただ、わたしはAll in One SEO Packというプラグインを使っていないので、一部だけ書き換えて使ってます。All in One SEO Packを使っている人は上記の記事のコードを、使っていない方はわたしのコードを使っていただければ良いかと。

以下、本題の対応方法のご説明です。

まずはheader.phpの<!doctype html>のすぐあとに、以下のコードをコピペして追加します（わたしのテーマはHTML5なので、別環境の人は若干違うかも）。

<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml>

続いて、同じくheader.phpのの直前に、以下をコピペして追加します。

<!-- ここからOGP -->
<meta property="fb:admins" content="●●●●●●●●●●" /><!-- 自分のFacebookアカウントに対応するid -->
<meta property="og:type" content="blog">
<?php
if (is_single()){//単一記事ページの場合
     if(have_posts()): while(have_posts()): the_post();
          echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "n";//抜粋を表示
     endwhile; endif;
     echo '<meta property="og:title" content="'; the_title(); echo '">';echo "n";//単一記事タイトルを表示
     echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "n";//「一般設定」管理画面で指定したブログの説明文を表示
     echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "n";//「一般設定」管理画面で指定したブログのタイトルを表示
     echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "n";//「一般設定」管理画面で指定したブログのURLを表示
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["'])(.+?)1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
     $image_id = get_post_thumbnail_id();
     $image = wp_get_attachment_image_src( $image_id, 'full');
     echo '<meta property="og:image" content="'.$image[0].'">';echo "n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
     echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "n";
} else {//投稿にサムネイルも画像も無い場合の処理
     echo '<meta property="og:image" content="◆◆◆◆◆◆◆◆◆◆">';echo "n";
}
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
     echo '<meta property="og:image" content="◆◆◆◆◆◆◆◆◆◆">';echo "n";
}
?>
<!-- ここまでOGP -->

そして、上記コード内の●●●●●●●●●●の部分を自分の環境に合わせて書き換えていきます。Facebook IDの確認方法はこちら↓

FacebookのユーザーIDをサクッと確認する方法ふたつ

次に、◆◆◆◆◆◆◆◆◆◆を適切なURLを書き換えます。ここは記事内に何も画像がない場合と、トップページなどの記事以外の場所で「いいね！」が押されたとき等に表示される画像のURLを意味しています。

あらかじめ、これ用の画像を用意して自分のサーバーにアップしておき、そのURLを記載するのが良いかと思います。画像の適性なサイズがわからなかったのですが、わたしは300px × 300pxの画像にしてみました。エラーもなく動いているのでこれで問題ないかと。

上記のコードを追加して更新をしたら、今まで使っていたプラグイン（WP-OGPなど）を停止しておきましょう。二重でOGPのコードが存在するとエラーになってしまうらしいので。

確認方法

続いてOGPの設定がちゃんとできているかを確認していきます。以下のデバッガーでトップページや記事のURLを入力し、ちゃんと指定した通りの表示になっているか、エラーが出ていないかをチェックしましょう。

デバッガー Facebook開発者

あとは自分で「いいね！」ボタンを押したり、Facebookの投稿欄に記事のURLをコピペしてみて、ちゃんと望み通りの表示になっているかも確認しておくといいでしょう。

おわりに

とりあえずこれで正しく動作するはずです。うまく動かない場合はコードのコピペミスや追加する場所に間違いがないかなどご確認ください。なお、もっと詳しく知りたい方はあかめさんの記事を熟読していただくと良いかと。

自前での対応ってもっと大変なものだと思ってたのですが、やってみたら正直拍子抜けするほど簡単でしたね。プラグインを使っていたときよりも挙動も安定していますし、手動に切り替えて良かったなーと思います.OGP自体は確実にやった方が良いはずなので、わたしみたいに難しそうだというイメージのせいでまだやってない方がいたらぜひ設定してみてください。