多言語サイト制作ではlang属性を使います。
<html lang="en"> 言語指定は今までこのように書いていましたが
Google推奨の書き方があったのでメモしておきます。
HTML
<link rel="alternate" hreflang="ja" lang="ja" href="https://hoge.com/"><!--日本語-->
<link rel="alternate" hreflang="en" lang="en" href="https://hoge.com/en/"><!--英語-->
<link rel="alternate" hreflang="zh-cmn-Hans" lang="zh-cmn-Hans" href="https://hoge.com/zh-cn/"><!--中国語（簡体）-->
<link rel="alternate" hreflang="zh-cmn-Hant" lang="zh-cmn-Hant" href="https://hoge.com/zh-tw/"><!--中国語（繁体）-->
<link rel="alternate" hreflang="ko" lang="ko" href="https://hoge.com/ko/"><!--韓国語-->
<link rel="alternate" hreflang="fr" lang="fr" href="https://hoge.com/fr/"><!--フランス語-->
hreflang属性＝国コードを指定
herf属性＝国別URLを指定
主要な国のlang属性
サイト制作でよく使う国のlang属性は以下となります。
| 国名 | lang属性 |
|---|---|
| 日本語 | ja |
| 英語 | en |
| 中国語（簡体） | zh-cmn-Hans |
| 中国語（繁体） | zh-cmn-Hant |
| 韓国語 | ko |
| フランス語 | fr |
その他の国はこちらを参照ください。
HTML5/HTML5の基本/言語コード - TAG index
https://www.tagindex.com/html5/basic/langcode.html
lang属性で言語別のCSS指定
lang属性で文字色を変更するmixnです。
font-familyやline-height言語ごとのCSSを指定します。
Sass
scss
//言語ごとにfont-familyを指定するmixin
@mixin font_style {
[lang=ja] & {
color: darkred;
}
[lang=en] & {
color: darkcyan;
}
[lang=zh-cmn-Hans] & {
color: darkgreen;
}
[lang=zh-cmn-Hant] & {
color: darkorange;
}
[lang=ko] & {
color: darkviolet;
}
[lang=fr] & {
color: darkslategray;
}
}
まとめ
classを使わないCSS指定は便利ですね〜。
lang属性に新しい属性が増えていて知識のブラッシュアップの必要を感じました。
海外市場に進出するため多言語サイトを制作する日本企業が増えています。
正しい多言語サイトを制作できるよう細かい部分を覚えておきたいです
参考URL
ページのローカライズ版について Google に知らせる - Search Console ヘルプ
https://support.google.com/webmasters/answer/189077?hl=ja&ref_topic=2370587
他言語サイトを制作するときのメモ
https://gist.github.com/manabuyasuda/dd976907005a588e3203da433289e6af
:lang擬似クラスは便利 - Qiita
https://qiita.com/butchi_y/items/334f2dd35a54fbbd116d