HTML - headタグ

metaタグ

大文字・小文字は区別されない。
これらは全て同じように機能する。

• name="viewport"
• name="Viewport"
• name="VIEWPORT"

予約語

metaタグのname要素で使用される予約語を、以下に示す。

viewport

モバイルデバイスにおいて、Webページの表示方法を制御する重要な設定を行う。
これは、モバイルブラウザが特別に認識する値の1つである。

viewportという値は、W3CやWHATWGによって標準化された値である。

このタグが重要な理由を以下に示す。

• レスポンシブデザインの基礎となる設定である。
• モバイルでの表示が適切になり、ユーザビリティが向上する。
• Googleのモバイルフレンドリーの評価基準の1つとなっている。

 <meta name="viewport" content="...">

 <!-- 使用例 -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• width=device-width

  デバイスの画面幅に合わせてページの幅を設定する。

  例: iPhoneで見る場合は画面幅の390px、iPadで見る場合は768pxに自動調整される。

  この設定が無い場合、モバイルデバイスでPCサイト用の幅 (例: 1920px等) で表示されるため、小さく表示されてしまう。

  
  

• initial-scale=1.0

  ページの初期表示時の拡大率を設定する

  1.0は等倍 (100%) を意味する。

  例: 0.5にすると50%で表示 (縮小)、2.0にすると200%で表示 (拡大) される。

  
  

• maximum-scale=1.0

  最大拡大率を設定する。

  user-scalable=no

  ユーザによるピンチイン・アウトを無効化する。

ただし、アクセシビリティの観点から、ユーザのズーム操作を制限する設定 (maximum-scaleやuser-scalable=no) は推奨されない。
これは、視覚に障害のあるユーザが必要に応じて拡大できるようにすることが望ましいとされているからである。

description

サイトの説明を指定する。

 <meta name="description" content="...">

keywords

キーワードを指定する。

 <meta name="keywords" content="...">

author

作成者を指定する。

 <meta name="author" content="...">

robots

検索エンジンへの指示を指定する。

 <meta name="robots" content="...">

カスタムメタ情報

カスタムメタ情報を設定する場合は、以下に示すような形式を使用する。

 <!-- カスタムメタデータの例 -->
 <meta name="my-custom-info" content="...">