まえがき

WordPressとFacebookやTwitter等のソーシャルメディアを連携するために何かしらのプラグインを導入することがあると思いますが、そのプラグインの多くは自動的にOGPタグを書き出します。
しかしながら自動出力だとOGPの設定を柔軟に変えれなかったり、想定と違う画像がサムネイルに設定されてしまったりと色々不都合も多いです。

なので
OGPタグはプラグインの自動出力を使わず自分で設定しよう！
というのがこの記事のテーマです。

トップページ、アーカイブページ、シングルページ等あらゆるシチュエーションに対応したOGPタグの出力コードを紹介します。

因みに、WordPressとFacebookやTwitter等を連携するならほとんどの方が「Jetpack」プラグインを使ってると思いますが、その「Jetpack」のOGPタグの自動出力を無効化する方法は下記を参考にしてください。
JetpackのOGPタグの出力を無効化する

OGPタグの出力コード

とりあえずコードをご確認ください。

<meta property='og:locale' content='ja_JP'>
<meta property='fb:admins' content='○○○○'><!--アカウントのAdmins ID-->
<meta property='article:publisher' content='http://facebook.com/○○○' /><!--FacebookページのURL-->
<?php if(is_single()){ // 投稿記事 ?>
<meta property='og:type' content='article'>
<meta property='og:title' content='<?php the_title() ?>'>
<meta property='og:url' content='<?php the_permalink() ?>'>
<meta property='og:description' content='<?php echo mb_substr(get_the_excerpt(), 0, 100) ?>'>
<?php } else { //ホーム・カテゴリー・固定ページなど ?>
<meta property='og:type' content='website'>
<meta property='og:title' content='<?php bloginfo('name') ?>'>
<meta property='og:url' content='<?php bloginfo('url') ?>'>
<meta property='og:description' content='<?php bloginfo( 'description' ); ?>'>
<? } ?>
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'>
<?php
if (is_single() or is_page()){//投稿記事か固定ページ
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";
} elseif( preg_match( '/<img.*?src=(["\'])(.+?)\1.*?>/i', $post->post_content, $imgurl ) && !is_archive()) {//アイキャッチ以外の画像がある場合
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//画像が1つも無い場合
echo '<meta property="og:image" content="○○○○">';echo "\n"; //画像が1つも無い場合に表示する画像URL
}
} else { //ホーム・カテゴリーページなど
echo '<meta property="og:image" content="○○○○">';echo "\n"; //画像が1つも無い場合に表示する画像URL
}
?>

上記のコードをコピペすれば基本的なOGP設定はやってくれます。
2,3行目は自分のfacebookアカウントのIDとfacebookページのURLを入力してください。
facebookアカウントのIDは、下記にアクセスすれば確認できると思います。

Graph APIエクスプローラ

25,28行目の「○○○○」はデフォルトで使用するOGP画像のURLを入力してください。

特に気になるOGP画像周りですが、上記コードの挙動をまとめると

記事詳細ページまたは固定ページの場合
アイキャッチ画像が登録されていればアイキャッチ画像がOGPとして設定されます。
アイキャッチ画像が無い場合は記事の本文中にある画像がOGPとして設定されます。
本文中に画像が一つもない場合は、あらかじめ設定しておいた画像がOGPとして設定されます。

記事詳細ページ及び固定ページ以外の場合（トップページ等）
あらかじめ設定しておいたデフォルトの画像がOGPとして設定されます。

ちゃんとOGP設定できてるか確認しよう

ページができたらちゃんとOGPが設定できているか確認しましょう。
下記URLにアクセスして確認したいページのURLを入力すると
OGPの各項目がちゃんと設定できているか確認できます。

デバッカー

特にサムネイル画像は確認したほうがよいです！

まとめ

Jetpackが吐き出すOGPタグが何かもっとちゃんとしてればいいなと思いました。（大分ふわっとしてるけど）
自分でコードに書いとけば、ちょっと変えたい時とかも色々応用が効きますね。
私自身OGPタグの書き方すぐに忘れてしまうので、直ぐコピペできるよう記事に残しておきます。

参考サイト

コンチクワブログさま

ありがとうございます。