国際化ページの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フィードバックを取得できます。ローカル設定は不要です。