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

SEOの疑問を実験で解明しブログ配信【SEOラボ】

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

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で推奨されてます。

Google推奨の記述例:

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

Google非推奨の記述例:

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

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

  • meta viewportの記述ミスや未指定のため、meta viewportが効かない
    対策として、metaタグの属性や属性値の記述ミスや未指定を修正し、Google推奨のviewportタグを指定する
  • CSS(スタイルシート)の記述ミスや未指定のため、meta viewportが効かない
    対策として、相対的な幅指定(width:100%;など)やCSSメディアクエリ等の記述ミスや未指定を修正し、ビューポートに合わせたコンテンツサイズにする

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

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

記述例:

  • 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)記述例

CSSファイル:メディアクエリ(media query)を使ったスタイルシート記述例

通常(PC向け)のCSS:

レスポンシブwebデザイン(スマホ向け)のCSS:

レスポンシブwebデザイン(タブレット向け)のCSS:

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

まとめ

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

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

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

カテゴリから記事を探す

SEO対策無料ご提案はこちら