hreflangタグとは何か調べてみました

  • 公開日:

Google Search Console(旧ウェブマスターツール)の各項目をチェックしていたところ、「インターナショナル ターゲティング」という項目で「サイトにhreflangタグがありません。」というエラーメッセージを発見しました。

hreflangタグを追加する前のSearch Console

そもそもhreflangタグについて何も知らなかったので、調査してまとめてみました。

この記事の目次

hreflangタグとは何か

hreflangタグについては「言語や地域のURLにhreflangを使用する – Search Console ヘルプ」で以下のように記述されています。

複数の言語でコンテンツを提供するウェブサイトや地域別にコンテンツを提供するウェブサイトの場合、Googleではrel="alternate" hreflang="x"属性を使用して、適した言語や地域のURLを検索結果で返しています。

つまり、hreflangタグは、多言語サイトを運用している場合に、Googleで検索したユーザーに対して適切な言語のバージョンを表示するために必要となる要素です。

多言語サイトの機会損失を防ぐ

例えば、東アジアをターゲットとして日本語・中国語・韓国語でコンテンツを提供している多言語サイトを運営しているとします。

韓国語を母国語とするユーザーがGoogleの検索結果から運営している多言語サイトを開いたときに、もし日本語や中国語のページが表示されてしまったら、そこで離脱してしまうかもしれません。多言語サイトであれば言語を切り替える機能が付いていると思いますが、その機能を知らなかったり見つけられなかったりして離脱する可能性も考えられます。

hreflangタグを使って適切な言語のページを表示することは、上記のような機会損失を防ぐことになります。

Googleはlang属性を無視する

言語についてはlang属性で既に定義しているのに、なぜhreflangタグが必要になるのでしょうか。この件については「Google ウェブマスター向け公式ブログ: 多言語ウェブサイトの作成について」に以下のような記述があります。

Google では「lang」属性から文書型定義(DTD)まで、コードレベルの言語情報はすべて無視します。一部のサイト制作ソフトでは、これらの属性が自動的に作成されるため、ウェブページの言語を判断する際にこうした情報はあまり信頼できないためです。

だからといって、lang属性をいい加減に設定してもいいということにはなりません。上記の内容はあくまでGoogle検索における話であって、他の検索エンジンがlang属性を参照している可能性はあります。

また、ブラウザはlang属性を参照しています。例えば、lang="ja"に設定しているとqタグ(引用)の前後にカギ括弧が表示されますが、この設定をlang="en"に変更するとqタグの前後はダブルクオーテーションになります。

hreflangタグの指定方法

hreflangタグを指定するには、以下の3つの方法があります。

  • headタグ内にリンク要素として記載する
  • HTTPヘッダーに記載する
  • XMLサイトマップに記載する

今回は、headタグ内にリンク要素として記載する方法について説明していきます。

トップページの場合

記述例:

	<link rel="alternate" hreflang="ja" href="http://example.com/">
	<link rel="alternate" hreflang="zh" href="http://example.com/chinese/">
	<link rel="alternate" hreflang="ko" href="http://example.com/korean/">

jaは日本語、zhは中国語、koは韓国語を表すISO 639-1の言語コードです。

ここで大切なのは、どの言語のページにおいても同じコードを記述することです。日本語のページだからといって、上記コードの1行目の記述を省略するのは間違いです。

下層ページの場合

記述例:

	
	
	

下層ページでは、ページ毎の対応関係に従って記述する必要があります。

日本語だけのサイトの場合

「サイトにhreflangタグがありません。」というメッセージは、そのサイトが多言語サイトかどうかにかかわらず表示されます。もし多言語サイトでなければ、何も対処しなくても問題ないようです。

どうしてもメッセージを表示したくなければ、headタグ内に下記のコードを追加すれば大丈夫です。

	<link rel="alternate" hreflang="ja" href="該当するページのURL">

WordPressであれば、以下のようなコードを記述すれば大丈夫です。

	<?php if( is_single() ): ?>
		<?php if( have_posts() ): ?>
			<?php while( have_posts() ): the_post(); ?>
				<link rel="alternate" hreflang="ja" href="<?php the_permalink(); ?>">
			<?php endwhile; ?>
		<?php endif; ?>
	<?php elseif( is_home() ): ?>
		<link rel="alternate" hreflang="ja" href="<?php echo home_url(); ?>">
	<?php endif; ?>

上記のコードを追加してしばらく経ってからSearch Consoleを確認したところ、ちゃんとhreflangタグが検出されていました。

hreflangタグを追加した後のSearch Console

参考URL