モバイルファーストを意識したサイトを作る理由と方法

google

この記事では、モバイルファーストを意識したブログ制作をする意味について書きます。まだ書ききれていない部分もあるので、参考程度に読んでいただけると幸いです。

スポンサーリンク

モバイルフレンドリーが必要な理由

まずはじめに、モバイルフレンドリーとは、どういう意味かというと、IT用語辞典 サバナビによると次のように書いてあります。

モバイルフレンドリーとは、WEBサイト・WEBページをスマートフォンや携帯電話などのモバイル端末での表示に最適化=スマホ対応することを意味する。モバイルフレンドリーはGoogleが検索結果のランキング要素に用いている評価基準である(2015年4月21日導入)。
モバイルフレンドリーなWEBサイト・WEBページは、拡大しなくても読みやすいテキストサイズ、横スクロールの必要がない、リンクやボタンがタップしやすい、Flashを使用していないといった点が挙げられる。
(http://sabanavi.com/seo-term/mobile-friendly/)

今までは、デスクトップユーザが大半だったのですが、スマホの登場と普及により、モバイル端末でのインターネット利用者がデスクトップユーザを追い抜こう(追い抜いた?)状況になりました。だからGoogleがモバイル対応しているサイトを検索結果の上位に表示しようと検索エンジンのランキング手法を変えました。TF/IDFとかPageRankというアルゴリズムがありましたけど、今はどれくらいの優先順位で使われているかは不明ですね。今、モバイルフレンドリーがどれくらい大事かというと、Googleが次のようなことを考えているからです。

  1. 数ヶ月以内にGoogleはインデックスを分割する。(2016/10)
  2. Googleがモバイル ファースト インデックスの実験を開始。モバイル版のコンテンツを検索結果のランキングに使用する。(2016/11)

要約すると、Googleさんは、デスクトップ用の検索結果(ランキング)とスマホ用の検索結果(ランキング)を別々で管理して、今後スマホ用の検索結果を主とします。モバイルフレンドリーになっていないサイトは、スマホ用の検索結果から除外する可能性がありますGoogleさんは、ユーザが入力したキーワードに関する最適なwebsiteを提供するのが一番のお仕事なので、スマホで検索して読みづらいwebsiteが出てこないようにしようということですね。自分のサイトがモバイルフレンドリーかどうかを確かめるには、どうしたら良いかというと、最初に紹介したモバイルフレンドリーテストをするのが一番簡単です。

モバイルフレンドリーテストの例

(1)https://search.google.com/test/mobile-friendly?hl=ja へアクセス

(2)URLを入力してENTER

(3)結果が表示される

結果は、「モバイルフレンドリー」、、、。よかった!ただし、一部不具合があるようです(赤波線)。

モバイルフレンドリーになるための要素

モバイルフレンドリーとはどういう項目かというと、それだけで本1冊ぐらい書けそうな感じがしますので、概要だけを書きたいと思います。私の持っている知識も2015年の初めくらいの知識ですので、調べながら書いてみます。しっかり書いてあるのは、Googleの開発者用のサイトの「モバイル SEO の概要  |  Mobile Friendly Websites」が良いですね。一言で書くとレスポンシブウェブデザイン(RWD)にしてくださいと書いてあります。HTMLに詳しい人じゃないと厳しいですね。一番簡単なのは、WordPress等のCMSのテンプレートでレスポンシブウェブデザインに対応したテンプレートを導入することです。私の「イクメンSEのメモ」もCMSのテンプレートがレスポンシブウェブデザインに対応したものです。

自前で、レスポンシブウェブデザインを実装しようとすると、HTMLとCSSとレスポンシブWebデザインの3つの知識が必要になりますので、それなりに大変です。レスポンシブウェブデザインについては、どこかでまとめられたらと思います。

モバイルサイトになるために重要なことが、Google開発者用サイトに書いてあったので抜粋します。

  • モバイル用にページを設定したことを Google に知らせる(<2.モバイルフレンドリーテストの例>を参照)
  • リソースをクロール可能な状態にしておく
  • モバイル ユーザーが不便を感じるようなよくある誤りを避ける。

よくある誤りについて、私自身が気になった点を列挙しておきます。これを解決すると、Googleの検索エンジンの上位に表示されるようになります。

  1. インタースティシャルを回避する
    • ページにアクセスした時に、ページ全体に表示される広告はNG(GoogleAdsenseは除く)
  2. 不適切な相互リンク
    • スマホのwebページからPC専用のwebページへのリンクが有る。または、その逆。
  3. 表示速度の遅いモバイルページ

(b)は注意しないと、やってしまいそうですね。

表示速度の測定

実際に、「Google PageSpeed Insights」でページの速度を測定してみました。結果は次の通り。

WordPressは、完璧じゃないって言うことはわかりました。修正の必要があるようですので、後日修正したいと思います。サイト移転時に間引いてしまいましたが、対策の一部を書いた記事があります。

WordPressでレンダリングをブロックするJavascript/CSSを排除する方法
この記事では、PageSpeed Insightsで指摘をつけた、レンダリングをブロックするJavascriptを排除する方法について記載したいと思います。今回は、思考錯誤をたくさんしました。色々試しましたが、一番簡単解決方法は、Javascriptの読み込み属性に、「async属性」を追加することです。改善自体は、 function.phpに手を入れます。CSSについては、プラグインで解決を図ります。

まとめ

最後に、SEOの概要については、次のページがわかりやすかったです。参考までにリンクを載せておきます。

それではまた。

コメント