meta

表示に関わらない付加情報をブラウザに伝えるための要素

機能

meta 要素は、HTML ドキュメントのメタデータを指定するために使用されます。メタデータは、ページの説明、キーワード、著者、文字エンコーディング、ビューの設定など、さまざまな情報を含むことができます。通常、head セクション内に配置され、検索エンジンの最適化（SEO）やブラウザの動作に影響を与えます。

よく設定する属性（attribute）と値

charset

ドキュメントの文字エンコーディングを指定します。
例: charset=“UTF-8”

name

メタデータの名前を指定します。
例: name=“description”

content

メタデータの内容を指定します。例: content=“This is an example page.”

http-equiv

HTTP ヘッダーと同じ効果を持つメタデータを指定します。
例: http-equiv=“refresh”（ページのリフレッシュを指定）

viewport

ビューポートの設定を指定します。
例: name=“viewport” content=“width=device-width, initial-scale=1.0” この例は、以下の意味があります：

name=“viewport”: これは、ビューポート（表示領域）に関する設定を指定することを示します。

content=“width=device-width, initial-scale=1.0”: これは、ビューポートの幅をデバイスの幅に設定し、初期のズームレベルを 1.0 に設定することを示します。

この設定により、ウェブページがモバイルデバイスやタブレットなどの異なる画面サイズに適切に表示されるようになります。特にレスポンシブデザインを実現するために重要です。

使い方

例１

この例では、meta 要素を使用して、文字エンコーディング、ページの説明、キーワード、著者を指定しています。リソースがキャッシュに保存される最大時間を 1 時間（3600 秒）に設定し、期限切れの場合は再検証を行うように指示しています。

<head>
  <meta charset="UTF-8" />
  <title>Example Page</title>
  <meta name="description" content="This is an example page." />
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <meta name="author" content="John Doe" />
  <meta http-equiv="Cache-Control" content="max-age=3600, must-revalidate" />
</head>

例２

この例では、viewport 属性を使用してビューポートの設定を指定し、http-equiv 属性を使用してページを 30 秒ごとにリフレッシュするように設定しています。

<head>
  <meta charset="UTF-8" />
  <title>Example Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="refresh" content="30" />
</head>