審査用コードの削除

Google AdSense審査に合格したら、まずは審査提出時にheadタグに記述した審査用のコードを削除してください。合格後はこのコードは不要となります。

ads.txtを設置する

次に、ads.txtというファイルをブログに設置する必要があります。

ads.txtとは、広告の収益を正しく受け取るためのファイルで、広告主が信頼できる販売者リストを公開することで、広告の透明性と信頼性を確保するものです。

テキストの取得

まず、Google AdSenseのホームページにログインしてください。左側のタブから「サイト」を選択し、今回合格したブログのURLをクリックします。すると、ads.txtに記述するテキストが表示されるので、それをコピーしてください。

ブログに設置

Next.jsの場合、publicディレクトリの中にads.txtという名前のテキストファイルを作成します。そのファイルに先ほどコピーした内容をペーストします。

google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0

再検証

ads.txtファイルを設置したら、再びGoogle AdSenseのホームに戻り、再検証を行います。ステータスが「承認済み」と表示されれば、ads.txtの設置は完了です。

この手順を完了することで、Google AdSenseの広告収益を正しく受け取る準備が整います。

広告コードを設置する

続いて、実際に広告を設置してみましょう。

広告を設置するには、広告用のコードをブログで読み込む必要があります。

コードの取得

Google AdSenseの左側のタブから、「広告」を選択します。

「広告」のセクション内に「コードを取得する」というボタンがあるので、それをクリックして広告コードを取得します。

Next.jsを使用している場合、取得した広告コードをlayout.tsxなどの全ページで読み込まれるファイルに記述します。

import Script from 'next/script';

<Script
    async
    src={process.env.GOOGLE_ADSENSE_ID}
    crossOrigin="anonymous"
/>

筆者は環境変数から広告コードを読み込むようにしています。これは、ローカル環境では広告を動作させたくないためです。

環境変数を設定することで、本番環境でのみ広告が表示されるように制御できます。

ここまで来れば広告を設置する準備が整いました。

広告の種類

続いて、Google AdSenseの広告の種類について紹介します。

Google AdSenseには主に「自動広告」と「手動広告」の2種類があります。

自動広告

自動広告は、Google側がブログを分析し、適切な位置に自動で広告を表示してくれる機能です。この方法はスイッチをONにするだけなので非常に簡単です。

スイッチをON

Google AdSenseの左側のタブから「広告」を選択します。URLの右側にある編集ボタンをクリックすると自動広告のスイッチが表示されるので、それをONにします。

自動広告は、広告用コードを貼るだけで済むため非常に簡単であるというメリットがあります。しかし、意図しない場所に表示されてユーザビリティが下がったり、逆に表示してほしい場所に表示されないといったデメリットもあります。

そのような場合には、次に紹介する手動広告がおすすめです。

手動広告

手動広告は名前の通り、自分で設置したい場所に広告を配置していく方法です。

広告コードの取得

Google AdSenseの左側のタブから「広告」を選択し、真ん中のタブから「広告ユニットごと」を選択します。

今回は代表的なディスプレイ広告を例に紹介します。

「ディスプレイ広告」を選択し、広告ユニット名を入力して作成します。作成した広告を選択するとコードを取得できます。

取得した広告コードをブログに挿入していきます。

import Script from 'next/script';

<ins
  className="adsbygoogle"
  style={{ display: 'block', width: '100%' }}
  data-ad-client="適切に設定"
  data-ad-slot="適切に設定"
  data-ad-format="auto"
></ins>
<Script id="adsbygoogle-init" strategy="afterInteractive">
  {`
    (adsbygoogle = window.adsbygoogle || []).push({});
  `}
</Script>

筆者は上記のコードで表示させることができました。

自動広告 × 手動広告

筆者は自動広告と手動広告を組み合わせて使用しています。

主に自動広告を使用し、表示したくない場所をGoogle AdSense側から「除外エリア」として排除しています。そして、表示させたい場所には手動広告を貼りました。

Google AdSenseに合格したばかりなので最適解は見つかっていませんが、現在はこの方法で落ち着いています。

適切に表示されない場合

広告が適切に表示されない場合は、以下の点を確認してみてください。

広告がページ幅をはみ出す場合

広告がページ幅をはみ出すときは、広告に幅を指定することで解決できます。

CSSファイルで、広告に付与されているクラスである.google-auto-placedに幅を指定します。以下のコードをCSSファイルに追加してください。

.google-auto-placed {
  max-width: 100%;
  overflow: hidden;
}

これで広告がページ幅をはみ出さずに適切に表示されるようになります。

コードを設置しても表示されない場合

Google AdSenseの広告は、広告間の幅が極端に狭いとどちらかしか表示されない仕組みとなっています。

表示されない場合は適度に距離をとって設置してみてください。

最後に

ここまで、Google AdSense広告をMicroCMSとNext.jsで構築したブログに設置する方法について解説しました。

少しコードの書き方を変更しなければならない点もありますが、特別難しい設定はありません。

ぜひ参考にして、納得のいく広告の貼り方を研究してみてください。

ここまでお読みいただき、ありがとうございました。