多言語サイトのhtml

htmlで多言語対応をする

こちらのページでは、もうザクッザクッと
「これだけしておけば、ブラウザは多言語サイトと認識してくれる」ということを
まとめていきます。

Lang属性

1つ目はLang属性です。
宣言直後の初っ端、htmlタグに設定してあげます。

<html lang="●●">

日本語であれば

<html lang="ja">

としているところを

英語であれば

<html lang="en">

中国語であれば

<html lang="zh">

というように設定します。

Lang属性はおそらくこの3つが一番使われがちと思いますが
en (英語)
zh (中国語)
ko (韓国語)

もっと詳細に分けていくこともできます。
例えば
en-US (米国での英語)
en-GB (英国での英語)
en-AU (豪州での英語)
zh-CN (簡体字中華人民共和国での中国語)
zh-TW (繁体字台湾での中国語)
zh-HK (繁体字香港での中国語)
このような感じです。

もちろん詳細にする分だけ、
翻訳や制作ページの増加など手間も必要になりますので
その匙加減はご自身で検討しましょう。

文字エンコーディング

2つ目はheadタグ内、できれば一番上に
文字コードを指定するこちらの一行

<meta charset="utf-8">

もうcharsetはUTF-8でほぼ問題ありません。
何年か前でしたら中国語などは別に指定が必要でしたが
現在は少なくとも、英語、中国語、韓国語などはすべて
UTF-8で大丈夫です。

フォント

フォントファミリーに関しては、正解はないと思うのでお好きにどうぞ、なのですが

ド定番の Arial / sans-serif は押さえて
SegoeUI / Verdana / Helvetica あたりも定番でよいと思います。

また中国語なら宋体
韓国語なら Malgun Gothic
こちらも定番としておすすめです。

詳細をお知りになりたい方はこちらのサイト様で
大手サイトがどの言語でどのフォントを使用しているかを
簡潔にまとめてくださっているのでこちらをご覧ください。
https://spoke.cloud/ja/bloglist/

コンテンツ

コンテンツを翻訳します。
GoogleやDeepLなどの翻訳サービスを使用するのもいいですし
AIに翻訳してもらうのもよいかもしれません。
精度を求めるなら、当たり前ですが「人に頼む」というのがまちがいありません。

テキストを含む画像も、可能であれば翻訳した画像へ変更しましょう。

言語アノテーション

alternateタグを使用して、言語ごとのURLを記述します。

例えば、英語に翻訳し作成されたバージョンを/en/というディレクトリに、
中国語に翻訳したバージョンを/cn/というディレクトリに振り分けた場合は

<link rel="alternate" hreflang="ja" href="https://●●.com/">
<link rel="alternate" hreflang="en" href="https://●●.com/en/">
<link rel="alternate" hreflang="zh" href="https://●●.com/cn/">

このようなタグを、こちらもheadタグ内へ。

以上です。
これでブラウザは多言語サイトと認識してくれます。

ちょっと画像内が翻訳されていない、くらいは問題ありません笑