SEO／SEM

「link rel=”alternate”」の意味とSEOを意識した正しい使い方

2022/05/23

Googleをはじめとする検索エンジンは、同じ内容のページが複数のURLで存在することを、好ましくないとしています。PCやスマートフォンといったデバイスによって、異なるURLが存在するケースも同様です。

ホームページを運用する上では、このようなケースが生じる場合、検索エンジンに正しく伝えておく必要があります。

そこで重要になってくる設定が、「alternateタグ」になります。alternateタグを活用すれば、PC用とスマートフォン用でURLが分かれていたとしても、Googleに正しく認識してもらうことができます。

とはいえ、「alternateタグって何？」「どのように設定すればいいのか分からない」といった方も多いでしょう。そこで今回は、alternateタグの概要や設定方法、正しい使い方などについて紹介していきます。

INDEX

「alternate」タグとは
「canonical」タグとは
alternateタグの使用が推奨される例
alternateタグの正しい使い方
alternateタグのSEO効果
alternateタグの使用よりもレスポンシブデザインがおすすめ
まとめ

SEOに悩むサイト担当者必見！世界最高水準のテクニカルSEOツール「Lumar」: URLを入れるだけでサイト内部の問題を一括検出。
Googleと同じ視点でサイトクロール、
大規模サイトでも手軽に高度なSEO分析ができます！

まずは無料デモクロールを試して、あなたのサイトの問題点を一括検出！

今すぐサイトを無料診断する

「alternate」タグとは

alternateタグとは、URLは異なるものの、PCページと内容が同じスマートフォン用のページや、多言語に対応しているページなどに使用されるHTMLタグのことです。オルタネイトと呼び、「代替物」という意味を持っています。

同じコンテンツ内容をPCやスマートフォンといったデバイスによって分ける際に、PCでは「http://example.com」、スマートフォンでは「http://example.com/sp/」といった形で、別のURLで構成するケースは少なくありません。

このような場合、何も設定していないと、内容が同じなのにURLが違うことでユーザーを混乱させているとGoogle側に捉えられ、マイナス評価につながってしまう可能性があります。

それを防ぐ上で、alternateタグを活用することで、PCページをスマートフォン向けに展開した代替物として伝えることができます。

alternateタグは、link要素のrel属性を用いて、属性値としてHTMLファイルの＜head＞～＜/head＞内に記述することで設定できます。詳しい設定方法については後述していますので、確認してみてください。

また、alternateタグと一緒に用いられることが多いタグとして、「canonical」タグというものもあります。canonicalタグは、主にURLの統一を目的に用いられるhtmlタグで、alternateタグを併せて設定することで、Googleに対して対象ページが重複しないよう促すことが可能になります。

「canonical」タグとは

canonicalタグとは、主にURL正規化を行う際に使用されるタグになります。同じような内容のページを一つに統一する（正規化する）ことで、検索エンジンからの評価の分散を防ぐ目的があります。

alternateタグでもふれたように、内容が同じなのにURLが違うことをGoogleは重複と見なし、この数が増えればスパム扱いされ、大きなマイナス評価につながる可能性があります。

Googleは、パンダアップデートと呼ばれる検索エンジンのアップデートを行って以降、ページ内コンテンツの大半が重複した内容のページに対して、厳しく審査を行うようになりました。

Google検索時の順位下落は、新規ユーザーの集客において大きなマイナスになるので、機会損失を防ぐためにも、canonicalタグを適切に活用することが求められます。

このcanonicalタグは、alternateタグと組み合わせて活用することで、PC用とスマートフォン用のページの存在をGoogleに適切に伝えるだけでなく、URL正規化によって、Googleからの評価の分散を防ぐことができます。

インデックスされるURLを一つに統一し、一つのページとしてGoogleに評価してもらうために効果的な手法です。

canonicalについては、下記の記事で詳しく紹介しています。
canonicalタグとは？URLを正規化する理由と記述・チェック方法を解説

alternateタグの使用が推奨される例

alternateタグは、主にPC用ページとスマートフォン用のページのURLが異なる以下のような場合に、必要となります。

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

このような場合にalternateタグを設定しないと、Googleは同一のページが2つあると認識してしまいます。そうすると評価が分散されたり、ユーザビリティ的にマイナスとの評価を受けたりして、検索順位に影響してくる可能性があります。

そのため、上記どちらもアクセスできるようであれば、alternateタグを必ず設置しておくと効果的です。

また、デバイスによって同じページが表示されるケース以外にも、多言語対応することによって以下のようなページが存在する場合も、同様にalternateタグを設置することは有効です。

日本語サイトのURL例：http://example.com/jp/
英語サイトのURL例：http://example.com/en/

その他、ページの一部分だけを出し分け、A／Bテストを行った場合や、ECサイトの商品紹介ページなどにおいて、サイズ違いや色違いなどがあるだけで他は同じようなコンテンツの場合にも、alternateタグとcanonicalタグを組み合わせ、URL最適化が推奨されます。

alternateタグの正しい使い方

続いて、下記の例をもとに、alternateタグの正しい使い方について、紹介していきます。

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

alternateタグを使い、スマートフォン用のページを正しくGoogleに伝える方法は、以下のようになります。

<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://example.com/sp/” />
alternateタグを設定しているページは、Googleがクロールした際にスマートフォン用のページであると認識させることができます。そのため、PC用ページのソースコードの中に、上記のようにスマートフォン用のページのURL「http://example.com/sp/」を記述します。
<link rel=”canonical” href=”http://www.example.com/” />
次に、スマートフォン用ページのソースコードには、上記のようにPCページ用のURL「http://example.com/」を記述します。これによって、このページ（http://example.com/sp/）はPC用ページと同じ内容で、スマートフォン向けに作ったページという旨を、Googleのクローラーに伝えことができます。
リダイレクト設定をする
最後に、ユーザーのデバイス状況（UA）に応じて、リダイレクト設定を行います。PC用とスマートフォン用でURLが別々に存在した場合、PCからスマートフォン用のページ「http://example.com/sp/」に訪れても見づらいため、ユーザビリティ的に好ましくありません。
そこで、PCから「http://example.com/sp/」に訪れた場合には、「http://example.com/」に、スマートフォンから「http://example.com/」に訪れた場合には、「http://example.com/sp/」に自動でページが飛ぶよう、リダイレクト処理を行います。ただし、スマートフォン用ページがないものに関しては、特にリダイレクトを設定する必要はありません。

ちなみに、上記の1.で紹介した“rel=”alternate””が指定された“link”の要素は、“media”属性以外にも“hreflang”属性や“type”属性などち併せて指定することで、代替文書がどのような形式なのかなど、代替文書の対象を示すことができます。

“rel”属性の値に“stylesheet”も含まれる場合は、“link”要素はユーザーが選択して切り替えることによって適用することができる代替スタイルシートを指定することで、示すことも可能です。

alternateタグのSEO効果

前提として、alternateタグを設置したからといって、SEOの評価が上がることはありません。とはいえ、PCページとスマートフォンページが別のURLとなって運用している場合は重複と見なされ、Googleからの評価が下がる恐れがあります。

そのため、SEOの効果を高めるというよりは、SEOの評価を下げないために、alternateタグを正しく設置しておく必要があります。また、誤った設定をしておくと、SEOの評価を下げるだけでなく、最悪の場合、どれだけ検索してもGoogleの検索結果に表示されないケースも起こり得ます。

例えば、以下のような設定は、マイナス評価につながる恐れがあるため注意しましょう。

全てのalternateタグにTOPページを指定してしまう
全てのalternateタグにTOPページなど同じページを設定している場合、Googleに意図的に認識させていると判断され、大きなマイナスにつながる可能性があります。
<body>に記載
alternateタグは、必ず<head>内に記述します。<body>内に記述している場合は、Googleに認識されないため、注意が必要です。
相対パスで記載
alternateタグやcanonicalタグにおいて、URLを記述する場合には、相対パスではなく絶対パスでの記述を推奨しています。Googleも公式サイトで絶対パスで指定することを推奨しています。
全て同じページへリダイレクトさせる
PCから対象のスマートフォン用ページに訪れた場合には、スマートフォン用に紐づく対象のPC用ページにリダイレクトさせることが重要です。これを全てTOPページなどにリダイレクトさせることは、不適切となり、マイナスにつながる可能性がありますので、注意しましょう。

alternateタグの使用よりもレスポンシブデザインがおすすめ

alternateタグの設定には、HTML上の記述や属性の設定、リダイレクト設定など、対応することが多く、また一歩間違えてしまうとGoogleからの評価が下がるなどのリスクが伴います。

このような手続きを簡素化し、かつ効率的にホームページを運用して行くには、レスポンシブデザインでホームページを構築する手法も存在します。

レスポンシブデザインとは、ホームページのデザインを、閲覧するユーザーが使用するデバイスの画面サイズに応じて最適化して表示させる仕組みのことを指します。

スマートフォンやタブレットなど、PC以外にも画面サイズの異なるデバイスが多数存在する中で、レスポンシブデザインは1つのHTMLで構成され、デバイスごとにCSSを用意することで表示を変えることができます。そのため、デバイスに応じたHTMLを用意する必要はありません。

これにより、PCページでは正常に表示されるのに、スマートフォンページではエラーになるといったトラブルを防くことができます。また、管理も1つのHTMLを直すだけで済むため、作業を簡略化できることから、注目が集まっている手法です。

Googleが提供するSEOに関するドキュメント「Google検索セントラル」でも、レスポンシブウェブデザインを推奨しています。

レスポンシブデザインについては、下記の記事で詳しく紹介しています。
レスポンシブデザインとは実装のメリット・デメリット、作り方について解説

まとめ

PC用ページとスマートフォン用ページのURLが異なる場合には、alternateタグの設定が効果的です。

適切に記述しておかなければ、Googleに対して正しく認識してもらえず、SEOの面でマイナス評価につながる恐れがあります。

モバイルファーストインデックスと呼ばれるGoogleのアップデートにより、Googleもスマートフォンページの状況を厳しく見るようになってきています。alternateタグを適切に活用し、効果的な運用につなげていきましょう。

SEO対策でビジネスを加速させる「SEO Dash! byGMO」

SEO対策でこんな思い込みしていませんか？

大きいキーワードボリュームが取れないと売上が上がらない・・
コンサルに頼んでもなかなか改善しない
SEOはコンテンツさえ良ければ上がる

大事なのは自社にあったビジネス設計です。
御社の課題解決に直結するSEO施策をご提案します

無料資料請求はこちら

プロフィール

GMO TECH株式会社大澤健人（おおさわけんと）: 2012年より一貫して検索エンジン領域のコンサルティング業務に従事。 2017年にGMO TECH社に参画。営業組織の構築、新商材開発、マーケティング部門立ち上げをおこなう。現在、MEOコンサルティング、SEOコンサルティング、運用型広告などSEM領域全体を統括し、お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。