この三連休を利用して、以前から対応したかった本サイト CodeNote.net の多言語対応を実装しました。AI時代のSEOである、AIO, AEO, GEO, LEOなどに備えて、まずは第一弾として英語に対応しました。
本記事では、その際に実施した具体的な作業内容を、備忘録も兼ねてまとめたのでご紹介します。
今回実施した作業は、大きく分けると以下の通りです。
/）を言語選択ページに変更hreflang属性の設定それぞれについて、詳しく見ていきましょう。
まず最初に着手したのが、サイト全体のURL構造の見直しです。
多言語サイトのURL設計にはいくつかのパターンがありますが、今回はGoogleも推奨している、言語ごとにサブディレクトリを分ける形式（example.com/ja/、example.com/en/）を採用しました。
具体的な作業は以下の通りです。
/）直下に配置していた日本語コンテンツを、すべて /ja/ ディレクトリ配下に移動/en/ ディレクトリ配下に作成これにより、言語ごとに明確にパスが分離され、管理しやすく、ユーザーにとっても分かりやすい構造になったかと思います。
URL構造の変更に伴い、サイトの入り口となるトップページ（/）の役割も見直しました。
ここは特定の言語に属さないニュートラルなページとして、ユーザーに言語を選択してもらうためのハブページとしました。
これは、Wikipediaのトップページを参考にしています。非常にシンプルですが、ユーザーが最初に訪れる場所として、迷わず目的の言語サイトへ進めるような導線を意識しました。
サイト内を回遊しているユーザーが、いつでもシームレスに言語を切り替えられるように、フッターに言語切り替えリンクを設置しました。
このリンクは、現在表示しているページに対応する別言語のページが存在する場合はそちらへ、存在しない場合は各言語のトップページ（/ja/ または /en/）へ遷移するように実装しています。これにより、ユーザー体験を損なうことなく言語を切り替えることが可能です。
hreflang属性の設定多言語サイトのSEOにおいて、最も重要な要素の一つが hreflang 属性の設定です。
これは、検索エンジンに対して「このページには、これらの言語に対応する代替ページが存在します」と伝えるためのHTMLタグです。
hreflangを正しく設定することで、検索ユーザーの言語や地域に合った適切なページが検索結果に表示されやすくなります。
今回は、各ページの <head> タグ内に以下のような <link> タグを設置しました。
<!-- 例: /ja/about ページの場合 -->
<head>
...
<!-- このページが日本語であることを示す -->
<link rel="alternate" hreflang="ja" href="https://codenote.net/ja/about" />
<!-- 対応する英語ページが存在することを示す -->
<link rel="alternate" hreflang="en" href="https://codenote.net/en/about" />
<!-- 言語が特定できないユーザー向けのデフォルトページを指定 -->
<link rel="alternate" hreflang="x-default" href="https://codenote.net/ja/about" />
...
</head>ポイントは、日本語ページには英語ページの、英語ページには日本語ページの hreflang を相互に設定することです。また、どちらの言語にも該当しないユーザーのために、x-default でデフォルトのページ（今回は日本語ページ）を指定しています。
もちろん、片方の言語にしか存在しないページの場合は、存在する言語の hreflang のみを出力するように動的に制御しています。
今回の対応で、CodeNote.netの国際化に向けた一歩を踏み出すことができました。 多言語対応は、URL設計、UX、そしてSEOと、考慮すべき点が多く大変な面もありますが、サイトの可能性を広げる非常に重要な施策だと改めて感じました。
今後は英語コンテンツの拡充を進めつつ、将来的には他の言語への対応も視野に入れていきたいと考えています。
この記事が、これからWebサイトの多言語対応を行う方の参考になれば幸いです。
以上、多言語対応の第一歩として英語対応を実装した、現場からお送りしました。