Facebook、mixiからのアクセスアップを考えるのであれば、OGPの最適化が必須です。
WordPressにはOGPを自動生成するプラグインがありますが、仕様変更やサムネイルの選定を考えると完全に自作した方が良いです。
また、実務制作の場合は、アップロード画像をサーバー相対にした場合やアイキャッチ画像機能、メタタグを改変する「All in one SEO」プラグインも考慮しなくてはなりません。
このため、本サイトで解説しているCMSでは、WordPressが最もOGP対応が難しくなっています。
この記事では、以下のような法則でOGPを生成する方法について解説します。
個別ページ
- 記事タイトルをog:titleに反映する
- 記事の抜粋をog:descriptionに反映する
- アイキャッチ画像が指定されていればog:imageとimage_srcに反映する
- アイキャッチ画像がなければ、最初にアップロードされた画像のサムネイルを反映する
- 画像がなければ事前に用意したデフォルト画像を反映する
- All in one SEOプラグインでメタタグを書き換えていた場合は優先する
個別ページ以外
- 現在のページタイトルをog:titleに反映する
- 「設定」→「一般」のキャッチフレーズをog:descriptionに反映する
- デフォルト画像をog:imageとimage_srcに反映する
デフォルト画像を用意する
記事に画像がなかった場合に使用する「デフォルト画像」を作り、サーバーにアップロードしておきます。
Facebookでは横90ピクセルで表示されるので、90×90ピクセルのjpg画像が良いでしょう。
この記事では、ファイル名を「ogp_default.jpg」、アップロード先をブログのトップページと同じ階層として、解説を進めます。
アップロード画像の設定
WordPress管理画面の「設定」→「メディア」で、アップロード画像の設定を確認します。
「サムネイル」の縦横サイズは、90ピクセル以上にしてください。Facebookでは、横幅90ピクセルに縮小されるためです。特に設定を変えていなければ、150ピクセルになっているので問題ありません。
尚、記事に貼り付けたアップロード画像が「サーバーの絶対パス」になるようにしておくと、サーバー移転や実務制作での本番環境の移行が劇的に楽になります。
本記事のOGPはこの設定にも対応しているので、新規でサイトを立ち上げる場合は、下の画像のようにしておくことをお勧めします。
html要素に属性を追加する
テーマのHTML要素に、OGP対応のための属性を追加します。
OGPに対応するということは、Facebookのいいね！ボタンなども置く流れになるので、Facebook用の属性もついでに書いておいた方が良いでしょう。
<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
テーマに関数を追加する
記事中の画像を調べて、OGP用の画像URLを返す関数を、テーマに追加します。
テーマの「functions.php」に以下のコードを追加してください。
/* OGPの画像を出力する
============================================= */
function post_ogp($id) {
$noImg = 'ogp_default.jpg';
//アイキャッチ画像を取得
$eyeImg = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail');
if ($eyeImg){
//アイキャッチ画像があれば優先（httpからのアドレスに置換する）
$eyeImg[0] = preg_replace('/^\/uploads/', get_bloginfo('url') . '/uploads', $eyeImg[0]);
echo $eyeImg[0];
} else {
//エントリーに属する画像を取得
$query = 'post_parent=' . $id . '&post_type=attachment&post_mime_type=image';
$postImg = get_children($query);
if (!empty($postImg)){
//最初にアップロードされた画像IDを取得
$keys = array_keys($postImg);
$num = $keys[sizeOf($keys)-1];
//画像IDからサムネイルを取得
$thumb = wp_get_attachment_image_src($num, 'thumbnail');
$thumb[0] = preg_replace('/^\/uploads/', get_bloginfo('url') . '/uploads', $thumb[0]);
echo clean_url($thumb[0]);
} else {
echo get_bloginfo('url') . $noImg;
}
}
}
この関数で注意が必要なのが、10行目・25行目の「サーバー絶対パス」を置換している個所です。
先述したとおり、画像パスをサーバーの絶対パスにしておくと管理は楽になるのですが、OGPに画像URLを渡す場合は、httpからのフルパスになっていなければなりません。
なので、OGP画像のURLが「/uploads」で始まっていた場合は、「ブログのURL＋/uploads」に置換させています。
もしも、アップロード画像のパスが異なる場合はここを修正してください。
例えばブログがサーバールートではなく「blog」ディレクトリにあった場合は、10行目は以下のようになります。
$eyeImg[0] = preg_replace('/^\/blog/uploads/', get_bloginfo('url') . '/uploads', $eyeImg[0]);
head要素にOGPを追加する
テーマの「header.php」の、head要素内に以下のコードを貼り付けてください。
<?php if(is_singular()) {
//個別ページ ====================================
//記事情報の取得
global $post;
setup_postdata($post);
//ALL in one SEOの設定値を優先する
$customObj = get_post_custom($post->ID);
if ($customObj['_aioseop_title']){
$ogpData['title'] = wp_kses($customObj['_aioseop_title'][0], array());
} else {
$ogpData['title'] = wp_kses($post->post_title, array());
}
if ($customObj['_aioseop_description']){
$ogpData['description'] = wp_kses($customObj['_aioseop_description'][0], array());
} else {
$ogpData['description'] = strip_tags(get_the_excerpt());
}
?>
<meta property="og:title" content="<?php echo $ogpData['title'] ?> | <?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php echo $ogpData['description'] ?>" />
<meta property="og:url" content="<?php echo clean_url(get_permalink()); ?>" />
<meta property="og:image" content="<?php post_ogp($post->ID); ?>" />
<meta property="image_src" content="<?php post_ogp($post->ID); ?>" />
<meta property="og:type" content="article" />
<?php } else {
//個別ページ以外 ====================================
?>
<?php if(is_home()) { ?>
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<?php } else { ?>
<meta property="og:title" content="<?php wp_title('|', true, 'right'); bloginfo('name'); ?>" />
<?php } ?>
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<?php if(is_home()) { ?>
<meta property="og:url" content="<?php echo get_bloginfo('url'); ?>/" />
<?php } else { ?>
<meta property="og:url" content="<?php echo get_bloginfo('url') . $_SERVER['REQUEST_URI']; ?>" />
<?php } ?>
<meta property="og:image" content="<?php echo get_bloginfo('url') . '/images/ogp_default.jpg'; ?>" />
<meta property="image_src" content="<?php echo get_bloginfo('url') . '/images/ogp_default.jpg'; ?>" />
<meta property="og:type" content="blog" />
<?php } ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:site_url" content="<?php bloginfo('url'); ?>/" />
All in one SEOの設定値は、カスタムフィールドとして保持されています。
このため、個別記事ではまずグローバル変数として記事情報を取得してから、カスタムフィールドにAll in one SEOに関する指定がないか調べています。
All in one SEOプラグインを有効にした時点で、ホームのwp_title関数の値が、title要素以外では空になってしまいます。
このため、現在のページがホームであれば、bloginfo関数でブログ名を表示しています。
アーカイブページの現在のURLは、サーバー変数を使って取得しています。
入力値をそのまま表示する場合は、念のためwp_kses関数を通して無害化することをお勧めします。
OGPを確認する
テーマを更新したら、FacebookのOGPデバッガーで正しく反映されているかチェックしてみてください。
デバッガーにかけた時点で、Facebook側に保管されたキャッシュが更新されるので、リニューアル時や既に公開していたサイトにOGPを追加したときは、トップページや人気のある記事を事前にチェックしておいた方が良いです。
補足
- All in one SEOプラグインには、ホームのタイトルと説明文を変更する機能もあるのですが、これも自動反映するにはデータベースからの直接取得が必要となってしまうため、ここでは割愛しています。
- OGPの仕様に添うと、og:autor値に「投稿した人」を指定することが考えられますが、何故かFacebookのデバッガーでエラーとなってしまう（ならないこともあります。謎です）ため、og:autor値は入れていません。
