canonical URLと言語・地域別のURLを入力するだけで、HTML・Next.js Metadata・sitemap.xml形式の canonical / hreflangタグを自動生成します。設定漏れや矛盾もその場でチェックできます。
canonical URL（このページの正規URL）
言語・地域別のURL（hreflang）
設定言語数
2件
警告件数
1件
CHECK
・x-default が未設定です。どの言語にも該当しないユーザー向けの既定URLの設定を推奨します。
生成結果
<link rel="canonical" href="https://example.com/ja/" /> <link rel="alternate" hreflang="ja" href="https://example.com/ja/" /> <link rel="alternate" hreflang="en" href="https://example.com/en/" />
canonical / hreflangタグとは？多言語・多地域サイトのSEOに欠かせない理由
canonicalタグは「複数のURLに同じ内容がある場合、どのURLを正規として評価すべきか」を検索エンジンに伝える仕組みです。パラメータ付きURLやwww有無の違いなどによる評価の分散を防ぎます。
一方hreflangタグは「同じ内容のページが言語・地域ごとに複数存在する場合、どのページをどの言語・地域のユーザーに表示すべきか」を伝える仕組みです。日本語版・英語版・中国語版など複数の言語でサイトを展開している場合に重要になります。
本ツールは、canonical URLと言語・地域別のURLを入力するだけで、HTML・Next.js Metadata・sitemap.xmlの3形式でタグを自動生成できるツールです。x-defaultの設定漏れや相互参照の抜け、言語コードの重複といった、実装時に見落としやすいミスもその場でチェックできます。
こんなシーンで便利です
多言語対応サイトの新規ページを公開する時に
日本語・英語など複数言語でページを展開する際、言語ごとのURLを入力するだけでhreflangタグ一式を漏れなく生成できます。
重複コンテンツによる評価分散を防ぎたい時に
パラメータ付きURLやAMPページ、印刷用ページなど、同一内容の複数URLが存在する場合にcanonicalタグを正しく設定できます。
Next.jsのApp Routerでmetadataを実装する時に
生成したタグをそのままNext.jsのmetadataオブジェクト形式でコピーでき、alternates.canonicalとalternates.languagesの実装を効率化できます。
既存のhreflang実装に漏れや矛盾がないか確認したい時に
既に設置しているタグの内容を入力し直すことで、x-defaultの設定漏れ、相互参照の抜け、言語コードの重複などを見直すチェックツールとしても使えます。
使い方は簡単 4ステップ
- 「canonical URL」に、このページの正規URL（絶対URL）を入力します。
- 「言語・地域別のURL」に、各言語版のhreflangコードとURLを入力します。プリセットボタンやコピー＆ペーストの一括入力も使えます。
- 警告表示を確認し、x-defaultの設定漏れや重複、相互参照の抜けがないかチェックします。
- 「HTML」「Next.js Metadata」「sitemap.xml」の中から使用する形式を選び、生成されたコードをコピーして設置します。
※すべての処理はブラウザ内で完結し、入力したURLがサーバーに送信されることはありません。
ご利用時の注意点
- 本ツールが表示する警告は、一般的な実装ルールに基づく目安です。サイト構成によっては警告が当てはまらないケースもあるため、最終的な設置内容はご自身でも確認してください。
- hreflangは相互参照が原則です。ページAからページBへのhreflangを設置する場合、ページB側にもページAへのhreflangを設置してください。
- canonical・hreflangともに、必ず https:// から始まる絶対URLを指定してください。相対URLは正しく認識されない場合があります。
- 完全無料・安全：入力したURLや言語コードは一切送信されない、通信が発生しないブラウザ完結型を採用しています。
よく使われるhreflangコード早見表
代表的な言語・地域コードの組み合わせです。地域を限定しない場合は言語コードのみを使用します。
| コード | 意味 | コード | 意味 |
|---|---|---|---|
| ja | 日本語（地域指定なし） | ko | 韓国語（地域指定なし） |
| en | 英語（地域指定なし） | fr | フランス語（地域指定なし） |
| en-US | 英語（アメリカ） | de | ドイツ語（地域指定なし） |
| en-GB | 英語（イギリス） | es | スペイン語（地域指定なし） |
| zh-Hans | 中国語（簡体字） | pt-BR | ポルトガル語（ブラジル） |
| zh-Hant | 中国語（繁体字） | x-default | 既定ページ（言語不問） |
※言語コードはISO 639-1、地域コードはISO 3166-1 alpha-2に基づくのが一般的です。中国語は地域コード（zh-CN/zh-TW）ではなく文字体系コード（zh-Hans/zh-Hant）での指定がGoogleに推奨されています。
canonical / hreflangタグの役割と、実装でつまずきやすいポイント
設置前に理解しておきたい基本の考え方と、Next.jsでの実装方法を解説します。
結論：canonicalは「重複の正規化」、hreflangは「言語・地域の出し分け」
この2つのタグは役割がまったく異なります。canonicalは、同一または類似した内容を持つ複数URLのうちどれを評価対象とするかを伝えるためのタグです。
hreflangは、同一内容を異なる言語・地域向けに用意している場合の対応関係を伝えるためのタグです。
多言語サイトでは、各言語ページに自身を指すcanonicalと、言語間の対応を示すhreflangを両方設置するのが基本形になります。
hreflangの相互参照ルールとよくある実装ミス
hreflangはページ同士が互いを参照し合う「相互参照（reciprocal）」が原則です。日本語ページに英語ページへのhreflangを書いたら、英語ページ側にも日本語ページへのhreflangを書く必要があります。
よくあるミスとして、相対URLでの記述、言語コードの表記ゆれ（JP と ja-JP の混在など）、一部ページだけ相互参照が漏れているといったケースが挙げられます。サイト規模が大きくなるほど、こうした漏れは発見しづらくなります。
x-defaultの正しい使い方
x-defaultは、閲覧者の言語・地域がどのhreflang設定にも一致しない場合に表示するフォールバック用のページを指定する値です。多くのサイトでは、言語選択画面やトップページ、あるいは最も利用者の多い言語（英語であることが多い）のページに設定します。
必須の設定ではありませんが、設定しておくことで想定外の言語・地域からのアクセスに対しても適切なページへ誘導しやすくなります。
Next.js（App Router）でのcanonical / hreflang実装方法
App Routerでは、各ページのmetadataオブジェクト内にalternates.canonicalとalternates.languagesを設定するだけで、対応するcanonicalタグとhreflangタグが自動的に出力されます。
本ツールで「Next.js Metadata」形式を選択すると、入力した内容がこの形式にそのまま変換されるため、生成結果をmetadataの定義箇所に貼り付けるだけで実装が完了します。
よくある失敗と対策
相対URLで設置してしまい、正しく認識されない
hreflangやcanonicalのhref属性に「/en/」のような相対URLを指定してしまい、検索エンジンに正しく認識されず警告の対象になる失敗です。
💡 対策・解決策を見る▼
hreflangの相互参照が一部のページで漏れてしまう
日本語ページには英語ページへのhreflangを設置したが、英語ページ側には日本語ページへのhreflangを設置し忘れ、対応関係が正しく認識されない失敗です。
💡 対策・解決策を見る▼
canonicalタグを全ページ同一のURL（トップページなど）にしてしまう
テンプレートの設定ミスにより、すべてのページのcanonicalが誤ってトップページのURLを指してしまい、個別ページが検索結果に評価されなくなる失敗です。
💡 対策・解決策を見る▼
x-defaultを設定し忘れ、意図しない言語版が表示される
対応する言語がどのhreflangにも一致しないユーザーに対して、意図しない言語のページが検索結果に表示されてしまうケースです。
💡 対策・解決策を見る▼
言語コードの表記ミス（大文字小文字・地域コードの誤り）
「JP」「ja_JP」など、hreflangの仕様に沿わない表記で設定してしまい、検索エンジンに無視されてしまう失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.canonicalタグとは何ですか、なぜ設置する必要がありますか
A. canonicalタグ（rel="canonical"）は、内容が同じまたは似ているURLが複数存在する場合に、検索エンジンへ「正規のURLはこちらです」と伝えるためのタグです。パラメータ付きURLやhttp/httpsの重複、www有無の重複などによる評価の分散を防ぎ、検索結果に正しいURLを表示させる目的で設置します。
Q.hreflangタグとは何ですか
A. hreflangタグ（rel="alternate" hreflang="..."）は、同じ内容のページが言語・地域ごとに複数存在する場合に、それぞれの対応関係を検索エンジンへ伝えるためのタグです。設置することで、検索するユーザーの言語や地域設定に応じた適切な言語版のページを検索結果に表示させやすくなります。
Q.x-defaultとは何ですか、どのような時に必要ですか
A. x-defaultは、ユーザーの言語や地域がどのhreflang設定にも一致しない場合に表示する既定のページを指定するための特別な値です。多言語サイトのトップページや言語選択ページ、あるいは主要言語（多くは英語）のページに設定するのが一般的です。必須ではありませんが、設定しておくことが推奨されています。
Q.hreflangタグは自分のページだけに書けば良いのですか
A. いいえ、hreflangは「相互参照（reciprocal）」が原則です。例えば日本語ページに英語ページへのhreflangを設置する場合、英語ページ側にも日本語ページへのhreflangを設置する必要があります。片方にしか設置されていない場合、検索エンジンに正しく認識されない、または無視される可能性があります。
Q.canonicalとhreflangを同じページに両方設置しても問題ありませんか
A. 問題ありません。canonicalは重複コンテンツの正規化、hreflangは言語・地域の出し分けという別々の役割を持つため、同じページに両方設置するのが一般的な実装です。ただし、hreflangで指定するURLとcanonicalで指定するURLの組み合わせに矛盾がないよう注意する必要があります。
Q.Next.jsのApp Routerではどのように設定すれば良いですか
A. App Routerでは、各ページの metadata オブジェクト内に alternates.canonical と alternates.languages を設定することで、canonicalタグとhreflangタグを自動生成できます。本ツールの出力形式で「Next.js Metadata」を選択すると、貼り付けてそのまま使えるコードを生成します。
Q.入力したURLの情報が外部に送信される心配はありませんか
A. ありません。本ツールはすべての処理をブラウザ内のみで実行する完全ローカル処理型です。入力したURLや言語コードが外部サーバーに送信されたり保存されたりすることはなく、ページを閉じれば情報は消去されます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。