Google AdSense審査前に準備すること｜ads.txt・広告枠・CMP対応
個人サイト制作シリーズ この記事は「Next.jsで個人ブログ兼Webツールサイトを1から作る」連載の一部です。
初めての人でも順番に進められるよう、前提知識をできるだけ省き、つまずきやすいポイントもあわせて整理しています。
個人サイトを作ったら、次に考えたいのが広告収益化です。Google AdSenseは代表的な選択肢ですが、広告コードを貼ればすぐに完了、というわけではありません。
1. AdSenseコードを設置する
Next.jsでは外部スクリプトに next/script を使うことがあります。ただし、AdSenseでは次のような警告が出る場合があります。
AdSense head tag doesn't support data-nscript attribute.
警告が出た場合は、まずAdSenseの案内と現在のNext.jsの仕様を確認します。この連載の構成では、app/layout.tsx の <head> に通常の <script> として設置する方法を使いました。
<head>
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXX"
crossOrigin="anonymous"
/>
</head>
2. 広告枠コンポーネントを作る
"use client";
import { useEffect } from "react";
declare global {
interface Window {
adsbygoogle?: unknown[];
}
}
const enableAds = process.env.NEXT_PUBLIC_ENABLE_ADS === "true";
export function AdBanner() {
useEffect(() => {
if (!enableAds) return;
try {
window.adsbygoogle = window.adsbygoogle || [];
window.adsbygoogle.push({});
} catch {}
}, []);
if (!enableAds) {
return <div className="min-h-[250px]">AD SPACE</div>;
}
return (
<ins
className="adsbygoogle"
style={{ display: "block", minHeight: "250px" }}
data-ad-client="ca-pub-XXXXXXXXXXXX"
data-ad-slot="広告ユニットID"
data-ad-format="auto"
data-full-width-responsive="true"
/>
);
}
3. .env.localで広告表示を切り替える
NEXT_PUBLIC_ENABLE_ADS=true
静的出力では、この値はビルド時に固定されます。
.env.localを変更
↓
npm run build
↓
本番へアップロード
4. ads.txtを設置する
public/ads.txt を作ります。
google.com, pub-XXXXXXXXXXXX, DIRECT, f08c47fec0942fa0
本番では以下で表示される必要があります。
https://example.com/ads.txt
5. ads.txtステータスが不明な場合
AdSense管理画面で ads.txt が「不明」と表示されることがあります。まず確認することです。
・https://example.com/ads.txt が表示できる
・pub-IDが正しい
・中身が空ではない
・HTMLタグが混ざっていない
・robots.txtでブロックしていない
表示できている場合でも、管理画面への反映には時間がかかることがあります。内容とクロール可否を確認したうえで、AdSense側の再確認を待ちます。
6. CMPの同意メッセージを確認する
表示する地域や利用する広告機能に応じて、同意メッセージを設定します。選択肢の例は次のとおりです。
同意する
同意しない
オプションを管理する
Google AdSenseの「プライバシーとメッセージ」から設定できるCMPも選択肢になります。必要な対応は配信地域や運用内容で異なるため、管理画面の最新案内を確認してください。
7. DevTools警告を切り分ける
自分のサイト側で直すものです。
A form field element should have an id or name attribute
これは自サイトのフォーム要素を確認し、用途に合う id や name を設定します。
一方で、以下はGoogle広告iframe側の警告であることがあります。
Quirks Mode
googleads.g.doubleclick.net
8. まとめ
AdSense審査前に整えることです。
・AdSenseコードを設置する
・広告枠を作る
・ads.txtを公開する
・プライバシーポリシーを整える
・お問い合わせと免責事項を用意する
・CMP同意メッセージを設定する
・DevTools警告を切り分ける
次の記事では、公開前チェックと、制作中に詰まりやすいポイントをまとめます。