SEO対策 2024/10/10

alternateタグとは？必要なケースと書き方を初心者向けに解説

alternateタグは、HTMLのlinkタグ内で使用され、主に検索エンジンに対して、あるページの異なるバージョンが存在することを知らせるために使用するタグです。本記事では、alternateタグの概要から利用するケース、記述方法、記述する際の注意点まで、初心者にも分かりやすく解説します。

特徴	説明
読み方	オルタネイトタグ
語源	ラテン語「alternatus」から派生し、「代替」「交互に」を意味する
主な目的	ページの代替バージョン（多言語、デバイス別、フォーマット別）を検索エンジンに通知し、最適なバージョンをユーザーに提供するため
主な使用例	多言語ページ、モバイル版とPC版のページ、AMPページ、異なるフォーマット（PDFなど）のバージョンを指定
属性	hreflang（言語を指定）、media（デバイスや画面サイズを指定）、rel="amphtml"（AMPページを指定）
正しい配置場所	HTMLの<head>タグ内に記述する
効果	検索エンジンが異なるバージョンのページを正確に認識し、ユーザーのデバイスや言語に応じた最適なページを提供する。重複コンテンツの問題を避ける
使用する際の注意点	URLは必ず絶対パスで記述する。相対パスを使うと、検索エンジンが正しく認識できない可能性がある
組み合わせ	Canonicalタグと組み合わせて、正規ページの指定をおこない、重複コンテンツを防止
関連タグ	Canonicalタグ、rel="amphtml"

alternateタグとは？

alternateタグは、HTMLのlinkタグ内で使用され、Webページの多言語バージョンやデスクトップページと、スマートフォンページでURLが異なる場合に用いられます。

<link>タグにrel="alternate"を指定することで、Googleのクローラーに対して異なるバージョンのページがある事を伝える事ができます。

Googleは、同じ内容のコンテンツを持つページが複数存在している場合、重複コンテンツとして判断し片方のページしかインデックスさせない事があります。

ただし、販売エリアが国内だけではなく世界中の場合は、コンテンツの中身は同じでもその国の言語や文化・考え方に合わせてローカライズされたページを作成する必要があります。このようなケースで使用するのが「alternateタグ」です。

例えば、異なる言語で同じコンテンツのページを作成している場合、<link rel="alternate" hreflang="言語コード"> タグを使って以下のような言語バージョンを指定します。

A: <link rel="alternate" hreflang="en" href="英語ページのURL" />

B: <link rel="alternate" hreflang="fr" href="フランス語ページのURL" />

上記例の場合【A】は英語のページ、【B】はフランス語のページとなります。

また、PC用のページとコンテンツの内容が同じモバイルバージョン（スマートフォン用のページ）がある場合も、検索エンジンは異なるページと判断するため、以下のように<link rel="alternate"> タグを使用します。

本記事では、主にPC用とスマホ用ページを異なるURLで作成・運用しているWEBサイトに向けてalternateタグの解説をおこないます。

alternateタグが必要になるケース

alternateタグが必要になるケースは、コンテンツの内容が同じにも関わらず、異なるURLがWEBサイト内に存在している事を検索エンジンに伝えたい場合です。

具体的には、以下のケースとなります。

PC用とスマホ用ページのURLが異なる場合
多言語に対応したWEBサイトの場合
異なるフォーマットのコンテンツが存在する場合

上記のように、異なるURLがWEBサイト内にあるにも関わらず、alternateタグを利用しない場合は、Googleから重複コンテンツとして判断されSEO評価を落としたり、片方のページがインデックスされない可能性があります。

それぞれのケースで、何故alternateタグが必要になるのかそれぞれ詳しく解説します。

2-1

PC用とスマホ用ページのURLが異なる場合

alternateタグを利用する1つ目のケースは、PC用とスマホ用ページのURLが異なる場合です。

以下のように、同一のドメインでPC用のサイトとスマホ用のサイトを運営している場合、全く同じ内容のページが異なるURLで存在している状態になるため、重複コンテンツだと判断される恐れがあります。

PC用サイトURL: https://www.example.com/

スマホ用サイトURL: https://www.example.com/sp/

また、上記の場合、スマホから検索した際にPC用ページが表示されたり、逆にPCから検索した際にスマホ用ページが表示されてしまうと、レイアウトが崩れて正しく表示されない可能性があります。

2-2

多言語に対応したページがある場合

多言語に対応したサイトで、alternateタグを利用するもう一つのケースは、ページをローカライズする場合です。たとえば、日本語で作成したページを他の言語に翻訳し、それぞれ異なるURLでページを作成する場合などが該当します。

日本語ページ: https://www.example.com/jp/

英語ページ: https://www.example.com/en/

このように、日本語で書かれたページを他の言語で翻訳し、日本語のページと異なるURLでページを作成した場合、日本語のページと翻訳したページが重複コンテンツだとみなされる恐れがあるため、alternateタグを利用します。

2-3

異なるフォーマットのコンテンツが存在する場合

異なるフォーマットのコンテンツが存在する場合にも、alternateタグを利用するケースがあります。たとえば、通常のWebページの他に、そのページのPDFや印刷用のページがある場合などが該当します。

PDF版URL: https://www.example.com/document.pdf

印刷版URL: https://www.example.com/print-version.html

alternateタグの書き方

alternateタグの書き方（記述方法）について、解説します。
本記事では、PC用ページとスマホ用ページが別々にあるケースを例に説明します。

書き方の手順は、以下になります。

PC用サイトに、alternateタグを設定する
スマホ用サイトに、canonicalタグを設定する
リダイレクト設定をする

それぞれの手順について詳しく解説します。

3-1

PC用サイトに、alternateタグを記述する

はじめに、PC用サイトにalternateタグを記述します。
alternateタグを記述する場所は、HTMLの＜head＞〜＜/head＞内です。

【記述例】

<head>
　<link rel="alternate" media="only screen and (max-width: 640px)" href="モバイルページのURL">
</head>

PC用ページにalternateタグを設定することで、スマホ用ページが存在していることをGoogleへ伝えることができます。

PCページへ記述するURLは、スマホ用ページのURLです。間違ってPC用サイトのURLを記述しないように注意してください。また、URLを記述する際には、相対パスではなく絶対パスで記述するようにしましょう。

3-2

スマホ用サイトに、canonicalタグを設定する

次に、スマホ用サイトへcanonicalタグを設定します。
canonicalタグも必ず、HTMLの＜head＞〜＜/head＞内に記述してください。

【記述例】

<head>
　<link rel="canonical" href="PCページのURL/">
</head>

スマホ用ページにcanonicalタグを記述することで、「PC用ページが正規のバージョンである」ことをGoogleへ伝えることができるため、重複コンテンツと判断させるのを防ぐ事ができます。

スマホページのcanonicalタグへ記述するURLは、PC用ページのURLです。間違って、スマホ用サイトのURLを記述しないように注意してください。モバイルファーストインデックス完全移行後、このルールに変更はありません。

3-3

リダイレクト設定をする

最後に、スマホ用サイトとPC用サイトでリダイレクト設定をおこないます。

スマホで閲覧したユーザーの画面にPC用のページが表示されたり、逆にパソコンで閲覧しているユーザーに画面にスマホ用のページが表示されると、レイアウトが崩れて読みづらくなってしまう恐れがあります。

上記のような事態を避けるために、ユーザーがスマホからPC用ページにアクセスした際にはスマホ用ページが表示されるようにリダイレクト設定をおこないます。

反対に、ユーザーがPCからスマホページにアクセスした際にはPC用ページが表示されるようにリダイレクト設定をおこないます。

スマホ用ページとPC用ページのURLが分かれていない場合（レスポンシブデザインなど）は、リダイレクトをおこなう必要はありません。

リダイレクトについては別の記事で詳しく解説しているので、そちらを参考にしてみてください。

【関連記事】

alternateタグを記述する際の注意点

alternateタグを記述する際の注意点は、以下の3つです。

HTMLの<head>タグ内に記述する
対象ページを指定する場合は、絶対パスで記述する
alternateタグはcanonicalタグと組み合わせて使用する

それぞれの注意点について詳しく解説します。

4-1

HTMLのタグ内に記述する

alternateタグを記述する際の1つ目の注意点は、HTMLの<head>タグ内にalternateタグを記述することです。<head>タグは、ページのメタ情報（ページのタイトルや説明文、スクリプト、メタデータなど）を記述する場所で、検索エンジンやブラウザが最初に読み込む部分です。

<head>タグ内に配置することで、検索エンジンがページをクロールする際、すぐにalternateタグの情報を取得でき、多言語版やスマホ版など適切なバージョンのページをユーザーに表示できます。

もしalternateタグを間違って<body>タグ内に記述してしまうと、検索エンジンやブラウザはalternateタグを適切に読み込む事ができず効果が発揮されません。

<body>タグは、ページのテキストや画像などのコンテンツが表示される場所であり、メタ情報を記述する場所ではないため間違って記述しないように注意しましょう。

4-2

対象ページを指定する場合は、絶対パスで記述する

alternateタグを使用する際の2つ目の重要な注意点は、対象ページを指定する場合は絶対パスで記述することです。絶対パスとは、「http://」や「https://」で始まり、ドメイン名を含んだ完全なURLのことです。たとえば、https://white-link.com/ページA/のような形式が絶対パスです。

一方、相対パスは、ドメイン名を省略したURLで、ページ間のリンクを短縮して記述できる形式です。たとえば、/ページA/ のように書かれますが、これは現在のドメインに基づいて解釈されるため、他のページに転用された場合に誤解を招く可能性があります。

Googleはalternateタグに関して、絶対パスで記述することを推奨しているため、対象ページを指定する場合は絶対パスで記述することをおすすめします。

4-3

alternateタグはcanonicalタグと組み合わせて使用する

alternateタグを利用する際は、重複コンテンツを防ぐためにcanonicalタグを組み合わせて使用することが推奨されます。

alternateタグを使うことで、検索エンジンに「このPCページにはスマホ用のバージョンも存在する」ことを伝える事ができますが、類似するぺージがサイト内にある場合は重複コンテンツと判断される可能性があります。

このリスクを防ぐために、alternateタグとcanonicalタグを組み合わせて使用します。

canonicalタグは、同じまたは非常に似た内容のページで複数のURLが存在する場合に、検索エンジンに「このページが正規なバージョンです」と伝えるためのタグです。

canonicalタグを使用することで、検索エンジンは指定されたURLが正規URLであることを理解し、他の類似ページを重複コンテンツとして扱わないようにします。

そのため、本記事の「見出し2」で紹介した、『alternateタグが必要になるケース』の3つの例でalternateタグを実装する際にはcanonicalタグも一緒に使用します。

canonicalタグの記述方法などについては、別のページに詳しく記載しています。

【関連記事】

alternateタグに関するGoogleの公式ドキュメント

Googleの公式ドキュメント検索セントラルにも、ケースごとにalternateタグの使い方が記載されています。

alternateタグは使い方を誤ると、正しくGoogleに代替ページの存在を伝えられないだけではなく、被リンクが分散したり、重複コンテンツの判定を受けるなど、SEO評価がマイナスに働く可能性があります。

そのため、本記事と合わせてGoogleのドキュメントもしっかりと確認して実装をおこなうようにしましょう。

以下、Googleの公式ドキュメントに記載されている内容になります。

■ モバイル版とパソコン版でURLが分かれている場合

モバイル版とパソコン版の間で正しい rel=canonical と rel=alternate の link 要素を使用します。常にパソコン版の URL を正規 URL とし、モバイル版の URL をその代替 URL とします。
Google検索セントラル：別々の URL を使用する場合のその他のおすすめの方法

■ 言語ごとにURLが分かれている場合

ページのヘッダーに <link rel="alternate" hreflang="lang_code"... > 要素を追加して、ページの言語や地域ごとのすべてのバージョンを Google に提示します。
Google検索セントラル：ページのローカライズ版について Google に知らせる

まとめ

今回は、alternateタグについて解説しました。

alternateタグを利用するケース、記述方法、記述する際の注意点は以下の通りです。

利用するケース	・PC用とスマホ用ページのURLが異なる場合・多言語に対応したサイトがページをローカライズする場合
記述方法	・PC用サイトに、alternateタグを設定する・スマホ用サイトに、canonicalタグを設定する・リダイレクト設定をする
記述する際の注意点	・HTMLの<head>タグ内に記述する・対象ページを指定する場合は、絶対パスで記述する

この記事を書いたライター

SEO施策部

SEMを軸にSEOの施策を行うオルグロー内の一部署。サイト構築段階からのSEO要件のチェックやコンテンツ作成やサイト設計までを一貫して行う。社内でもひときわ豊富な知見を有する。またSEO歴15年超のノウハウをSEOサービスに反映し、3,000社を超える個人事業主から中堅企業までの幅広い顧客層に向けてビジネス規模にあった施策を提供し続けている。

このライターの記事一覧

RECOMMENDED ARTICLES