Astro標準i18nで日本語URLを維持した多言語サイト構築

既に公開している日本語サイトへ英語版を追加するとき、URLをどう扱うかは後から直しにくい設計です。日本語ページを突然/ja/へ移すと、既存リンク、検索結果、共有済みURLをまとめて変更することになります。日本語を既定言語にするサイトでは、日本語URLをそのまま残し、英語版だけを/en/配下に置く構成が扱いやすくなります。

この記事では、AstroのファイルベースルーティングとContent Collectionsを使い、日本語を/、英語を/en/に分ける方法と、確認すべきポイントを説明します。

URLの方針を先に固定する

この構成では、トップページと記事一覧のURLを次のように対応させます。

内容	日本語	英語
トップ	/	/en/
記事一覧	/blog/	/en/blog/
記事	/blog/slug/	/en/blog/slug/
固定ページ	/about/	/en/about/

URLを決めるときは、記事IDと末尾スラッシュの方針も同時にそろえます。日英で同じ記事IDを使えば、言語切り替えリンクやhreflangの対応先を機械的に求めやすくなります。一方で、言語ごとに無関係なslugを付ける場合は、対応表を別に管理する必要があります。

ページを言語ごとに分ける

Astroでは、src/pages/のファイルがURLになります。日本語を既定URLに残す場合、日本語ページは通常の場所に置き、英語ページだけをsrc/pages/en/へ置きます。

src/pages/
├── index.astro
├── blog/
│   ├── index.astro
│   └── [...slug].astro
└── en/
    ├── index.astro
    └── blog/
        ├── index.astro
        └── [...slug].astro

画面の文言は、ナビゲーション、ページタイトル、フォームのラベル、エラーメッセージまで対象です。本文だけを英訳しても、<html lang>、ページ説明、言語切り替えのリンクが日本語のままでは、利用者にも検索エンジンにも一貫したページになりません。

コンテンツを別コレクションで管理する

日英の記事本文は別のMarkdownファイルとして保持します。たとえば日本語をsrc/content/blog/、英語をsrc/content/blog-en/に分け、それぞれをContent Collectionとして定義します。

const blog = defineCollection({
  loader: glob({ base: './src/content/blog', pattern: '**/*.md' }),
  schema: blogSchema,
});

const blogEn = defineCollection({
  loader: glob({ base: './src/content/blog-en', pattern: '**/*.md' }),
  schema: blogSchema,
});

同じIDのファイルを日英に置くと、21-astro-i18n-japanese-default-urlのような識別子を両言語の対応に利用できます。title、description、タグも各言語で持たせます。本文だけを翻訳して、検索結果用の説明を既定言語のまま使い回さないことが大切です。

言語切り替えで強制移動しない

ブラウザ言語は、英語版を案内するための参考情報にはなりますが、現在のURLを勝手に置き換える根拠にはなりません。リンクを表示し、移動するかは利用者に選んでもらいます。ブックマーク、共有リンク、明示的に選んだ言語を尊重できるためです。

記事ページでは、現在の記事IDから対応する言語URLを作ります。対応する翻訳がないページでは、存在しないURLへの切り替えリンクを出さないようにします。言語切り替えの仕組みとSEO用のhreflangは関連しますが、役割は異なります。表示上の導線と、HTMLメタデータの両方を確認してください。

ビルド後にURLを確認する

開発サーバーで表示できても、本番ビルドで期待しないルートが生成される場合があります。公開前には少なくとも次を確認します。

• 日本語の既存URLが/en/へ変わっていない
• 日英のトップ、固定ページ、記事一覧、記事詳細が生成されている
• 各言語のtitle、description、lang属性が対応している
• 言語切り替えリンクが存在する対応ページだけを指している
• canonicalとhreflangが、実際に生成されたHTTPS URLを指している

少数言語・静的Markdownのサイトでは、ページとコンテンツを明示的に分ける構成は理解しやすく、URLの意図も保ちやすくなります。言語数や翻訳フローが増えた時点で、CMSや翻訳管理の導入を改めて検討すれば十分です。

関連記事

• Astro Content Collections入門
• Astroブログの公開前チェック