読者です 読者をやめる 読者になる 読者になる

ku-sukeのブログ

Just another hatena blog

Googleが正式回答したスマホサイトのSEO

こちらの記事のざっくりまとめです
Google Finally Takes A Clear Stance On Mobile SEO Practices
Official Google Webmaster Central Blog: Recommendations for building smartphone-optimized websites

(モバイル・スマホという言葉が出ますが、基本どちらもスマホを指しています。)

結論から言うとレスポンシブデザインがSEO上はオススメ

 あくまでSEOの観点ですが、スマホにかぎらず様々な表示領域をもつデバイスに対応するため、レスポンシブデザイン(画面幅に合わせてレイアウトが変わる奴。)が適用できるならそれが一番いいとのこと。

※レスポンシブデザインに関しては、日本ではまだ定着していないため賛否両論があるようですが、個人的には本気でやるなら有りかなーと思っています。

3種のモバイルサイト用パターン

Googleは3つのパターン別にそれぞれSEOのベストプラクティスがあると言っています。

  1. レスポンシブデザインで構築されたウェブサイト。すべてのデバイスが同じURLにアクセスし、CSSのメディアクエリなどでレイアウトを切り替えるパターン。
  2. すべてのデバイスからのアクセスを同じURLで受け付けるが、サーバサイドでUserAgentなどで判断し返却するHTMLを切り替えているサイト。
  3. PC用とスマホ用サイトが別々になっているサイト。

1.レスポンシブデザインのサイト

 Googleは可能であればこのパターンを推奨しています。なぜならレスポンシブデザインは、単一のURLとHTML,CSSなどリソースの組み合わせでできているので、1度のbotクロールで検索インデックスを作ることが可能です。

2.サーバ側で返却するHTMLを変えているサイト

 もしこのような仕組みを利用している場合、Google Botに対して「Vary HTTP header」を利用してヒントを与えることを推奨しています。一般的にそのヘッダはキャッシュに利用されますが、ユーザエージェントに基づいてコンテンツが変更されたことも示すことが可能です。これをGoogle botのMobile版/スマホ版がクロールしにきた時に与えるようにしてください。

PHPだとこれをモバイルの時のみ書くだけ

header("Vary: User-Agent");

技術的な詳細はここを参照
https://developers.google.com/webmasters/smartphone-sites/

3.PC用とスマホ用が別になっているサイト

 この場合は、メタタグを使って相互のURLを明示してください。PC用サイトではモバイル版があることを

のように表示し、モバイル版サイトではcanonicalタグを使って、PC版と同じコンテンツであることを明示してください。

おまけ

合わせて読みたい(PDF)
検索エンジン最適化(SEO)スターターガイド

しかし、デバイスの表示幅というのは本当に多様になりましたよね。僕はそんな未来を見越して、4年前位にこんなエントリをあげていました(ドヤァ)
セカンドデバイス最適化という考えかた - ku-sukeのはてなダイアリー