SEO

スマホ対応が本格化!モバイルフレンドリーテストでブログをチェックして検索変動に備えてみた。

Googleは2015/2/27、WEBサイトがスマートフォンで最適に表示することの重要性をアナウンスしました。

これによりモバイル検索結果に影響がでることが予想される(PC検索結果は今のところ不明)ため、ここにきて本格的にモバイル対応を検討しているブローガーやサイト運営者も多いようです。

Google では、4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。この変更は世界中の全言語のモバイル検索に影響を与え、Google の検索結果に大きな変化をもたらします。 Google ウェブマスター向け公式ブログ

responsive01

当ブログでは、これまでBlogPressテーマ(※最新版はレスポンシブ対応になっています。)をデフォルトの状態から、自分でも把握できないところまでカスタマイズをしていたのでアップデートを見送っていましたが、良い機会なので、今回モバイル対応することにしました。

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

自身の運用ブログがモバイルに最適な表示になっているか、いないかは把握していると思いますが、モバイル フレンドリー テストでURLを入力すれば1発でチェックすることができます。

responsive05

1~2分程度(ブログによる)で結果が出ますが、案の定《モバイル フレンドリーではありません》との表示。

responsive06

レスポンシブテーマにアップデート

WordPressテーマBlogPressをレスポンシブ対応最新版にアップデート(多少のカスタマイズをしています)してスマホで表示を確認。

responsive09png

モバイル フレンドリー テストで再度分析すると《問題ありません。このページはモバイル フレンドリーです。》という表示を確認することができ一安心。

responsive07

と思いきや、「わぉっ!」スマホで数ページ確認しているとYoutube動画が飛び出してしまっているページを発見っ!

こちらの記事で解説しているとおり⇒サイズが合わないっ!? YouTube動画をWordPressブログに1分でジャストサイズに貼る方法。サイズ指定して貼っていると飛び出してしまっている可能性があります。

コンテンツの幅を調整

早速、スマホ用のCSSに以下のコードを記述して対応。(カスタマイズする際はバックアップを忘れずに)

iframe{ width:100%; height:auto; }

これでブログに貼ってあるすべてのYOUTUBE動画が収まりました。

responsive03

responsive11

念のためYoutube動画が飛び出している状態で、その記事ページのURLをモバイルフレンドリーテストをしてみましたが、しっかり《コンテンツの幅が画面の幅を超えています》と表示され、その精度の高さに「おぉ~」と感心しつつも、対応後にはちゃんと問題は解決されました。

ウェブマスターツールを活用

responsive08

ウェブマスターツールにブログやサイトを追加しておくと、リアルタイムではありませんがモバイルユーザービリティをチェックすることができ、他にも対応の必要性のある記事ページがあると通知されます。

responsive12

当ブログではdesktopユーザーのアクセスが75%、mobileユーザーのアクセスが22%なので、それほどモバイル対応の必要性を感じていませんでしたが、最近では過半数以上がmobileユーザーからのアクセスになっているブログも多いと思います

モバイル対応によって大きなマイナス要因になることがなければ、これを機に今一度mobileユーザービリティを考慮してみるのも良かも。

スリームデザインの無料メールマガジン

ピックアップ記事

  1. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  2. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  4. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…

関連記事

  1. webデザイン

    画像の上をカーソルでなぞってビフォアーアフターイメージを実装させるワードプレスプラグインBefore…

    当スリームデザインのブログではフォトショップ技術などを紹介しており、加…

  2. SEO

    初心者でもわかる!ネットビジネスを失敗させない為に絶対に覚えておくべきSTPマーケティングの概念

    インターネットによる顧客獲得や自社商品・サービスの販売促進、アフィリエ…

  3. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸な記事のまとめ

    ブログツールの中でも圧倒的なシェアを誇るWordpressは、日本でも…

  4. 【PR】

    史上最高レベルのスマホ表示を実現したwordpressテーマ【IZM】のデザイン性について

    iphoneを筆頭に、わすか数年で爆発的にスマートフォンが普及したこと…

  5. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ

    ここでは、日本で最もデザインクオリティが高いと称されるWordPres…

  6. 【PR】

    女性の美を追求したエステ・サロン・スパなどの店舗集客に最適化されたWordPressテーマ【LOTU…

    ホットペッパービューティーなどのポータルサイトでは広告料がかかるため、…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  2. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  3. webデザイン

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  4. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
PAGE TOP