HUGOでサイトを作る際にやっておきたいSEO対策10選

title、metaタグの設定

HUGOでは、記事ページ以外のページのタイトル設定・meta設定が以外と雑だったりします。

特にmeta descriptionは、検索エンジンでのクリック率にも直結する部分なので、しっかりと設定する必要があります。タクソノミーページやセクションページにも、_index.mdを用意するなどして、それぞれオリジナルのdescriptionを入れるのが大事です。

URLの正規化

HUGOはデフォルトでURLの正規化ができている静的サイトジェネレータなので特にカスタマイズする必要はありませんが、記事ページのURLが記事タイトルの英語化されたものの場合は、注意が必要です。

Googleは、title、meta descriptionはすべてのページで重複しないことを推奨しているため、似た内容の記事の際に重複してしまうことがあるので、URLも記事タイトルからつけるのではなく、オリジナルできちんと付けるようにしましょう。

sitemap.xmlの登録

これもHUGOにはデフォルト機能として搭載されているので、特に作業はありませんが、「ドメイン/sitemap.xml」をGoogle Search Consoleに登録して、インデックスされるスピードを上げるようにするとベターでしょう。

画像の最適化・CDN配信

Googleは2018年の所謂スピードアップデート以降、サイトの表示速度について、ページ評価の度合いを強くしています。

HUGOは静的サイトなので、表示スピードに関して問題になることはありませんが、画像やCSS、JSなどのファイルが重い場合、それがネックになるケースもあります。

特に画像のロードスピードは、ユーザーストレスに直結するので、きちんと減量化させたものを表示するのがベストです。HUGOには、WordPressのように自動画像減量機能が搭載されていますが、デフォルトでは効かないようになっているので、有効にするか、自身で減量させたファイルをアップロードするようにすると良いでしょう。

Netlifyなどの静的サイトホスティングサービスは、画像、CSS、JSなどのファイルも高速でホスティングしてくれますが、負荷分散を考えるならCloudFlareなどのCDNを利用するのもありです。

パンくずリスト＆リンクによる階層化

HUGOは、セクションによるURLの階層化はできますが、それ以上の複雑な階層化ができないため、タグやカテゴリを使った「パンくずによるコンテンツの階層化」がベータな選択肢になるかと思います。

タグやカテゴリは、フロントマッターで自由にカスタマイズできるので、

---
title: test
category-1: 言語
category-2: Ruby
category-3: Ruby on Rails
---

HOME > 言語 > Ruby > Ruby on Rails

のように、独自のデータで階層化をすると、内部リンクの強化につながります。

セクションによるURLの階層化よりも自由度が高く、複雑な階層化ができるので、オススメです。

新着＆関連記事の多様化

HUGOでは、Relatedなど関連記事を抽出する仕組みが備わっていますが、あくまでシンプルなもので、「すべての記事下の他記事へのリンクが同じ」というケースも多いでしょう。

Googleはページ内でのリンクを関連性のあるものとして解釈するので、内部リンク対策としても、なるべく記事本文に関連した記事をレコメンドするようにしたいところです。

HUGOではwhereタグとintersectを使うことで、データベースのように一覧の絞り込みが出来ます。

{{ $v1 := (where .Site.RegularPages "Section" "topics" )}}
{{ $v2 := (where .Site.RegularPages ".Params.slug" "!=" .Params.slug)}}
{{ $related:= $v1 | intersect $v2 }}
{{ with $related }}
    <ul class="article-list">
      {{ range . }}
      {{ partial "li" .}}
      {{ end }}
    </ul>
{{ end }}

先程のタグによるリンクの階層化と併せて行うことで、よりSEO効果が見込めます。

WordPressと違ってHUGOはデータベースからリアルタイムで記事を配信するわけではないので、いくら重い条件式を作ってもページ表示には影響がないのが大きなメリットです。（サイト生成が多少重くなるかもしれませんが）

構造化データに対応する

ページの構造データ化によって、ユーザーとGoogleにより多くの情報を提供できます。

構造化データの仕組みについて

構造化はマークアップで行う方式や、JSON-LDで提供する形式が、最近のGoogleの推奨フォーマットです。

JSON-LD（推奨） ページの見出しや本文のscriptタグ内に埋め込まれる JavaScript 表記。このマークアップにはユーザーに表示するテキストをそのまま挿入しないため、ネストされたデータアイテム（Event の MusicVenue の PostalAddress の Country など）を簡単に表現できます。また、コンテンツ管理システムの JavaScript コードや埋め込みウィジェットなどの方法でページのコンテンツに動的に挿入される JSON-LD データも、Google は読み取ることができます。

当サイトでは、JSON-LDによる構造化をしています。

AMP対応

Accelerated Mobile Pages（AMP）は、検索結果などにキャッシュしたコンテンツを表示させることで、ページ表示速度を高速化させる仕組みです。

データが相手のサーバーに保存されてしまうので、動的に変更があるコンテンツには不向きですが、HUGOで作成したサイトは静的サイトなので、AMPによる流入の増加は大きなメリットです。

AMPにはマークアップやコンテンツの呼び出しなどに厳格なルールがありますが、静的サイトの場合は問題になる部分が少ないので、採用しておいて損はないでしょう。

Google 検索での AMP に関するガイドライン

OGP（Open Graph Protocol）対応

OGPは、FacebookやtwitterなどのSNS上でWebページの内容を伝えるために定められたプロトコルです。

これを設定しておくと、twitterなどでリンクが引用された際に、サムネイルやテキストなどが表示されます。

SEOとは関係ないように見えますが、最近ではブログでもOGPに対応しているケースがあるので、引用された際のクリック率などにも影響すると考えると意外と重要です。

Google Analyticsの設定

厳密にはSEOではありませんが、サイトの状況を把握する意味でもGoogle Analyticsは入れておきたツールです。

HUGOでは、config.tomlにトラッキングコードを入れて、

googleAnalytics = "UA-123-45"

標準のテンプレートを呼び出すことで、

{{ template "_internal/google_analytics_async.html" . }}

Google Analyticisを呼び出せるようになっています。

Google Analytics | HUGO

ただし、テーマを使う場合は、そのテーマがanalyticsのテンプレートを呼び出すようにしているかに依存するので、配布されているテーマを使う際は注意が必要です。

HUGOでサイトを作る際にやっておきたいSEO対策を見てきました。

HUGO自体がシンプルな作りになっている分、多くのSEO対策が実施されていますが、よりSEO効果を出すために様々な工夫をすることが可能です。