Hugo × Google AdSense で広告を設置する方法

Hugo は静的サイトジェネレーターであり、Google AdSense は広告収入を得るための有力なツールです。この記事では、Hugo サイトに Google AdSense を設置する方法を詳しく説明します。

前提条件

Hugo サイトが既に構築されている
独自ドメイン（例：blog.rkstep.com）を保有している
Google AdSense アカウントを作成済み

1. Google AdSense の準備

1.1 アカウント作成

Google AdSenseにアクセス
Google アカウントでログイン
個人情報・支払い情報を入力
サイト情報を登録

1.2 審査要件

独自ドメイン
HTTPS 対応
オリジナルコンテンツ（最低 10 記事以上）
プライバシーポリシー・利用規約
適切なトラフィック

2. Hugo での設定

2.1 AdSense コードの配置

src/themes/PaperMod/layouts/partials/head.htmlに以下のコードを追加：

<!-- Google AdSense Account -->
<meta name="google-adsense-account" content="ca-pub-5944005354132268" />

<!-- AdSense 所有権確認スクリプト -->
<script
  async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5944005354132268"
  crossorigin="anonymous"
></script>

2.2 ads.txt ファイルの作成

src/static/ads.txtを作成し、以下の内容を配置：

google.com, pub-5944005354132268, DIRECT, f08c47fec0942fa0

2.3 広告ユニットの作成

src/layouts/partials/adsense.htmlを作成：

{{- /* AdSense Ad Units */ -}} {{- if hugo.IsProduction | or (eq site.Params.env
"production") -}}

<!-- Header Ad (728x90) -->
{{- if .Params.showHeaderAd | default true -}}
<div class="adsense-header" style="text-align: center; margin: 20px 0;">
  <ins
    class="adsbygoogle"
    style="display:inline-block;width:728px;height:90px"
    data-ad-client="ca-pub-5944005354132268"
    data-ad-slot="YOUR_HEADER_AD_SLOT"
  ></ins>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>
{{- end -}}

<!-- Inline Ad (336x280) -->
{{- if .Params.showInlineAd | default true -}}
<div class="adsense-inline" style="text-align: center; margin: 20px 0;">
  <ins
    class="adsbygoogle"
    style="display:inline-block;width:336px;height:280px"
    data-ad-client="ca-pub-5944005354132268"
    data-ad-slot="YOUR_INLINE_AD_SLOT"
  ></ins>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>
{{- end -}} {{- end -}}

3. テンプレートへの組み込み

3.1 記事テンプレート

src/layouts/_default/single.htmlまたは記事テンプレートに広告を配置：

{{ define "main" }}
<article>
  <header>
    <h1>{{ .Title }}</h1>
  </header>

  <!-- ヘッダー広告 -->
  {{ partial "adsense.html" . }}

  <div class="content">
    {{ .Content }}

    <!-- インライン広告 -->
    {{ partial "adsense.html" . }}
  </div>
</article>
{{ end }}

3.2 サイドバー広告

src/layouts/partials/sidebar.htmlにサイドバー広告を追加：

<aside class="sidebar">
  <!-- サイドバー広告 -->
  <div class="adsense-sidebar" style="text-align: center; margin: 20px 0;">
    <ins
      class="adsbygoogle"
      style="display:inline-block;width:300px;height:250px"
      data-ad-client="ca-pub-5944005354132268"
      data-ad-slot="YOUR_SIDEBAR_AD_SLOT"
    ></ins>
    <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>
</aside>

4. 広告ユニットの作成

4.1 AdSense ダッシュボードで作成

AdSense ダッシュボードにログイン
「広告」→「広告ユニット」→「新しい広告ユニット」
広告の種類を選択：
- ディスプレイ広告
- インフィード広告
- イン記事広告

4.2 推奨サイズ

ヘッダー: 728x90
インライン: 336x280
サイドバー: 300x250
フッター: 728x90

5. 設定の最適化

5.1 広告の配置

ユーザーエクスペリエンスを考慮
コンテンツと広告のバランス
モバイル対応

5.2 収益最適化

A/B テストの実施
広告の位置調整
クリック率の分析

6. トラブルシューティング

6.1 よくある問題

広告が表示されない: 審査状況の確認
収益が上がらない: トラフィック・配置の見直し
エラーが発生: コードの構文チェック

6.2 デバッグ方法

ブラウザの開発者ツールで確認
AdSense ダッシュボードでエラー確認
本番環境でのテスト

7. ベストプラクティス

7.1 ユーザーエクスペリエンス

過度な広告配置を避ける
コンテンツの読みやすさを優先
モバイルフレンドリーな配置

7.2 収益最大化

高単価キーワードの活用
季節性コンテンツの作成
ユーザーエンゲージメントの向上

まとめ

Hugo と Google AdSense の組み合わせにより、静的サイトでも効果的な広告収入を得ることができます。適切な設定と継続的な最適化により、安定した収益を目指しましょう。