Google AdSense 統合

Google AdSense は、サイトに広告を表示して収益化するためのサービスです。AdSense の導入は大きく 2 つに分かれます。

プラットフォーム側：AdSense の申請、サイト追加、審査通過、広告ユニット作成
コード側：AdSense スクリプトの挿入、（任意）広告枠コンポーネントの挿入、広告表示の確認

前提条件

サイトが本番環境にデプロイされていること
基本的なコンテンツと必須ページ（例：About / Privacy / Terms など）があること（審査通過率の向上）

ステップ 1：申請とサイト追加

AdSense を開きます：https://www.google.com/adsense/
手順に沿って登録/ログインし、サイト URL を送信します

ガイドに従ってサイトの所有権確認を完了します

表示されるコードの ca-pub- の後ろの文字列をコピーし、環境変数 NEXT_PUBLIC_GOOGLE_ADSENSE_ID に設定します。

.env

NEXT_PUBLIC_GOOGLE_ADSENSE_ID=xxxxxxxxxxxx

次に、txt 検証（ads.txt）の内容を public/ads.txt に貼り付けます。

ステップ 4：「自動広告」または「広告ユニット」を選択

方法 A：自動広告

AdSense の管理画面で Auto ads を有効にすると、Google が自動的に最適な位置に広告を表示します。

この方法は、上記の手順を完了すれば動作します。

方法 B：手動の広告枠

特定の場所に固定で広告を表示したい場合は、広告ユニットを作成し、ページに広告枠を挿入します。

一般的な実装例として、フロントエンドに AdSlot コンポーネントを用意します：

"use client";
 
import { useEffect } from "react";
 
type AdSlotProps = {
  adSlot: string;
  adFormat?: string;
  fullWidthResponsive?: boolean;
};
 
export function AdSlot({
  adSlot,
  adFormat = "auto",
  fullWidthResponsive = true,
}: AdSlotProps) {
  const client = process.env.NEXT_PUBLIC_GOOGLE_ADSENSE_ID;
 
  useEffect(() => {
    try {
      // @ts-expect-error adsbygoogle is injected by AdSense
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    } catch {
      // ignore
    }
  }, []);
 
  if (!client) return null;
 
  return (
    <ins
      className="adsbygoogle"
      style={{ display: "block" }}
      data-ad-client={client}
      data-ad-slot={adSlot}
      data-ad-format={adFormat}
      data-full-width-responsive={fullWidthResponsive ? "true" : "false"}
    />
  );
}

AdSense 側で生成された data-ad-slot を adSlot に設定し、表示したい位置で <AdSlot /> をレンダリングしてください。