トップページ  > HTML5  > <meta>

★HTML5タグリファレンス

<meta> …… その文書に関する情報(メタデータ)を指定する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6 Safari3Safari4Safari5 Opera6Opera7Opera8Opera9Opera10

<meta>タグは、その文書に関する情報(メタデータ)を指定する際に使用します。 メタデータとは、“情報に関する情報”のことですが、HTMLの仕様では“その文書に関する様々な情報”を意味します。

HTML文書のメタデータは<head>~</head>の中に、 <title>(タイトル)・ <base>(基準URL)・ <link>(リンク情報)・ <style>(スタイルシート)・ <script>(スクリプト) などのタグで指定しますが、 これらのタグで表現できないその他の様々なメタデータは<meta>で表します。

<meta>タグは<head>~</head>の中に配置します。 meta要素を指定する際には、 name属性、http-equiv属性、charset属性のうち、少なくとも一つを指定する必要があります。 また、name属性、http-equiv属性を指定する際には、必ずcontent属性とセットで利用します。 セットで利用することでメタデータの定義(名前)とその内容が関連付けられます。

メタデータには様々なものがありますが、以下に使用頻度の高いメタデータの指定方法を紹介します。

■charset属性で文字エンコーディングを指定

文字エンコーディングの指定

charset属性は、文書の文字エンコーディングを指定する際に使用します。 日本語の文字エンコーディングの値としては、"utf-8"・"shift_jis"・"euc-jp"などが挙げられます。大文字と小文字の違いは区別されません。 charset属性を指定したmeta要素は、一つの文書に一つだけしか配置できません。 尚、XML文書にmeta要素のcharset属性を指定する場合には、値には"utf-8"を指定します。

meta要素で文字エンコーディングを指定する場合、HTML 4では以下のように記述していました。

HTML5でも上の記述方法のままで問題ありませんが、charset属性を使用すれば以下のように短くすることができます。

<meta charset="UTF-8">

文字エンコーディングを指定しないと、例えば、日本語で作成されたウェブページに英語版のブラウザでアクセスした場合などに文字化けが起きることがあります。 必須ではありませんが、できるだけ指定したほうが良いでしょう。

■name属性でメタデータ名を定義、content属性でその内容を指定

検索エンジン向けのキーワード・説明・インデックスの指定

name="keywords"は、そのHTML文書がどのような内容を示したものかキーワードで指定します。 複数のキーワードを指定する場合には、半角カンマ(,)区切りで指定します。

<meta name="keywords" content="HTML,CSS,JavaScript,特殊文字,リファレンス">

name="description"は、その文書の説明を短文で指定します。 ここで指定する値は、Googleの検索結果に表示されるなど、多くの検索エンジンで利用されるので慎重に言葉を選んでください。

<meta name="description" content="HTML・CSS等の早見表的リファレンス">

また、name="robots" content="noindex,nofollow"は、検索エンジンのクローラ(ロボット)に対して URLをインデックスしないように(noindex)、 文書内のリンクをたどらないように(nofollow)知らせるための指定です。 この指定はすべての検索エンジンに対して有効ではなく、 この情報を参照する検索エンジンに対してのみ有効となる指定なので注意してください。 検索エンジン対策として一般的に利用されていますが、W3Cの仕様には記載されていません。

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

文書の作者の指定

name="author"は、その文書の作者を示す際に指定します。

<meta name="author" content="HTMQ">

文書作成に使用したツールやソフトウェアの指定

name="generator"は、文書作成に使用したツールやソフトウェアを示すものです。 これは、ツールやソフトウェアを使用してウェブページが自動生成された際に、 そのツール自身がウェブページを出力する際にhead要素内に挿入するものです。 手作りしたウェブページに使用するものではないので注意してください。

<meta name="generator" content="Frontweaver 8.2">

■http-equiv属性を指定すると、meta要素がプラグマ指示子となる

meta要素にhttp-equiv属性を指定すると、そのmeta要素はプラグマ指示子(pragma directive)となります。 プラグマ指示子とは“実行命令を指示するもの”のことで、ユーザーエージェント(ブラウザ)に対して文書の“状態・挙動”を指示する役割があります。 http-equiv属性の値には、以下の4つのキーワードを指定することができます。

コンテンツ言語の指定

http-equiv="content-language"は、文書の主言語を指定します。 言語はcontent属性で指定します。例えば、日本語ならcontent="ja"、英語ならcontent="en"となります。 その他の主な言語には、 zh(中国語)、ko(韓国語)、de(ドイツ語)、fr(フランス語)、it(イタリア語)、es(スペイン語)、ru(ロシア語)、ar(アラビア語) などがあります。

<meta http-equiv="content-language" content="ja">

ファイルタイプや文字エンコーディングを指定をする

http-equiv="content-type"は、ファイルタイプや文字エンコーディングを指定します。 ファイルタイプを指定する場合には、例えばHTML文書ならcontent="text/html"と指定します。 また、文字エンコーディングを指定すれば、charset属性の代わりとして機能します。

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

デフォルトスタイルの指定

http-equiv="default-style"は、デフォルトスタイルを指定します。 具体的には、例えば、content="default.css"のように記述して、デフォルトスタイルとなるCSSファイルのURIを指定します。 この指定をすると、link要素で複数のCSSファイルを指定している場合に、 その中で優先して利用するCSSファイルをブラウザに伝えることができます。

<meta http-equiv="default-style" content="default.css">

リダイレクト・再読み込みの指定

http-equiv="refresh"は、別のURLへのリダイレクトや現在ページの再読み込みを指定します。 content属性の値には何秒後にリフレッシュするかと、 ジャンプ先のURLを指定します。 例えば、5秒後にnewpage.htmlというページにリダイレクトする場合には以下のように記述します。

<meta http-equiv="refresh" content="5; url=newpage.html">

また、5分ごとに現在のページを再読み込みする場合には以下のように記述します。

<meta http-equiv="refresh" content="300">

※めも:w3.orgによれば、 meta要素によるrefreshを多用しているウェブサイトは、検索エンジンのリストから削除されることがあるようです。 それを避けたい場合には、代わりに301リダイレクトを使用すると良いとのことです。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML5では、name属性の値として"application-name"が追加されています。 name="application-name"は、ウェブアプリケーションの名前を示すものです。 これはウェブアプリケーションを作成する場合に利用する値であり、 ページがウェブアプリケーションでない場合には使用してはいけません。 また、使用する場合には一つの文書に一つだけ指定します。

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

■属性

name属性
メタデータの名前を指定
http-equiv属性
プラグマ指示子を指定
content属性
メタデータの値などを指定
charset属性
HTML文書の文字エンコーディングを指定

■使用例

HTMLソース

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<meta name="keywords" content="HTML,CSS,JavaScript,特殊文字,リファレンス">
<meta name="description" content="HTML・CSS等の早見表的リファレンス">
<meta name="robots" content="noindex,nofollow">
<meta name="author" content="HTMQ">
<title>HTMLクイックリファレンス</title>
</head>
<body>
<p>HTML・CSSについて紹介します。</p>
</body>
</html>
▲ページ先頭へ
トップページ  > HTML5  > <meta>
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ