以前作ったWebサービスの多言語対応を行った。 anntはvue-routerで動くSPAだったが、URLに応じて適切な言語で表示するように改修した。
初期段階で多言語対応ってそもそもどうやるんだろうと思いながらWeb検索をしていると、だいたいどこのサイトでも以下の３通りがメジャーですよと教えてくれた。
4 Key SEO Tips for Your Multilingual Website in 2020
グローバルドメイン .jpや.frなどの国固有のドメインを購入してドメイン名によって言語を切り替える。 カッコいいとは思うがクソほどお金がかかるのでパス。
サブドメイン jp.example.comのように新たにサブドメインを作成して、サブドメインによって言語を切り替える。 １つのドメインにサブドメインを設定していくだけなので、追加コストは０。 ただ余り見慣れないURLな気がして少し違和感を感じた＋ドメイン周りの設定いじるのがめんどくさいという理由でスキップ
サブディレクトリ 冒頭に示した"https://annt.ai/ja"のような形式で、パスの先頭の値によって言語を切り替える。 ルーティングの設定だけで言語を切り替えられるので、楽＋追加コスト無しということでこれを採用した。
当初は実装面の簡便さの観点からサブディレクトリ方式を選んだが、それ以外の要素ってどうなんだろうと思って調べてみるとSEO的にもサブディレクトリが良さそう。
In these cases, you should almost always use subfolders. Subdomains lose a lot of power in terms of SEO, which makes a huge different with regards to marketing and search visibility. Moz has done repeated tests over the years and has determined that using subfolders is simply better SEO practice.
ほとんどの場合サブフォルダーを使用する必要があります。サブドメインはSEOに関して多くの力を失い、マーケティングと検索の可視性に関して大きな違いをもたらします。Mozは何年にもわたって繰り返しテストを行っており、サブフォルダを使用するほうが[SEOの実践として優れていると判断しました。
どれだけ信頼のおける情報かは分からないが、個人での検証のしようが無いので信じてみようと思う。
Vue I18nという多言語対応用のライブラリが存在している。 ライブラリを調べてみたは良いが使い方調べるのが面倒臭くなって、結局ライブラリは使わず言語の切り替えは自分で実装した。 国際化という意味だと言語以外の要素（日時の表現など）を本来は対応する必要があるのかなと思ったが、用途的に別に使わないと考えてjsonに記載したテキストデータから現在の言語に応じて適切なデータを取得する仕組みを作った。
実装のイメージはみたいな感じで、各ページのcreatedのタイミングでURLに応じて言語を切り替えるための初期化処理(initLocale)を呼び出す。 初期化後はmsgプロパティから現在の言語のテキストが取れるような仕組み。 どのページでも使うのでmixinにしてある。当然タイトルなども変える必要があるので初期化後に書き換える。
// ページが読み込まれた際の初期化処理
created() {
try {
// messagesは各言語での文章が書かれたjsonデータを読み込んだもの
this.initLocale(messages);
} catch {
// Force to redirect route.
this.$router.push('/');
}
common.SetTitle(this.msg.page_title);
common.SetDescription(this.msg.page_description);
},肝心な初期化処理が割と長くなったので記載はしないが、URLのパスに応じてスイッチ文で切り替えるだけなので実装は非常に簡単。 あとはルーティングの設定やhreflangなどについても諸々変更した。