【ITニュース解説】Configuring Multi-Language Website SEO with Hugo
2025年10月04日に「Dev.to」が公開したITニュース「Configuring Multi-Language Website SEO with Hugo」について初心者にもわかりやすく解説しています。
ITニュース概要
Hugoで多言語サイトの検索順位を上げるには、高品質な翻訳と適切なSEO設定が重要だ。HTMLのlang属性で言語を指定し、hreflangで代替言語ページを、canonicalで正規ページを示すタグを正しく記述する。これにより、検索エンジンがサイトを正確に理解し、SEO効果を高められる。
ITニュース解説
Webサイトを運営していると、より多くの人に見てもらいたい、検索エンジンで上位表示されたいと考えるのは自然なことだ。もしあなたが世界中のユーザーに情報を届けたいなら、Webサイトを多言語に対応させることは非常に有効な手段となる。ただし、単に翻訳するだけでは不十分で、検索エンジン最適化（SEO）の視点を取り入れる必要がある。今回解説する記事では、高速な静的サイトジェネレーターであるHugoを使って多言語サイトのSEOを効果的に設定する方法を紹介している。HugoはMarkdown形式のファイルをHTMLに変換するツールで、設定次第で非常に柔軟にサイトを構築できる。
Webサイトを多言語化する際、単に言葉を別の言語に置き換える「翻訳」だけでは、最大の効果は得られない。重要なのは、その地域の文化や慣習に合わせて内容を調整する「ローカライズ」だ。ローカライズされたページは、ユーザーにとってより親しみやすく、理解しやすいものとなるため、結果としてサイトを訪れた人がすぐに他のサイトへ移ってしまう「離脱率」を減らし、サイトに長く留まる「滞在時間」を増やし、最終的に目的とする行動（購入や問い合わせなど）につながる「コンバージョン率」を向上させる効果がある。検索エンジンは、これらのユーザー行動の改善をWebサイトの質の高さの指標と見なし、SEOランキングに良い影響を与える傾向がある。
多言語サイトのSEOを適切に行うためには、検索エンジンが各ページの言語や、同じ内容のページが他の言語でどこにあるかを正確に理解できるように、特定のHTML要素を適切に設定する必要がある。
まず、<html>タグのlang属性がある。これは、そのHTMLドキュメントがどの言語で書かれているかを示すためのもので、例えばドイツ語のページであれば<html lang="de">のように記述する。検索エンジンはこの情報を見て、そのページが特定の言語のユーザーに向けられたものであると認識する。
次に重要なのが、<link rel="alternate" hreflang="...">属性だ。これは、あるページと同じ内容（または非常に似た内容）を持つページが、他の言語や地域向けに存在する場合に、そのページのURLを示すために使用される。例えば、英語、ドイツ語、ロシア語の3つの言語で同じ内容のページがある場合、それぞれのページに、他の2つの言語のページへのリンクをhreflang属性を使って記述する。これにより、検索エンジンはこれらのページが互いに関連する多言語版であると理解し、ユーザーの言語設定や地域に最も適した言語のページを検索結果に表示できるようになる。これは、検索エンジンが誤って重複コンテンツと認識してしまうのを防ぐ上でも非常に重要だ。
そして、<link rel="canonical" href="...">属性も欠かせない。Webサイトには、異なるURLでありながら内容が重複しているページが存在することがある。例えば、URLの末尾にパラメータが付いているページや、同じ記事を複数のカテゴリに登録している場合などだ。検索エンジンはこのような重複コンテンツを嫌い、評価を下げたり、インデックスしないなどの「ペナルティ」を課す可能性がある。canonical属性は、複数の重複するページの中で、どのページが「オリジナル」であり、検索結果に表示してほしいか（つまり、最も優先的にインデックスしてほしいか）を検索エンジンに伝える役割を持つ。多言語サイトの場合、特に機械翻訳などで生成された品質の低い翻訳ページが多数ある場合、元の言語のページをcanonicalとして指定することで、検索エンジンにそのページのみを評価してもらい、翻訳ページの低品質さがサイト全体の評価に悪影響を与えるのを防ぐことができる。
先ほど触れたcanonical属性の使用には、翻訳方法によって考え方が少し異なる点がある。もしあなたのWebサイトの多言語ページが、機械翻訳ツールなどで「文字通り（literal）」に自動翻訳されたもので、品質がまだ十分でない場合、前述の通りlink rel="canonical"で元の言語のページを指し示すことが強く推奨される。これにより、検索エンジンは自動翻訳されたページを「オリジナルページの重複版」と認識し、その品質の低さによってサイト全体の評価が下がるのを防ぎ、元の言語の高品質なページを優先的にインデックスするようになる。しかし、もしあなたがWebサイトの翻訳を専門業者に依頼したり、自身で丁寧に手動翻訳を行ったりして、各言語のページが単なる翻訳ではなく、それぞれが独立した高品質なコンテンツとして成立していると自信を持てる場合、あえてcanonical属性を指定しない、つまり全ての翻訳ページを独立したオリジナルページとして扱ってほしいと検索エンジンに伝えることも一つの選択肢となる。この場合、検索エンジンが各翻訳ページを高品質な個別のコンテンツと判断すれば、それぞれが検索結果に表示される可能性が広がる。ただし、もし検索エンジンがこれらのページを重複と判断した場合、ペナルティを受けるリスクもゼロではないため、判断は慎重に行う必要がある。
では、Hugoを使ってこれらのHTML要素をどのように設定すればよいのか。Hugoはテンプレートエンジンを備えているため、一度設定すれば、サイト内の全てのページに自動的に適用できる。
まず、Webサイト全体の言語を指定する<html>タグのlang属性だ。これは通常、Hugoのテーマやサイトのルートにあるlayouts/_default/baseof.htmlというファイルで設定する。このファイルは、Webサイトの全てのページの基本的な構造を定義するマスターテンプレートのようなものだ。ここに、<html class="no-js" lang="{{ .Site.Language.Lang }}">という記述があることを確認するか、追加する。{{ .Site.Language.Lang }}はHugoのテンプレート変数で、サイト設定で指定された現在のページの言語コード（例えば「en」「de」など）を自動的に出力してくれる。
次に、link rel="alternate" hreflangとlink rel="canonical"属性の設定だ。これらは通常、<head>セクション内に追加される。記事では、layouts/partials/seo-localise.htmlという部分テンプレートファイル（partialとは、メインテンプレートから呼び出せる小さなテンプレートのこと）を作成し、そこにこれらの設定を記述する方法を推奨している。baseof.htmlの<head>セクション内で{{ partial "seo-localise.html" . }}を呼び出すことで、この部分テンプレートの内容が全てのページに埋め込まれる。
seo-localise.htmlファイルに記述する主なコードは以下のようになる。
1{{ $defaultLang := .Site.Params.defaultContentLanguage | default "en" }} 2{{ $canonical := .Permalink }} 3 4{{ if .IsTranslated }} 5 {{ $original := .Translations.GetByLang $defaultLang }} 6 {{ if $original }} 7 {{ $canonical = $original.Permalink }} 8 {{ end }} 9{{ end }} 10 11<link rel="canonical" href="{{ $canonical }}"> 12 13{{ range .AllTranslations }} 14 <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}"> 15{{ end }}
このコードについて順に説明する。まず、{{ $defaultLang := .Site.Params.defaultContentLanguage | default "en" }}は、サイトのデフォルト言語（例えば英語）を$defaultLangという変数に設定している。次に、{{ $canonical := .Permalink }}で、デフォルトのcanonical URLとして現在のページのパーマリンク（永続的なURL）を設定している。{{ if .IsTranslated }}は、現在のページが翻訳されたページであるかどうかをチェックする。もし翻訳ページであれば、{{ $original := .Translations.GetByLang $defaultLang }}で、その翻訳元のページ（デフォルト言語のページ）を取得しようと試みる。そして、{{ if $original }}で翻訳元ページが存在すれば、{{ $canonical = $original.Permalink }}として、その翻訳元ページのURLをcanonicalとして指定する。これは、自動翻訳されたページの場合に、オリジナルページを優先してインデックスさせるための重要な設定だ。
そして、<link rel="canonical" href="{{ $canonical }}">の部分で、設定された$canonical変数の値を使ってcanonicalリンクを出力する。
最後に、{{ range .AllTranslations }}という記述は、現在のページが持つ全ての翻訳版ページを繰り返し処理するためのものだ。Hugoは多言語設定をしていると、自動的に各ページの翻訳版へのリンク情報を管理してくれる。このループ内で、<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">というHTMLタグが出力される。{{ .Lang }}はその翻訳ページの言語コードを、{{ .Permalink }}はその翻訳ページのURLを指す。これにより、検索エンジンは全ての翻訳ページの関係性を正確に把握できる。
もし、全ての翻訳ページを個別のオリジナルコンテンツとして扱いたい、つまり手動翻訳で高品質なページを作成している場合は、seo-localise.htmlのコードをシンプルにして、全ての翻訳ページで自身のURLをcanonicalとして指定するように変更できる。
1{{ $canonical := .Permalink }} 2 3<link rel="canonical" href="{{ $canonical }}"> 4 5{{ range .AllTranslations }} 6 <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}"> 7{{ end }}
この場合、canonicalは常にそのページのPermalink、つまりそのページ自身のURLとなる。
これらの設定を終えたら、必ずhugoコマンドを実行してWebサイトを生成し、その後hugo serveコマンドで開発用のローカルWebサーバーを立ち上げてWebサイトを開いてみる。そして、ブラウザの「ページのソースを表示」機能を使って、実際にHTMLソースコードの中に<html>タグのlang属性、<link rel="alternate" hreflang>タグ、<link rel="canonical">タグが意図通りに、正しい属性値で出力されているかを確認することが非常に重要だ。設定が正しく反映されていることを確認できれば、多言語サイトのSEO対策は成功したと言える。