meta 要素文書のメタデータを表す
meta 要素は文書における様々なメタデータを表します。
メタデータとは、文書の文字コードをはじめ、概要やキーワードなど文書に対する様々な情報のことです。近年では、Facebook や Twitter など、ソーシャル・ネットワーキング・サービス向けに OGP （Open Graph protocol） と呼ばれるメタデータを付与する仕組みのためにも meta 要素が使用されます。
meta 要素の仕様
- カテゴリ
-
- itemprop 属性が付与された場合、フレージングコンテンツ
- itemprop 属性が付与された場合、フローコンテンツ
- コンテンツモデル
- この要素を使用できる文脈
- charset 属性が指定されている場合、または http-equiv 属性が文字コードの指定のために付与されている場合、head 要素内
- http-equiv 属性が文字エンコードの指定のためではなく付与されている場合、head 要素内、または head 要素の子要素である noscript 要素の子要素として
- name 属性が指定されている場合、メタデータ・コンテンツが期待される場所
- itemprop 属性が付与された場合はフロー・コンテンツ、またはフレージング・コンテンツが期待される場所
- この要素で使用できる属性
詳細説明
meta 要素に指定可能な属性
meta 要素に指定できる属性は下記の通りとなります。
なお、meta 要素には、name、http-equiv、charset、itemprop 属性のいずれか 1つのみを指定できます。これら属性を複数同時に指定することができません。また、name、http-equiv is 属性が指定された場合、content 属性は必須となります。
| 属性値 | 概要 |
|---|---|
| charset 属性 | 文字コードの指定のために使用します。2つ以上の文字コード指定を文書内に入れることはできません。 |
| http-equiv 属性 | http-equiv 属性が指定されると、その meta 要素はプラグマ指示子となります。プラグマ指示子はプラグマ （ユーザエージェントへの指示） を指定するための名前のことです。該当文書の処理の仕方や扱いを指定することができます。 |
| name 属性 | そのメタデータが何を表すものかを指定します。 |
| content 属性 | メタデータを指定します。name、http-equiv 属性が指定された場合、content 属性は必須となります。 |
http-equiv 属性
http-equiv 属性に指定できる値は下記の通りです。
| 属性値 | 概要 |
|---|---|
| content-language | 文書の記述言語を指定のために使用します。この指定は非推奨です。代わりに lang 属性を使用しましょう。 |
| content-type | 文字コードの指定のために使用します。 |
| default-style | 優先スタイルシートの指定のために使用します。 |
| refresh | 自動更新やリダイレクトの指定のために使用します。 |
| set-cookie | Cookie の設定のために使用します。この指定は非推奨です。代わりに HTTP ヘッダを利用すべきです。 |
| x-ua-compatible | Web標準仕様により厳密に従うように Internet Explorer に対して指定します。指定する場合は、content="IE=edge" と組み合わせます。この指定は非推奨です。 |
| content-security-policy | Content Security Policy（CSP / コンテンツセキュリティポリシー）を有効にします。CSP は、クロスサイトスクリプティング（XSS）やデータインジェクション攻撃といった特定種別の攻撃を検知、その影響を軽減するために追加できるセキュリティレイヤーです。 |
http-equiv="content-type"
http-equiv="content-type" を指定した meta 要素に content="text/html; charset=utf-8" のようにあわせて指定することで文書の文字コードを指定することができます。この指定は、HTML 4.01 などでも用いられた方法です。
なお、この指定による文字コードの指定と、charset 属性を使用した文字コードの指定を 1つの文書内に併記してはいけません。
また、XML としてあつかう文書では、この指定方法を使用することはできません。また、charset 属性を使用した文字コードの指定は無視され、XML 宣言による文字コードの指定が必要です （文字コードが UTF-8、UTF-16 の場合は省略も可能）。
http-equiv="default-style"
http-equiv="default-style" を指定した meta 要素に content="style01" のように link 要素に付与した title 属性値をあわせて指定する、あるいは、content="style.css" のようにスタイルシートのファイル名を直接指定することで、優先スタイルシートを指定します。
link 要素に title 属性を指定することで、優先スタイルシートの指定は可能ですが、http-equiv="default-style" を使用することで、meta 要素によっても優先スタイルシートを指定することができます。
優先スタイルシートについて詳しくは、link 要素の詳細説明をご覧ください。
http-equiv="refresh"
http-equiv="refresh" を指定することで、ページを一定間隔で再読み込みしたり、異なるページにリダイレクトしたりすることができます。
ただし、例えばスポーツの試合をリアルタイム実況するページなど、閲覧者が定期的な再読み込みを求めている場合を除き、閲覧者の意に反した強制的な再読み込みは避けるべきです。また、リダイレクトに関しても対応しない環境のため、リダイレクト先へのリンクもあわせて表示するなど、配慮が必要です。
meta 要素のサンプルソース
<!-- meta 要素による文字コードの指定 -->
<meta charset="utf-8" />
<!-- meta 要素による文字コードの指定（http-equiv 属性を使用した場合） -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- XHTML5 では XML 宣言による文字コードの指定が必要で、
meta 要素による文字コードの指定は無視されます -->
<?xml version="1.0" encoding="shift_jis"?>
<!-- meta 要素による様々なメタデータの指定例 --> <meta name="keywords" content="HTML,HTML5,CSS,CSS3,JavaScript,リファレンス" /> <meta name="description" content="meta 要素は文書における様々なメタデータを表します。" /> <meta name="robots" content="noindex,nofollow" /> <meta name="author" content="日本太郎" />
<!-- meta 要素による OGP の指定例 --> <meta property="og:site_name" content="HTML5 タグリファレンス - W3 Watch Reference" /> <meta property="og:title" content="meta 要素" /> <meta property="og:url" content="http://reference.hyper-text.org/html5/element/meta/" /> <meta property="og:description" content="meta 要素は文書における様々なメタデータを表します。" /> <meta property="og:type" content="article" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:creator" content="@burnworks" />
<!-- meta 要素によるページ再読込みの例
300秒（5分）ごとに再読込みします -->
<meta http-equiv="refresh" content="300" />
<!-- meta 要素によるページリダイレクトの例
30秒で new.html にリダイレクト -->
<meta http-equiv="refresh" content="30; URL=new.html" />
<!-- meta 要素による CSP の指定例 --> <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'" />
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |