「link rel=”alternate”」の設定方法をHTML表記つきで解説！canonicalタグは必要？

「link rel=”alternate”」を正しく設定する方法をご存知ですか？中には、canonicalタグと混同されている方も多いようです。そこで今回は、alternateタグの役割を踏まえたうえで、必要なケース・canonicalタグとの関係・設定方法などをまとめてみました。

alternateタグとは？

alternateタグ（link rel=”alternate”）とは、「代替物」という意味を持つhtmlタグの1種で、内容は同じなのにURLが異なるページが存在する場合など「重複コンテンツではなく、どちらも正規の記事ですよ」とGoogleクローラーに伝えたい時に使用します。

つまり、alternateタグが設置されていなければ、PCページと内容が同じスマホページが重複コンテンツとみなされて、SEOにネガティブな影響を受けてしまうのです。ちなみに、日本語では「オルタネイト」と読みます。

ここからは、SEO担当者が知っておくべきalternateタグの疑問点について解説していきましょう。

alternateタグの疑問点

• alternateタグが必要なケースは？
• alternateタグを設定しないとどうなる？
• canonicalタグとの違いとは？

alternateタグが必要なケースは？

下記に相当する場合は、alternateタグを設定する必要があります。

設定すべきケース

• PC用とスマホ用のURLが異なる場合
• 多言語対応のコンテンツ
• 多地域対応のコンテンツ

PC用とスマホ用のURLが異なる場合

alternateタグが必要なケースとして最も代表的なのが、PC用ページとスマホ用ページのURLが異なる場合です。

デバイスごとにURLを使い分けているケースの一例

• PCページのURL：http://example.com
• スマホページのURL：http://example.com/sp/

上記のように記事の内容が同じなのにURLだけが異なる場合は、alternateタグを設定することでGoogleクローラーに対してスマホサイトの存在を正しく伝達することができるのです。「rel alternate」の具体的な設定方法と手順については、本記事の後半で解説しております。

多言語対応のコンテンツ

多言語および多地域に対応しているコンテンツも、alternateタグを設定すべきケースです。特にECサイトの多くがユーザビリティ向上の一環として、同じ商品の紹介ページを日本語と英語で対等に表示させるためにURLを使い分けています。

言語ごとにURLを使い分けているケースの一例

• 日本語ページのURL：http://example.com/jp/
• 英語ページのURL：http://example.com/en/

なお、多言語サイトに「rel=”alternate” hreflang=”x”」を設定する方法については、下記の記事でも解説しております。

関連記事

多地域対応のコンテンツ

一方、トラベル系やオンラインツールの提供サイトでは、言語・内容が同じページに対して地域ごとにURLを使い分ける手法が使われています。こちらも重複コンテンツのリスクを避けるために、alternateタグを設定した方が良いでしょう。

地域ごとにURLを使い分けているケースの一例（言語は共に英語）

• 米国向けページのURL：http://en-us.example.com/
• 英国向けページのURL：http://en-gb.example.com/

alternateタグを設定しないとどうなる？

まずは、Googleの検索クローラーが「コンテンツの内容」と「URL」という2つの情報を入手した際、どのように認識するのかおさらいしてみましょう。

検索クローラーの認識

• 内容が同じコンテンツ：重複コンテンツと認識する
• URLが異なるコンテンツ：個別のコンテンツと認識する

上記の通り、「同じ内容＋異なるURL」という相反する組み合わせは、Googleクローラーを混乱させるうえ、一致する情報量の多さから「重複コンテンツ」と見なされる可能性が高いのです。

alternateタグを設定しないリスク

• 重複コンテンツと見なされる可能性が高い
• クローラーが混乱する分、インデックスされ難くなる
• 検索クローラーにスマホサイトの存在を認識してもらえない

SEOの評価対象であるスマホサイトの存在がクローラーに認知されなかった場合、当然ながら検索結果の上位化は望めません。

関連記事

canonicalタグとの違いとは？

内容が同じコンテンツに異なるURLを設定してPC用またはスマホ用として表示させる場合は、「alternateタグ」と「canonicalタグ」をセットで使用するのがセオリーです。canonical(カノニカル)タグとは、同一または類似している2つのコンテンツを「URLの正規化」によって1つに統一する際に使用するHTMLタグを指しており、SEO評価の分散を防ぐ効果があります。

つまり、2つのタグを組み合わせることで「PC用のページとスマホ用のページはたとえ内容は同じでも重複コンテンツではなく、どちらも正当な理由で存在している」と検索エンジンに伝えることができるのです。ただし、「alternateタグ」と「canonicalタグ」には下記のような違いがあります。

「alternateタグ」と「canonicalタグ」を使い分ける方法

• alternateタグ：PC用のファイルに「スマホページの存在」を記述する際に使う
• canonicalタグ：スマホ用ファイルに「PCページの存在」を記述する際に使う

「canonicalタグ」や「URLの正規化」については、下記の記事でも詳しく解説しております。

関連記事

alternateタグのSEO効果

結論から言うと、alternateタグそのものに検索順位を急上昇させるほどのSEO効果はありません。そもそもalternateタグを設定する目的は、あくまでSEO効果を低下させないためなのです。とはいえ、下記のように間接的なSEO効果が見込めるため、正しい設定方法をマスターしておきましょう。

間接的なSEO効果

• 評価の分散を防ぐことができる
• 重複コンテンツのペナルティリスクが軽減される
• クローラーに、SEO評価の対象であるスマホサイトの存在が明確に伝わる

設定方法と手順！HTML記述例

例題として、PC用とスマホ用のURLが異なる場合の設定方法について解説していきます。

設定の流れ

1. PCサイトのソースコードを記述する（alternateタグ）
2. スマホサイトのソースコードを記述する（canonicalタグ）
3. リダイレクトを設定する

なお、各ファイルに記述するURLは下記を採用しています。

スタディーケース

• PCサイトのURL：http://example.com
• スマホサイトのURL：http://example.com/sp/

PCサイトのソースコードを記述する（alternateタグ）

PCサイトのファイルには、alternateタグを使って「スマホサイトの存在」をクローラーに伝えます。ソースコードの中に、スマホ用のURL（http://example.com/sp/）を記述しましょう。ちなみに、下記のソースコードを記述する箇所は、headセクション（HTMLファイルの＜head＞～＜/head＞内）が適切です。

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://example.com/sp/” />

上記のソースコードを記述することで、下記の2点がクローラーに伝わります

クローラーに伝わる情報

• このページは、PC用に作ったページである
• このページには、スマホ用のページと同じ内容が書かれている

スマホサイトのソースコードを記述する（canonicalタグ）

一方、スマホサイトのファイルにはcanonicalタグを使って「PCサイトの存在」をクローラーに伝えます。ソースコードの中に、PC用のURL（http://example.com）を記述しましょう。

<link rel="canonical" href="http://example.com/" />

上記のソースコードを記述することで、下記の2点がクローラーに伝わります

クローラーに伝わる情報

• このページは、スマホ用に作ったページである
• このページには、PC用のページと同じ内容が書かれている

リダイレクトを設定する

「デスクトップ用の記事」と「モバイル用の記事」、あるいは「デスクトップ用のトップページ」と「スマホ用のトップページ」でURLが異なる場合は、ユーザビリティに配慮して自動で適正なページが閲覧できるようにリダイレクトを設定しておきましょう。

リダイレクト設定の一例

• PCからスマホサイトに訪れた場合：「http://example.com/」へのリダイレクト設定
• スマホからPCサイトに訪れた場合：「http://example.com/sp/」へのリダイレクト設定

ちなみに、PCページに訪れたモバイルユーザー全員を「スマホ用のトップページ」だけに集める手法は、「不適切なリダイレクト」とみなされるので注意が必要です。

こうした間違ったリダイレクト設定はウェブ ページや動画、その他あらゆるものを探しているユーザーのリッチな検索体験を妨げるものですので、ウェブ検索や、他の種類の検索（イメージ検索、ビデオ検索など）において今回のランキングの変更の影響が及びます。

引用：Google検索セントラルブログ スマートフォン向け検索でのランキングの変更について

関連記事

レスポンシブデザインならalternateタグより簡単！

GoogleはPCサイトとスマホサイトを最適化する方法として、下記の3種類をサポート対象に認定しています。

Googleのサポート対象

• レスポンシブデザイン
• URLを分ける
• 動的配信

上記の内、最も手軽に最適化できるのが「レスポンシブデザイン」です。ユーザーがどのデバイスを使っていようと、それぞれの画面サイズに最適化された状態でコンテンツが表示されるのが最大の強み。また、ブログやサイト運営者にとっては下記のようなメリットも大きな魅力です。

レスポンシブデザインのメリット

• デバイスごとにHTMLを用意する必要がない
• 1つのHTMLを修正すると関連ページに反映されるので、作業の簡略化に繋がる
• 管理が一元化できる

関連記事

MFIの導入によりalternateタグの重要性が増している

MFI（モバイルファーストインデックス）が導入されて以降、SEOの評価対象はPCページからスマホページに切り替わっています。にもかかわらず、PCページと同一内容のスマホページにalternateタグが設定されていなければ、重複コンテンツと見なされてインデックスすらされない可能性もあるのです。

内容が同じ記事をデバイスごとに対応させるためにURLを分けている場合は、必ず「alternateタグ」および「canonicalタグ」を設定しておきましょう。

関連記事

まとめ

サイトの規模が大きくなるにつれて、知らず知らずのうちに増えていく重複コンテンツ。デスクトップ用とモバイル用でURLを分けている場合は尚更でしょう。とはいえ、重複コンテンツが多いサイトほどGoogle]からのSEO評価が低くなるのは明らか。だからこそ、alternateタグの設定方法を習得しておくべきなのです。