xperia

モバイルフレンドリーにする/モバイルフレンドリーテスト



33モバイルフレンドリー

現在、パソコンの数よりスマートフォンの数が上回り、パソコンよりもスマートフォンなどモバイルからのアスセスが増しています。モバイルで見やすいウェブページ作りが重要となってきます。Search Console のモバイルフレンドリー テストツールで、モバイルで見やすいかテストできます。

モバイルフレンドリーでない場合

更新ができていないブログでアクセスも少ないウェブページです。検索結果、次のように表示されていました。

モバイルフレンドリー

ページがモバイル フレンドリーではありません。

検索結果の画面ですが、この警告はサイトの所有者に対しての警告です。所有者以外の方には表示されません。

自分のスマートフォンでウェブページを確認すると、やはりモバイルフレンドリーではなく読みにくい。読めないことはないですがモバイルユーザーは避けるでしょう。モバイルフレンドリーである方が検索順位に優位だということがわかります。

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

モバイルフレンドリー テストツールは、ウェブページのURLを入れるだけ、面倒なことはありません。テストが終わると結果が出ます。

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

モバイルフレンドリー

下記リンクSearch Consoleの「モバイルフレンドリーテスト」で行えます。

https://search.google.com/search-console/mobile-friendly?hl=JA

上の画像の結果はテーマをカスタマイズで改善しました後の結果です。私の場合、「Check to disable Responsive Layout 」このレイアウトを無効にした後、スマートフォンで改善を確認し、モバイルフレンドリーテストを行っています。

テーマのレイアウトを変更が可能な場合はそれをチェックすると簡単に改善されるかもしれません。

ブロックされたリソース

「モバイルフレンドリーです」と表記されていますが、「ブロックされたリソースが1件あります」と警告が出ています。(上記画像参照)

google botをブロックしていると、正確な結果が出ません。まずは「ブロックされたリソース」を改善する必要があります。Search Consoleで確認した結果、ブロックされたリソースやクロールエラーはありませんでした。

google botをブロック

google botoのアクセスをブロックすると、google botがサイトのクロールやインデックス登録を行うことができなくなり、Google の検索結果でサイトの掲載順位が下がる場合があります。

改善結果

モバイルフレンドリー

「ページがモバイル フレンドリーではありません。」は消えています。

モバイルフレンドリー対応か否かのチェックポイント

ご自分のスマートフォンやiPhoneで確認するとわかるとモバイルで読みやすいか否か、何を変更すればいいのかわかるかも知れません。

モバイル用Viewportを指定する

<head> タグの中にviewportの指定を追加します。

このサイトでは次のようにviewportを指定しています。

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

  • width=device-width デパイスのサイズに合わせる
  •  initial-scale 初期の倍率
  • maximum-scale 最大のズームの倍率
  • user-scalable ユーザーが拡大縮小をできるか否か

つまりモバイルでのダブルタップやピンチでの拡大倍率は1.0に指定してあり、拡大縮小はできなく指定されています。実はiOS10(2016年9月)のSafariでは、この「user-scalable」の設定が機能しないようです。

コンテンツの幅について

モバイルデバイス上での横スクロールバーをしないでウェブサイトが閲覧できるように、コンテンツの幅はスクリーンより広げない方が良いとされています。

文字について

Viewportをデパイスに幅に合わせることにより、フォントが適切に拡大し読みやすくなります。GoogleはViewportをデパイスに幅に合わせることを推奨しています。

フォントを適切に拡大できるようにするため、Googleはボディでフォントサイズを16ピクセルに、行の高さを1.2emにそれぞれ設定し、テキストの残りの部分のサイズをベースサイズである16ピクセルの相対値に設定することを勧めている。たとえば、CSSで12ピクセルのフォントサイズ(ベースサイズの75%)を適用する「small」クラスセレクタと、20ピクセルのフォントサイズ(ベースサイズの125%)を適用する「large」クラスセレクタを作成する。

リンクやボタンの位置について

Googleはユーザーが誤ってタップしないように、リンクやボタンを配置するようガイドラインを作っています。

  • リンクやボタンのサイズを48ピクセルにする
  • または、リンクやボタンの周囲を32ピクセル空ける

Flash、Silverlight、Javaの使用について

GoogleはFlash、Silverlight、Javaを使うことを好ましく思っていなく、それらの代替技術として、ブラウザベースのテクノロジを使うことを推奨しています。Flash、Silverlight、Javaのプラグインを使っている場合は改善した方が良さそうです。

最後に「URL の再クロールを Google にリクエストする」

モバイル対応に変更した場合、URL の再クロールを Google にリクエストします。それにより、検索結果に表示されるウェブページを更新することができます。「Fetch as Google」を使用します。

  1. 「インデックスに送信」をクリック
  2. 「この URL のみをクロールする」 を選択
  3. 「送信」をクリック

この方法で30 日間に 500 件まで 送信可能です。