多言語化サイトに必ず入れておきたいHTMLヘッダ設定
WEBZINNEトピックス編集部公開日：2020年8月14日
多言語化サイトに必ず入れておきたいHTMLヘッダ設定をまとめました。対応言語に誘導する「hreflang」の詳しい使い方については、実例付きでより詳細に解説しています。
htmlブロックにlang属性を入れる
そのページがどの言語で記述されているかは、HTMLタグの最初にlang属性で宣言するのがフォーマットです。
<html lang="ja">
.
.
.
.
</html>
この場合は、「ja=日本語」を設定しています。英語ならen、ドイツ語ならdeなど言語ごとにコードが決まっています。
この言語コードは、ISO 639-1と呼ばれる国際標準コードを利用します。ISO 639-1は後々の設定でも使いますので、Wikipediaのページをブックマークしておきましょう。
hreflangを入れる
hreflangは、linkタグに対して使う言語コードを指定する属性です。
<link rel="alternate" hreflang="en" href="http://hogehoge.com/about/">
HTMLヘッダのlinkタグに限らず、aタグにも使えます。
<a href="http://hogehoge.com/ja/about/" hreflang="ja" >
hreflangを含めたlinkタグは、「対応する全ての言語を挿入する」のが原則です。
実例で見てみましょう。
Apple公式サイトのMacトップページのHTMLヘッダを見てみると、
<head>
<link rel="canonical" href="https://www.apple.com/jp/mac/">
<link rel="alternate" href="https://www.apple.com/ae-ar/mac/" hreflang="ar-AE">
<link rel="alternate" href="https://www.apple.com/ae/mac/" hreflang="en-AE">
<link rel="alternate" href="https://www.apple.com/am/mac/" hreflang="en-AM">
<link rel="alternate" href="https://www.apple.com/at/mac/" hreflang="de-AT">
<link rel="alternate" href="https://www.apple.com/au/mac/" hreflang="en-AU">
<link rel="alternate" href="https://www.apple.com/befr/mac/" hreflang="fr-BE">
<link rel="alternate" href="https://www.apple.com/benl/mac/" hreflang="nl-BE">
<link rel="alternate" href="https://www.apple.com/bg/mac/" hreflang="bg-BG">
<link rel="alternate" href="https://www.apple.com/bh-ar/mac/" hreflang="ar-BH">
<link rel="alternate" href="https://www.apple.com/bh/mac/" hreflang="en-BH">
<link rel="alternate" href="https://www.apple.com/br/mac/" hreflang="pt-BR">
<link rel="alternate" href="https://www.apple.com/bw/mac/" hreflang="en-BW">
<link rel="alternate" href="https://www.apple.com/ca/fr/mac/" hreflang="fr-CA">
<link rel="alternate" href="https://www.apple.com/ca/mac/" hreflang="en-CA">
<link rel="alternate" href="https://www.apple.com/cf/mac/" hreflang="fr-CF">
<link rel="alternate" href="https://www.apple.com/chde/mac/" hreflang="de-CH">
<link rel="alternate" href="https://www.apple.com/chfr/mac/" hreflang="fr-CH">
<link rel="alternate" href="https://www.apple.com/ci/mac/" hreflang="fr-CI">
<link rel="alternate" href="https://www.apple.com/cl/mac/" hreflang="es-CL">
<link rel="alternate" href="https://www.apple.com/cm/mac/" hreflang="fr-CM">
<link rel="alternate" href="https://www.apple.com/co/mac/" hreflang="es-CO">
<link rel="alternate" href="https://www.apple.com/cz/mac/" hreflang="cs-CZ">
<link rel="alternate" href="https://www.apple.com/de/mac/" hreflang="de-DE">
<link rel="alternate" href="https://www.apple.com/dk/mac/" hreflang="da-DK">
<link rel="alternate" href="https://www.apple.com/ee/mac/" hreflang="et-EE">
<link rel="alternate" href="https://www.apple.com/eg-ar/mac/" hreflang="ar-EG">
<link rel="alternate" href="https://www.apple.com/eg/mac/" hreflang="en-EG">
<link rel="alternate" href="https://www.apple.com/es/mac/" hreflang="es-ES">
<link rel="alternate" href="https://www.apple.com/fi/mac/" hreflang="fi-FI">
<link rel="alternate" href="https://www.apple.com/fr/mac/" hreflang="fr-FR">
<link rel="alternate" href="https://www.apple.com/gn/mac/" hreflang="fr-GN">
<link rel="alternate" href="https://www.apple.com/gq/mac/" hreflang="fr-GQ">
<link rel="alternate" href="https://www.apple.com/gr/mac/" hreflang="el-GR">
<link rel="alternate" href="https://www.apple.com/gw/mac/" hreflang="en-GW">
<link rel="alternate" href="https://www.apple.com/hk/en/mac/" hreflang="en-HK">
<link rel="alternate" href="https://www.apple.com/hk/mac/" hreflang="zh-HK">
<link rel="alternate" href="https://www.apple.com/hr/mac/" hreflang="hr-HR">
<link rel="alternate" href="https://www.apple.com/hu/mac/" hreflang="hu-HU">
<link rel="alternate" href="https://www.apple.com/id/mac/" hreflang="en-ID">
<link rel="alternate" href="https://www.apple.com/ie/mac/" hreflang="en-IE">
<link rel="alternate" href="https://www.apple.com/il/mac/" hreflang="en-IL">
<link rel="alternate" href="https://www.apple.com/in/mac/" hreflang="en-IN">
<link rel="alternate" href="https://www.apple.com/it/mac/" hreflang="it-IT">
<link rel="alternate" href="https://www.apple.com/jo-ar/mac/" hreflang="ar-JO">
<link rel="alternate" href="https://www.apple.com/jo/mac/" hreflang="en-JO">
<link rel="alternate" href="https://www.apple.com/jp/mac/" hreflang="ja-JP">
<link rel="alternate" href="https://www.apple.com/ke/mac/" hreflang="en-KE">
<link rel="alternate" href="https://www.apple.com/kr/mac/" hreflang="ko-KR">
<link rel="alternate" href="https://www.apple.com/kw-ar/mac/" hreflang="ar-KW">
<link rel="alternate" href="https://www.apple.com/kw/mac/" hreflang="en-KW">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-PA">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-BO">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-SV">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-AR">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-PE">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-PY">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-EC">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-DO">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-HN">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-CR">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-UY">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-NI">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-PR">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-GT">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-VE">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-SR">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-VG">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-MS">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-PR">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-JM">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-LC">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-BB">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-TT">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-AI">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-KY">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-DM">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-BM">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-AG">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-TC">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-BS">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-KN">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-VC">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-GD">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-GY">
<link rel="alternate" href="https://www.apple.com/lae/mac/" hreflang="en-BZ">
<link rel="alternate" href="https://www.apple.com/li/mac/" hreflang="de-LI">
<link rel="alternate" href="https://www.apple.com/lt/mac/" hreflang="lt-LT">
<link rel="alternate" href="https://www.apple.com/lu/mac/" hreflang="fr-LU">
<link rel="alternate" href="https://www.apple.com/lv/mac/" hreflang="lv-LV">
<link rel="alternate" href="https://www.apple.com/ma/mac/" hreflang="fr-MA">
<link rel="alternate" href="https://www.apple.com/mac/" hreflang="en-US">
<link rel="alternate" href="https://www.apple.com/md/mac/" hreflang="en-MD">
<link rel="alternate" href="https://www.apple.com/me/mac/" hreflang="en-ME">
<link rel="alternate" href="https://www.apple.com/mg/mac/" hreflang="en-MG">
<link rel="alternate" href="https://www.apple.com/mk/mac/" hreflang="en-MK">
<link rel="alternate" href="https://www.apple.com/ml/mac/" hreflang="fr-ML">
<link rel="alternate" href="https://www.apple.com/mo/mac/" hreflang="zh-MO">
<link rel="alternate" href="https://www.apple.com/mt/mac/" hreflang="en-MT">
<link rel="alternate" href="https://www.apple.com/mu/mac/" hreflang="fr-MU">
<link rel="alternate" href="https://www.apple.com/mx/mac/" hreflang="es-MX">
<link rel="alternate" href="https://www.apple.com/my/mac/" hreflang="en-MY">
<link rel="alternate" href="https://www.apple.com/mz/mac/" hreflang="en-MZ">
<link rel="alternate" href="https://www.apple.com/ne/mac/" hreflang="fr-NE">
<link rel="alternate" href="https://www.apple.com/ng/mac/" hreflang="en-NG">
<link rel="alternate" href="https://www.apple.com/nl/mac/" hreflang="nl-NL">
<link rel="alternate" href="https://www.apple.com/no/mac/" hreflang="no-NO">
<link rel="alternate" href="https://www.apple.com/nz/mac/" hreflang="en-NZ">
<link rel="alternate" href="https://www.apple.com/om-ar/mac/" hreflang="ar-OM">
<link rel="alternate" href="https://www.apple.com/om/mac/" hreflang="en-OM">
<link rel="alternate" href="https://www.apple.com/ph/mac/" hreflang="en-PH">
<link rel="alternate" href="https://www.apple.com/pl/mac/" hreflang="pl-PL">
<link rel="alternate" href="https://www.apple.com/pt/mac/" hreflang="pt-PT">
<link rel="alternate" href="https://www.apple.com/qa-ar/mac/" hreflang="ar-QA">
<link rel="alternate" href="https://www.apple.com/qa/mac/" hreflang="en-QA">
<link rel="alternate" href="https://www.apple.com/ro/mac/" hreflang="ro-RO">
<link rel="alternate" href="https://www.apple.com/ru/mac/" hreflang="ru-RU">
<link rel="alternate" href="https://www.apple.com/sa-ar/mac/" hreflang="ar-SA">
<link rel="alternate" href="https://www.apple.com/sa/mac/" hreflang="en-SA">
<link rel="alternate" href="https://www.apple.com/se/mac/" hreflang="sv-SE">
<link rel="alternate" href="https://www.apple.com/sg/mac/" hreflang="en-SG">
<link rel="alternate" href="https://www.apple.com/si/mac/" hreflang="en-SI">
<link rel="alternate" href="https://www.apple.com/sk/mac/" hreflang="sk-SK">
<link rel="alternate" href="https://www.apple.com/sn/mac/" hreflang="fr-SN">
<link rel="alternate" href="https://www.apple.com/th/mac/" hreflang="th-TH">
<link rel="alternate" href="https://www.apple.com/tn/mac/" hreflang="fr-TN">
<link rel="alternate" href="https://www.apple.com/tr/mac/" hreflang="tr-TR">
<link rel="alternate" href="https://www.apple.com/tw/mac/" hreflang="zh-TW">
<link rel="alternate" href="https://www.apple.com/ug/mac/" hreflang="en-UG">
<link rel="alternate" href="https://www.apple.com/uk/mac/" hreflang="en-GB">
<link rel="alternate" href="https://www.apple.com/vn/mac/" hreflang="en-VN">
<link rel="alternate" href="https://www.apple.com/za/mac/" hreflang="en-ZA">
<link rel="alternate" href="https://www.apple.com.cn/mac/" hreflang="zh-CN">
このように、133個ものhreflangが設定されています。
Appleのページの多言語化構造とhreflangの設定例を見てみると、
- URL構造: サブディレクトリ型（国の2文字コード、もしくは地域で切る）
- hreflangのコード指定：言語+国の2文字コード
となっています。
hreflangの言語指定は、言語のみでもOKですが、Appleはより詳しい「言語-国」形式を採用しています。これは、Appleが直販機能を持っているため、言語だけでなく通貨にも対応する必要があるからでしょう。
全ての言語を入れる
また、Appleのサイトでも設定されていますが、hreflangの設定は「現在表示しているページの言語も含めた全ての言語の分挿入する」のが原則です。たとえ、hrefで指定するURLが同じだったとしても、言語・地域として対応しているのであれば、言語と地域ごとにlinkタグを挿入します。
Appleの例でいうと、ラテン語圏向けの「/la/」ディレクトリに対して、スペイン語圏の複数の国家に対してhreflangを設定しています。
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-PA">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-BO">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-SV">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-AR">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-PE">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-PY">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-EC">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-DO">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-HN">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-CR">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-UY">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-NI">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-PR">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-GT">
<link rel="alternate" href="https://www.apple.com/la/mac/" hreflang="es-VE">
多言語化サイトにとって「URL構造は運営者側の設定」ですが、「hreflangはユーザーの設定」なので、このようにユーザーに合わせてlinkタグを追加します。
また、全ての言語を入れることでクローラーに言語ごとのページの存在を知らせることにもなり、SEO効果もアップします。
言語が一致しなかった時用にx-defaultを入れる
これはオプション扱いになりますが、ユーザーの言語がhreflangで設定したどの言語にもマッチしなかった場合にどのページに誘導するかを指定するのが「hreflang="x-default"」です。
GoogleのSearch Consoleヘルプによると、誘導先はサポート言語一覧にすることが望ましいようです。
おすすめの一例は、ユーザーが国を選択できるようなクリック可能な地図を掲載したサイトのホームページをターゲットにすることです。
これは必須項目ではないので、なくても構いません。
canonicalを入れる
hreflangはalternate属性なので、URLを正規化する意味でcanonical属性を入れます。
先ほどのAppleの例でいうと、
<head>
<link rel="canonical" href="https://www.apple.com/jp/mac/">
.
.
.
この部分です。
URLの正規化は重複回避のために必須項目なので必ず設定しましょう。この時、正規化するURLを間違うとSEOで大きなマイナスになるので、ミスの無いように注意しましょう。
言語ごとのOGPタグ
SNSからの流入しやすくするために、OGPタグを設定していることが多いでしょう。OGPタグはページごとに設定するので、「言語ごとのページ = それぞれ異なるページ」ですから、当然言語ごとに個別の設定をするのを忘れないようにしましょう。
また、多言語サイト向けの特殊なOGP設定としては、「og:locale」というのがあります。
<meta property="og:locale" content="ja_JP">
先ほどのhreflangでは、「小文字・言語コード-大文字・国コード」という形式でしたが、こちらは「小文字・言語コード_大文字・国コード」となります。ハイフンではなく、アンダースコアになるので注意しましょう。
OGPタグの基本的な設定方法については下記のページをどうぞ。
p1bn0wihqf
多言語化サイトに必ず入れておきたいHTMLヘッダ設定を見てきました。
何となくhreflangのことを知っている方でも、実際にサイトの構築をしていると、意外と設定漏れがあったりするので、今回挙げた部分が設定されているか、ご自身の多言語化サイトでチェックしてみてください。