⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？
Googleをはじめとする検索エンジンは、同じ内容のページが複数のURLで存在することを、好ましくないとしています。PCやスマートフォンといったデバイスによって、異なるURLが存在するケースも同様です。
ホームページを運用する上では、このようなケースが生じる場合、検索エンジンに正しく伝えておく必要があります。
そこで重要になってくる設定が、「alternateタグ」になります。alternateタグを活用すれば、PC用とスマートフォン用でURLが分かれていたとしても、Googleに正しく認識してもらうことができます。
とはいえ、「alternateタグって何？」「どのように設定すればいいのか分からない」といった方も多いでしょう。そこで今回は、alternateタグの概要や設定方法、正しい使い方などについて紹介していきます。
1．alternateタグとは？
alternateタグとは、HTMLファイルの＜head＞～＜/head＞内に記述するhtmlタグの一つで、link要素のrel属性で属性値として使用します。
読み方はオルトネイトのようで、alt（オルト）の「代用」という意味が関係してるようです。
このalternateタグは、スマホやフィーチャーフォンサイトURLの存在をGoogle検索エンジンに伝えるのに役立ちます。
記述例①
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://sample.com/sh/” />
media属性を使い、PCと別に、スマホサイトのURLが存在することをGoogle検索エンジンに伝えることができます。
また、alternateタグは、canonical属性と合わせて、サイトのURL正規化時に活用されるケースが多いです。
記述例②
<link rel=”alternate” hreflang=”http://ja.sample.com” />
また、今回のテーマとは関係ありませんが、hreflang属性を使って、複数言語・地域別webサイトを運営してるときに使用する別の方法もあります。
2．alternateタグが必要なケース
alternateタグは、PCサイトとスマホサイトのURLがそれぞれ違う以下のような場合に必要となります。
- PCサイトURL：http://sample.com
- スマホサイトURL：http://sample.com/sh/
上記のよう、2つのURLが存在し、サイトにアクセスできる場合、alternateタグの設置を検討しましょう。
3．alternateタグの正しい使い方
続いて、下記の例をもとに、alternateタグの正しい使い方について、紹介していきます。
PCサイトのURL例：http://example.com
スマホサイトのURL：http://example.com/sp/
alternateタグを使い、スマートフォン用のページを正しくGoogleに伝える方法は、以下のようになります。
1．<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://example.com/sp/” />
alternateタグを設定しているページは、Googleがクロールした際にスマートフォン用のページであると認識させることができます。そのため、PC用ページのソースコードの中に、上記のようにスマートフォン用のページのURL「http://example.com/sp/」を記述します。
2．<link rel=”canonical” href=”http://www.example.com/” />
次に、スマートフォン用ページのソースコードには、上記のようにPCページ用のURL「http://example.com/」を記述します。これによって、このページ（http://example.com/sp/）はPC用ページと同じ内容で、スマートフォン向けに作ったページという旨を、Googleのクローラーに伝えことができます。
3．リダイレクト設定をする
最後に、ユーザーのデバイス状況（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”要素はユーザーが選択して切り替えることによって適用することができる代替スタイルシートを指定することで、示すことも可能です。
4．alternateタグを実装する必要性
alternateタグの実装は、モバイルフレンドリー対策においても重要です。Alternateタグを実装しなかった場合の注意点などから、その必要性について見ていきましょう。
重複コンテンツと判断され、低評価を受ける可能性がある
デスクトップ用とスマホ用のサイトが異なるドメインで作成されている場合、alternateタグとcanonicalタグによる関連性を検索エンジンに伝えないと、重複コンテンツと判断されて低評価を受ける可能性があります。
そのため、デバイスによってサイトを分けたい場合は、必ずalternateタグとcanonicalタグを用いて検索エンジンに伝えましょう。
レスポンシブデザインを採用し、解決する
リダイレクトやタグ、属性の設定などを間違えてしまうと、検索エンジンに認識してもらえない可能性があります。
レスポンシブWebデザインを採用すれば、デスクトップ用サイトとモバイル用サイトを分ける必要がなくなるため、設定の間違いなどによるトラブルを防ぐことができます。そのため、GoogleはレスポンシブWebデザインを推奨しています。
レスポンシブWebデザインの作り方は下記の記事で詳しく取り上げています。参考にご覧ください。
〇レスポンシブWebデザインの作り方とは？作成時の注意点
デスクトップ用とモバイル用でサイトの内容が異なるとどうなるか？
デスクトップ用サイトとモバイル用サイトの内容が大きく異なる場合は、Googleによるチェックが入るため、マニュアルアクションの対象になる可能性があります。
アメリカのSEOエキスパートであるバリー・シュワルツ氏は以下のようにコメントしています。
How does Google determine when there are “huge discrepancies” between mobile and desktop? I doubt he will share that, but I suspect that will turn into something more automated over time. For now, I suspect they flag these cases and send a manual action reviewer (web spam fighter) to take a closer look.
引用：Google: We Check To See If Your Mobile & Desktop Site Are Vastly Different Search Engine Roundtable
（内容が大きく異なるデスクトップサイトとモバイルサイトが発見された場合、Googleはサイトにフラグを立て、手動ペナルティのレビュアーによる細かい検証を行うと思われる）
〇サイトの内容が大きく異なると判断される基準とは？
Googleのゲイリー氏は「全く関係のない、異なる話題を取り上げていない限り、対象になることはない」と発言しています。
@brianrutledge more like “adopt this puppy” on the desktop, and “buy Viagra online in a casino without prescription” on mobile @rustybrick
— Gary “鯨理” Illyes (@methode) July 29, 2015（Gary “鯨理” Illyes のTwitterより引用）
（例えばデスクトップ版で「この子犬をもらってください」と書いていて、モバイル版では「オンラインカジノで、処方箋不要でバイアグラを買おう」と書いているくらいの違いです）
MFIおよびフレンドリー対策が必要とされている
MFI（モバイルファーストインデックス）とは、モバイルページをインデックスおよびランキングに使用するGoogleの基準のことを指し、2018年3月27日に開始が発表されています。
Googleの検索エンジンによるクロール、インデックス、評価によるランキング付けでは、これまで主にデスクトップ版のコンテンツが参考にされていました。そのため、デスクトップ用のコンテンツ内容がモバイル版と大きく異なる場合、モバイル検索ユーザーの混乱を招くおそれがありました。
しかし、今後はデスクトップ版ではなく、モバイル版のコンテンツが参考にされます。
異なるURLでデスクトップ用とモバイル用のページを作成していて、alternateタグとcanonicalタグが実装されていない場合、サイト全体が「モバイル対応がされていない」と判断され、今後は検索順位に影響が出る可能性があります。
5．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ページなどにリダイレクトさせることは、不適切となり、マイナスにつながる可能性がありますので、注意しましょう。
6．alternateタグの使用よりもレスポンシブデザインがおすすめ
alternateタグの設定には、HTML上の記述や属性の設定、リダイレクト設定など、対応することが多く、また一歩間違えてしまうとGoogleからの評価が下がるなどのリスクが伴います。
このような手続きを簡素化し、かつ効率的にホームページを運用して行くには、レスポンシブデザインでホームページを構築する手法も存在します。
レスポンシブデザインとは、ホームページのデザインを、閲覧するユーザーが使用するデバイスの画面サイズに応じて最適化して表示させる仕組みのことを指します。
スマートフォンやタブレットなど、PC以外にも画面サイズの異なるデバイスが多数存在する中で、レスポンシブデザインは1つのHTMLで構成され、デバイスごとにCSSを用意することで表示を変えることができます。そのため、デバイスに応じたHTMLを用意する必要はありません。
これにより、PCページでは正常に表示されるのに、スマートフォンページではエラーになるといったトラブルを防くことができます。また、管理も1つのHTMLを直すだけで済むため、作業を簡略化できることから、注目が集まっている手法です。
7．まとめ
alternateタグを適切に使って、サイト内の重要なURLを明示しましょう。
とくにスマホサイトのURLが別に存在する場合、そのURLを明示することが重要です。
一方、alternateタグを使わなければ、スマホサイトの専用のURLが明示できません。
明示しないと、モバイルファーストインデックスが適用されてる場合に、SEOへの悪影響が懸念されます。
こうした悪い状況を回避する為に、alternateタグを適切に使って、サイト内の重要なURLを明示しましょう。
⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？
