meta要素[HTML5]

<meta>…… その文書に関する情報(メタデータ)を指定する

<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では以下のように記述していました。
[html]<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">[/html]

HTML5でも上の記述方法のままで問題ありませんが、charset属性を使用すれば以下のように短くすることができます。
[html]<meta charset="UTF-8">[/html]

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

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

検索エンジン向けのキーワード・説明・インデックスの指定
name=”keywords”は、そのHTML文書がどのような内容を示したものかキーワードで指定します。 複数のキーワードを指定する場合には、半角カンマ(,)区切りで指定します。

[html]<meta name="keywords" content="アドワークス,ホームページ作成">[/html]

name=”description”は、その文書の説明を短文で指定します。 ここで指定する値は、Googleの検索結果に表示されるなど、多くの検索エンジンで利用されるので慎重に言葉を選んでください。
[html]<meta name="description" content="アドワークスでは無料見積もり実施中!!">[/html]

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

文書の作者・著作権情報の指定
name=”author”は、その文書の作者を示す際に指定します。 また、name=”copyright”は、著作権に関する情報を指定します。
[html]<meta name="author" content="adworks">
<meta name="copyright" content="Copyright adworks">[/html]

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

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

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

  • content-language …… コンテンツ言語の指定
  • content-type …… ファイルタイプや文字エンコーディングの指定
  • default-style …… デフォルトスタイルの指定
  • refresh …… リダイレクト・再読み込みの指定

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

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

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

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

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

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

参考:http://www.htmq.com/html5/meta.shtml

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート   パーマリンク