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タグが設置できた。