アノテーションとcanonicalとは？SPサイトをサブディレクトリ型運用している場合は要注意

PCページとSPページを、レスポンシブデザインではなくサブディレクトリ運用している場合は、それぞれのデバイス対応に即したページがあることをGoogleに伝達するために、アノテーション設定を行いましょう。

PC：https://hogehoge.com/
SP：https://hogehoge.com/sp/

GoogleはURLが異なれば、見た目や仕組み上がどうであれ別ページと判断します。

ちなみに、サブドメイン型運用を行っていても同様です。

PC：https://hogehoge.com/
SP：https://sp.hogehoge.com/

アノテーションを行っていないと重複コンテンツと判断され、結果として評価が分散するので順位が上がらない可能性も秘めています。

SEOの基礎や概念から知りたい人は、こちらもどうぞ！
【全てのWebサイトに共通】SEOの概念と基本的な理解を言えますか？

アノテーションとは

アノテーションとは、PCやSPといった各デバイス向けに作られた別々のURLが存在することを検索エンジンに伝達させる設定です。

レスポンジブやダイナミックサービング以外の方法でWebサイトを構築しているケースに適応するものです。

そのため、サブディレクトリ、サブドメインのそれぞれでPCページとSPページにそれぞれ対応している場合はアノテーション設定が必要になります。

そのほかにも、多言語サイトも該当します。

アノテーションの記述方法

PCページとSPページそれぞれのheadタグのなかに適切なタグを組み込むことで、PCページとSPページの両方が存在することを検索エンジンに認識させることができます。

PCページに、対応するSPページを指す rel=”alternate” タグを追加することで、GoogleはサイトのSPページの場所を検出できます。

一方で、SPページに、対応するPCページを指す rel=”canonical” タグを追加します。

この記述を双方のURLに行うことによって、一致した内容だとGoogleは判断します。

多言語サイトの場合

多言語サイトの場合は上記内容だけでは不足します。

<link rel="alternate" hreflang="ja" href="日本語用のサイトURL">
<link rel="alternate" hreflang="en" href="英語用のサイトURL">
<link rel="alternate" hreflang="en" href="中国語用のサイトURL">
<link rel="alternate" hreflang="de" href="ドイツ語用のサイトURL">
<link rel="alternate" hreflang="es" href="スペイン語用のサイトURL">

ちなみに、多言語ページに対応しているページ全てに記述が必要となるのが最大のネックです。

もう一度いいます。

多言語サイトの場合は、全ページにアノテーション設定が必要です。

さらに、hreflangで紐づけられたページ群の中で1つでもnoindexを設定すると、その紐づけられたページ群全てがnoindexの対象となります。

もしnoindexを施すのならば、初期設定同様に紐づけるページ群全てのnoindexを設定して抜け漏れがないように習慣化しておきましょう。

hreflangのページを1つでもnoindexにすると関連ページがすべてnoindexになるらしい

注意点

rel=”alternate” と rel=”canonical” を使用する際は、SPページとそれに対応するPCページの関係を 1 対 1 にする必要があります。

1 つのSPページを複数のPCページから参照するアノテーション（またはその逆）の運用は、1 対 1 になっていないのでNGです。

アノテーションを設定しないとどうなる？

結論として、アノテーションを設定すべきWebサイトで実装しないと、重複コンテンツと判断され、結果として評価が分散するので順位が上がらない可能性も秘めています。

そのためしっかりと自社サイトの状況を確認したうえで、設定も入念に行ってください。

自動的にリダイレクトしたい場合は良いの？

Webサイト構築の過程でアクセスしたデバイスによって自動的にURLを切り替える場合、アノテーションは不要？

結論として、アノテーションは設定しましょう。

あくまでユーザーが訪れた際に、PCページとSPページのどちらかに切り替えるというだけ。

アノテーションを設定しない場合は、別ページ扱いとなるので設定しましょう。

Googleがサポートするリダイレクト方法

リダイレクト方法も様々ありますが、Googleがサポートするリダイレクト方法は2つ。

1. HTTPリダイレクト
2. JavaScriptリダイレクト

HTTPリダイレクト

HTTPリダイレクトは、HTTP リクエストヘッダーにあるデバイス判定によって設定されます。リダイレクト先をページの rel=”alternate” タグやサイトマップに指定されている呼応するURL と一致させておくことが重要です。

ちなみにGoogleは、その際はできる限り 302 を推奨しています。

JavaScriptリダイレクト

一方、JavaScriptリダイレクトは、概ねHTMLリダイレクトの対応が難しい場合に適応されます。

この方法を選択する場合は、リダイレクトされるユーザー側で遅延が発生することに注意してください。

理由としては、リダイレクトが発生する前に、ユーザーがまずページをダウンロードしてから JavaScript を実行されるため、どうしても遅延が発生します。

まとめ

アノテーションは、しっかりと実装すれば問題ありませんし、レスポンシブで運営しているWebサイトならば気にする必要もありません。

ただし、PCページとSPページのURLが一致していない場合は、注意が必要です。

設定がめんどくさいので放置する人も多いですが、Googleは別ページ扱いとするので評価も分散しがち。

きちんと自分のWebサイトと向き合って対応するようにしましょう。