Cloudflare PagesにAdSenseコードを入れる方法｜静的サイトの全ページへ自動挿入する

Cloudflare Pagesで静的ブログを運用している場合、WordPressのような広告用プラグインはありません。そこでこのブログでは、ビルド時にAdSenseコードを全ページのheadへ自動挿入する構成にしています。

AdSenseコードはhead内へ配置する

Google AdSense公式では、AdSenseコードを<head>と</head>の間へ配置し、サイトのすべてのページへ設置することを推奨しています。

静的サイトでも考え方は同じで、最終的に生成されるHTMLのhead内にGoogleから発行されたコードが入っていれば動作します。

記事ごとにHTMLへAdSenseコードを直接貼る方法でも動きますが、ページ数が増えるほど貼り忘れや変更漏れが起きやすくなります。

このブログでは、AdSenseのパブリッシャーIDをサイト設定ファイルへ保存し、ビルド時にレイアウトへ自動挿入する方式にしました。

考え方は次のような形です。

{
  "adsenseClient": "ca-pub-XXXXXXXXXXXXXXXX"
}

実際のコードでは、この値が設定されている場合だけAdSenseスクリプトをheadへ出力します。

パブリッシャーIDを記事本文へ何度も書く必要がなく、変更があっても設定ファイル1か所で管理できます。

このブログでは、ローカルの下書きプレビューや本番以外のブランチには広告コードを出さず、公開用の本番HTMLだけに出力するようにしています。

下書き確認中のページや一時的なプレビューURLで広告コードが動くのを避けるためです。

GitHubへ変更を反映すると、Cloudflare PagesのGit連携で自動ビルド・デプロイが走ります。

Cloudflare公式では、Git連携されたPagesプロジェクトはpushをきっかけに自動ビルド・デプロイされ、指定したビルド出力ディレクトリの内容が公開サイトとしてアップロードされる仕組みです。

pages.devから独自ドメインへ移行した場合、コード自体が同じでもAdSense側のサイト登録URLは別途確認します。

このブログでは独自ドメイン移行後に正式URL、canonical、sitemap、GA4、Search Console、AdSense側の登録を新ドメインへ揃えました。