meta 要素

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

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

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 属性は必須となります。
media 属性	メタデータがどのメディアに適用されるかを指定します。値は妥当なメディア・クエリである必要があります。 なお、meta 要素においては、name 属性の値が theme-color である場合のみ意味を持ちます。

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" を指定することで、ページを一定間隔で再読み込みしたり、異なるページにリダイレクトしたりすることができます。

ただし、例えばスポーツの試合をリアルタイム実況するページなど、閲覧者が定期的な再読み込みを求めている場合を除き、閲覧者の意に反した強制的な再読み込みは避けるべきです。また、リダイレクトに関しても対応しない環境のため、リダイレクト先へのリンクもあわせて表示するなど、配慮が必要です。

name 属性

HTML Standard 仕様で定義されている、meta 要素における name 属性の値は下記の通りです。content 属性と組み合わせることで、様々なメタ情報を文書に指定できます。

name="application-name"

content 属性値に、Webアプリケーションの名前を指定します。そのページがWebアプリケーションでない場合は使用してはいけません。lang 属性を使用して、言語ごとにWebアプリケーションの名前を指定することもできます。

name="author"

content 属性値に、文書の著者名を文字列として指定します。

name="description"

content 属性値に、その文書の説明分を文字列として指定します。例えば検索エンジンなどで、そのページを短く説明する文章などとして使用されるため、それに適した内容にする必要があります。

name="generator"

content 属性値に、文書を生成するために使われたソフトウェアなどを識別する文字列を指定します。

name="keywords"

content 属性値に、カンマ（,）で区切られた文字列を指定します。指定する文字列は、その文書に関連するキーワードです。

name="referrer"

content 属性値に、リファラポリシーを指定します。

リファラポリシーについては、referrerpolicy 属性の説明を参照してください。

name="theme-color"

content 属性値に、CSS の <color> データ型の値を指定します。指定した色は、Webページの表示や周囲のユーザインタフェースをカスタマイズするために使用する推奨色となります。

<meta name="theme-color" content="#3c790a">

media 属性を併用して、特定のメディアクエリに適用することもできます。

<meta name="theme-color" content="#3c790a" media="(prefers-color-scheme: dark)">

name="color-scheme"

content 属性値に、CSS における color-scheme プロパティの値を指定することができます。

<meta name="color-scheme" content="dark">

<!-- 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	○