<meta>メタデータの指定

<meta>タグは、その文書に関する情報であるメタデータを指定するための要素です。 例えば、他のメタデータや<title>(タイトル)、base(基準URL)、<link>(リンク)、<style>(スタイル)、<script>(スクリプト)などでは表現できないようなメタデータを指定します。

<meta>は<head>~</head>内に記述します。 ブラウザは最初にmeta要素を読み込んでからファイルを展開します。

name属性、http-equiv属性、itemprop属性を指定する場合は、併せてcontent属性を指定し内容を記述する必要があります。 またcharset属性を指定したmeta要素は、一つのHTML文書の中に複数配置する事はできません。

なおmeta要素の本質的な意味は、ユーザーや検索エンジンにそのHTML文書が伝えたい内容を明確に、そして簡潔に表現する事です。 meta要素には、こういったHTML文書の抽象的な内容を明示する役割があります。

HTML5での変更点

HTML5のmeta要素では、name属性の値に"application-name"が追加されています。 name="application-name"は、そのwebアプリケーションの名称を記述する値で、webアプリケーション以外にとっては必要のない値となります。

<meta name="application-name" content="Gmail">

書式

  • <meta 属性="値"> ……… 各種メタデータの指定

属性

name="" メタデータの種類名を指定。
  • application-name …… ページが表すwebアプリケーションの名前
  • author …… ページの作者名
  • description …… ページの説明
  • generator …… ページを生成したソフトウェア名
  • keywords …… ページのキーワード
http-equiv="" プラグマ指定子の種類名を指定
content="" メタデータの内容を指定
charset="" 文字コードの指定

charset属性

charset属性では、そのHTML文書の文字エンコーディングの宣言を行います。 文字エンコーディングの指定をする事で、ページが読み込まれた際の文字化けなどを防ぎます。 日本語の文字のエンコードには「utf-8」「shift_jis」「euc-jp」などがありますが、大文字・小文字の区別はされません。

なお文字エンコーディングの指定をする場合は、head要素の一番始めに記述することが推奨されています。 title要素などは、このcharset属性を含んだmeta要素よりも後に記述するようにしましょう。

<meta charset="UTF-8">

http-equiv属性

http-equiv属性は、ユーザーエージェントに対して文書の状態を宣言することができます。 値としては次のようなものがあります。

  • content-language …… コンテンツ言語の指定
  • content-type …… 文字エンコーディング宣言の指定
  • default-style …… デフォルトスタイルの指定
  • refresh …… リフレッシュ(リダイレクト)
content-language

content-languageでは、HTML文書の主言語を指定する事ができます。 言語コードはcontent属性で指定しますが、日本語の場合は「ja」となります。 また主な言語コードは下記のようになります。

アラビア語 ar イタリア語 it
ドイツ語 de 日本語 ja
英語 en 韓国語 ko
スペイン語 es ロシア語 ru
フランス語 fr 中国語 zh
<meta http-equiv="content-language" content="ja">
content-type

content-typeは、文字エンコーディングの宣言として「charset属性」の代替として機能します。 またファイルタイプなども指定する事もでき、HTML文書ならcontent="text/html"と設定します。 なおcharset属性と併せて記述することも可能です。

<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<meta charset="UTF-8 http-equiv="content-type" content="text/html; charset=UTF-8">
content-type

default-styleでは、デフォルトのCSSファイルを指定することができます。 例えばlink要素で複数のCSSファイルを指定した場合に、その中で優先的に使用したいスタイルをこのcontent-typeを含んだmeta要素で指定します。

<meta charset="UTF-8" http-equiv="default-style" content="default.css">
refresh

refreshは、そのHTML文書から別のURLへリダイレクト、再読込する時に指定します。 content属性の値に記述した値(秒)経過後にURL属性で指定したURLへリダイレクトさせる事ができます。 例えば4秒後に「sample.html」へリダイレクトする場合は下記のように記述します。

<meta http-equiv="refresh" content="4" url="sample.html">

<!-- 3分ごとに現在のページを再読み込みしたい場合は下記のように記述 -->
<meta http-equiv="refresh" content="180">

name属性

name属性では、HTML文書全般に関するメタデータを示します。 name属性を利用する時はcontent属性とともに使用し、name属性でメタデータの種類を、content属性でその内容を指定します。

作者名・著作権表示の指定

name="author"ではHTML文書の作者名を、name="copyright"では著作権表示などを示すことができます。

<meta name="author" content="作者名">
<meta name="copyright" content="著作権表示">
keywords・description

name="keywords"では、そのHTML文書の内容をキーワードで示すことができます。 name="description"では、そのHTML文書の説明を記述することができます。

この二つはHTML5でもこれまで通りにname属性で指定し、content属性でその内容を記述します。 name="keywords"で複数のキーワードを指定したい場合はカンマ「,」で区切って指定します。

またname="description"の内容は検索エンジンの検索結果で表示されるため、閲覧者を誘導する効果を持っているので内容は慎重に考慮しましょう。

<meta name="keywords" content="キーワード1,キーワード2">
<meta name="description" content="文書の説明">
インデックスさせない

該当のURLを検索エンジンにインデックスさせたくない場合は「name="robots" content="noindex,nofollow"」と指定します。 「noindex」で検索エンジンのロボット(クローラー)は該当のURLをインデックスしなくなり、「nofollow」でページ内のリンクを参照しなくなります。

<meta name="robots" content="noindex,nofollow">
generator

name属性のgeneratorでは、HTML文書の生成に使用したソフトウェアを記述します。 ただしこれは自動生成したページに対して、そのソフトウェアがページを出力する際に挿入するものです。 手書きで作成した文書に対して記述するものではありませんので、注意して下さい。

<meta name="generator" content="エディタ名">

使用した時の例

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="keywords" content="キーワード,キーワード2,キーワード3">
 <meta name="description" content="この部分が検索結果に表示">
 <title>タイトル</title>
</head>
<body>本文</body>
</html>

対応ブラウザなどのデータ

形式 <meta name="" content="">
<meta http-equiv="" content="">
カテゴリ メタデータコンテンツ
親要素 head,head要素内のnoscript 子要素 なし
開始タグ 必須 終了タグ なし
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~