スマホ向けサイトある場合は注意！アノテーションタグで検索エンジンから正しい評価をえるためには？

Webサイトを閲覧する際に利用するデバイスが、パソコンに代わりスマートフォンが主流となった現在、元来のデスクトップに特化したデザインではなく、各デバイスに対応できるレスポンシブWebデザインに対応したWebサイトが多いのではないでしょうか。
すでに対応している、これから対応しようと考えているなど、いろいろシチュエーションはあるかと思います。
中には、レスポンシブでなくPCとスマートフォン両方のサイトがあり、サイトのURLも違うといったこともあるかと思います。
この場合、ある対策をしないとコンテンツはまったく同じものでも、URLが異なることによってSEO上の問題が起こるケースがあります。
これを解消しないと、せっかく作ったスマホ向けサイトの検索エンジンの評価が上がらないどころか、逆に下げてしまうことにつながる可能性があるので、注意が必要です。

アノテーションタグとは？

PCとスマホサイトでURLが異なり、評価が上がらない問題を解決するのがアノテーションタグです。
アノテーションとは、PCやスマホなど、各デバイス向けに作られた別々のURLが存在することを検索エンジンに認識させる設定を指し、PCとスマホサイト、双方のheadタグの中にアノテーションタグを組み込むことで効果を発揮します。
PCとスマホサイトそれぞれに設定が必要となりますので、忘れずに行いましょう。

設定するタグ

アノテーションの設定には「alternate」「canonical」の二つのタグを使用します。
「alternate」は「スマホ版のURLはこれ」と検索エンジンに伝えるために設定するタグです。
つまりalternateはPCサイト側のheadタグに入れます。具体的に言うと「link rel=”alternate”」を入れて、スマホサイトのURLを指定します。
「canonical」は「スマホサイトのほかに同一のPCサイトがある」と検索エンジンに伝えるために設定するタグです。
canonicalはスマホサイトのheadタグ内に入れるもので、「rel=”canonical”」を入れて、PCサイトのURLを指定します。

設定方法

たとえばPCサイトとスマホサイトが以下のようにURLが分かれている場合。

• PCサイト　http://sample.com/
• スマホサイト　http://sample.com/sp/

PCサイトに設置するタグ

PCサイトのソースコードには、スマホサイトがあることをGoogleに認識させるため alternateタグを指定します。
headタグのなかに下記のタグを入れ「href=」の箇所にはスマホサイトのURLを入れます。

スマホサイトに設置するタグ

スマホサイトのソースコードには、スマホサイトであることを伝えるため、canonical を指定します。
headタグのなかに下記のタグを入れ込み、「href=」の箇所にはPCサイトのURLを入れます。

難しい設定ではないので、PC,スマホ両方のURLが異なる場合はやっておいて損はありません。

まとめ

アノテーションは、重複コンテンツと認識されたり、webサイトに対する評価が拡散しないようするためのものです。
ご自分のサイトはいかがですか？
せっかく制作したPCサイト、スマホサイトがそれぞれ検索エンジンから適切に評価されるサイトにしましょう。