SEO対策に関する実験やデータ分析などを公開します

seoラボラトリー

  • follow us in feedly
  • 友だち追加する

meta viewportとは~設定方法とスマートフォン(android・iphone)で効かない原因

2016/10/21 2017/12/05

meta viewport(ビューポート)を適切に設定し、レスポンシブWebデザインにしながら、サイトのパフォーマンスを向上させることが大切です。

今回は、meta viewportの設定方法、meta viewportが効かない理由、meta viewportとスマートフォン(android・iphone)について中心に解説したいと思います。

meta viewportとは~設定方法とスマートフォン(android・iphone)で効かない原因

meta viewportとは

meta viewport(ビューポート)とは、HTMLファイルのheadタグ内に記述するmeta要素のname属性値です。

meta viewportは、スマホやタブレットのモバイル端末で最適にWeb表示させるため(Google推奨のレスポンシブWebデザイン適用時)に必要な欠かせないhtmlタグです。

meta viewportの設定方法

meta viewportは、HTMLファイルのドキュメントの先頭であるheadタグ内に記述し、以下のようレスポンシブな設定方法がGoogleで推奨されてます。
※参考:ビューポートを設定する | PageSpeed Insights | Google Developers 「推奨される解決方法」

Google推奨の記述例:
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>

また、width=320 や width=1024 などの特定の幅に設定し、固定幅のmeta viewportを設定する以下のような方法もあります。
応急措置として便利ですが、Google非推奨です。

Google非推奨の記述例:
<head>
<meta name=”viewport” content=”width=320″>
</head>

meta viewportがスマートフォン(android・iphone)で効かない原因と対策

meta viewportがスマートフォン(android・iphone)で効かない原因に対し、以下のような対策方法があります。

・meta viewportの記述ミスや未指定のため、meta viewportが効かない
対策として、metaタグの属性や属性値の記述ミスや未指定を修正し、Google推奨のviewportタグを指定する

・CSS(スタイルシート)の記述ミスや未指定のため、meta viewportが効かない
対策として、相対的な幅指定(width:100%;など)やCSSメディアクエリ等の記述ミスや未指定を修正し、ビューポートに合わせたコンテンツサイズにする
※参考:コンテンツのサイズをビューポートに合わせる | PageSpeed Insights | Google Developers 「推奨される解決方法」

meta viewportと「width=device-width」「user-scalable」「initial-scale」について

meta viewportを使うことで「width=device-width」「user-scalable」「initial-scale」の属性値が以下のように追加できます。
※参考:HTML5/ページ全般/meta要素 表示領域を設定する – TAG index Webサイト

記述例:
<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no”>

・width=device-width
meta viewport利用時に追加できる「width=device-width」は、表示領域の幅で、端末画面の幅に合わせる指定ができる、meta要素のcontent属性の属性値です。

・user-scalable
meta viewport利用時に追加できる「user-scalable」は、ズームの操作で、許可する(yes)・許可しない(no)の指定ができる、meta要素のcontent属性の属性値です。

・initial-scale
meta viewport利用時に追加できる「initial-scale」は、初期のズーム倍率で、倍率(minimum-scale~maximum-scale の範囲)指定ができる、meta要素のcontent属性の属性値です。
「minimum-scale」は、倍率 (0~10 の範囲、初期値は 0.25)。「maximum-scale」は、倍率 (0~10 の範囲、初期値は 1.6)。

meta viewportとCSS3のmedia query(メディアクエリ)について

meta viewportとCSS3のmedia query(メディアクエリ)を連携させることで、レスポンシブWebデザインの構築が可能です。

まず、HTMLファイルに「ビューポート(meta viewport)」を記述し、CSSファイルに「メディアクエリ(media query)」を使ってPC・スマホ・タブレット用のスタイルシートを以下のように記述していきます。

HTMLファイル:ビューポート(meta viewport)記述例
<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>
</head>
CSSファイル:メディアクエリ(media query)を使ったスタイルシート記述例
通常(PC向け)のCSS
#menu-bg {
background-color: #00FFFF; /*青色*/
}
レスポンシブwebデザイン(スマホ向け)のCSS
@media screen and (max-width: 479px) { /*ウィンドウ幅が0~479pxの場合にCSSを適用*/
#menu-bg {
background-color: #00FF00; /*緑色*/
}
レスポンシブwebデザイン(タブレット向け)のCSS
@media screen and (max-width: 767px) { /*ウィンドウ幅が0~767pxの場合にCSSを適用*/
#menu-bg {
background-color: #FF0000; /*赤色*/
}
}

上記のように、通常(PC向け)のCSSをベースに、レスポンシブWebデザイン(スマホ・タブレット用)に必要な記述だけ追記していきましょう。

まとめ

meta viewportを適切に設定し、モバイルフレンドリーなサイトを目指しましょう。

コンテンツ・URLの互換性を無くし、サイト評価を統一しながら、SEO対策で順位上昇を目指すことが重要です。

順位が上がらないのは、何が原因??
順位決定の仕組と、
サイトの問題点をアドバイス(無料)

お申込みはこちらから

上位表示を目指すURL

※アメブロ、jimdo、fc2ブログのURLはご遠慮ください

上位表示を目指すキーワード

会社名/組織名

ご担当者様名

電話番号

メールアドレス

※個人情報の管理は「プライバシーポリシー」に同意の上お申し込みください

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

本日の順位変動幅順位変動情報へ