はじめに

無料で始められて、しかも高速。そんな甘い言葉に誘われてHugoとGitHub Pagesでサイトを立ち上げる人が後を絶たない。かく言う私もそのひとりだった。

だが、サイトを「ただ公開する」だけでは、誰にも届かない。検索に引っかからず、読み込みも遅く、ユーザーが離脱していくのを指をくわえて見るしかなかったのだ。

本記事では、そんな苦い経験から得た教訓と、同じように悩んでいた知人たちとの知見をもとに、Hugo × GitHub Pagesの組み合わせでSEOとパフォーマンスを最適化する方法を、具体的な設定例と共に解説する。

Contents

SEO対策の実践方法
パフォーマンスの最適化
継続的な改善方法

SEO対策の実践方法

タイトルとメタディスクリプションの最適化

まず最初に問いたい。「あなたのサイト、検索結果で魅力的に見えているだろうか？」

タイトルとメタディスクリプションは、検索結果における”顔”である。だからこそ、ここで気を抜くと、いくら中身が優れていてもクリックしてもらえない。

タイトルの工夫

config.yamlで全体タイトルを設定するのは基本中の基本だが、各ページ固有のタイトルにも魂を込めたい。

title: "ウェブサイトのメインタイトル"

ページのフロントマターでの設定例は以下の通り。

---
title: "SEOに最適なHugoサイト構築法"
---

このように、検索意図に沿ったキーワードを盛り込みつつ、無機質にならない言い回しを心がけるとよい。

メタディスクリプションの活用

クリックされるか否かは、この短い一文にかかっている。数十文字の中に「読む価値がある」と感じさせる要素を詰め込む。

params:
  description: "SEOに特化したHugoサイト構築のための完全ガイド"

ページごとの設定は以下のようにする。

---
description: "Hugoサイトを最適化する具体的な手法をご紹介。"
---

正規URL（Canonical URL）の設定

同じような内容のページが複数存在すると、Googleは混乱する。これが重複コンテンツによるSEOスコアの低下を招く。

それを防ぐ手立てがcanonicalタグである。

---
canonical: "https://example.com/specific-page"
---

テンプレート内では以下のように処理するのが一般的だ。

{{ if isset .Params "canonical" }}
  <link rel="canonical" href="{{ .Params.canonical }}">
{{ else }}
  <link rel="canonical" href="{{ .Permalink }}">
{{ end }}

構造化データとOGタグの追加

見えない部分の作り込みが、検索結果のリッチスニペットやSNSでの視認性向上に直結する。

構造化データ（JSON-LD）

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "{{ .Site.Title }}",
  "url": "{{ .Permalink }}"
}
</script>

OGタグ（Open Graph Protocol）

FacebookやTwitterでの表示を制御できる。クリック率アップの起爆剤にもなる。

<meta property="og:title" content="{{ .Title }}">
<meta property="og:description" content="{{ .Params.description }}">
<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:type" content="website">
<meta property="og:image" content="{{ .Params.image }}">

パフォーマンスの最適化

画像とリソースの圧縮

SEOだけでなく、ユーザー体験の面でも軽快な動作は不可欠だ。読み込みに3秒以上かかると、半分以上の訪問者が離脱するという調査結果もある。

画像圧縮

画像の最適化にはImageMagickが役立つ。次のコマンドでサイズも品質も調整できる。

mogrify -resize 800x800 -quality 85 image.jpg

CSS/JSのミニファイ

Hugoにはminifyオプションが用意されている。これを有効にするだけでコードが圧縮され、表示速度が改善する。

minify:
  disableXML: true

モバイル対応の強化

モバイル端末での見え方は、Googleの評価軸そのものだ。

テーマが対応していなければ、CSSでメディアクエリを追加していくしかない。

<meta name="viewport" content="width=device-width, initial-scale=1">

CDNの導入による高速化

GitHub Pages単体では物理的に限界がある。Cloudflareの無料プランを併用すれば、世界中のユーザーに高速配信が可能となる。

DNSの切り替えやキャッシュ設定には少し注意が必要だが、その効果は絶大である。

継続的な改善方法

改善は一度きりではない。継続こそが信頼の証である。

Google Search Consoleでクロールやインデックス状況をチェック。
古い記事も定期的に更新し、情報の鮮度を保つ。
内部リンクを工夫し、回遊性を高める。トップページにたどり着かせるのではなく、読ませたいページへ導く設計を。

まとめ

HugoとGitHub Pages。この強力なコンビを選んだ時点で、あなたのスタートは間違っていない。

だが、スタート地点で止まっていては意味がない。
検索エンジンに見つけられ、ユーザーに好かれるには、裏側の工夫と改善の積み重ねが必要だ。

タイトルやディスクリプションで心をつかみ、構造化データでGoogleに理解させ、軽快なパフォーマンスで離脱を防ぐ。
そして、そのすべてを継続し続ける意志こそが、真に成果をもたらす。

未来の読者は、もうそこまで来ている。あなたのサイトに、たどり着けるようにしておこう。

HugoとGitHub PagesでSEOとパフォーマンスを最適化する方法