日本語サイトだけを作っている分には、最初に<html lang="ja">と記述してそれでOK。
でも、複数の言語を使ったサイトを作り始めたらめっちゃ気になる... それが、lang と hreflang ですね。

最初に結論

langは、ユーザビリティや可読性のために利用すべし。とっても重要。CSSでも使えて便利。
hreflangは、SEO対策用。

lang

こちらの記事を引用しつつ、まとめてみます。

lang属性によるローカライズの様子

ローカライズが効果的な場面の例

<q>要素の使用時にブラウザーがさまざまな言語の引用符を適切に表示できるようになる。

<!-- ドイツ語 -->
<p class="samp" lang="de">
<q>Main Computer のドイツ語版。</q>
</p>

<!-- フランス語 -->
<p class="samp" lang="fr">
<q>フランス議会を主催します。</q>
</p>

この時に、ブラウザが自動で生成するq要素を囲む引用符（::before, ::after {content: open-quote;}）で生成される記号が言語に合わせて異なる。

その他にも、

ローカライズされた日付と時刻の入力 (MM/DD/YYYY 対 DD/MM/YYYY、または 24 時間制対 AM/PM 時間の使用など)
適切なカンマまたはピリオドを使用した桁区切りの数値

などなど。

ローカライズを意識しなくても良い場面の例

それにしても、この記事の中で特に助かったのがこの部分。

ページの「部分言語」の指定は、文書の主言語では一般に理解できない他の言語コンテンツの場合にのみ必要です。たとえば、「ロサンゼルス」と「ピニャータ」は英語の読者が理解できるスペイン語であるため、英語の Web ページ上でこれらがスペイン語であると識別する必要はありません。

今年あったのが、「こぐまplace」という日本語と英語が混じった名称（！）。
でも特に指定しなくても、chromeのスクリーンリーダーはうまくお話ししてくれました。
逆に、<h1 lang="ja">こぐま<span lang="en">place</span></h1> とかってやってしまうと、日本語に翻訳した時に「こぐま場所」になってました（笑）。

スクリーンリーダーの対応

スクリーンリーダーにちゃんと意図した言語で読んでもらうには、 <html> に lang属性を属性を書くこと。

Google翻訳などの自動翻訳のサポート

これもスクリーンリーダーと同様で、<html> に lang属性を属性を書く。
ユーザーがブラウザ等に設定しているデフォルト言語と異なる場合は、自動的に翻訳する機能が表示される。

地域サブタグ

おすすめによると、lang="en-US" とか lang="en-UK" とは指定する必要がなく、lang="en" だけが良かろうとのこと。（後ろにつく"US"や"UK"が地域を表す。あえてイギリス英語で音声再生させたい時などに使用できるらしい。）
"zh-CN"と"zh-HK"など、方言を区別することが重要な場合に使用できる。

そのほかの参考情報

とほほ大先生、一昨年にlang属性について更新していらっしゃいました

hreflang

shopifyで多言語対応すると、<head> 内にこんな感じで hreflang が出ました。
これが、他の言語に対応したページがあると知らせるタグなんですね。

<link rel="alternate" hreflang="x-default" href="https://domain.jp/">
<link rel="alternate" hreflang="ja-JP" href="https://domain.jp/">
<link rel="alternate" hreflang="zh-Hant-JP" href="https://domain.jp/zh">
<link rel="alternate" hreflang="en-JP" href="https://domain.jp/en">

参考情報

この記事は2010年で古いですが、言語認識の仕方としては現在まで変わっていないようです。

１言語、１URLを提供する。
- Googleはlang属性からドキュメントタイプ定義（DTD）まで、コードレベルの言語情報は無視する。その代わり独自のアルゴリズムで主たる言語を判断している。
- Google的には、ページごとに使用する言語は統一し、原文と訳文を一緒に表示することは避ける。
ユーザーの認識言語に基づいた自動的なリダイレクトは行わないようにする。
翻訳版のページを表示するためにCookieを使用することは避ける。
文字エンコードは UTF-8で。

実際どうなの

原文と訳文を一緒に表示したいことってあるよなぁ...これとかこれとか。言語別にページを提供するって、現実には予算との戦いですね。デザインまでローカライズするとなるともう。

地域サブタグ

Shopifyのhreflangでは、"en-JP" など「地域サブタグ」が使われています。
この指定をすると、GoogleはJP地域をターゲットにしていると判断するようです。
なるほど。英語だけど日本にいる人に検索させたい場合に便利ですね。

ちなみに、海外の検索結果を確認するには。

最後に少しだけデザインの話 - 2023年の新しいCSSなど

日本語と英語の文字の扱いの違いが気になります。

今年は、新しいCSSプロパティ text-wrap:balance; text-wrap:pretty; が出たので、単語の分かちがある言語系ではけっこう話題になったようでした。

日本語の改行については、こちらがとてもありがたく読ませていただきました。

あとは、新しいCSSプロパティでタイプスケールする話も良いです。

海外から見た日本サイトに対する評価などは、海外版デザインを考える時などに読みました。

感想

アドカレ記事なので、最後にちょこっと感想書きます。

今年はいくつか多言語サイトを構築する機会に恵まれた年でした。
lang属性とhreflangのことをイチから調べてまとめ記事を書くような私に発注してくれるなんて本当にありがたい。ありがとうございました。

今年もあと１ヶ月、なんとかやっていこう。そして来年も生きねば。