meta要素とは

<meta>要素は、ページに関する情報を表す要素です。具体的には、文字コードやページの紹介文、作成者の情報　、SNSの情報など、様々な情報を指定できます。ただし、<base>、<link>、<script>、<style>、<title>で表せる場合はそれらの要素を使用します。

意味・役割
メタ情報を表す要素。
利用できるバージョン（HTML4.01以降）
全てのバージョン
コンテンツ・カテゴリ
メタデータ・コンテンツ
（HTML5より前：なし）
コンテンツ・モデル（梱包できる要素）
空要素
この要素を配置できる親要素

meta要素で使える属性

どの要素にでも使えるグローバル属性の他に、以下の属性が使えます。

charset属性 HTML5で追加

<meta charset="文字コード">

HTMLファイルがどの文字コードで保存されているかを指定する属性。属性値に、HTMLファイルを作成したテキストエディタで保存した文字コードを指定する事で文字化けを防げます。さまざまな文字コードが存在しますが、"UTF-8"を利用することが推奨されています。また、この属性を指定した<meta>要素は、<head>要素内の始めの方（1024バイト以内）に配置するようにしましょう。（ブラウザによっては文字コードを始めの部分で判断するため）

属性値

[主な日本語環境での文字コード]

  • "UTF-8"： 「UTF-8」で保存されたHTMLファイル
  • "Shift_JIS"： 「シフトJIS」で保存されたHTMLファイル
  • "EUC-JP"： 「EUC」で保存されたHTMLファイル

（大文字と小文字を区別せずに使える）

利用できるバージョン（HTML4.01以降）
HTML5 〜
使用例
<meta charset="UTF-8">

content属性

この属性はhttp-equiv属性または、name属性で指定した情報の種類に対する内容を指定する属性です。

属性値
http-equiv属性または、name属性で指定した情報の種類に対する内容
利用できるバージョン（HTML4.01以降）
全てのバージョン

http-equiv属性

<meta http-equiv="情報の種類" content="種類に対する内容">

http-equiv属性は、サーバーやユーザーエージェントの動作に関する情報の種類を指定する属性です。http-equiv属性の属性値にその情報の種類を指定し、値はcontent属性で定義します。なお、charset属性または、name属性とは同時に使用できません。

属性値
"content-language" HTML5では非準拠

ページのデフォルト言語を指定できます。content属性には、言語コードを定義します。主な言語コードは以下の通りです。

  • "ja"： 日本語
  • "en"： 英語
  • "zh"： 中国語
  • "ko"： 韓国語
（"content-language"の代わりに、html要素にlang属性で指定することが推奨されています。）
"content-type"

ドキュメントの種類を指定できます。content属性には、MIMEタイプと文字コードを定義します。なお、HTML5より前のHTMLでは、この属性で文字コードの指定を行います。

  • "text/html; charset=UTF-8"： UTF-8
  • "text/html; charset=Shift_JIS"： シフトJIS
  • "text/html; charset=EUC-JP"： EUC
"default-style"

デフォルトスタイルシートのグループ名を指定できます。content属性には、<link>要素のに指定したグループ名を定義します。

"refresh"

ページのリロードやリダイレクトに関する情報を指定します。content属性には、リロードまたはリダイレクトするまでの秒数と、リダイレクトの場合はリダイレクト先を定義します。

  • "秒数"： リロード
  • "秒数; url=リダイレクト先のURL"： リダイレクト
"set-cookie" HTML5では非準拠

ページのcookieを指定することができます。

"X-UA-Compatible" IEのみ

Internet Explorerで互換表示させないように指定することができる。content属性には、IEのどのバージョンの標準モードで表示するかを、"IE=バージョン番号" のように定義します。

  • "IE=edge"： 最新バージョン
  • "IE=◯ （バージョン番号）"： そのバージョンの標準モード
  • "IE=EmulateIE◯ （バージョン番号）"： そのバージョンの<DOCTYPE>の記述に合わせた表示モード
（「;（セミコロン）」で区切ることで複数指定可能。複数指定した際は、最新のモードを優先する）
利用できるバージョン（HTML4.01以降）
全てのバーション（ XHTML1.1は非推奨）
HTML5より前の文字コード指定の例
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
default-styleの使用例
<head>
    <meta http-equiv="default-style" content="light">
    <link rel="stylesheet" type="text/css" href="common.css">
    <link rel="stylesheet" type="text/css" href="theme-normal.css" title="normal">
    <link rel="stylesheet" type="text/css" href="theme-light.css" title="light">
</head>
refreshの例
<meta http-equiv="refresh" content="5; url=https://creatorquest.jp">
X-UA-Compatibleの例
<meta http-equiv="X-UA-Compatible" content="IE=edge">

name属性

<meta name="情報の種類" content="種類に対する内容">

name属性は、このページに関する情報の種類を指定する属性です。name属性の属性値にその情報の種類を指定し、値はcontent属性で定義します。なお、charset属性または、http-equiv属性とは同時に使用できません。

属性値
"author"
このページの作者名を指定できます。content属性には、作者名を定義します。
"description"
このページの紹介文を指定できます。content属性には、紹介文を定義します。
"generator"
このページの作成したソフト名を指定できます。content属性には、ソフト名を定義します。
"keywords"
このページのに関連するキーワードを指定できます。content属性には、キーワードを「,（カンマ）」区切りで定義します。
"robots"

検索エンジンのクローラーに対しての情報を指定できます。content属性には、以下の値を「,（カンマ）」区切りで定義します。

  • "index"： インデックス作成を許可
  • "noindex"： インデックス作成を拒否
  • "follow"： リンクをたどることを許可
  • "nofollow"： リンクをたどることを拒否
"viewport"

モバイルデバイスの初期の表示領域を指定できます。content属性には、以下の値を「,（カンマ）」区切りで定義します。

"width=表示領域の横幅"
200px〜10000pxの範囲または、device-widthで指定。（初期値：980px）
"height=表示領域の高さ"
233px〜10000pxの範囲または、device-heightで指定。（初期値：自動）
"initial-scale＝ 初期のズーム倍率さ"
[minimum-scale, maximum-scale]の範囲で指定。
"minimum-scale=最小の倍率"
0〜10の範囲で指定。（初期値：0.25）
"maximum-scale=最大の倍率"
0〜10の範囲で指定。（初期値：1.6）
"user-scalable=ズームの操作"
yesまたは、noで指定（初期値：yes）
利用できるバージョン（HTML4.01以降）
全てのバーション
authorの例
<meta name="author" content="ボブ">
descriptionの例
<meta name="description" content="このページでは、htmlのmeta要素の概要や属性、サンプルなどを紹介します。">
generatorの例
<meta name="generator" content="Atom">
keywordsの例
<meta name="keywords" content="meta, 要素, HTML">
robotsを使って検索エンジンをブロックの例
<meta name="robots" content="noindex,nofollow">
viewportの例
<meta name="viewport" content="width=device-width, initial-scale=1.0">

meta要素のサンプル

meta要素の例
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="このページでは、htmlのmeta要素の概要や属性、サンプルなどを紹介します。">
  <meta name="author" content="ボブ">

  <!--  SNS向けにOGPと呼ばれるデータを付与 -->
  <meta property="og:site_name" content="CreatorQuest">
  <meta property="og:title" content="meta要素について">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://creatorquest.jp/reference/html/element/meta/">
  <meta property="og:image" content="https://creatorquest.jp/images/html/element/meta/hiro.jpg">
  <meta property="og:description" content="このページでは、htmlのmeta要素の概要や属性、サンプルなどを紹介します。">
  <meta property="fb:app_id" content="[facebookのapp ID]">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@[TwitterのID]">

  <title>meta要素について</title>
</head>
<body>
  ...
</body>
</html>

仕様

HTML5.1
4.2.5. The meta element
HTML5
4.2.5 The meta element
HTML4.01
The META element

関連する要素

関連するレッスン