【SEO】alternateタグとは？スマホサイトを正しくGoogleに伝えよう！

今回は意外と使われていないalternateタグについて解説したいと思います。レスポンシブデザインがよく採用される前はPCサイトとスマホサイトが別々にあることが多く、 alternateタグとcanonicalタグを設定することがよくありました。最近では使う機会は減ってはきましたが、一部の条件では使うことが必須になるので是非覚えておいてください。

alternateタグとは？

alternateタグとは、PCサイト「www.example.com」とスマホサイト「m.example.com」のように別々のURLで存在していて代替するページがある時に使います。PCとスマホで閲覧した時に、どっちをユーザーに見せたいのかをGoogleに伝えることができるhtmlタグになります。読み方はオルタネイトと呼びます。画像の代替テキストに使うaltタグに似ています。

最近では1つのソースコードでPCとスマホ用にCSSで見た目を整えるレスポンシブデザインがスタンダードになってきましたが、PCとスマホでソースコードを分けている場合は必須で使う必要があります。

URLの正規化を行うcanonicalタグと合わせて使うケースが多いのでセットで覚えて設定しましょう。

あわせて読みたい

canonicalタグとは？URLを正規化してSEO評価を高める！ 今回は意外と使われていないcanonicalタグについて解説したいと思います。レスポンシブデザインがよく採用される前はPCサイトとスマホサイトが別々にあることが多く、 a…

alternateタグとcanonicalタグを使うことでSEO効果がある

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

しかし 、alternateタグ・canonicalタグを使っていない状態で、PCサイトとスマホサイトの両方が検索結果に表示された場合、どちらが正しいサイトであるかはGoogleは判定できないので、重複コンテンツ扱いを受ける可能性があります。その結果、SEO評価が分散して評価が落ちてしまうというリスクがあります。

そのため、PCサイトとスマホサイトが別々のURLで運用している場合、適切にGooglenにそれぞれの存在を指定する必要があります。誤ったSEO評価を受けるリスクを回避するためにも、 alternateタグ・canonicalタグを正しく設定することで適評価を受けるサイトにしましょう。

alternateタグが必要なWebサイト

alternateタグの設定が必要なケースとしては、主に下記になります。

1. PC、スマホ、ガラケーサイトがある場合
2. 多言語サイトがある場合

レスポンシブデザインがメジャーになる前は、PCサイトとは別にスマホサイト、フューチャーフォンサイトがあることが一般的だったので良く使われています。特にユーザーの閲覧環境がPCからスマホ主体に移行したため、SEO評価はスマホサイトで決定するようになっているので注意が必要です。

最近では英語サイトだけでなく、中国語サイトや韓国語サイトなどの多言語サイトを用意されている方も増えています。しっかり言語に対応しながらもSEO評価が落ちないようにしっかり設定を行いましょう。

alternateタグの正しい設定方法

alternateタグを設定する方法を説明していきます。

PCとスマホサイトがある場合のalternateタグの設定方法

手順としては下記の2つになります。

1. PCページにalternateタグを追加（スマホページを指定）
2. スマホページにcanonicalタグを追加（PCページを指定）

順番に説明していきます。

①PCページにalternateタグを追加（スマホページを指定）

PCページに「rel=”alternate”」タグを設置してスマホページのURLを指定します。その際にmedia属性を使ってどのような場合にスマホページを代用するかという条件指定します。

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1">

今回の例は、最大画面幅が640pxの場合は、スマホページを代用するように記述しています。

②スマホページにcanonicalタグを追加（PCページを指定）

次にスマホページに、PCページのURLを指定する「rel=”canonical”」タグを追加します。

<link rel="canonical" href="http://www.example.com/page-1">

「rel=”alternate” 」および 「rel=”canonical” 」を使用する際は、スマホページとそれに対応するPCページの関係を1対1にする必要があります。

1つのスマホページに対して、複数のPCページを指定するのは避けてください。

③301リダイレクトを設定する

サイト全体でPCページとスマホページが分かれていてどちらかにSEO評価を渡す場合、301リダイレクトを設定する方が無難です。

RewriteEngine On
RewriteRule https://m.example.com $ https://www.example.com/ [R=301,L]

例えば、スマホページにアクセスがあった際にPCページに301リダイレクトする場合、「.htaccess」ファイルに上記を記述します。

日本語・英語・中国語サイトがある場合のalternateタグの設定方法

多言語サイトを運用している場合、「rel=”alternate” hreflang=”x”」というアノテーションタグを使うことで、地域別の検索結果ページで言語毎のサイトを表示させることができます。各言語ページへのURLはISO 639-1形式の言語コードで記述します。

<link rel="canonical" href="http://ja.example.com/" />
<link rel="alternate" href="http://ja.example.com/" hreflang="ja" />
<link rel="alternate" href="http://en.example.com/" hreflang="en" />
<link rel="alternate" href="http://cn.example.com/" hreflang="cn" />

上記は日本語サイト上でのソースコードになります。多言語サイトはページ毎の内容が同じである場合、そのままだと重複コンテンツ扱いされる可能性があるので、検索結果に表示する言語・地域を指定するためにhreflangタグを記述した場合、canonicalタグも併用して記述しましょう。