<meta>
<meta> は HTML の要素で、メタデータを表します。これは、他のメタ関連要素 (<base>, <link>, <script>, <style>, <title>) で表すことができないものを表します。
<meta> 要素で提供されるメタデータの型は、以下のいずれかになります。
name 属性が設定されている場合、<meta> 要素は文書レベルメタデータを提供し、ページ全体に適用されます。
http-equiv 属性が設定されている場合、 <meta> 要素はプラグマディレクティブであり、同様の名前の HTTP ヘッダーによって与えられるものと同等の情報を提供します。
charset 属性が設定されている場合、 <meta> 要素は文字セット宣言であり、文書がどの文字エンコーディングでエンコードされているかを指定します。
itemprop 属性が設定されている場合、 <meta> 要素はユーザー定義のメタデータを提供します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML 属性 | ||||||
charset | 1 | 12 | 1 | 3 | 18 | 2 |
| content 属性は、 name 属性で定義されたメタデータ名の値を指定します。 その値として文字列を取り、期待される構文は、使用されている name の値によって異なります。 | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| http-equiv は meta 要素の属性で、文書を返したレスポンスに特定の HTTP ヘッダーが含まれているかのように、ブラウザーに処理指示を与えることができます。 メタデータは、ページ全体に適用される文書レベルのメタデータです。 | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| name 属性は meta 要素で、メタデータを名前と値の組み合わせで提供します。 要素に name 属性がある場合、 content 属性で対応する値を定義します。 メタデータは、ページ全体に適用される「文書レベルメタデータ」です。 | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| DOM API | ||||||
| HTMLMetaElement インターフェイスは、HTML 内で 要素として提供される、文書に関する説明的なメタデータが入ります。 HTMLElement インターフェイスから、すべてのプロパティとメソッドを継承しています。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLMetaElement.content プロパティは、HTMLMetaElement.name または HTMLMetaElement.httpEquiv との組み合わせによる、プラグマディレクティブと名前付き meta データの content 属性を取得または設定します。 詳しくは、content 属性を参照してください。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLMetaElement.httpEquiv プロパティは、HTMLMetaElement.content 属性のプラグマディレクティブまたはレスポンスヘッダーの名前を取得または設定します。 取りうる値の詳細は、http-equiv 属性を参照してください。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLMetaElement.media プロパティで、theme-color メタデータのメディアを指定することができます。 | 93 | 93 | 106 | 15 | 93 | 15 |
| HTMLMetaElement.name プロパティは HTMLMetaElement.content との組み合わせで使用し、文書のメタデータを名前と値の組で定義します。 name 属性はメタデータの名前を定義し、content 属性はその値を定義します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
html.elements.meta.http-equiv.content-type http-equiv="コンテントタイプ" | ≤59 | 12 | 1 | ≤10.1 | ≤59 | ≤10.3 |
html.elements.meta.http-equiv.refresh http-equiv="リフレッシュ" | 1 | 12 | 1 | 1 | 18 | 1 |
| referrer は meta 要素の name 属性の値で、文書から送信される HTTP リクエストの Referer ヘッダーを制御します。 指定した場合、 要素の content 属性にキーワード値としてリファラーを定義します。 | 17 | 79 | 36 | 11.1 | 18 | 12 |
- Chrome 46までは、`content`の値は仕様に記載されている値に制限されていませんでした。
- Firefox 39までは、コンテキストメニューやミドルクリックによるナビゲーションの際に、`referrer`の値が考慮されていませんでした。
- Chrome Android 46までは、`content`の値は仕様に記載されている値に制限されていなかった。
基本構文
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ページの説明文">
<meta name="robots" content="index, follow">
<meta property="og:title" content="OGPタイトル">ライブデモ
Metadata vs content
Use a card to separate invisible metadata from visible document content.
実務での使いどころ
-
<meta> の活用
<meta> は HTML の要素で、メタデータを表します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。