All In One SEOを使うときカテゴリーにOGP画像を設定する方法

WordPressでサイトを作るとき、SEOまわりの設定でAll In One SEO（AIO SEO）をよく使用しています。

AIO SEOの無料版ではカテゴリーやタグ、タクソノミーの一覧ページにタイトルとディスクリプションの設定はできても、OGP画像の設定が反映されない仕様になっています。
そのため、OGP画像をしっかり設定したい場合には別途設定が必要になります。

今回はその方法について、まとめていきます！

基本的なOGP画像設定
カテゴリーやタクソノミーの一覧に設定する方法
1. １：テンプレートファイルに直接記述する
2. ２：functions.phpに記述する
まとめ

基本的なOGP画像設定

そもそも、AIO SEOでのOGP画像の設定は「ソーシャルネットワーク」タブから行うことができます。
SNSごとに画像やテキスト情報をどのように表示させるかを設定することができ、サムネイルの大きさを指定することも可能です。

しかし、こちらの設定のみではカテゴリーやタクソノミーの一覧ページにはOGP画像が反映がされません。

カテゴリーやタクソノミーの一覧に設定する方法

通常では設定されないカテゴリーやタクソノミーの一覧ページに設定するには2つの方法があります。

１：テンプレートファイルに直接記述する

一つ目はテンプレートファイルに直接記述する方法です。
header.phpやそれぞれのテンプレートファイルに記述することでOGPの設定をすることができます。

<?php 
if (is_tax() || is_category() || is_tag()) {
	$ogp_image = get_template_directory_uri() . '/assets/img/common/ogp.jpg';
	echo '<meta property="og:image" content="' . esc_url($ogp_image) . '">' . PHP_EOL;
	echo '<meta property="og:image:width" content="1200">' . PHP_EOL;
	echo '<meta property="og:image:height" content="630">' . PHP_EOL;
	echo '<meta name="twitter:card" content="summary_large_image" />' . PHP_EOL;
	echo '<meta name="twitter:image" content="' . esc_url($ogp_image) . '" />' . PHP_EOL;
}
?>

２：functions.phpに記述する

１の方法かつそれぞれのテンプレートに書く場合、書き忘れると設定されない…なんてことになってしまう場合があります。
functions.phpに下記のように書くとwp_head内に出力してくれるようになるため、書き忘れのミス防止にもなります。

add_action('wp_head', function() {
    if (is_tax() || is_category() || is_tag()) {
        $ogp_image = get_template_directory_uri() . '/assets/img/common/ogp.jpg';
        echo '<meta property="og:image" content="' . esc_url($ogp_image) . '">' . PHP_EOL;
        echo '<meta property="og:image:width" content="1200">' . PHP_EOL;
        echo '<meta property="og:image:height" content="630">' . PHP_EOL;
        echo '<meta name="twitter:card" content="summary_large_image" />' . PHP_EOL;
        echo '<meta name="twitter:image" content="' . esc_url($ogp_image) . '" />' . PHP_EOL;
    }
});