0Pricing
HTML Academy · レッスン

国際化ページのhreflang

言語と地域のバリエーションを検索エンジンに伝えます

「国際化ページのhreflang」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

hreflangが解決する問題

同じ記事を英語、トルコ語、日本語で公開すると、検索エンジンは各ユーザーの検索結果にどのバージョンを表示すべきか判断する必要があります。hreflangがないと、Googleが間違った言語のページを表示したり、各バージョンを重複コンテンツとして扱ったりする可能性があります。

linkタグ

各代替版は、<head>内の<link rel="alternate" hreflang="..." href="...">で宣言します。hreflang属性には、BCP-47の言語コード(en、tr)または言語と地域の組み合わせ(en-US、en-GB、pt-BR)を指定します。

<link rel="alternate" hreflang="en" href="https://example.com/en/article">
<link rel="alternate" hreflang="tr" href="https://example.com/tr/article">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/article">

相互参照が必須

各バージョンは、自分自身を含む他のすべてのバージョンにリンクする必要があります。Googleは、双方向になっていないhreflangクラスタを無視します。英語ページはTRとJAにリンクし、トルコ語ページはENとJAにリンクするというように設定します。

自己参照

各ページは、hreflangを使って自分自身にもリンクする必要があります。英語ページには、独自のURLを指す<link rel="alternate" hreflang="en" ...>を含めなければなりません。これは「相互」の一部であり、Googleはこの自己リンクを使ってクラスタへの所属を確認します。

x-defaultの値

hreflang="x-default"を使用して、Googleが言語を一致させられないユーザー向けのフォールバックページを指定します。通常は英語版、または言語選択用のランディングページを指定し、対象外のユーザーも適切なページに誘導できるようにします。

言語コードと地域コードの違い

enはすべての英語話者を対象にします。en-US、en-GB、en-AUは、コンテンツが地域によって異なる場合(通貨、綴り、配送など)に国別のバージョンを対象にします。内容が汎用版と実際に異なる場合を除き、地域を指定しないでください。

代替版の宣言方法

hreflangは、HTTPのLinkヘッダー(PDFなどのHTML以外のファイル向け)や、<xhtml:link rel="alternate" hreflang="...">を使ったXMLサイトマップでも宣言できます。3つの方法は同等です。保守しやすい方法を選んでください。

サイトマップでの宣言

多数の言語を扱うサイトでは、HTMLタグよりもサイトマップでhreflangを宣言する方が規模を拡大しやすくなります。URLごとに1つのサイトマップエントリで、すべての代替版を一覧にできるため、ページごとのテンプレートの重複をなくせます。Search Consoleは相互参照の不足を検出するため、問題を早期に発見できます。

よくある間違い

ハイフン(en-US)の代わりにアンダースコア(en_US)を使う、200以外のステータスコードを返すURLを指定する、クラスタ内でhttpとhttpsを混在させる、または自己リンクを忘れると、hreflangは何の通知もなく機能しなくなります。公開後にGoogle Search ConsoleのInternational Targetingレポートを実行してください。

翻訳の代わりにはならない

hreflangは、どの翻訳がすでに存在するかをGoogleに伝えるだけです。ページ自体には、実際に翻訳されたコンテンツが引き続き必要です。Googleが代わりに翻訳してくれることはありません。英語が80%を占めるページにhreflangだけを設定すると、インデックスを混乱させる原因になります。

og:localeとlangの併用

ドキュメントの<html lang="...">とog:localeには、ページの実際の言語を指定します。hreflangは検索エンジンに関連ページを伝え、langとog:localeはブラウザやソーシャルネットワークに現在のページの言語を伝えます。完全な情報を示すには、両方が必要です。

理解度チェック

hreflang="x-default"は何を指しますか?

まとめ

hreflangはページの翻訳版をリンクし、検索エンジンが適切な言語のページを表示できるようにします。BCP-47コードを使い、自己リンクを含めて代替版を相互に宣言し、フォールバック用にx-defaultを追加してください。Google Search ConsoleのInternational Targetingレポートで確認することも重要です。翻訳の品質とlang/og:localeタグも、実際の内容と一致させる必要があります。

よくある質問

「国際化ページのhreflang」レッスンは無料ですか?

はい。「国際化ページのhreflang」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「国際化ページのhreflang」で何を学びますか?

言語と地域のバリエーションを検索エンジンに伝えます ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「国際化ページのhreflang」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか?

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. OpenGraph og:title og:description og:image
  2. Twitter Cardのmetaタグ
  3. JSON-LD構造化データの基礎
  4. 国際化ページのhreflang
← HTML Academyに戻る