多言語サイト制作では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