Scribe

Next.jsの多言語SEO:hreflang、サイトマップ、ロケールフォールバック

多言語対応のNext.jsサイトにおける、hreflangの代替リンク、x-default、ローカライズされたサイトマップ、翻訳済みスラッグ、ロケールフォールバックチェーンの具体的な設定手順を解説します。

View as Markdown

コンテンツを翻訳することは、多言語SEOの半分にすぎません。残りの半分は、どのURLでどの言語を提供し、どれをデフォルトとし、翻訳がないロケールには何を表示するのかを検索エンジンに正しく伝えることです。ここで失敗すると、英語の検索クエリに対してフランス語のページがインデックスされたり、10言語分の翻訳がすべて重複コンテンツとして扱われたりします。

ここでは私たちが実践しているチェックリストと、Scribeが既存のコンテンツ情報からその大部分をどのように自動生成しているのかをご紹介します。

すべてのページにhreflang代替リンクを設定する

ローカライズされたすべてのページは、自身のURLを含むすべての関連ページと、言語が一致しないユーザー向けのx-defaultを明記する必要があります。Next.jsの場合、これはページメタデータのalternates.languagesフィールドに設定します。

厄介なのは、スラッグを翻訳した場合です。たとえば、英語で/docs/getting-startedのページがフランス語で/fr/docs/premiers-pasになる場合、代替リンクにはロケールプレフィックス付きの英語スラッグではなく、ローカライズされたスラッグを使用しなければなりません。Scribeでは翻訳済みのスラッグが各翻訳データと一緒に保存され、ランタイムのalternates()ヘルパーがドキュメントごとの完全なマップを返します。そのため、メタデータのコードは手作業で維持するルックアップテーブルではなく、シンプルなループ処理で済みます。

よくある間違いを防ぐための2つのルールがあります。

  • hreflangは双方向でなければなりません。フランス語のページでドイツ語のページを指定しているなら、ドイツ語のページでもフランス語のページを指定する必要があります。同じデータストアから両方を生成することで、このルールは自動的に守られます。
  • カノニカルURLは各ロケールで自己参照にする必要があります。フランス語ページのカノニカルURLはフランス語のURLです。すべてのロケールのカノニカルURLを英語ページに向けてしまうと、Googleに「翻訳ページはインデックスから除外してよい」と伝えていることになります。

ロケールを認識するサイトマップ

サイトマップ内の各URLエントリには、x-defaultを含む同じ代替リンクを含める必要があります。ScribeのsitemapEntries()は、ドキュメントごとにすべてのロケールURLと、組み込みのpublishedAtおよびupdatedAtフィールドから取得したlastmodを含むエントリを返します。これにより、手作業で日付を管理しなくても、サイトマップを常に正確な状態に保つことができます。

公開を終了したドキュメントを、単に消去してはいけません。Scribeはタイプごとの_redirects.jsonにリダイレクト情報を保持しており、廃止されたURLはすべてのロケールで新しいURLに301リダイレクトされます。これにより、獲得したリンクの価値を失わずに維持できます。

404エラーの代わりにロケールフォールバックを使用する

/fr-CA/guide(カナダフランス語)にアクセスされたとき、フランス語の翻訳はあるけれどカナダフランス語の翻訳がない場合、どうすべきでしょうか。404エラーを返すのはせっかくの翻訳を無駄にすることになり、何も言わずに英語のページを表示すれば読者を混乱させます。

Scribeは自動的にフォールバックチェーンをたどって解決します。地域別のロケールは、英語の前にその基本言語にフォールバックします。fr-CAfrを試し、次にenを試します。zh-Hant-TWzh-Hantzh、そしてenの順に試します。ランタイムは実際に提供されたロケールをactualLocaleで報告するため、レイアウトでページに正しい言語ラベルを付けることができます。また、プリレンダリングされるパラメータにはフォールバックURLが含まれるため、ビルド時にページが存在することが保証されます。

メタデータもコンテンツの一部

タイトルやメタディスクリプションは検索順位に影響するため、本文と同じように注意深く翻訳する必要があります。Scribeでは、これらは通常の翻訳可能なフロントマターフィールドとして扱われ、他のデータと同様にハッシュ化され検証されます。翻訳プロンプトは直訳ではなくトランスクリエーション(意訳)を前提に構築されており、タイトルタグの60文字という限られた文字数の中では特に重要になります。

まとめ

これらは決して特別なことではありません。代替リンク、カノニカルURL、サイトマップ、リダイレクト、そしてフォールバックはすべて、「どのドキュメントが、どのロケールで、どのURLに存在するか」という一つの事実から導き出される管理作業にすぎません。翻訳を第一級のデータとして保存するCMSなら、この問いに一箇所で答えることができます。ホスティング型のCMS、翻訳プラットフォーム、そしてルーターを手作業で連携させようとするからこそ、多言語SEOは破綻しやすいのです。

各機能の連携の仕組みについてはランタイムAPIガイドをご覧いただくか、はじめにからスタートしてください。

Next.jsの多言語SEO:hreflang、サイトマップ、ロケールフォールバック · Scribe