【WordPressオリジナルテーマSparrow開発日記（2）】 - SEOとGA4測定タグの埋め込み

SEO対策どうしますか？

今回作るWordPressのオリジナルテーマ Sparrow では、SEOはWordPressのプラグイン Yoast SEO を導入して、Yoast SEOのアドバイス通りに運用してみようと思います。

Yoast SEOのプラグインの説明画面（一部）

どうしてYoast SEO を使うのか？

理由は以下の通りです。

• いくつか有名なブログを調査した結果 Yoast SEO をインストールしているブログがあったため。

• 更新も頻繁で、バージョンアップへの対応も心配なさそう（上図参照）。

• 有効インストール数も多く、評価やレビューが高い。

• 無料だと使える機能に制限はあるが、意識すべきところは教えてくれるので無料版でも有効だと思います（有料版でも月$8.25なので、いいなと思ったら有料版もアリ）。

• Yoast FAQブロックが便利。これをオリジナルブロックで作るのはけっこう面倒です。

Yoast SEOに合わせたテーマ開発で気をつけること

• Yoast SEOを有効にすると、「パンくずリスト」ブロックが使用できるがオリジナルでブロックを作った方が融通がきいていいと思います。パンくずリストは作る方法を見つけるのは比較的容易だと思います。

• Google Analytics（GA4）のタグの埋め込みはやってくれないので、別の方法が必要です。

GA4の対応について

Yoast SEOはGoogle Analytics（GA4）のタグの埋め込みはやってくれないので、これについては下記のように、自力でなんとかします。

【1】GA4測定IDを保持する項目を作る
GA4の測定IDを保持するための項目を resiter_setting 関数で追加します。以下のように実装します。下記のコードでは nd_ga_account という名前で保持することを想定しています。

<?php

function nd_admin_init() {
  register_setting( 'custom-menu-group', 'nd_ga_account' );
}
add_action( 'admin_init', 'nd_admin_init' );

?>

【2】入力する画面を作る
Sparrowでは他にも保持したい情報があるので、WordPressの管理画面の設定「テーマ設定」という固有の設定ページを作ります。その「テーマ設定」ページ内に「GA4 測定 ID」を入力する欄を作成します。実装例は以下の通りです。

<?php

function nd_admin_menu() {
  add_submenu_page('options-general.php',
                'テーマ設定',
                'テーマ設定',
                'manage_options',
                'nd_theme_setting',
                'nd_add_theme_setting_page');
}
add_action('admin_menu', 'nd_admin_menu');

function nd_add_theme_setting_page(){
?>
<div class="wrap">
  <h2>テーマ設定</h2>
  <form method="post" action="options.php" enctype="multipart/form-data" encoding="multipart/form-data">

    <h3>Google Analytics</h3>
	<table class="form-table">
	  <tr>
	    <th>GA4 測定 ID</th>
		<td>
		  <input type="text" name="nd_ga_account" id="nd_ga_account" value="<?php form_option( 'nd_ga_account' ); ?>" class="regular-text" />
		  <p><span class="description">Googleアナリティクス4プロパティの測定 IDを入力してください。</span></p>
	    </td>
	  </tr>
	</table>

	<?php settings_fields( 'custom-menu-group' ); ?>
	<?php do_settings_sections( 'custom-menu-group' ); ?>
	<?php submit_button(); ?>
  </form>
</div>
<?php
}

?>

【3】フロント画面表示のみ、GA4のタグを埋め込む
上記の【1】【2】でGA4の測定IDは保持できたので、GA4の測定タグを埋め込む処理をテーマに加えます。しかし、管理画面では測定タグの埋め込みは必要ないので、その点だけ分岐が必要です。実装例は以下のようになります。

<?php

function nd_wp_head() {

  // 管理画面は除外
  if (!is_admin()) {
    $nd_ga_account = "";

    // GA4測定IDを取得
    $nd_ga_account = get_option( 'nd_ga_account' );

    // 測定IDを取得できた場合のみ、GA4のタグを埋め込む
    if ($nd_ga_account != "") {
      echo '<!-- Google tag (gtag.js) -->';
      echo '<script async src="https://www.googletagmanager.com/gtag/js?id=' . $nd_ga_account .'"></script>';
      echo '<script>';
      echo 'window.dataLayer = window.dataLayer || [];';
      echo 'function gtag(){dataLayer.push(arguments);}';
      echo 'gtag("js", new Date());';
      echo 'gtag("config", "' . $nd_ga_account .'");';
      echo '</script>';
    }
  }

}
add_action('wp_head', 'nd_wp_head');

?>

以上で、GA4の埋め込み対応は完了です。

とりあえずSEOとかGA4（アクセス解析）については、上記のような感じで進めていきます。

Yoast SEOの使い方については、テーマ開発や記事投稿の方法を検討するときに、必要あれば紹介します。