Next.jsでAdsenseタグを埋め込んだら Only one AdSense head tag supported per page エラーが発生

公開日時

Next.jsで作られたサイトにAdsense用のscriptタグを埋め込む際に、↓のようにcomponent内でタグ埋め込みを行っていた。

// components/Header.tsx
import Head from 'next/head'

export const Header = () => {
  const adsenseId = process.env.NEXT_PUBLIC_ADSENSE_ID

  return (
    <Head>
      <script
        data-ad-client={adsenseId}
        async
        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" 
      />
    </Head>
  )
}

デプロイ後にDeveloperConsoleを開いて確認してみたところ、以下のエラーが発生していた。

adsbygoogle.push() error: Only one AdSense head tag supported per page.
The second tag is ignored.

headタグの中身を動的に書き換える際にタグが再度追加されてしまいエラーが起きていた模様。

そこで、 pages/_document.tsx にscriptタグを移動しサーバサイドレンダリングするように変更した。

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    const adsenseId = process.env.NEXT_PUBLIC_ADSENSE_ID

    return (
      <Html>
        <Head>
          <script
            data-ad-client={adsenseId}
            async
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

これでエラーなくscriptタグが設置できた。

参考


Related #next.js

FigmaでSVG Octocatを作る その3

アウトライン化大事

Next.jsプロジェクトのGoogle Analytics V3をV4に更新する

トラッキングIDの差し替えのみで対応が完了した

Vercelで指定のブランチのみデプロイを実行する

Ignored Build Stepを設定した