vue.js+vue-routerで自作サービスの多言語対応 Part.1

以前作ったWebサービスの多言語対応を行った。 anntはvue-routerで動くSPAだったが、URLに応じて適切な言語で表示するように改修した。

日本語：https://annt.ai/ja
英語：https://annt.ai/en

多言語対応の方法

初期段階で多言語対応ってそもそもどうやるんだろうと思いながらWeb検索をしていると、だいたいどこのサイトでも以下の３通りがメジャーですよと教えてくれた。
4 Key SEO Tips for Your Multilingual Website in 2020

グローバルドメイン .jpや.frなどの国固有のドメインを購入して、ドメイン名によって言語を切り替える。カッコいいとは思うがクソほどお金がかかるのでパス。
サブドメイン jp.example.comのように新たにサブドメインを作成して、サブドメインによって言語を切り替える。１つのドメインにサブドメインを設定していくだけなので、追加コストは０。ただ余り見慣れないURLな気がして少し違和感を感じた＋ドメイン周りの設定いじるのがめんどくさいという理由でスキップ
サブディレクトリ 冒頭に示した"https://annt.ai/ja"のような形式で、パスの先頭の値によって言語を切り替える。ルーティングの設定だけで言語を切り替えられるので、楽＋追加コスト無しということでこれを採用した。

当初は実装面の簡便さの観点からサブディレクトリ方式を選んだが、それ以外の要素ってどうなんだろうと思って調べてみるとSEO的にもサブディレクトリが良さそう。

www.seoblog.com

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.jsでの実装

言語の切り替え

Vue I18nという多言語対応用のライブラリが存在している。どうもi18nはinternationalizationの略語として使われているようだ。（国際化と地域化 - Wikipediaを参考：Wikipediaは何でも乗っていて本当にすごい。）

ライブラリを調べてみたは良いが使い方調べるのが面倒臭くなって、結局ライブラリは使わず言語の切り替えは自分で実装した。国際化という意味だと言語以外の要素（日にちの表現など）を本来は対応する必要があるのかなと思ったが、用途的に別に使わないと考えて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);
  },