ビューポートが設定されていません　-　モバイルユーザビリティ　-　Google Search Console の使い方　-　SEO対策

Google　Search Console　モバイルユーザビリティ　ビューポートが設定されていません

HTMLソースヘッダー部で、ビューポートを設定していないと、Google　Search Console にて、モバイルユーザビリティの問題として、「ビューポートが設定されていません」メッセージが表示されます

対処法としては、下記方法にて、HTMLソースヘッダー部でビューポート（ viewport ）を設定（指定）します

ビューポート（ viewport ）　設定（指定）　方法

ビューポート（ viewport ）の設定（指定）には、ページに固定幅を設定するパソコン用の指定と、表示媒体に対し、レスポンシブな指定方法があり、レスポンシブな指定を行うと、パソコン、モバイル含め、全ての端末でページが適切にレンダリングされるようになります

ビューポート（ viewport ）は、HTMLソース上のヘッダー部（ <head> ～ </head> の間）の任意の場所に記述します

下記は、当サイトのトップページに、各ビューポート（ viewport ）設定を行った際の「モバイルフレンドリーテスト」、「 PageSpeed Insights 」、それぞれの結果メッセージです

ビューポート（ viewport ）　　レスポンシブ　指定　initial-scale=0.54
<meta name="viewport" content="width=device-width, initial-scale=0.54">
モバイルフレンドリーテスト		PageSpeed Insights
モバイルフレンドリーではありません		78 / 100　ユーザーエクスペリエンス
	テキストが小さすぎて読めません		修正が必要	判読可能なフォントサイズの使用
	リンク同士が近すぎます		修正を考慮	タップターゲットのサイズを適切に調整する
			4 個のルールに合格
		71 / 100　速度
			修正が必要	圧縮を有効にする
			修正を考慮	ブラウザのキャッシュを活用する
				JavaScript を縮小する
				HTML を縮小する
				CSS を縮小する
				画像を最適化する
			4 個のルールに合格

ビューポート（ viewport ）　　レスポンシブ　指定　initial-scale=1.0
<meta name="viewport" content="width=device-width, initial-scale=1.0">
モバイルフレンドリーテスト		PageSpeed Insights
モバイルフレンドリーではありません		67 / 100　ユーザーエクスペリエンス
	コンテンツの幅が画面の幅を超えています		修正が必要	コンテンツのサイズを表示域に合わせる
	リンク同士が近すぎます		修正を考慮	タップターゲットのサイズを適切に調整する
			4 個のルールに合格
		70 / 100　速度
			修正が必要	圧縮を有効にする
			修正を考慮	ブラウザのキャッシュを活用する
				JavaScript を縮小する
				画像を最適化する
				HTML を縮小する
				CSS を縮小する
			4 個のルールに合格

ビューポート（ viewport ）　　固定幅　指定
<meta name="viewport" content="width=920">
モバイルフレンドリーテスト		PageSpeed Insights
モバイルフレンドリーではありません		66 / 100　ユーザーエクスペリエンス
	テキストが小さすぎて読めません		修正が必要	判読可能なフォントサイズの使用
	リンク同士が近すぎます			viewport の設定
	モバイル用 viewport が設定されていません ※		修正を考慮	タップターゲットのサイズを適切に調整する
※．ビューポート（ viewport ）に固定幅を指定すると、モバイル用 viewport になりません			3 個のルールに合格
		70 / 100　速度
			修正が必要	圧縮を有効にする
				ブラウザのキャッシュを活用する
			修正を考慮	画像を最適化する
				JavaScript を縮小する
				HTML を縮小する
				CSS を縮小する
			4 個のルールに合格

ビューポート（ viewport ）　　記述無　（無指定）
（記述無）
モバイルフレンドリーテスト		PageSpeed Insights
モバイルフレンドリーではありません		66 / 100　ユーザーエクスペリエンス
	テキストが小さすぎて読めません		修正が必要	判読可能なフォントサイズの使用
	リンク同士が近すぎます			タップターゲットのサイズを適切に調整する
	モバイル用 viewport が設定されていません			viewport の設定
			3 個のルールに合格
		70 / 100　速度
			修正が必要	圧縮を有効にする
				ブラウザのキャッシュを活用する
			修正を考慮	JavaScript を縮小する
				画像を最適化する
				HTML を縮小する
				CSS を縮小する
			4 個のルールに合格

ビューポート（ viewport ）　設定（指定）　表示例

下記は、当サイトのトップページに、各ビューポート（ viewport ）設定を行った際の「モバイルフレンドリーテスト」、「 PageSpeed Insights 」、それぞれのモバイル表示例です

ビューポートが設定されていません

サイトにアクセスするユーザーは、大きなデスクトップモニター、またはタブレットや小型のスマートフォンなど、画面サイズの異なるさまざまな端末を使用しています
そのため、ページでは meta viewport タグを使用してビューポートを指定してください
このタグは、端末に合わせてページのサイズとスケーリングを調整する方法をブラウザに指示します

詳しくは、レスポンシブウェブデザインの基礎をご覧ください

「モバイルユーザビリティ - Search Console ヘルプ」より

ビューポートを設定する

このルールは、ページでビューポートを指定していないことや、さまざまな端末に適応しないビューポートを指定していることを PageSpeed Insights が検出した場合にトリガーされます。

概要

ビューポートは携帯端末でのウェブページの表示方法を制御します。ビューポートがない場合、携帯端末は一般的なデスクトップ画面の幅でページをレンダリングします。ビューポートを設定すると、ページの幅やさまざまな端末での拡大縮小を制御できるようになります。

推奨される解決方法

携帯端末に適切に表示されるよう最適化されたページには、ドキュメントの先頭に width=device-width、initial-scale=1 を指定したメタビューポートが含まれています。

用語

•ハードウェアピクセル: ディスプレイ上の物理的なピクセル。たとえば、iPhone 5 には 640 水平ハードウェアピクセルの画面が搭載されています。
•デバイス非依存ピクセル（dip）: 通常の表示距離で統一の参照ピクセルに一致させるための、デバイスピクセルのスケーリング。すべての端末でほぼ同じサイズになります。iPhone 5 は幅 320 dip です。
•CSS ピクセル: ビューポートによって制御されるページレイアウトに使用する単位。スタイル内のピクセルサイズ（width: 100px など）は CSS ピクセル単位で指定します。CSS ピクセルとデバイス非依存ピクセルの比率は、ページのスケール係数やズームです。

携帯端末上の PC ページ

ページでビューポートが指定されていない場合、モバイルブラウザではそのページを 800～1024 CSS ピクセルの代替幅でレンダリングします。ページがディスプレイに収まるようにページのスケール係数が調整されるため、ユーザーはそのページを操作する前にズームする必要があります。

メタビューポートタグ

メタビューポートタグは、ページのサイズとスケーリングの制御方法についてブラウザに指示を与えるもので、ドキュメントの先頭に含める必要があります。

固定幅のビューポート

ビューポートは width=320 や width=1024 などの特定の幅に設定できます。おすすめしませんが、この方法は、固定サイズのページを期待どおりに確実に表示するための応急措置として便利です。

レスポンシブなビューポート

メタデータビューポート値 width=device-width を使用すると、デバイス非依存ピクセル単位の画面の幅に合わせるようにページに指示します。さまざまな画面サイズに合わせてページのコンテンツをリフローできるようになります。

iOS や Windows Phone などの一部のブラウザでは、横向きに回転させたときにページの幅を一定に保ち、リフローせずにズームして画面を表示します。属性 initial-scale=1 を追加すると、画面の向きにかかわらず CSS ピクセルとデバイス非依存ピクセルを 1 対 1 の関係に保つようブラウザに指示するため、ページで横向きの幅全体を利用できるようになります。

		iPhone 5 で width=device-width を回転させた場合、横向きの幅は 320px になります

		iPhone 5 で width=device-width、initial-scale=1 を回転させた場合、横向きの幅は 568px になります

レスポンシブなビューポートを使用するには、さまざまな幅で機能するようにページを設計する必要があります。ヒントについては、ビューポートに合わせたコンテンツのサイズ変更に関する推奨事項をご覧ください。

その他の考慮事項

minimum-scale、maximum-scale、user-scalable を避ける

最小および最大ズームを設定したり、ビューポートをズームする機能を完全に無効にしたりできます。これらのオプションはアクセシビリティに悪影響を与えるため、通常は避けてください。

@viewport

メタビューポートタグは広くサポートされていますが、正式な標準の一部ではありません。この動作は CSS Device Adaptation 仕様の一部として CSS に含まれます。この仕様が最終承認されて幅広く実装されるまでは、互換性のために、単独で、または対応する @viewport スタイルと一緒に、メタビューポートタグを使用し続けてください。

「ビューポートを設定する PageSpeed Insights Google Developers 」より

モバイルユーザビリティの問題　固定幅のビューポート

固定幅のビューポート

このレポートには、ビューポートが固定幅に設定されているページが示されます。ウェブデベロッパーによっては、レスポンシブ以外のページを一般的な携帯端末の画面サイズに合わせて調整するために、ビューポートを固定のピクセルサイズに定義している場合があります
このエラーを修正するには、サイトのページにレスポンシブデザインを導入し、デバイスの幅とスケーリングに合わせてビューポートを設定します
詳しくは、ウェブの基礎ガイドのビューポートを正しく設定する方法をご覧ください

「モバイルユーザビリティ - Search Console ヘルプ」より

モバイルユーザビリティの問題　コンテンツのサイズがビューポートに対応していません

コンテンツのサイズがビューポートに対応していません

このレポートには、ページ上の語句や画像を表示するために水平スクロールを必要とするページが示されます
このエラーは、ページの CSS 宣言で絶対値を使用している場合や、ページの画像が特定のブラウザ幅（980px など）で最適に表示されるように設計されている場合に発生します
このエラーを修正するには、ページの CSS 要素に対して相対的な幅と位置の値を使用し、画像も同様にスケーリングできるようにします
詳しくは、コンテンツのサイズをビューポートに合わせるをご覧ください

「モバイルユーザビリティ - Search Console ヘルプ」より

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　モバイルユーザビリティ　ビューポートが設定されていません

ビューポート（ viewport ）　設定（指定）　方法

ビューポート（ viewport ）　　レスポンシブ　指定　initial-scale=0.54

ビューポート（ viewport ）　　レスポンシブ　指定　initial-scale=1.0

ビューポート（ viewport ）　　固定幅　指定

ビューポート（ viewport ）　　記述無　（無指定）

ビューポート（ viewport ）　設定（指定）　表示例

ビューポート（ viewport ）　　レスポンシブ　指定　initial-scale=0.54

ビューポート（ viewport ）　　レスポンシブ　指定　initial-scale=1

ビューポート（ viewport ）　　固定幅　指定

ビューポート（ viewport ）　　記述無　（無指定）

ビューポートが設定されていません

ビューポートを設定する