資料をダウンロード
無料カウンセリング
無料カウンセリング

WithCodeMedia-1-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
previous arrowprevious arrow
next arrownext arrow

多言語サイトのSEO対策完全ガイド｜hreflang属性の設定方法・URL構造設計・ローカライゼーションまで徹底解説

学習コンテンツ SEO

この記事でわかること

  • hreflang属性の正しい書き方と設定すべきルール
  • 多言語サイトのURL構造3パターン（ccTLD・サブドメイン・ディレクトリ）の使い分け
  • XMLサイトマップでのhreflang設定方法
  • WordPress（Polylang/WPML）とNext.js App Routerでの実装例
  • 地域別検索エンジン対策とローカライゼーション戦略
生徒

日本語と英語の両方でサイトを作ったんですが、日本のGoogleで英語ページが表示されたり、逆になったりしてSEOが上手くいきません……

ペン博士

それはhreflang属性が設定されていないからじゃ！hreflang属性で「このページの日本語版はこのURL、英語版はこのURL」と検索エンジンに教えることで、それぞれのユーザーに適切な言語のページを表示できるようになるぞ。設定方法はシンプルじゃが、正確に書かないと逆効果になるから注意が必要じゃ！

多言語サイトSEOの核心は「hreflang属性の正確な相互設定」です。全言語ページに相互リンクで設定し、絶対URLを使い、自ページとx-defaultを含める——この3ルールを守れば検索エンジンが言語を正しく識別します。

本記事では、多言語サイトのSEO対策7つのポイント・hreflang属性の正しい書き方・URL構造の3つの選択肢とそれぞれの使い分け・XMLサイトマップでのhreflang設定・lang属性・canonical設定・ローカライゼーション・WordPress WPML/Polylang設定・Next.js i18n・地域別検索エンジン対策を完全解説します。

目次

多言語サイトSEOが必要な理由｜翻訳機能に任せてはいけない

ChromeなどのブラウザはAI翻訳機能を搭載しており、ユーザーは外国語ページでも読むことができます。しかしブラウザが翻訳した内容はGoogleにインデックスされません。多言語での検索流入を獲得するには、各言語のページを明示的に用意する必要があります。

>【多言語SEOが必要な理由】

❌ ブラウザ翻訳機能に任せる場合：
→ ユーザーは読めるが、英語でのGoogle検索には引っかからない
→ インデックスされるのは日本語のコンテンツのみ
→ 英語圏からの検索流入がゼロになる

✅ 多言語ページを用意した場合：
→ 英語のページが英語のGoogle検索にインデックスされる
→ 各言語のユーザーに最適なページが表示される
→ グローバルからの検索流入を獲得できる
→ 翻訳の質をコントロールしてブランドイメージを守れる

多言語SEO対策7つのポイント

>【多言語SEOの7つのポイント】

1. URL構造の設計（ディレクトリ型が推奨）
2. hreflang属性の正確な設定
3. HTMLのlang属性
4. canonical属性の設定
5. XMLサイトマップへのhreflang記述
6. コンテンツの真のローカライゼーション（翻訳以上のもの）
7. 地域別キーワードリサーチ

多言語サイトのURL構造設計｜3つの選択肢と使い分け

多言語サイトのURL構造3パターンの比較図
構造例SEO評価向いているケースメリットデメリット
ルートドメイン（ccTLD）example.co.jp / example.com言語間で独立したドメイン評価テーマが異なる・管理者が別・各国で強い権威が必要国別SEOに最強・ブランドの独立性ドメイン評価を分散させる必要あり・コスト高
サブドメインjp.example.com / en.example.comルートドメインの評価を一部継承別事業主感を出したい・管理画面を分けたい独立したサーバー設定が可能ccTLDより国別シグナルが弱い
ディレクトリ（推奨）example.com/ja/ / example.com/en/ドメイン評価を共有（SEO最強）同じサイト・同じ管理者（最も一般的）ドメイン評価を集約・実装が最も簡単サーバー分離が難しい
 
>【❌ 避けるべきURL構造】

パラメーター形式（非推奨）：
https://www.example.com?lang=ja  → クローラーが正しく認識しにくい

ファイル名形式（非推奨）：
https://www.example.com/index.html（日本語）
https://www.example.com/index-en.html（英語）
→ 対応関係が不明瞭でhreflangの設定も複雑になる

【推奨ディレクトリ構造の例】
https://www.example.com/         → x-default（デフォルト）
https://www.example.com/ja/      → 日本語
https://www.example.com/en/      → 英語
https://www.example.com/zh/      → 中国語（簡体字）
https://www.example.com/zh-TW/   → 中国語（繁体字）
https://www.example.com/ko/      → 韓国語

hreflang属性の設定方法｜正しい書き方と注意点

hreflang属性は、「このページには別言語版がある」ということを検索エンジンに伝えるリンクタグです。<head> 内に記述します。Googleはhreflangを参照して各ユーザーに最適な言語のページを検索結果に表示します。

基本的な書き方（日英2言語の場合）

><!-- 日本語ページの <head> 内に記述 -->
<head>
  <!-- 自分自身のページも含めて全言語版を列挙する（これが最も重要なルール！） -->
  <link rel="alternate" hreflang="ja" href="https://www.example.com/ja/">
  <link rel="alternate" hreflang="en" href="https://www.example.com/en/">
  <!-- x-default: どの言語にも該当しないユーザーへのデフォルトページ -->
  <link rel="alternate" hreflang="x-default" href="https://www.example.com/ja/">
</head>
><!-- 英語ページの <head> 内に記述（両方のページに記述が必要！） -->
<head>
  <!-- 日本語ページと全く同じhreflang設定を記述する -->
  <link rel="alternate" hreflang="ja" href="https://www.example.com/ja/">
  <link rel="alternate" hreflang="en" href="https://www.example.com/en/">
  <link rel="alternate" hreflang="x-default" href="https://www.example.com/ja/">
</head>
>【hreflang設定の重要ルール】

✅ 全言語ページに設定が必要（日本語ページだけでなく英語ページにも）
✅ 自ページ自身への hreflang も含める
✅ x-default は必ず指定する
✅ hreflang の値は言語コード（ISO 639-1）の形式で記述
✅ URLは絶対URL（https://から始まる完全なURL）で記述
✅ wwwありとなしは統一する（どちらかに統一してリダイレクト）

❌ よくある間違い：
→ 日本語ページにしか設定しない（ペアで設定しないと無効）
→ hreflang="japanese" のように正式コードでない値を使う（正: "ja"）
→ URLにwwwあり・なしが混在する（絶対URLを統一すること）
→ 相対URLを使う（/ja/ ではなく https://www.example.com/ja/ と記述）
→ 自ページのhreflangを省略する

地域別に分けた高度な設定例

><!-- 同じ言語でも地域（国）を分けて設定する例 -->
<!-- 英語（アメリカ向け）と英語（イギリス向け）を分ける場合 -->
<link rel="alternate" hreflang="en-US" href="https://www.example.com/en-us/">
<link rel="alternate" hreflang="en-GB" href="https://www.example.com/en-gb/">
<link rel="alternate" hreflang="ja-JP" href="https://www.example.com/ja/">
<link rel="alternate" hreflang="zh-CN" href="https://www.example.com/zh-cn/">
<link rel="alternate" hreflang="zh-TW" href="https://www.example.com/zh-tw/">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/">

<!-- 主要な言語コード一覧 -->
<!--
ja: 日本語          ko: 韓国語
en: 英語            fr: フランス語
zh-CN: 中国語（簡体字）  de: ドイツ語
zh-TW: 中国語（繁体字）  es: スペイン語
                   pt-BR: ポルトガル語（ブラジル）
                   ar: アラビア語
-->

XMLサイトマップでhreflangを設定する

ページ数が多い場合はHTMLのheadに個別設定するよりも、XMLサイトマップにhreflangをまとめて記述する方が管理しやすいです。

><!-- sitemap.xml - XMLサイトマップでのhreflang記述例 -->
<?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://www.example.com/ja/</loc>
    <xhtml:link rel="alternate" hreflang="ja" href="https://www.example.com/ja/"/>
    <xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/en/"/>
    <xhtml:link rel="alternate" hreflang="x-default" href="https://www.example.com/ja/"/>
    <lastmod>2026-03-14</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>

  <!-- 英語ホームページ（同じhreflangの対を記述） -->
  <url>
    <loc>https://www.example.com/en/</loc>
    <xhtml:link rel="alternate" hreflang="ja" href="https://www.example.com/ja/"/>
    <xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/en/"/>
    <xhtml:link rel="alternate" hreflang="x-default" href="https://www.example.com/ja/"/>
    <lastmod>2026-03-14</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>

</urlset>

lang属性とcanonical属性の設定

lang属性

><!-- 日本語ページ -->
<html lang="ja">

<!-- 英語ページ -->
<html lang="en">

<!-- 中国語（簡体字）ページ -->
<html lang="zh-CN">

<!-- 中国語（繁体字）ページ -->
<html lang="zh-TW">

<!-- ページ内に異なる言語のコンテンツが混在する場合 -->
<p lang="en">This is an English phrase in a Japanese document.</p>

canonical属性と多言語サイトの関係

多言語ページでは、各言語版が「自分自身をcanonical」に設定することが重要です。日本語ページのcanonicalに英語ページのURLを設定してしまうと、日本語ページが「重複コンテンツ」とみなされてインデックスから外れる可能性があります。

><!-- 日本語ページのheadに記述 -->
<head>
  <!-- canonical は自ページのURLを指定（他言語ページを指してはいけない） -->
  <link rel="canonical" href="https://www.example.com/ja/">

  <!-- hreflangは全言語を列挙 -->
  <link rel="alternate" hreflang="ja" href="https://www.example.com/ja/">
  <link rel="alternate" hreflang="en" href="https://www.example.com/en/">
  <link rel="alternate" hreflang="x-default" href="https://www.example.com/ja/">
</head>

WordPress多言語プラグインの比較・設定

プラグイン料金特徴向いているケース
WPML有料（$39〜/年）最も機能が豊富・WooCommerce対応・多言語SEOを自動設定大規模ECサイト・企業サイト
Polylang無料 + 有料版（$99/年）無料でも基本機能が充実・WPML互換中小規模サイト・コスト重視
TranslatePress有料（$79〜/年）フロントエンドで視覚的に翻訳・AI翻訳対応翻訳作業を効率化したい場合
MultilingualPress有料（€199/年）WordPressマルチサイトネットワーク対応サイトを完全に分離したい場合

Polylangの基本設定

>【Polylang 設定手順】

1. プラグインをインストール・有効化
   → プラグイン → 新規追加 → 「Polylang」で検索

2. 言語を追加
   → 言語 → 言語の追加
   → 「日本語（Japanese）」「English」を追加

3. URL構造を設定
   → 言語 → 設定 → 言語URL設定
   → ディレクトリ（/ja/, /en/）を推奨

4. コンテンツを翻訳
   → 投稿/固定ページ一覧の右端に旗アイコンが表示される
   → 旗をクリックして各言語の翻訳を作成

5. hreflang設定の確認
   → Polylangは自動的にhreflang属性を出力する
   → SEO設定 → Yoast SEO との連携でさらに詳細な設定可能

Next.js App Routerでの多言語サイト実装

Next.js App Routerでのi18n実装

>// app/[locale]/layout.tsx - Next.js App Router での多言語レイアウト

import { notFound } from 'next/navigation'

const locales = ['ja', 'en', 'zh', 'ko'] as const
type Locale = typeof locales[number]

export async function generateStaticParams() {
  return locales.map(locale => ({ locale }))
}

export default function LocaleLayout({
  children,
  params: { locale }
}: {
  children: React.ReactNode
  params: { locale: Locale }
}) {
  if (!locales.includes(locale)) notFound()

  return (
    <html lang={locale}>
      <head>
        {/* hreflang タグを動的に出力 */}
        {locales.map(l => (
          <link
            key={l}
            rel="alternate"
            hreflang={l}
            href={`https://www.example.com/${l}/`}
          />
        ))}
        <link rel="alternate" hreflang="x-default" href="https://www.example.com/ja/" />
        <link rel="canonical" href={`https://www.example.com/${locale}/`} />
      </head>
      <body>{children}</body>
    </html>
  )
}
>// middleware.ts - 言語の自動リダイレクト

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const locales = ['ja', 'en', 'zh', 'ko']
const defaultLocale = 'ja'

function getPreferredLocale(request: NextRequest): string {
  const acceptLanguage = request.headers.get('accept-language') || ''

  // Accept-Language ヘッダーから優先言語を取得
  const preferredLocales = acceptLanguage
    .split(',')
    .map(lang => lang.split(';')[0].trim().slice(0, 2).toLowerCase())

  return preferredLocales.find(lang => locales.includes(lang)) || defaultLocale
}

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname

  // 既にロケールプレフィックスがある場合はスキップ
  const hasLocale = locales.some(locale => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`)
  if (hasLocale) return NextResponse.next()

  // ルート（/）へのアクセスを適切な言語にリダイレクト
  if (pathname === '/') {
    const locale = getPreferredLocale(request)
    return NextResponse.redirect(new URL(`/${locale}/`, request.url))
  }
}

export const config = {
  matcher: ['/((?!api|_next|.*\\..*).*)'],
}

地域別キーワード選定と検索エンジンの違い

多言語サイトのSEOで見落とされがちなのが「地域別のキーワードリサーチ」です。日本語と英語では同じ概念でも検索クエリが全く異なります。

>【国別の主要検索エンジンシェア（2026年推定）】

日本:    Google（約75%）、Yahoo!（約20%）→ Yahoo!は検索エンジン自体はBingを使用
アメリカ: Google（約88%）、Bing（約8%）
EU:      Google（約90%）
中国:    百度（バイドゥ）（約55%）← GoogleはGFWで制限
ロシア:  Yandex（約50%）、Google（約45%）
韓国:    Google（約60%）、Naver（約30%）

→ 中国向けには百度のSEO対策が別途必要（簡体字・中国国内ホスティング・ICP取得）
→ ロシア向けにはYandexを意識した対策が有効（タイトル・メタ記述・外部リンク戦略）
→ 韓国向けにはNaverブログ・カフェへの掲載も検討
キーワード例（概念）日本語英語（米国）英語（英国）
採用サイト「採用 応募」「求人 エントリー」「jobs apply」「career opportunities」「vacancies」「recruitment」
ネットショップ「通販」「ショッピング」「online store」「e-commerce」「online shop」「shopping」
スマートフォン「スマホ」「携帯」「smartphone」「cell phone」「smartphone」「mobile phone」

コンテンツのローカライゼーション戦略

ローカライゼーションは「翻訳」よりも幅広い概念です。言語を変換するだけでなく、ターゲット市場の文化・慣習・ニーズに合わせてコンテンツ全体を最適化することを指します。

>【翻訳とローカライゼーションの違い】

翻訳（Translation）：言語を変換する
→ 日本語の文章を英語に変換する
→ 機械翻訳でも可能（精度は劣る）

ローカライゼーション（Localization）：文化・市場に最適化する
→ 通貨・日付・単位の変換（円→ドル、年月日→月/日/年）
→ 色・デザインの調整（白が弔意を示す文化 vs 慶事を示す文化）
→ 画像の差し替え（モデル・食事・ライフスタイルの文化的適合）
→ 事例・実績の差し替え（日本の有名企業名 → 現地の有名企業名）
→ 価格・支払い方法の変更（コンビニ払い → PayPal / クレジットカード）
→ SNSの変更（Twitter/X → Instagram（米）/ LINE（日・韓））
→ サポート対応の言語・時間帯の変更

hreflangのよくある設定ミスとGoogle Search Consoleでの確認

>【Google Search Console での確認方法】

1. Search Console（search.google.com/search-console）を開く
2. 左メニューの「国際化ターゲティング」を選択
3. 「言語」タブでhreflangの設定エラーを確認

主なエラー種別：
→ "hreflang: Alternate URL return error"
   → hreflangに指定したURLが404等のエラーを返している

→ "Missing alternate page"
   → ページAがページBをhreflangで参照しているが、
     ページBはページAを参照していない（相互参照不足）

→ "No return tag"
   → hreflangで参照されているページが参照先ページを参照していない

よくある質問（FAQ）

Q1. XMLサイトマップでhreflangを指定することもできますか？

A. できます。各URLの <url> ブロック内に <xhtml:link rel="alternate" hreflang="..." href="..."/> を追加する方法です。ページ数が多い場合はサイトマップでまとめて管理する方法が効率的です。HTMLのheadとサイトマップの両方に設定する必要はなく、どちらか1つで十分です。

Q2. 自動翻訳（Google翻訳API等）で生成したページはNGですか？

A. 自動翻訳コンテンツはGoogleのガイドライン違反（自動生成ページ）にあたる可能性があります。精度の低い自動翻訳はスパムとみなされペナルティを受けるリスクがあります。翻訳コンテンツを使う場合は必ず人間による確認・修正を経てから公開してください。ChatGPT等のAI翻訳を使う場合も、ネイティブスピーカーによるレビューを推奨します。

Q3. hreflangはBingやYahoo!でも有効ですか？

A. hreflangはGoogleとYandexが対応しています。BingはAccept-LanguageヘッダーやHTML lang属性で言語を判断しており、独自のhreflang相当の仕組みを持っています。Yahoo!（日本）はBingの検索エンジンを使っているため、Bing向けの対策が適用されます。世界規模でのSEOを考えるなら、hreflang + HTML lang属性 + コンテンツのローカライゼーションを組み合わせることで、主要な検索エンジン全てに対応できます。

Q4. 翻訳ページが少ない段階でもhreflangを設定した方がいいですか？

A. はい、翻訳済みのページが少なくても設定することを推奨します。まず重要なページ（ホームページ・主要ランディングページ）から翻訳して設定を始めて、徐々に展開していくアプローチが現実的です。設定されていないページは対応言語なしとしてGoogleが判断するので、設定があるページは正しくインデックスされます。

Q5. hreflangの設定に誤りがあるとペナルティはありますか？

A. hreflangの設定ミスによってGoogleからペナルティが科されることはありません。ただし設定が不完全だとhreflang属性が無視されるため、間違った言語のページが表示されるという問題が起こります。特に「相互参照が不完全（日本語ページが英語ページを参照しているが、英語ページが日本語ページを参照していない）」という状態が最も多い失敗パターンです。Google Search Consoleの「国際化ターゲティング」で定期的に確認してください。

まとめ

  • URL構造：ディレクトリ型（/ja/ /en/）が最もSEO評価を集約しやすく、小〜中規模サイトに最適。
  • hreflang属性：全言語ページに相互リンクで記述。自ページ・x-defaultも必ず含める。絶対URLを使用する。
  • XMLサイトマップ：ページ数が多い場合はサイトマップにhreflangをまとめて記述する方が管理しやすい。
  • lang属性とcanonical：<html lang="ja">等の言語指定と、自ページへのcanonicalを必ず設定する。
  • WordPress実装：PolylangやWPMLプラグインで自動的にhreflang・サイトマップを管理できる。
  • Next.js実装：App Routerの[locale]ダイナミックセグメントで多言語対応。Middlewareで言語リダイレクト。
  • 翻訳の質：自動翻訳は避け、人間によるローカライゼーションが不可欠。
  • 地域別対策：中国は百度・ロシアはYandexなど、地域ごとの検索エンジンシェアを考慮する。

多言語SEOの要はhreflang属性の正確な設定です。「全ページ・全言語に相互リンクで設定する」「絶対URLで記述」「自ページとx-defaultを含める」という3つのルールを守れば、検索エンジンが正しく言語を識別してくれます。WordPress・Next.jsどちらの環境でも設定テンプレートを活用して効率的に実装しましょう。

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

  • 期間：1週間
  • 学習内容：
    ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
    → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

公式サイトから無料カウンセリングに申し込む →
学習コンテンツ SEO

この記事を書いた人

WithCode 編集部のアバター WithCode 編集部

WithCode（ウィズコード）は「目指すなら稼げる人材」をビジョンに、累計400名以上のフリーランスを輩出してきた超実践型プログラミングスクールです。150社以上の実案件支援を特徴にWeb制作・Webデザインなどの役立つ情報を現場のノウハウに基づいて発信していきます。

関連記事

  1. ホーム
  2. 学習コンテンツ
  3. SEO
  4. 多言語サイトのSEO対策完全ガイド｜hreflang属性の設定方法・URL構造設計・ローカライゼーションまで徹底解説

– service –WithGroupの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう！

    詳細はこちら

  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう！

    詳細はこちら

  • WithCareer
    - ウィズキャリ -

    就転職サポート

    大手エージェントのサポート下で
    キャリアアップを目指そう！

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
を予約！

無料カウンセリングを予約する
目次