meta 要素文書のメタデータを表す

meta 要素は文書における様々なメタデータを表します。

メタデータとは、文書の文字コードをはじめ、概要やキーワードなど文書に対する様々な情報のことです。近年では、Facebook や Twitter など、ソーシャル・ネットワーキング・サービス向けに OGP (Open Graph protocol) と呼ばれるメタデータを付与する仕組みのためにも meta 要素が使用されます。

さらに詳細な説明を見る

サンプルソースを見る

meta 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈
  • charset 属性が指定されている場合、または http-equiv 属性が文字コードの指定のために付与されている場合、head 要素内
  • http-equiv 属性が文字エンコードの指定のためではなく付与されている場合、head 要素内、または head 要素の子要素である noscript 要素の子要素として
  • name 属性が指定されている場合、メタデータ・コンテンツが期待される場所
  • itemprop 属性が付与された場合はフロー・コンテンツ、またはフレージング・コンテンツが期待される場所
この要素で使用できる属性
DOM インタフェース
interface HTMLMetaElement : HTMLElement {
           attribute DOMString name;
           attribute DOMString httpEquiv;
           attribute DOMString content;
};

詳細説明

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 ヘッダを利用すべきです。

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" />

関連する要素

W3C HTML5 仕様書

4.2.5 The meta element