モバイルフレンドリーへの対応はお済みですか?

CSS on 3 Apr , 2015

いよいよ、4月21日にモバイル端末のGoogle検索結果が大きく変わります。この影響については、いろんなサイトで騒がれていますが、それもそのはず、Google様自身が「Google の検索結果に大きな変化をもたらします。」と言ってますからね。

Google WEBマスター向け公式ブログ

http://googlewebmastercentral-ja.blogspot.jp/2015/02/finding-more-mobile-friendly-search.html

Googleは普段、アルゴリズムの変更時には、「検索結果の何%に影響」みたいな言い方をしますが、今回は違いますね。これについても、色々な憶測があるようですが、そんな憶測はするだけ無駄なので、できることをしっかりやって、後は信じて待ちましょう。さて、もう1ヶ月以上前に発表されていますから、既に対応済みの方が多いかもしれませんが、まだの方は、早々に対応しましょう。

まずはここでチェック

https://www.google.com/webmasters/tools/mobile-friendly/

「問題ありません。 このページはモバイル フレンドリーです。」
と出れば、取り合えずOKでしょう。

「モバイル フレンドリーではありません」
と出たなら、画面左に下記のような修正箇所を指摘してくれるので、しっかり対応しましょう。

×テキストが小さすぎて読めません
×モバイル用 viewport が設定されていません
×リンク同士が近すぎます

基本的には、指摘された箇所についてネットで調べ、相応の修正すれば問題ないと思いますが、Googleに関することはやはり本家サイトをまず熟読し、意味不明な点を他サイトで調べる、というクセをつけましょう。

ウェブマスター向けモバイルサイト

https://developers.google.com/webmasters/mobile-sites/?hl=ja

ところで、モバイルサイトの作成方法には、大きく3つの方法があります。

●レスポンシブデザイン
●動的な配信
●別々のURL

今回は、一番多いと思われる「別々のURL」で作成されている場合について簡単に説明します。「別々のURL」とは、PCサイトとモバイルサイトのURLがそれぞれ、「http://www.test.jp/」「http://www.test.jp/sp/」というように
別れている場合です。

このような場合、通常はユーザーエージェント(User agent)という閲覧者の環境によって、表示するURLを振分けます。実際、PCで見ればPCサイトが表示され、スマホで見ればスマホサイトが表示されれば、これで問題なかったのですが、今回は、もう一工夫する必要があります。

○PCサイトの対応
head内に下記の記述を追加
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://www.test.jp/sp/”>

○モバイルサイトの対応
head内に下記の記述を追加
<link rel=”canonical” href=” http://www.test.jp/”>

また、Googleサイトマップも、下記の通りに関連付けをしましょう。

<url>
<loc>http://www.test.jp/</loc>
<xhtml:link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://www.test.jp/sp/” />
</url>