ホーム > 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 としては、モバイル端末でこのような操作が必要になるページについては、モバイル フレンドリーと見なすことができない場合もあります。




PageSpeed Insights について | PageSpeed Insights | Google Developers


Page Speed Insights では、携帯端末やデスクトップ端末向けのページのパフォーマンスを測定します
URL を 2 回(モバイル ユーザー エージェントと PC ユーザー エージェントで 1 回ずつ)取得します

PageSpeed のスコアの範囲は 0~100 ポイントです
スコアが大きいほど良好で、85 以上のスコアはそのページのパフォーマンスが高いことを示します
なお、PageSpeed Insights は継続的に改良されているため、新しいルールの追加や分析の改良に伴ってスコアが変わることがあります

PageSpeed Insights では、次の項目について、ページのパフォーマンスをどの程度改善できるか測定します

スクロールせずに見える範囲のコンテンツの読み込み時間: ユーザーが新しいページをリクエストした瞬間から、スクロールせずに見える範囲のコンテンツがブラウザで表示されるまでの経過時間
ページ全体の読み込み時間: ユーザーが新しいページをリクエストした瞬間から、ブラウザでページが完全に表示されるまでの経過時間
ただし、ネットワーク接続のパフォーマンスは大きく変動するため、PageSpeed Insights では、ページのパフォーマンスのうちネットワークに依存しない部分(サーバー設定、ページの HTML 構成、画像やJavaScript、CSS などの外部リソースの使用方法)のみを考慮します
提案された解決策を実装すれば、ページの相対的なパフォーマンスは改善されるはずです
ただし、それでも、ページの絶対的なパフォーマンスはユーザーのネットワーク接続に左右されます

各提案には、重要性を表す優先度インジケータが表示されます

アイコン 名前 説明
赤色の感嘆符 赤色の感嘆符 この問題を修正すると、ページのパフォーマンスが大幅に改善されます
黄色の感嘆符 黄色の感嘆符 それほど忙しくない場合はこの問題の修正を検討してください
緑色のチェックマーク 緑色のチェックマーク 大きな問題は見つかりません。パフォーマンスは良好です

PageSpeed Insights の最近の更新では、モバイルのパフォーマンス向上に力を入れています
詳細については、PageSpeed Insights のモバイル分析についての記事や、Google I/O 2013 で行われた素早いモバイル ウェブサイトに関するプレゼンテーションをご覧ください
PageSpeed Insights で実行された分析の詳細なリストもご覧いただけます

フィードバックのお願い
Google では PageSpeed Insights に関する皆様からのフィードバックをお待ちしています
テスト ツールや推奨されたベスト プラクティスについてご意見やご提案がある場合は、ディスカッション グループ(page-speed-discuss)に投稿してください

お問い合わせ
PageSpeed Insights についてご質問がある場合は、よくある質問をご覧いただくか、ディスカッション グループにメッセージを投稿してください

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

最終更新日: 4月 11, 2014

PageSpeed Insights について  |  PageSpeed Insights  |  Google Developers 」 より





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