Hugo + Cloudflare PagesでSEO対策としてやったこと全まとめ——失敗も含めて

ブログを公開するだけではGoogleに見つけてもらえない。このブログ（ai-blog-lab.net）を立ち上げたとき、インフラを整えるのと並行してSEO対策も一通りやった。Hugo + Cloudflare Pagesという構成でやったことを、失敗も含めてまとめておく。

やったこと一覧

sitemap.xmlの生成とGoogle Search Consoleへの送信
robots.txtの設置
メタタグ・OGP設定
Google Search Console（GSC）連携
Google Analytics 4（GA4）設置
ads.txtの設置
stickyヘッダーの実装

1. sitemap.xmlの生成

HugoはデフォルトでsitemapをURLのルートに出力する。設定不要で/sitemap.xmlにアクセスすれば表示される。

Cloudflare Pages経由で公開した後、Google Search Consoleにsitemapを送信する。

手順：

Google Search Consoleにログイン
対象プロパティを選択
左メニュー「サイトマップ」→ URLを入力して送信

送信するURLは https://ドメイン名/sitemap.xml。記事を追加するたびに再送信するのがおすすめ。

2. robots.txtの設置

Hugoはstatic/robots.txtを置くだけで自動的に/robots.txtとして配信される。

User-agent: *
Allow: /
Sitemap: https://ai-blog-lab.net/sitemap.xml

特定のクローラーを弾く必要はないので全許可にした。サイトマップのURLも記載しておくとクローラーが見つけやすくなる。

3. メタタグ・OGP設定

PaperModはデフォルトでメタタグとOGPをある程度出力してくれる。layouts/partials/extend_head.htmlに追記することで細かいカスタマイズができる。

設定した主なタグ：

og:title、og:description、og:image
twitter:card（SNSシェア用）
Google AdSenseのサイト確認用メタタグ

OGP画像は各記事ごとにフロントマターのimageフィールドで指定している。

4. Google Search Console連携

GSCとの連携はHTMLタグによるサイト確認を使った。

extend_head.htmlに以下を追加：

<meta name="google-site-verification" content="確認コード" />

Cloudflare Pagesにデプロイ後、GSCで「確認」を押せば完了。

5. Google Analytics 4設置

GA4のトラッキングコードもextend_head.htmlに追加した。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

設置後、GA4の「リアルタイム」画面で自分のアクセスが計測されていれば成功。

6. ads.txtの設置（と失敗）

Google AdSenseを使う場合、ads.txtの設置が必要になる。static/ads.txtに置けば/ads.txtとして配信される。

内容はAdSenseの管理画面に表示される文字列をそのままコピーする：

google.com, pub-XXXXXXXXXXXXXXXX, DIRECT, f08c47fec0942fa0

ここで失敗した。

ファイル自体は正しく設置できていたが、AdSenseの管理画面では「未確認」のまましばらく表示され続けた。実際に/ads.txtにアクセスすると内容は表示されていたので、ファイルの問題ではなくAdSense側の確認に時間がかかっていただけだった。焦って何度も確認しても意味がなく、数日待てば「確認済み」に変わった。

もう一つの失敗：AdSenseアカウントの重複

AdSenseの申請時に「すでにアカウントをお持ちです」というエラーが出た。別のサイトで使っていた既存アカウントがあったため、新規申請ができない状態だった。

対応としては、既存アカウントにai-blog-lab.netをサイト追加する形に切り替えた。新規で作ってしまったアカウントは別途閉鎖が必要になり、手間が増えた。AdSenseを使う予定がある場合は、最初から既存アカウントがないか確認しておくことをおすすめする。

7. stickyヘッダーの実装（と失敗の連続）

スクロールしてもヘッダーが追従するようにしたかった。PaperModはデフォルトでstickyになると思っていたが、このブログでは固定されていなかった。

extend_head.htmlにCSSを追加する方針で進めたが、セレクタを4回修正することになった。

.nav→ 要素が存在しなかった
header→ !importantを付けても効かなかった
.header→ 同様に効かなかった
header.header→ やっと効いた

なぜ3回失敗したのか。原因はAdSenseのスクリプトがheader.headerに対してposition: relative !importantを注入していたためだった。同じ特異度では後から読み込まれた方が勝つので、header.headerという完全一致のセレクタで上書きすることで解決した。

最終的にextend_head.htmlに追加したCSSはこれだけ：

header.header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

シンプルだが、ここにたどり着くまでにCloudflareへのデプロイを何度も繰り返した。

まとめ

Hugo + Cloudflare Pagesの構成でSEOの基本は一通り揃えることができた。コストはゼロで、設定もほぼコードを数行追加するだけ。

ただし、やってみて気づいたのは「設定が正しくても確認に時間がかかるものがある」ということ。ads.txtの未確認状態やAdSenseアカウントの重複など、焦っても解決しない問題が多かった。

インフラを整えたら、あとは記事を書き続けるしかない。このブログでも引き続き検証していく。

やったこと一覧#

1. sitemap.xmlの生成#

2. robots.txtの設置#

3. メタタグ・OGP設定#

4. Google Search Console連携#

5. Google Analytics 4設置#

6. ads.txtの設置（と失敗）#

7. stickyヘッダーの実装（と失敗の連続）#

まとめ#