アノテーション(スマホサイトとガラケーの最適化)

パソコンページ、スマホページ、ガラケーページにそれぞれ別のURLが存在する場合、GoogleにURLは違うが同一コンテンツを配信している同一URLである、という事実を伝えなければいけません。その時に使うタグが「アノテーション」です。

正確には、リンクタグのrel属性で代替を意味するalternateを指定するのですが、わかりやすさを優先するためにアノテーションと呼びます。

設置するタグ

設置をするタグは下記のタグをパソコンのhead内に設置します。

<link rel="alternate" media="only screen and(max-width:640px)" href="ここはスマホURL">
<link rel="alternate" media="handheld" href="ここはガラケーURL">

スマホ向けURLとガラケー向けURLでmediaの記述が異なりますので注意してください。また、上記のタグを設置するのはパソコンのheadだけで、スマホとガラケーのheadには設置しません。

では、スマホとガラケーのURLはどうするのかというと、パソコン向けのURLを入れたcanonicalタグを設置します。

<link rel="canonical" href="ここはパソコンのURL">

このタグはアノテーションとcanonicalを一対に(パソコン対スマホ＆ガラケー)にする必要があるため、ページ単位で設置をします。

どのサイトが必要になるのか

このタグを設定するのは、パソコンページ、スマホページ、ガラケーページのどれか1つでも別のURLでサイトを配信している場合はです。
いくつか例を出します。

状況その1

アノテーション不必要

  • パソコン：http://exmple.com/
  • スマホ　：http://exmple.com/
  • ガラケー：http://exmple.com/

配信しているURLがレスポンシブウェブデザインで作成されているため変わらない、またはダイナミックサービングによりURLの配信自体は変わらない……つまりユーザーは同じURLにどの端末からアクセスしても綺麗にサイトを見ることが出来る場合。この場合はアノテーションを設置する必要はありません。

状況その2

アノテーションが必要

  • パソコン：http://exmple.com/
  • スマホ　：http://exmple.com/sp/
  • ガラケー：http://exmple.com/i/

こちらは配信しているURLが端末ごとに変わるパターンですが、この場合はアノテーションの設置が必要です。上記はディレクトリ階層で作成されていますが、サブドメインで運用している、なんて場合も同様にアノテーションの設置が必要です。

状況その3

アノテーションが必要

  • パソコン：http://exmple.com/
  • スマホ　：http://exmple.com/
  • ガラケー：http://exmple.com/i/

アノテーションが必要

  • パソコン：http://exmple.com/
  • スマホ　：http://exmple.com/sp/
  • ガラケー：http://exmple.com/

スマホ、ガラケーのどちらか片方だけが別URLで配信されているタイプですが、この場合はどちらであってもアノテーションが必要です。こちらもサブドメイン運用の場合もしかり、アノテーションが必要です。

実際の設置例

では、紹介した状況別に実際にどのように設置するのかを見ていきます。

状況その2

パソコン：http://exmple.com/
設置するタグ：
<link rel="alternate" media="only screen and(max-width:640px)" href="http://exmple.com/sp/">
<link rel="alternate" media="handheld" href="http://exmple.com/i/">

スマホ　：http://exmple.com/sp/
設置するタグ：
<link rel="canonical" href="http://exmple.com/">

ガラケー：http://exmple.com/i/
設置するタグ：
<link rel="canonical" href="http://exmple.com/">

配信しているURLが端末ごとに変わるパターンでは、上記のような形でタグを設置していきます。

状況その3

ガラケーのみ配信URLが異なる場合

パソコン：http://exmple.com/
設置するタグ：
<link rel="alternate" media="handheld" href="http://exmple.com/i/">

スマホ　：http://exmple.com/
設置するタグ：
<link rel="canonical" href="http://exmple.com/">

ガラケー：http://exmple.com/i/
設置するタグ：
<link rel="canonical" href="http://exmple.com/">

スマホのみ配信URLが異なる場合

パソコン：http://exmple.com/
設置するタグ：
<link rel="alternate" media="only screen and(max-width:640px)" href="http://exmple.com/sp/">

スマホ　：http://exmple.com/sp/
設置するタグ：
<link rel="canonical" href="http://exmple.com/">

ガラケー：http://exmple.com/
設置するタグ：
<link rel="canonical" href="http://exmple.com/">

上記のようになります。

【一覧へ戻る】