いまや日本人の9割以上がスマホを使って検索し、好きなサイトを見たり、情報収集をしています。
サイトを運営する側にとっては、パソコンやスマホ、タブレットなどのデバイスに対応したサイトを持っていることがほとんどでしょう。
その場合、パソコンサイトやスマホ用サイトを運用するうえで、両サイトの存在をGoogleなどのクローラーに正しく伝えることが、SEOの観点からも非常に大切です。
そこで重要となるのがalternateタグですが、「そもそもalternateタグとは何なのか？」「どうやって設定すればいいのか？」という声を聞きます。
今回、alternateタグについて解説したこの記事を読むことで、次のことがわかるようになります。
- alternateタグとは何か？
- alternateタグ実装の必要性とは？
- SEO効果を最大化できるcanonicalタグとは？
- alternateタグ実装の注意点とは？
- alternateタグ実装方法
「alternate」タグとは？
alternate（オルタネイト）タグはHTMLタグの一種で、パソコン用サイトと内容が同じスマホ用サイトで、URLがそれぞれ異なる場合などに使われます。
alternateタグはlink要素のrel属性の属性値として使用され、スマホやフィーチャーフォン（いわゆる”ガラケー”）サイト用のURLの存在を、Googleなどのクローラーに伝達する役割を担います。
link要素とは「該当するページ内のHTML文章と外部ファイルやページを関連付ける」要素で、rel属性とは「リンク先のファイルやページとの関係性を指定する」属性です。
このlink要素とrel属性の値を使い、alternateタグを実装します。
たとえば、パソコン用サイトとページ内容が同一で、URLが異なるスマホ用サイトのような代替ページが存在する場合、alternateタグを次のように記述します。
<link rel=”alternate” media=”screen and (max-width: 640px)” href=”モバイルサイトページのURL“>
また、多言語ページのローカライズ（対象国の言語や地域の習慣・文化に配慮した言語翻訳やデザイン修正、機能追加などの修正）対応にも、alternateタグがよく使われます。
たとえば、英語ページの場合、次のような記述になります。
<link rel=”alternate” hreflang=”en” href=”翻訳ページのURL“>
記述にある「hreflang」はhreflang属性といい、作成したWebページがどの国の言語向けに作られたかを示します。ここでは、英語のページなので「en」と記述しています。
なんとなく、alternateタグの使用イメージがつかめたのではないでしょうか。
詳しい実装方法は後述していますので、ぜひ確認してみてください。
なぜ「alternate」タグが必要なのか？
alternateタグが使われていないことで、次の事象が起こる可能性が高まります。
- パソコン用サイトページと同一内容のスマホ用サイトページがあった際、Googleなどのクローラーが「スマホ用サイトを、パソコン用サイトと重複したコンテンツ」と認識してしまう
- 「URLが違うだけで同じ内容のページというマイナス評価」の判断を、Googleなどのクローラーが下すことで、検索順位に影響が出る
alternateタグを有効活用することで、スマホ用サイトなどの代替ページを、正しくGoogleなどのクローラーに認識してもらえるようにすることは、SEOを考えるうえで非常に大事な論点と言えるでしょう。
「canonical」タグとの併用で、SEO効果を最大化できる
URLの正規化を目的とした、HTMLタグの一種であるcanonicalタグは、alternateタグと併用することで、SEO効果を最大化できます。
このcanonicalタグを用いることで、URLは違うけれども同じ内容や似た内容のサイトページを、一つに整える（正規化）ことができ、Googleなどからのサイト評価を分散させない効果を持っています。
canonicalタグを使って正規化を行うことで、質を重視したパンダアップデートなどのスパム対策による、サイトページへの評価低下を回避することができるため、実装し忘れないように注意したいところです。
「alternate」タグ実装の注意点
alternateタグを実装するにあたり、注意すべき点を詳しく解説します。
- パソコン用、スマホ用サイトページに何を実装するのか把握すること
- canonicalタグ含め、必ずHTMLの<head>タグ内に記述すること
- 対象ページの指定は必ず「絶対パス」で記述すること
パソコン用、スマホ用サイトページに何を実装するのか把握すること
パソコン用サイトとスマホ用サイトそれぞれで、何を実装するかを整理しましょう。
- 「alternate」タグ：「パソコン用」サイトページのHTML内に実装します。
- 「canonical」タグ：「スマホ用」サイトページのHTML内に実装します。
単純だからこそ、しっかりと押さえておきましょう。
canonicalタグ含め、必ずHTMLの<head>タグ内に記述すること
作成したalternateタグやcanonicalタグは、必ずHTMLの＜head＞タグに記述します。
＜head＞タグとは、そのページの作成者情報や検索エンジン向けのキーワードや説明、ページタイトルなど、文章に関する情報を記述する場所です。
また、ページ全体で保持するデータを定義する重要なタグでもあります。
たとえば、Googleなどに「このページはこんなページなんですよ」と伝えたり、「このページはこういう言語（例：英語）で書かれています」と伝える役割があります。
専門的な言い方をすれば、メタデータ（データを表す属性や、関連情報を記述したデータ）を記述するためのタグが、この＜head＞タグです。
対象ページの指定は必ず「絶対パス」で記述すること
対象ページを指定する際は、必ず絶対パスで記述するようにしましょう。
HTMLには特定の情報にたどり着くための道（パス）が2つあり、それを「絶対パス」と「相対パス」と言います。
絶対パスは欲しい情報ページをURLで指定し、確実に伝えます。わかりやすく言うと、気になるお店の住所（ここではURL）を教えるのが、絶対パスの伝え方です。
一方、相対パスは「今いる場所」を基準として、欲しい情報がどこにあるかを伝えます。
「今いる場所」から、行きたいお店までの道案内をするのが、相対パスの伝え方です。
絶対パスと相対パスの両者それぞれに長所と短所がありますが、Googleなどでは絶対パスでの記述を推奨しています。
ページ評価が下がるリスクを避けるためにも、絶対パスで記述するようにしましょう。
「alternate」タグの実装方法
alternateタグ実装方法の解説にあたり、同一内容のパソコン用サイトとスマホ用サイトページが、別のURLで存在しているとします。
それぞれのURLは、次のとおりです。
- パソコン用サイト：http://www.example.com/
- スマホ用サイト：http://sp.example.com/
alternateタグを実装することで、両者を正しくGoogleなどのクローラーに認識してもらうことが可能となります。
言い換えれば、Googleなどのクローラーに「両サイトが同一のページではない」と認識してもらえることで、パソコン用サイトページと、スマホ用サイトページの両方をクローリングしてくれるようになります。
alternateタグの実装手順は、次の通りです。
手順1：alternateタグの実装
手順2：canonicalタグの実装
手順3：リダイレクト設定
手順1：「alternate」タグの実装
alternateタグは「パソコン用サイト」のHTMLの＜head＞タグ内に、次のように実装します。
【パソコン用サイトのHMTL】
「<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://sp.example.com/” /> 」
※実装部分を太字で強調しています
「パソコン用サイト」にalternateタグを実装することで、Googleなどのクローラーが「スマホ用サイト」であると認識します。
スマホ用サイトと間違えないこと、alternateタグは必ずHTMLの＜head＞タグ内に実装しましょう。
手順2：「canonical」タグの実装
次はcanonicalタグを「スマホ用サイト」に、次のように実装します。
<link rel=”canonical” href=”http://www.example.com/” />
「スマホ用サイト」にcanonicalタグを実装することで、Googleなどのクローラーに「このページはパソコン用サイトページのスマホ用ページ」と伝えることができます。
必ず「スマホ用サイト」のHTMLの＜head＞タグ内に、canonicalタグを実装するようにしましょう。
手順3：リダイレクト設定
パソコン用サイトとスマホ用サイトのそれぞれについて、リダイレクト設定をおこなう必要があります。
一例として、次の対象に対し、リダイレクト設定をおこないます。
- パソコン用サイトのトップページとスマホ用サイトのトップページ
- パソコン用サイトの記事とスマホ用サイトの記事 など
「リダイレクト設定」とは、あるページを訪れたユーザーを、別のページに転送する処理です。
一般的にはページ削除やURL変更にともない、正しいページにユーザーを誘導するために使います。また、URLリダイレクトと呼ばれることがあります。
たとえば、パソコン用サイトとスマホ用サイトでURLが別々に存在する場合、ユーザー視点で見た場合、パソコンでスマホ用サイトを表示するのは好ましくありません。
そこで、パソコンからスマホ用サイトを訪れた場合には、パソコン用サイトのページを表示し、スマホからパソコン用サイトを訪れた場合には、自動でスマホ用サイトページに遷移するようにします。
これがリダイレクト設定です。
ただし、スマホ用サイトのページがないページに関しては、リダイレクト設定は不要です。
また、すべてをスマホ用サイトのトップページにリダイレクトするなどの対処法については、Googleでは「間違ったリダイレクト」と判断し、マイナス評価につながるとしています。
“典型的な例としては、 デスクトップ ユーザー向けページを訪れたスマホ ユーザーをすべてスマホ向けサイトのトップ ページにリダイレクトするよう設定しているという、ケースがあります。以下の図にある、赤色のリダイレクトは間違ったリダイレクトと考えられます。“
出典：Google 検索セントラル「スマホ向け検索でのランキングの変更について」
“こうした間違ったリダイレクト設定はウェブ ページや動画、その他あらゆるものを探しているユーザーのリッチな検索体験を妨げるものですので、ウェブ検索や、他の種類の検索（イメージ検索、ビデオ検索など）において今回のランキングの変更の影響が及びます。”
引用：Google 検索セントラル「スマホ向け検索でのランキングの変更について」
結果、検索順位に大きく影響する可能性があるので、リダイレクト設定は慎重におこなうようにしましょう。
SEO効果を高めるには「alternate」タグの活用が必須
パソコン用サイトと同じスマホ用サイトのページがある場合、SEO効果を高めるために必要なことは、そのURLの存在をGoogleなどのクローラーに正しく伝達することです。
alternateタグを実装していないことで、せっかく作成したスマホ用サイトがパソコン用サイトと重複していると判断され、SEOに悪影響を及ぼす可能性があります。
そうした事態を避けるためにも、alternateタグをHMTLに組み込んでおくことは、必須と言えるのではないでしょうか。
また、併せてcanonicalタグの実装で正規化を図ることは、SEO効果を最大化するために必要な対処法と言えます。
SEOの質を上げていくためにも、alternateタグを有効活用していきましょう。
ミエルカでできること
