多言語サイトにするときに気をつけたこと
アメリカで起業したので、英語サイトしかなかったが、日本語サイトも作りました。多言語サイトにした時に気をつけた４つのことを記載します。
① ドメインを分けずに URL を分ける
大規模サイトの運用や、商圏が明確な店舗ごとのサイトなど、ドメインを分けた方がよい場合もありますが、MIYOUWIくらいの規模だとドメインを１つに絞っておいたほうが、ドメインのオーソリティー（評価）が高くなってSEO的にも良いとされます。
英語サイト：https://miyouwi.com/en/
日本語サイト：https://miyouwi.com/jp/
② ブラウザで設定されている言語を検知
以下のJSコードにて、ブラウザで設定されている言語を検知して、それぞれの言語ページを表示させるようにしました。（この方法ではなく、サーバー側で検知して、それぞれの言語ページを表示することも出来ます。）
<script>
// ブラウザ言語の取得
function browserLanguage() {
try {
return (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0,2)
}
catch(e) {
return undefined;
}
}
// ブラウザの言語が日本語の場合、日本語サイトへ、それ以外の場合英語サイトへリダイレクト
if (browserLanguage().indexOf("ja") != -1) {
location.replace("/jp/");
}
else {
location.replace("/en/");
}
</script>③ 日本語フォント用にスタイルを微調整
<body>タグに id=”jp” を設定して、日本語フォント用のスタイルシートを追加しました。日本語の文字は英字に比べて、画数や文字量など異なる（日本語の方が画数は多いけど、文字量は少なく、英字は画数は少ないけど、文字量は多くなります）ので、英語を日本語に変更しただけだとアンバランスになりがちです。なので、細かく文字サイズ、文字間隔、行間、余白を日本語用に整えました。
④ 直訳せずに語彙や表現を日本語らしく要訳
日本文化に合わないような抽象的な表現を使っていたため、日本語に直訳すると通じないものがあったので、要訳しました。
⑤ hreflang を設定
hreflang を正しく設定すると、検索をしたユーザーが使用している言語に合わせて、検索結果を表示させてくれます。例えば、日本語圏にいるユーザーは日本語ページを、英語圏にいるユーザーには英語ページを検索結果に表示することができます。
トップページの<head>要素に下記のコードを記述します。下層ディレクトリがあるようならば、それらにも記述します。
<link rel="alternate" href="https://miyouwi.com/en/" hreflang="en" />
<link rel="alternate" href="https://miyouwi.com/ja/" hreflang="ja"/>
