「サーチコンソールを見ていたら、見慣れない『alternateタグ』という言葉が出てきて焦ってしまった…」そんな経験はありませんか？

Webサイトの運営を始めたばかりだと、聞き慣れない専門用語に戸惑ってしまうことも多いですよね。特に「alternate（オルタネイト）タグ」は、設定しないとSEOで不利になるなんて話を聞くと、不安になってしまうかもしれません。

でも、安心してくださいね。このタグは、すべてのサイトに必要なわけではありません。実は、最近のWebサイトの多くは設定が不要なケースも多いんです。

この記事では、alternateタグの基本的な意味から、どんな時に必要なのか、そして具体的な書き方まで、初心者の方にもわかるようにやさしく解説します。自分のサイトに設定が必要かどうか、一緒に確認していきましょう！

alternateタグとは？初心者向けにわかりやすく解説

alternateタグとは？初心者向けにわかりやすく解説

まずは、alternateタグが一体どんなものなのか、その正体から見ていきましょう。

Webサイトを作るときには、HTMLという言葉を使いますが、alternateタグはそのHTMLの中に書く「目印」のようなものです。これを使うことで、検索エンジンに対して「このページには別のバージョンがありますよ」と伝えることができるんですよ。

ここでは、その役割を3つのポイントに分けて、やさしく解説しますね。

alternateタグの基本的な意味と役割

「alternate（オルタネイト）」という英単語には、「代わりの」や「交互の」という意味があります。Webサイトの世界では、まさに「代わりのページ」を指定するために使われるタグなんです。

例えば、パソコンで見ているページとまったく同じ内容で、スマホ専用のページが別に用意されているとしますよね。そんなときに、「これはパソコン版の代わりにあるスマホ版ですよ」と検索エンジン（Googleなど）に教えてあげる役割を果たします。

これによって、検索エンジンは「あ、これらは別々のページじゃなくて、同じ内容の兄弟みたいなものなんだな」と正しく理解してくれるようになるんですよ。

検索エンジンに「スマホ用ページ」の存在を伝える

一番よく使われるのが、パソコン用とスマホ用でURLが分かれているケースです。

  • パソコン用：https://example.com/
  • スマホ用：https://sp.example.com/

このようにURLが違う場合、Googleは放っておくと「中身が重複した別のページが2つある」と勘違いしてしまうことがあります。これはSEO的によくありません。

そこで、パソコン用のページにalternateタグを貼って、「スマホで見ている人には、こっちのスマホ用ページ（sp.〜）を見せてあげてね」とGoogleに伝えてあげるんです。これで、スマホで検索した人にはちゃんとスマホ用ページが表示されるようになります。

検索エンジンに「他言語版ページ」の存在を伝える

もう一つ重要な役割が、言語が違うページの存在を伝えることです。これを「多言語対応」と呼んだりします。

例えば、日本語のサイトを作って、同じ内容で英語版のページも作ったとしましょう。

  • 日本語版：https://example.com/jp/
  • 英語版：https://example.com/en/

このとき、alternateタグを使って「このページには英語版もありますよ」と教えてあげます。そうすると、アメリカで検索した人には英語版を、日本で検索した人には日本語版を、というふうに、検索エンジンがユーザーに合わせて適切な言語のページを表示しやすくなるんです。

alternateタグの設定が必要になる2つのケース

alternateタグの設定が必要になる2つのケース

「私のサイトにもalternateタグを入れなきゃいけないの？」と不安に思う方もいるかもしれませんが、実はすべてのサイトに必要なわけではありません。

設定が必要になるのは、特定の条件に当てはまるサイトだけなんです。ここでは、alternateタグの設定が必須となる2つの主なケースをご紹介します。ご自身のサイトが当てはまるかチェックしてみてくださいね。

スマホサイトとPCサイトのURLが別々の場合

もしあなたのサイトが、パソコンで見たときとスマホで見たときで「URLが違う」なら、alternateタグの設定が必要です。

昔から運営されているサイトや、特定のシステムを使っている場合、以下のようにURLが分かれていることがあります。

  • PC版: www.example.com
  • SP版: www.example.com/sp/ または sp.example.com

このようにURLが別々になっていると、Googleはそれぞれを「全く別のページ」として扱ってしまいます。その結果、SEOの評価が分散してしまったり、重複コンテンツ（コピーサイト）とみなされたりするリスクがあるんです。それを防ぐために、alternateタグで「これらはセットですよ」と伝える必要があります。

海外向けに多言語サイトを運営している場合

最近増えているのが、海外向けにビジネスを展開するために、複数の言語でサイトを作っているケースです。これを「多言語サイト」と呼びます。

グローバルに展開するサイトでは、ユーザーが使っている言語や地域に合わせて、最適なページを表示させたいですよね。

そんなときは、hreflang（エイチレフ ラング）という属性を使ったalternateタグの設定が必要になります。これを設定しておかないと、例えばイギリスのユーザーにアメリカ向けのページが表示されてしまったり、日本語のページが表示されてしまったりと、ユーザーにとって不便な状態になってしまうかもしれません。

セットで使われるcanonicalタグとの違いと関係性

セットで使われるcanonicalタグとの違いと関係性

alternateタグの話をすると、必ずと言っていいほどセットで登場するのが「canonical（カノニカル）タグ」です。この2つは、まるで仲の良いパートナーのように協力して働きます。

「タグが2つも出てきて混乱しそう…」と思うかもしれませんが、それぞれの役割分担がわかれば大丈夫です。ここでは、canonicalタグとの違いと、なぜ2つを一緒に使う必要があるのかを整理してみましょう。

canonicalタグ（正規化タグ）の役割とは

canonicalタグは、日本語で「正規化タグ」とも呼ばれます。簡単に言うと、「これが本物のページ（オリジナル）ですよ！」と宣言するためのタグです。

例えば、内容が同じなのにURLが微妙に違うページが複数あると、Googleはどれを検索結果に出せばいいか迷ってしまいます。そこで、「このURLがメインです」と指名してあげるのがcanonicalタグの役割なんです。

  • alternate: 「別のバージョン（スマホ版など）もあるよ」と紹介する
  • canonical: 「これが代表的なURLだよ」と指定する

このように、役割がはっきりと分かれているんですね。

なぜalternateとcanonicalを併用する必要があるのか

では、なぜこの2つを併用するのでしょうか？それは、パソコン版とスマホ版のURLが違う場合、お互いの関係性をGoogleに正しく理解してもらうためです。

これを「アノテーション（注釈）」と呼ぶこともありますが、イメージとしては以下のような会話をタグで行っています。

  1. PC版ページ: 「僕のスマホ版はこれ（alternate）だよ」
  2. スマホ版ページ: 「僕のPC版（本家）はこれ（canonical）だよ」

このように、お互いがお互いを指差し合うことで、Googleは「なるほど、PC版とスマホ版が対になっているんだな。そして評価はPC版にまとめればいいんだな」と完璧に理解できるわけです。片方だけだと、情報が不十分になってしまうんですね。

【ケース別】alternateタグの正しい書き方と記述例

【ケース別】alternateタグの正しい書き方と記述例

ここからは、実際にHTMLファイルにどのように記述すればいいのか、具体的な書き方を見ていきましょう。

「コードを書くのは難しそう…」と感じるかもしれませんが、基本の形さえ覚えてしまえば、あとはURLを書き換えるだけなので意外と簡単ですよ。

ここでは、よくある「スマホとPCでURLが違う場合」と「多言語サイトの場合」に分けて、コピペで使えるような例をご紹介しますね。

スマホとPCのURLが異なる場合の記述方法

スマホとPCでURLが異なる場合は、先ほどお話ししたように「PC版からスマホ版へのalternate」と「スマホ版からPC版へのcanonical」の2つをセットで設定します。

この関係性は「1対1」で対応させる必要があります。トップページはトップページ同士、記事ページは記事ページ同士で、それぞれ対応するURLを記述しましょう。

間違ってすべてのページからトップページに向けてしまうと、Googleが正しくページを認識できなくなってしまうので注意が必要ですよ。

PC向けページのhead内に記述する内容

まずは、パソコン向けページのHTMLファイルの<head>タグの中に記述する内容です。ここでは、「このページにはスマホ版がありますよ」ということを伝えます。

記述例:

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://sp.example.com/page-a/">Code language: HTML, XML (xml)
  • media="...": 「画面幅が640px以下のデバイス（スマホなど）の場合」という条件を指定します。
  • href="...": ここに、対応するスマホ版ページのURLを書きます。

これで、スマホで検索したユーザーには、自動的にスマホ版のURLが案内されるようになります。

スマホ向けページのhead内に記述する内容

次に、スマホ向けページのHTMLファイルの<head>タグの中に記述する内容です。こちらでは、「このページの正規（オリジナル）はPC版ですよ」ということを伝えます。

記述例:

<link rel="canonical" href="https://www.example.com/page-a/">Code language: HTML, XML (xml)
  • href="...": ここに、対応するPC版ページのURLを書きます。

スマホ版ページにはalternateタグではなく、canonicalタグを使ってPC版を指し示すのがポイントです。これで、サイトの評価がPC版のURLに統一（正規化）されます。

多言語サイト（hreflang）の場合の記述方法

多言語サイトの場合は、hreflangという属性を使って、言語ごとのURLを指定します。

例えば、日本語版と英語版がある場合、それぞれのページの<head>内に、自分自身も含めたすべての言語バージョンを記述します。

記述例（日本語版ページの場合）:

<link rel="alternate" hreflang="ja" href="https://example.com/jp/">
<link rel="alternate" hreflang="en" href="https://example.com/en/">Code language: HTML, XML (xml)

このように、「日本語版はここ、英語版はここ」と羅列して書くのがルールです。これを英語版のページにも同じように記述します（URLはそれぞれのページのものを指定します）。

alternateタグを実装する際の重要な注意点

alternateタグを実装する際の重要な注意点

alternateタグの書き方はわかりましたが、実装するときにいくつか気をつけておきたいポイントがあります。

間違った設定をしてしまうと、せっかくの効果が得られないどころか、検索エンジンを混乱させてしまう原因にもなりかねません。

ここでは、特に初心者がやってしまいがちなミスや、必ず守ってほしいルールを4つに絞って解説します。実装前にぜひチェックしてくださいね。

必ずHTMLのheadタグ内に記述する

alternateタグやcanonicalタグは、必ずHTMLの<head>〜</head>の間に記述してください。

Webページには、普段私たちが見ている文章や画像が入っている<body>部分と、検索エンジンやブラウザに向けた設定情報を書く<head>部分があります。

alternateタグは設定情報なので、<body>の中に書いても機能しません。「あれ？設定したのに反映されないな…」というときは、書く場所を間違えていることが多いので、まずはここを確認してみましょう。

URLは相対パスではなく絶対パスで記述する

alternateタグの中に記述するURL（href属性の中身）は、検索エンジンが迷わずにたどり着けるよう、明確なパスで指定しましょう。

  • OK（完全なURL）: https://example.com/page-a/
  • OK（ルート相対パス）: /page-a/
  • NG（現在の位置を基準とする相対パス）: ../page-a/

「http」や「https」から始まる完全なURL（絶対パス）はもちろん、「/（スラッシュ）」から始まるルート相対パスも問題なく機能します。Googleなどの検索エンジンでもこれらは有効な記述として認められていますので、ご自身のサイトに合わせて使いやすいほうを選んでみてください。

一方で、「../」のように現在のページ位置を基準にする書き方は、検索エンジンが正しく解釈できないこともあるので避けたほうが安心でしょう。クロールエラーを防ぎ、スムーズにページを認識してもらうことが大切ですね。

トップページだけでなく全てのページで対応させる

よくある間違いが、「トップページだけ設定して、他のページは忘れていた」というケースです。

PC版とスマホ版でURLが分かれている場合、alternateタグとcanonicalタグの設定は、サイト内のすべてのページで1対1に対応させる必要があります。

  • トップページ ⇔ スマホ版トップページ
  • 商品Aのページ ⇔ スマホ版商品Aのページ
  • 会社概要 ⇔ スマホ版会社概要

このように、ページごとにきちんとペアを作ってあげる必要があります。最近主流のレスポンシブデザイン（URLが同じ）ならこのタグは不要ですが、URLを分けているなら必須の設定です。ページ数が多いと少し大変かもしれませんが、システムで自動化するなどして、設定漏れがないようにしましょう。

自己参照のcanonicalタグも忘れずに設定する

これは多言語サイト（hreflang）の場合に特に重要なのですが、「自分自身のページに向けたcanonicalタグ」も忘れずに設定しましょう。

また、多言語設定のalternateタグを書くときは、自分自身の言語バージョンもalternateタグとして記述するというルールがあります。

例えば日本語版ページなら、英語版へのリンクだけでなく、「日本語版はこれ（自分）」というalternateタグも含める必要があります。これが抜けていると、エラーの原因になることがあるので注意してくださいね。

現在はレスポンシブデザインによる対応が主流

現在はレスポンシブデザインによる対応が主流

ここまでalternateタグの設定方法について詳しく解説してきましたが、実はここ数年でWeb制作の常識が大きく変わってきています。

それは、「レスポンシブデザイン」の普及です。もしかしたら、これからサイトを作る方やリニューアルを考えている方は、alternateタグのことを気にする必要がなくなるかもしれません。

なぜレスポンシブデザインだとalternateタグが不要なのか、その理由とメリットについてお話しします。

レスポンシブデザインならalternateタグが不要な理由

レスポンシブデザインとは、1つのHTMLファイルを、画面サイズに合わせてレイアウトだけ変えて表示させる仕組みのことです。

つまり、パソコンで見てもスマホで見ても、URLは1つだけなんです。

URLが分かれていなければ、「別のバージョン」が存在しないことになるので、当然alternateタグでスマホ版を案内する必要もありませんし、canonicalタグで正規化を気にする必要もありません。管理がとっても楽になるんですよ。

Googleもレスポンシブデザインを推奨している

実はGoogle自身も、スマホ対応の方法としてこの「レスポンシブデザイン」を最も推奨しています。

理由はシンプルで、Googleのロボットがサイトを巡回（クロール）するときに、PC版とスマホ版の2つのページを見に行く必要がなくなり、効率的だからです。また、URLが1つに統一されているので、リンクの評価が分散せず、SEO的にも有利に働きやすいというメリットがあります。

ユーザーにとっても、URLをシェアするときに「これはスマホ用かな？」と気にしなくて済むので親切ですよね。

新規サイト制作ならレスポンシブ一択で問題ない

もしあなたが今から新しいWebサイトを作ろうとしていたり、古いサイトの大規模なリニューアルを計画していたりするなら、迷わずレスポンシブデザインを選ぶことをおすすめします。

特別な事情がない限り、わざわざPCとスマホでURLを分けるメリットは今の時代ほとんどありません。

レスポンシブデザインにしてしまえば、面倒なalternateタグの設定や管理から解放され、コンテンツの中身を磨くことに集中できるようになりますよ。

まとめ

まとめ 6

今回は、少し難しそうな「alternateタグ」について解説してきました。

大切なポイントをもう一度おさらいしましょう。

  • alternateタグの役割: スマホ版や多言語版など「別バージョンのページ」があることを検索エンジンに伝えるタグ。
  • 必要なケース: PCとスマホでURLが違う場合や、多言語サイトを運営している場合。
  • 不要なケース: レスポンシブデザイン（URLが1つ）のサイト。
  • 注意点: 必ずcanonicalタグとセットで使い、headタグ内に絶対パスで記述する。

もしあなたのサイトがレスポンシブデザインなら、このタグのことは忘れてしまっても大丈夫です。でも、URLが分かれている場合は、SEO評価を正しく得るためにとても重要な設定になります。

専門的なタグの設定は最初は戸惑うかもしれませんが、一つひとつ確認していけば大丈夫です。ご自身のサイトの状況に合わせて、適切な対応をしてみてくださいね。

alternateタグについてよくある質問

alternateタグについてよくある質問

最後に、alternateタグについてよく寄せられる質問をQ&A形式でまとめました。疑問点の解消に役立ててくださいね。

  • Q. alternateタグを設定しないとどうなりますか？
    • A. PC版とスマホ版でURLが違う場合、設定しないと検索エンジンがそれらを「重複コンテンツ（コピー）」と判断し、SEO評価が下がったり、スマホ検索でPCページが表示されたりする可能性があります。
  • Q. WordPressを使っていますが、設定は必要ですか？
    • A. 最近のWordPressテーマのほとんどはレスポンシブデザイン（URLが1つ）なので、基本的には設定不要です。ただし、多言語プラグインなどを使う場合は自動で出力されることもあります。
  • Q. alternateタグはbodyタグの中に書いてもいいですか？
    • A. いいえ、alternateタグは必ず<head>タグの中に記述してください。<body>の中に書いても検索エンジンには正しく認識されません。
  • Q. スマホ対応ページがない場合でも設定は必要ですか？
    • A. スマホ専用の別URLページが存在しないのであれば、alternateタグの設定は必要ありません。PCページがそのままスマホでも表示されます。
  • Q. サーチコンソールで「alternateタグなし」のエラーが出ました。
    • A. スマホ版ページがあるのにタグ設定がない場合に警告が出ることがあります。レスポンシブデザインなのにエラーが出る場合は、誤った設定が残っていないか確認しましょう。