ホーム > SEO > Search Console > モバイル > フレンドリー テスト 使い方
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

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


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



ウェブサイトのモバイル フレンドリー 度について、下枠左側の 「 モバイル フレンドリー テスト 」 にて、URLを指定して、ページ毎に確認することができます

検出された問題の詳細については、同様に、下枠右側の 「 PageSpeed Insights 」 で確認します


モバイル フレンドリー 度確認 検出された問題の詳細確認
モバイル フレンドリー テスト PageSpeed Insights



「モバイル フレンドリー テスト」 モバイル フレンドリー 度を確認したいページURLを入力して、「分析」をクリックします




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

モバイル フレンドリー 度を確認したいページURLを入力して、「分析」をクリックします
当サイト トップページの「 モバイル フレンドリー テスト 」 結果です サイトのルートディレクトリの、「 .htaccess 」 で 「圧縮」 ※ を、HTMLファイル <head> 部の <meta> タグ で 「ビューポート」 ※ を設定してあります 「テキストが小さすぎて読めません」、「リンク同士が近すぎます」エラーが出ている為、「モバイル フレンドリーではありません」と判定されています

当サイト トップページの「 モバイル フレンドリー テスト 」 結果です


この例では、ページ幅を、「<table border="0" width="900">」に設定、
ルートディレクトリ 「 .htaccess 」 ファイルで 「圧縮」 ※ を、
ページHTMLファイル <head> 部の <meta> タグ で 「ビューポート」 ※ を設定してあります


「テキストが小さすぎて読めません」、「リンク同士が近すぎます」エラーが出ている為、「モバイル フレンドリーではありません」と判定されています



【ガイダンスを参照したい場合】

当サイトは、ホームページビルダー19 を用いて、手作りしていますので、

「自分で作成した」
「自分で作成した。コーディングの方法を理解している。」
の下にある、
「次へ」をクリックします

表示されるガイダンスにつきましては、下記ページをご参照下さい

モバイル SEO - ウェブマスター向けモバイルガイド 」


※.「 .htaccess 」 「圧縮」 設定

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE

# Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# gifやjpgなど圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|pdf)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

# htmlやcssなどは圧縮
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

ExpiresActive On
ExpiresByType text/html "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/pdf "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
ExpiresByType application/rss+xml "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"

※.<meta> タグ 「ビューポート」 設定 (現状)

<meta name="viewport" content="width=device-width, initial-scale=0.54">




モバイル フレンドリー テスト エラーの解消例



レスポンシブ ウェブ デザイン - ウェブマスター向けモバイルガイド」では、「ページがすべてのデバイスに対応していることをブラウザに知らせるには、ドキュメントのヘッダーに次のメタタグを追加」するよう推奨されています

※.<meta> タグ 「ビューポート」 設定 (レスポンシブ ウェブ デザイン - ウェブマスター向けモバイルガイド 推奨)

<meta name="viewport" content="width=device-width, initial-scale=1.0">


当ページは、ページ幅を「width="900"」にしていた為、「initial-scale=1.0」とすると、モバイル表示の際、ページが完全に画面からはみ出してしまいます

ページ幅を狭めることで、「initial-scale」を「initial-scale=1.0」に近付け、「モバイル フレンドリー テスト」での「テキストが小さすぎて読めません」、「リンク同士が近すぎます」エラーを消すよう試みてみます



「initial-scale=0.54」



まず、「initial-scale=1.0」を現状の「initial-scale=0.54」からいくつに引き上げれば、「テキストが小さすぎて読めません」エラーが消えるかを確認する為、値を少しづつ大きくしていくと、「initial-scale=0.531162"」で、「テキストが小さすぎて読めません」エラーは出なくなりましたが、あまり細かく刻んでも、設定が煩雑になるだけですので、「initial-scale=0.54」が実用的な値と判断しています



「width="680"」



次に、「initial-scale=0.54」でページがモバイル画面からはみ出さないようページ幅を狭めていくと、「width="690"」でモバイル画面に納まりました

できれば切りよく、「width="700"」としたいところでしたが、「initial-scale」を調整しても、指定しないと「2px」(デフォルト値)取られるテーブルの罫線幅に「0」を指定しても、「テキストが小さすぎて読めません」エラーになるか、ページが画面からはみ出してしまい、実現できませんでした



「モバイル フレンドリー テスト」 結果 ( 「initial-scale=0.54」、「width="680"」 指定時 )



下記は、ページ<head>部に、<meta name="viewport" content="width=device-width, initial-scale=0.54">を記述し、ページ幅を、<table width="680">とすることで、「モバイル フレンドリー」判定となった際のハードコピーです

「initial-scale=0.532」、「width="690"」でも同様に、エラー無しで、「モバイル フレンドリー」判定となるのですが、数字の切りがあまり良くないので、採用押しませんでした


「モバイル フレンドリー テスト」結果 「問題ありません。 このページはモバイル フレンドリーです。」




「モバイル フレンドリー テスト」 結果

「問題ありません。 このページはモバイル フレンドリーです。」

モバイル設定を選択する - ウェブマスター向けモバイルガイド」画面で、「01 レスポンシブ ウェブ デザイン」をクリックすると、下記、「レスポンシブ ウェブ デザイン - ウェブマスター向けモバイルガイド」画面が表示されます


「モバイル設定を選択する - ウェブマスター向けモバイルガイド」画面で、「01 レスポンシブ ウェブ デザイン」をクリックすると、この「レスポンシブ ウェブ デザイン - ウェブマスター向けモバイルガイド」画面が表示されます

ページがすべてのデバイスに対応していることをブラウザに知らせるには、ドキュメントのヘッダーに次のメタタグを追加します

<meta name="viewport" content=
"width=device-width, initial-scale=1.0">


meta viewport タグは、ページのサイズや縮尺を、デバイスの幅に合わせてどう調整すべきかをブラウザに伝えるために使用します。meta viewport 要素を指定しない場合は、モバイル ブラウザのデフォルトであるパソコン画面の幅(デバイスによって異なりますが通常はおよそ 980 ピクセル)でページがレンダリングされます。その後モバイル ブラウザが、フォントを大きくして画面に合う縮尺に変える、コンテンツの一部のみが画面に収まるように表示する、といった調整を試みます。

このような調整によって、フォントサイズの統一感が失われたり、コンテンツを操作するためにダブルタップやピンチで拡大する必要が生じたりすることもあります。Google としては、モバイル端末でこのような操作が必要になるページについては、モバイル フレンドリーと見なすことができない場合もあります。




Google Search Console Google AdSense 等 Googleで使用、表示される日時について


Google Search Console Google AdSense 等 Googleで使用、表示される日時は、Google アメリカ本社のある「アメリカ合衆国 カリフォルニア州 マウンテンビューアンフィシアターパークウェイ1600番」の時間である「ロサンゼルス時間」(タイムゾーンの名称 「アメリカ合衆国 太平洋時間」)になっています
日本との時差は、「-16」で、日本の方が、16時間進んでいます (日本で日付が変わっても、現地で日付が変わるのは 16 時間後です)

日本時間に置き換えたい時は、Google Search Console で表示される日時に、16 時間足すことにより求められます
例えば、、Google Search Consoleでの表示時間、「2014.4.27 0:00」 は、日本時間、「2014.4.27 16:00」のことになります

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > SEO > Search Console > モバイル > フレンドリー テスト 使い方
   

© 2014 abhp.net All Rights Reserved.

関連情報サイト


 はじめる - ウェブマスター向けモバイルガイド

コンテンツ一覧

ページTOP
ページTOP
ページTOP
ページTOP