[Hugo] Google Adsense の設置２

Hitoshi Arakawa | 2025/04/19 Sat 05:46

以前 Hugo で作ったサイトに Google Adsense を表示させる方法について書いた。

[Hugo] Google Adsense の設置｜荒川仁志
https://note.com/hitoshiarakawa/n/nd653cf18e036

その方法を改めてまとめ直してみる。

今回はブログの個別ページに、トップのアンカー広告、そしてフッターに広告を表示させる。

環境：
・Mac mini（2024、M4）
・Hugo v0.145.3
・Hugoplate テーマ

（１）Google Adsense に広告を表示させたいサイトの審査を通過させておく。

（２）Google Adsense の「Ads＞By ad unit」で Display ads を作成する。コードを確認することで、data-ad-client と data-ad-slot を確認できる。

（３）Google Adsense の「Ads＞By site」で該当サイトの鉛筆マークをクリック。「Overlay formats」で「Anchor ads」にチェックを入れる。これでアンカー広告の表示準備ができた。

（４）/themes/hugoplate/layouts/partials/google を作成し、以下の内容の adsense.html を作成する。

<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

（５）/themes/hugoplate/layouts/partials/google に以下の内容の display-unit.html を作成する。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- display-unit -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

（６）/themes/hugoplate/layouts/partials/essentials/head.html に以下を追記する。

<!-- Adsense -->
{{ partial "google/adsense" . }}

（７）/themes/hugoplate/layouts/blog/single.html で、広告を設置したいフッター位置に以下を記述する。

<!--Google Adsense-->
{{ partial "google/display-unit" . }}

これでしばらくすると広告が表示されるようになるはずだ。

Google AdSense マネタイズの教科書［完全版］ | のんくら（早川修）, a-ki, 石田健介, 染谷昌利 | 工学 | Kindleストア | Amazon
https://amzn.to/3YE3nka