HTML <meta> タグ

定義と用法

<meta> タグは HTML 文書のメタデータに関する情報を定義します。メタデータはデータに関するデータ（情報）です。

<meta> タグは常に <head> 要素 内で、通常は文字セット、ページの説明、キーワード、ドキュメントの著者およびビューポートの設定を指定するために使用されます：

メタデータはページに表示されませんが、機械によって解析されます。

ブラウザ（コンテンツの表示方法やページの再読み込み）、検索エンジン（キーワード）および他のネットワークサービスがメタデータを使用します。

ヒント：meta 要素には多くの異なる用法があり、HTML 文書には複数の meta 要素を含むことができます。

ヒント：通じて <meta> タグを使用して、ウェブページデザイナーがビューポート（ユーザーがウェブページで見える領域）を制御できます（以下の「ビューポートの設定」例を参照）。

注意：各 meta 要素は一つの用途にのみ使用できます。複数の特性を使用したい場合は、head 要素に複数の meta 要素を追加する必要があります。

参照：

HTML 教程：HTML ヘッダー

HTML DOM リファレンスマニュアル：Meta オブジェクト

例

<head>
  <meta charset="UTF-8">
  <meta name="description" content="無料の Web 教程">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

自分で試してみてください

属性

属性 値 説明
charset 文字セット HTML 文書の文字エンコーディングを定義します。
content テキスト http-equiv または name 属性に関連付けられた値を定義します。
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 content属性の情報/値に対してHTTPヘッダーを提供します。
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 メタデータの名前を指定します。

グローバル属性

<meta> タグは、 HTMLのグローバル属性。

meta要素には3つの典型的な使用法があります：

  1. 名/値メタデータペアを指定します
  2. 文字コードの宣言
  3. HTTPヘッダーフィールドのシミュレーション

1：さまざまな名/値メタデータペアを指定します

meta要素は、nameおよびcontent属性を使用してメタデータを定義することができます。

検索エンジン向けのキーワードを定義します：

<meta name="keywords" content="HTML, CSS, JavaScript">

ウェブページに関する説明を定義します：

<meta name="description" content="Free Web tutorials for HTML and CSS">

ページの作者を定義します：

<meta name="author" content="John Doe">

ビューポートを設定し、ウェブサイトがさまざまなデバイス上でより良い見た目になるようにします：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2：文字コードの宣言

charset属性を使用して、このページがUTF-8符号化を使用することを宣言します：

<meta charset="UTF-8">

3：HTTPヘッダーフィールドのシミュレーション

http-equiv属性とcontent属性を使用して、ドキュメントを30秒ごとにリフレッシュする：

<meta http-equiv="refresh" content="30">

HTML5における変更点

charset属性はHTML5で追加されました。

HTML4のhttp-equiv属性は、任意の異なる値を複数持つことができますが、HTML5では、このページで言及されている値のみを使用できます。

HTML4のscheme属性はHTML5では使用されていません。

また、現在ではmeta要素を使用して、ウェブページが使用する言語を指定するのはもはや行われていません。

ビューポートを設定する方法を

HTML5は、Webデザイナーが <meta> タグを含めるべきです。

すべてのウェブページに以下の <meta> ビューポート要素：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ページのサイズと拡大率を制御する方法に関する情報をブラウザに提供します。

width=device-width 部分はページの幅をデバイスのスクリーン幅に設定します（デバイスに依存）。

ブラウザがページを初めて読み込んだとき、initial-scale=1.0 部分設定初期拡大レベル。

以下は、viewport meta タグを含まないウェブページと、含むウェブページの例です：

ヒント：このページをスマートフォンやタブレットで閲覧している場合、以下の2つのリンクをクリックして異なる点を確認できます。



viewport メタタグを含まない


viewport メタタグを含む

デフォルトの CSS 設定

なし。

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート