Hugoブログを検索上位に導く！SEO対策の実践テクニックと高速化設定の完全ガイド

ブログ運営
2024.12.08

はじめに

ブログをHugoで構築してみたはいいものの、「なぜか検索結果で上に来ない」と首をかしげた経験はないだろうか。

Hugoは爆速のビルドと柔軟なカスタマイズ性で、多くの開発者に愛されている。
しかし、初期状態のままではSEOの土俵にすら立てないこともある。実際、筆者も初めてHugoでブログを公開したとき、Googleにすらインデックスされず数週間が経過した。
原因は明白だった——meta情報や構造化データ、内部リンクの不備である。

そこで今回は、実際に検索順位を改善できた経験をもとに、HugoのSEO強化術をコード付きで解説する。
SNSでの見栄えから、検索エンジンの理解促進まで。Hugoで“魅せる”だけでなく“上げる”ための戦略を紹介しよう。

スポンサーリンク
スポンサーリンク

1. meta descriptionとOGタグの自動生成

Hugoでは、meta descriptionやOG（Open Graph）タグの設定が後回しになりがちだ。
だが、これを怠ると検索結果で目立たず、SNSでのシェア時にもパッとしないリンクが表示されてしまう。

実装の要点

layouts/_default/baseof.htmlに以下を記述することで、各記事のFront Matterから自動的に情報を抽出できる。

<!-- meta description -->
<meta name="description" content="{{ with .Params.description }}{{ . }}{{ else }}{{ .Summary }}{{ end }}">

<!-- Open Graph -->
<meta property="og:title" content="{{ .Title }}">
<meta property="og:description" content="{{ .Params.description | default .Summary }}">
<meta property="og:image" content="{{ .Params.featured_image | default "/images/default-og.jpg" }}">
<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:type" content="article">

実践ポイント

  • description と featured_image をFront Matterに入れておけば、SNSでシェアされたときに視覚的な印象が一変する。
  • meta descriptionの工夫次第でクリック率が変動するため、検索順位に間接的な好影響を与える。

2. JSON-LDで構造化データを追加

構造化データを活用すると、Googleがコンテンツの文脈を正しく理解しやすくなる。
筆者が初めてJSON-LDを導入した時、驚くほど早くリッチリザルトが表示された。機械に“意味”を教えるのは、SEOでは必須のスキルだ。

実装の要点

layouts/_default/baseof.htmlに次のスニペットを追加する。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "{{ .Title }}",
  "datePublished": "{{ .PublishDate.Format "2006-01-02" }}",
  "author": {
    "@type": "Person",
    "name": "Your Name"
  },
  "image": "{{ .Params.featured_image | default "/default-og-image.jpg" }}",
  "url": "{{ .Permalink }}",
  "description": "{{ .Params.description | default .Summary | plainify }}"
}
</script>

実践ポイント

  • 著者名や公開日、画像パスは正確に記述すること。Googleの認識率が格段に上がる。
  • Schema.orgの仕様変更にも注意しながら、定期的なメンテナンスを忘れずに。

3. 画像のlazy loadingでパフォーマンス強化

いくら内容が優れていても、表示が遅ければユーザーは離れてしまう。
Googleもそこをしっかり見ている。Hugoでは、lazy loadingの仕組みを簡単に実装できる。

実装の要点

shortcodes/figure.htmlを新規作成し、以下を記述する。

<figure>
  <img loading="lazy" src="{{ .Get "src" }}" alt="{{ .Get "alt" }}">
  {{ if .Get "caption" }}
    <figcaption>{{ .Get "caption" }}</figcaption>
  {{ end }}
</figure>

実践ポイント

  • 画像をこのショートコード経由で呼び出すだけで、すべてがlazy化される。
  • Core Web Vitalsの改善に直結し、特にモバイル環境でのUXが飛躍的に向上する。

4. 関連記事による内部リンク最適化

Hugoで作ったブログはスピーディだが、読者を他の記事に導く導線がないと“孤島”になってしまう。
内部リンクはSEOの栄養源であり、回遊性を高める仕掛けが重要だ。

実装の要点

記事下部に以下のコードを追加してみよう。

<section>
  <h2>関連記事</h2>
  <ul>
    {{ range first 5 (where .Site.RegularPages "Type" "post") }}
      <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
    {{ end }}
  </ul>
</section>

実践ポイント

  • 関連記事があるだけで離脱率が劇的に下がる。
  • 検索エンジンにも「サイト内構造が整っている」と認識されやすくなる。

5. AMP対応でモバイル特化型ページを実現

モバイルファーストの時代において、AMP（Accelerated Mobile Pages）の導入は強力な選択肢となる。
正直なところ、AMPの構築は少し骨が折れる。それでも、ある知人のブログはAMP対応後、モバイル検索での順位が急上昇したという。

実装の要点

AMP用に専用テンプレートlayouts/_default/amp.htmlを作成し、AMP仕様のHTMLを記述する。ページヘッダではcanonicalタグの設定も忘れずに。

実践ポイント

  • GoogleのAMPテストでエラーを逐一チェックすること。
  • AMPは一部のJavaScript制限があるため、機能設計を最初にしっかり見直しておくと良い。

まとめ

Hugoで作ったブログが検索結果で埋もれてしまうのは、単なる構築スピードのせいではない。
meta情報、構造化データ、パフォーマンス、内部リンク、AMP……これらを丹念に整備することこそが、検索エンジンに選ばれるサイトをつくる鍵となる。

今回紹介した5つの施策を実装することで、Hugoブログは“ただ速い”から“見つけられる”存在へと進化する。静的サイトだからこそ、緻密に仕込む価値があるのだ。

コメント