Hugo + Netlifyで構築したサイトに Google Adsenseを設定していきます.

※独自ドメインを設定していないとGoogle Adsenseに登録することはできないので, 設定する必要があります.

設定方法は,

Netlifyでホスティングしているサイトに独自ドメイン(お名前.com)を設定する

を参考にしてください.

Google Adsenseに登録

まず, Google Adsense へ行き, お申込みはこちら から登録していきます.

サイトのURLやE-mailアドレスなど必要な情報を入力しながれ流れに沿って進めて行くと,

サイトをAdsenseにリンク という欄で, HTMLソースに貼り付けるスクリプトが提示されます.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-xxxxxxxxxxxxxx",
          enable_page_level_ads: true
     });
</script>

↑こういうの.

これをHugo内のテンプレートに貼り付けていきます.

テンプレートファイルを編集

直接, cloneしたテーマを編集するのはアレなので, コピってから追加していきます.

大抵, themes/<テーマ>/_default/baseof.html に元となるHTMLファイルがあるはずなので(覗いてみてなさそうなら適切なHTMLファイルに読み替えて), これをコピーします.

ターミナルから, サイトのディレクトリに移動して,

$ cd path/to/HugoSite
$ mkdir layouts/_default
$ cp themes/hugo-nuo/layouts/_default/baseof.html layouts/_default/

adsense用スクリプトは, baseof.htmlに直書きするのではなく, 部品として 埋め込んで行きます.

$ mkdir layouts/partials
$ touch layouts/partials/adsense.html

あとはadsense.htmlに, 先程の埋め込めと言われた adsenseのスクリプトをコピペします.

次に, adsense.htmlを baseof.htmlに埋め込んで行きます.

コピーした baseof.html の headタグ内に以下の一文を追加します.

{{ partial "adsense.html" . }}

かなり省略してますが, こんな感じ⇓

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
    <head>
    {{ partial "adsense.html" . }}
    </head>
</html>

あとは, 通常通りデプロイすれば反映されますので, Google Adsenseに戻って続きの設定をします(とは言っても流れにしたがって進めるだけだけど.)

審査には時間がかかるので, あとは気長に待ちましょう.

無事審査を通れば, 広告が表示されるはずです.

ads.txt

必須ではないみたいですが, ads.txtをドメインのルートレベルに設置することをGoogleに強く推奨されたのでこれについても.

ads.txt で認定販売者を宣言する

ドメインのルートレベルに, ads.txtを設置するには, contentディレクトリ直下に ads.txt を設置すれば適切にホスティングされます.

$ echo "google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0" > content/ads.txt

※pub以降のIDはご自身のサイト運営者IDに置き換えてください.