多言語Webサイト Guideline

本ページとともに、Google Search Centralの多地域または多言語のサイトのトピックの概要も参照して下さい。

HTML meta hreflang

対応する多言語ページが存在する場合は <link rel="alternate" hreflang="xxxx"> を記述します。

記述するURLは、各言語ページのCanonical URLと一致させます。

<link rel="alternate" hreflang="ja" href="https://colsis.jp/" />
<link rel="alternate" hreflang="en" href="https://colsis.jp/en/" />
<link rel="alternate" hreflang="x-default" href="https://colsis.jp/" />

相互リンク

<link rel="alternate" hreflang="xxxx"> は、対応するページと相互リンクの関係にある必要があります。日本語サイトのみ対応するのはNGであり、他の言語も合わせて対応する必要があります。

sitemap.xml

対応する多言語ページが存在する場合は <xhtml:link> で関係性を記述します。言語ごとに sitemap.xml を分割する必要はありません。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <!-- 日本語ページ -->
  <url>
    <loc>https://colsis.jp/</loc>
    <xhtml:link rel="alternate" hreflang="ja" href="https://colsis.jp/" />
    <xhtml:link rel="alternate" hreflang="en" href="https://colsis.jp/en/" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://colsis.jp/" />
    <lastmod>2026-06-11T18:06:37+09:00</lastmod>
  </url>
  <!-- 英語ページ -->
  <url>
    <loc>https://colsis.jp/en/</loc>
    <xhtml:link rel="alternate" hreflang="ja" href="https://colsis.jp/" />
    <xhtml:link rel="alternate" hreflang="en" href="https://colsis.jp/en/" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://colsis.jp/" />
    <lastmod>2026-06-11T18:06:37+09:00</lastmod>
  </url>
  ...
</urlset>

エラー画面の設置

各言語ごとにエラー画面を設置します。

/ja/404.html # /ja/ 配下の404エラー時に表示
/en/404.html # /en/ 配下の404エラー時に表示

503メンテナンス画面

メンテナンス時は、サーバー側でURLルーティングなどが対応しにくい状況です。そのため、主要言語と英語でコンテンツを記載した、全言語共通の503画面の作成を推奨します。

言語切替ナビゲーションUI

言語切替ナビゲーションUIのリンク先は、各言語のTOPページではなく、現在のページと対応するmeta hreflangに記述した多言語ページに遷移させます。

<nav aria-label="言語切替">
  <ul>
    <li><a href="/ja/about/" lang="ja" hreflang="ja" aria-current="true">日本語</a></li>
    <li><a href="/en/about/" lang="en" hreflang="en">English</a></li>
    <li><a href="/fr/about/" lang="fr" hreflang="fr">Français</a></li>

    <!-- ❌️ 言語表記は、各言語のテキストで記述します -->
    <li><a href="/en/about/" lang="en" hreflang="en">英語</a></li>

    <!-- ✅️ 対応する多言語ページが存在しない場合は、言語TOP or 一番近いページへ遷移させる
            その場合、hreflang属性は付与しない -->
    <li><a href="/de/" lang="de">Deutschland</a></li>
  </ul>
</nav>

属性	要素	値	効果
`lang`	`<a>`	言語・地域コード	A11y向けの言語指定
`hreflang`	`<a>`	言語・地域コード	検索クローラ向けの言語指定
`aria-current`	`<a>`	true	A11y向けの現在のページ指定

対応する多言語ページが存在しない場合

/ja/about/ ページを表示している際、/en/about/ ページが存在しない場合のUIパターンです。

言語TOPに遷移させる:
ベーシックな対応方法です。可能な場合は、言語TOPへの遷移前に「このページは英語版がありません。英語版トップページに移動します。」等のメッセージプロンプトを対応言語で表示します。
一番近いページへ遷移させる:
例として、/ja/products/detail/ に対応する言語ページがない場合は、/en/products/ のように存在する上位階層ページに遷移させるパターンです。スクリプトの実装が多く必要になりますが、UXは優れています。
上階層ページすら存在しない場合は、言語TOPに遷移させます。

自動言語判定

Accept-Language や navigator.language 等のユーザー情報を用いて、Webブラウザに設定している言語の判定が可能です。

接続元IPによる言語判定は避けて下さい。居住地域と利用言語は一致しません。

言語判定による自動リダイレクト

言語判定による自動リダイレクトは、以下のような理由から実装を避けて下さい。

URLを共有したのに受け取った側が別言語で表示される
ブックマークしたのに次回アクセスで言語が変わる
ユーザーが意図的に別言語を見たいのに強制的に戻される

言語判定を利用した実装パターン

言語判定を行った上で、ページ遷移後にバナーやモーダルで「日本語版があります → 日本語で見る」とサジェストする方法です。これは、優れたUXパターンです。

「ユーザー情報による言語判定」＋「言語切替ナビゲーションの機能」を実装する必要があり、その対応コストは大きくなります。