alternateタグとは？SEO効果や適切な使い方を解説

alternateタグは、検索エンジンにスマホサイトの存在を知らせるHTMLタグの一種です。適切に設置すればPCサイトとの重複判定を防げます。

しかしWeb担当者の中には、alternateタグについて深く理解できていない方もいるでしょう。

そこで本記事では、alternateタグの使い方やSEO効果を解説します。設定する際の注意点も取り上げるので、ぜひ参考にしてください。

＜SEO対策について詳しく知りたい方はこちら＞SEO対策とは？SEO対策のメリット・デメリットと対策方法を詳しく解説

alternateタグとは？

alternate（オルタネイト）タグは、スマホサイトの存在を検索エンジンのクローラーに伝える役割を持つHTMLタグです。PCサイトとスマホサイトのURLが異なる場合に使用します。

適用する際は、HTMLのhead要素内に以下のように記述します。

alternateタグは、複数の言語にローカライズしたWebサイトにも有効です。

ローカライズとは、ユーザーの閲覧環境に合わせてコンテンツを最適化するプロセスのこと。例えば、英語にも対応したサイトが存在する場合、HTMLに以下のように記述します。

「hreflang」は、ページの言語を指定するタグです。この場合は英語サイトの存在を示したいので「en」と記述します。

alternateタグの必要性

alternateタグは、デバイスごとに異なるWebサイトを運用するケースで使用します。例えば、内容が全く同じ2つのURLを運用しているとします。

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

何も対策をしないと、コピーコンテンツや重複を理由に検索エンジンからペナルティを受ける可能性があります。

しかしalternateタグを適切に設置することで、スマホ向けに展開したWebサイトであると検索エンジンに伝えられます。PCとスマホで異なるURLを運用している方は、SEO評価を下げないためにも、早急にalternateタグを設定しましょう。

alternateタグがSEOに与える影響

alternateタグを設定したからといって、SEO評価が上がることはありません。

しかし、設置しなければPCとスマホサイトが重複していると判断され、SEOに悪影響を及ぼします。マイナス評価を受けないためにalternateタグを設置すると捉えるとよいでしょう。

canonicalタグとの関係

canonicalタグと併用すれば、alternateタグの精度をより高められます。

canonicalタグは、正規URLを検索エンジンに伝えてSEO評価の分散を防ぐHTMLタグです。2つのタグを併用することで、スマホサイトの存在を伝えるだけでなく、URL正規化によってSEO評価の分散も防げます。

SEO効果を最大化するためにも、必ず併用しましょう。

alternateタグの使い方

alternateタグを使用してスマホサイトの存在を伝える手順は以下のとおりです。

1. PCサイトにalternateタグを記述
2. スマホサイトにcanonicalタグを記述
3. リダイレクト設定をおこなう

PCサイトとスマホサイトのURLが異なることが前提条件です。順番に見ていきましょう。

PCサイトにalternateタグを記述

まずはPCサイトのhead要素内に、以下のHTMLコードを記述します。

このコードを記述すれば、検索エンジンに対してスマホ向けの異なるURLが存在することを示せます。

スマホサイトにcanonicalタグを記述

続いて、スマホサイトのhead要素内に以下のHTMLコードを記述します。

このHTMLコードを記述することでURLの正規化が有効になり、SEO評価をPCサイトへ集約できます。

リダイレクト設定をおこなう

リダイレクトとは、ユーザーが特定のページにアクセスした際、自動的に別のページへ転送する仕組みです。PCサイトとスマホサイトで異なるURLを持つ場合、ユーザーのデバイスに応じたリダイレクト設定が必要です。

例えば、スマホからPCサイトにアクセスすると、画面サイズの違いから表示崩れが発生し、コンテンツが見づらくなります。ユーザビリティの低下やページ離脱につながり、SEOに悪影響が及ぶ可能性も。

それぞれのデバイスに応じたURLへリダイレクト設定をすれば、ユーザーの利便性や滞在時間を高められるでしょう。

注意点として、リダイレクトは遷移元に紐づくページを設定してください。すべてのコンテンツをトップページに紐づける行為は、検索エンジンから「間違ったリダイレクト」と判断されます。

SEOに悪影響を及ぼす恐れがあるため、必ず対応するページにリダイレクトしましょう。

alternateタグを使用する際の注意点

Webサイトの情報を適切に伝えられるalternateタグですが、設定方法を誤るとSEOに悪影響が及ぶ可能性があります。とくに以下の3点には注意が必要です。

• タグの設置先を間違えない
• HTMLのhead要素内に設置する
• 絶対パスで記述する

それぞれ見ていきましょう。

タグの設置先を間違えない

alternateタグとcanonicalタグの設置先を誤ると、検索エンジンにスマホサイトの存在が伝わらなくなり、SEOに悪影響を及ぼします。

PCサイトとスマホサイトで、どのタグを設置するか整理してから実装しましょう。

HTMLのhead要素内に設置する

alternateタグとcanonicalタグは、必ずHTMLのhead要素内に記述しましょう。

head要素とは、ページ全体の情報を定義するためのタグです。検索エンジンに対して、ページに記載された情報や言語、画像、動画などを伝える役割を持ちます。

誤ってbodyやfooterに記述した場合、検索エンジンにタグが認識されなくなるため注意してください。

絶対パスで記述する

HTMLには特定のファイルまでの経路を示す「パス」があり、「絶対パス」と「相対パス」の2種類に分類されます。

絶対パスは、ディレクトリの階層構造の頂点から目的のファイルまでの経路を省略せずに表記するものです。「https://www.example.com/mypage.html」のように表されます。

一方の相対パスは、滞在中のファイルから目的地点までの経路を示すもので、「mypage.html」のように表記されます。

GoogleではURLの記述ミスによるクロールエラーを避けるために、絶対パスの使用が推奨されています。相対パスで記述したからといって悪影響が及ぶことはありませんが、正しくURLを認識してもらうためにも、絶対パスを使用しましょう。

alternateタグ以外でスマホ最適化する方法

HTMLソースに直接タグを記述するのが不安な場合は、alternateタグ以外でスマホ対応できる以下の方法を検討してください。

• 動的配信
• レスポンシブデザイン

それぞれ解説します。

動的配信

動的配信とは、2種類のHTMLやCSSを用意し、ユーザーがアクセスしたデバイスごとに適合する言語を出しわける手法です。

サーバーが自動でデバイスを検出し、それに合う言語を配信するため、自由で細やかなデザインを組めるのがメリットです。

しかし、デバイスごとにHTMLやCSSを作成する必要があるのでその分、費用がかかります。

レスポンシブデザイン

レスポンシブデザインは、PCやスマホなどのデバイスに応じて表示画面を最適化する手法です。

Googleはクロールの効率化やリソース軽減につながることから、レスポンシブデザインを推奨しています。レスポンシブデザインに対応すれば、URLやHTMLを別で作成する必要がなく、Webサイトを一括で管理できます。

ただし、PCと同じ容量のHTMLをスマホで読み込む必要があるため、端末によっては読み込み速度の低下につながる恐れがあります。

まとめ：alternateタグを使用してWebサイトの情報を正しく伝えよう

alternateタグを設置したからといって、検索順位が向上することはありません。

しかし、SEOのマイナス評価を避けるためにも、PCとスマホで異なるURLを持つ方は早急に対応する必要があるでしょう。

なお、alternateタグはcanonicalタグと併用することでSEO効果を最大化できます。2つのタグを正しく設置して、Webサイトの情報を検索エンジンに伝えましょう。

弊社のSEOサービス「ランクエスト」では、お客様ごとに専任のコンサルタントがつき、戦略立案からコンテンツ制作、効果測定まで、すべて対応いたします。SEO対策にお悩みの方は、お気軽にご相談ください。

磯崎慎平

株式会社eclore　Web Director / Marketing Director
デザイン専門学校を卒業後、2012年に入社。Web領域を中心に、コーポレートや採用サイト、メディアサイトなどのデザイン、コーディング業務に従事。また、リスティングを中心とした広告運用も担当。SEO・広告の観点で優位性のあるWeb制作を得意としています。Web制作数 年間100以上 / 広告運用額 年間2億円以上。