凡人の感想・ネタバレ＞その他＞2015年4月21日の検索アルゴリズム変動に向けてスマホ対応に
スポンサーリンク
2015年4月21日。それはずばり、googleが「この日からスマホ対応しているかどうかを検索順位の判定材料にする」と宣言した日である。
要するに、この日までにスマホ対応させてないウェブサイトはまずいよ、ということだ。
googleが日付まで指定してこういったことを宣言するというのは過去にあまり例がない。検索アルゴリズムに関しては大抵はぼやした表現であることが多いからだ。日付指定までするというのはただごとではない。実際、相当に変動があるのではないかと思われる。
2015年3月20日、当サイトもそれまで固定サイズでスマホに対応していなかったので改造、現在すでにこのページ含め全ページがPC、スマホどちらでも見れる構造となっている。
いずれまた何かあった時のため、ここに方法などを自分用メモとして書き記しておくことにする。
すでに確認しているが、googleが用意した「モバイルフレンドリーテスト」に合格していれば、スマホでの検索時に「スマホ対応」の表示が出る。
フレンドリーテストに合格したのにスマホ対応が出ない！なんてことはなく、信用していい。
何を置いても絶対にやらなければいけないことは、ビューポイントの設定である。
何をすればいいかと言えば簡単。
<meta name="viewport" content="width=device-width, initial-scale=1">
これを<head></head>内に1行加える。これでいい。
これは要するに、「このページはモバイル用の幅で表示しますよ」という指定だ。これを入れるだけで、ページが最初から拡大された状態になり、スマホで閲覧した場合のストレスが軽減されるわけだ。PCで閲覧時には今までと何も変わらない。
ビューポイントの設定で最初から拡大された状態になっていても、幅がスマホの液晶よりも横に大きければスクロールの必要性があるため、モバイルフレンドリー用件の一つである最適な幅を満たせない。したがって表示する機器ごとに幅が変動する仕組みにする必要がある。
これも難しいことはない。CSSでコンテンツの幅を％指定にすればいいのである。
それまで固定幅にしていて、見た目を変えたくない場合、「max-width」指定をすればいい。例えば、それまでwidthを1000pxに指定している場合、max-widthのほうに1000pxは指定し、widthは100％を指定する。これでいい。
例えば全体を覆っているクラスのcontainerなどを設定していればそれにこの値を設定すればいい。
覆っているクラスがなければ、bodyそのものに指定することでも同様の効果が得られる。このサイトは後者だ。
ビューポイントの設定、それにサイトの幅をリキッドデザインにしただけで、ほとんどの場合はモバイルフレンドリーテストに合格する。
だが、恐らくスマホで見た場合にはデザイン上で色々と問題が出るはずだ。例えば見出し部分の背景画像が見切れていたり、余白の設定が適切でなかったり、などだ。
これはCSSメディアクエリというものを使用すればいい。PCで見た場合とスマホで見た場合で適用するCSSをそれぞれ分けて、適切な見た目にするわけだ。
google公式で上げている例がこれだ。これを
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
この場合、幅が0〜640pxの場合は「max-640px.css」が適用される。幅が640px以上の場合は「min-640px.css」が適用される。つまり前者はスマホ用、後者はPC用の設定というわけだ。
スマホの場合、例えば上記で設定したcontainerに当たるものだとか、bodyにだとかはpaddingの横の値は0にしてしまってもいいと思う。そうでないとその値分だけスマホの表示領域から出てしまうからだ。適切に横幅を開けたいならば内部要素もろもろに設定する必要がある。
2カラムデザインにしていた場合、サイド部分が下に回りこんでしまうのであろうから、これも適切に変える必要が出るだろう。
この辺のことは管理サイトで実践してないのであるが。
あとはスマホの場合は見切れないように横に長い背景画像などは差し替える必要があるだろう。細かい点はそれぞれあるだろうが、見た目の妥協は許さないほうがいいだろう。例えスマホ対応であっても見た目が汚いな、と思えば去ってしまう可能性は多分にあるのだから。
また、モバイルフレンドリーテストではあまり引っかかることのない「リンク間の幅」であるが、どうやらページ上にあるリンクの数が多ければ多いほど問題になる可能性が高くなるようだ。よって、スマホで見た場合はline-heightの値をPC時よりも大きくするのが良いだろう。
このサイトの場合、基本はfont-sizeが12px、line-heightが20pxだが、スマホでは文字の大きさは変わらず12pxだがline-heightは35pxにしてある。
上記の方法で簡単にサイトをほぼ問題なくスマホ対応とできるはずである。
冒頭で述べたようにgoogleがあるページをスマホ対応とみなすには実際に検索結果で「スマホ対応」の表示が出ることが必要なのだが、これはどれくらいで出るのか？
自分が確認したところでは、「早くて3日、遅くて10日以上」である。
これは、恐らく多くのアクセスがある人気ページであればあるほど、早く認識される感じだ。あくまで放置した場合であるので、ウェブマスターツールを使ってクロールの指示を出せばより早くされるのだろう。
いずれにせよ、余裕をもたせて、3月以内には全て完了させておくのがベストだろう。4月21日はすぐそこだ。
4月21日以降、一体どういう変化が現れるのか？
もちろんそれを断言できる人間は誰も、googleの中の人ですらも分からないだろう。ただ、日付を指定している以上、その日から変化が現れるだろうとは予測できる。
4月21日になったら即日、では統計上のデータが出せないため、5月くらいになったところで、過去のデータと照らし合わせてどう変動したかを掲載したいと思う。
凡人の感想・ネタバレ＞その他＞2015年4月21日の検索アルゴリズム変動に向けてスマホ対応に