META要素

Home>HTML>META要素

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

META要素とは、HTML文書に情報を付加するときに記述するものです。
META要素には、文書の著作者や制作年月日、文書に関するキーワード、その文書内で使われている文字コード、別文書へのジャンプなどを設定することができます。
META要素に書かれた内容は、閲覧時に表示される本文には表示されません。

メタデータとは

メタ(=meta)とは、「高次の」といった意味です。
メタデータとは、データそのものではなく、データのためのデータのことをさします。そのデータに付随する情報とは、文書でいうならば、本文ではなく、著者や作成日時ということになります。

HTML文書においてのメタデータはMETA要素に記述します。

META要素の記述

META要素は、<head>~</head>の間に記述します。
META要素のタグには、閉じるタグ(</meta>)がありません。

文書の情報を記述

著作者・著作権

その文書の著作者名と、著作権表示をします。

著作者の名前を示す <meta name="author" content="著作者名">
著作権の帰属を示す <meta name="copyright" content="著作権表示">
連絡先 <meta name="Reply-to" content="メールアドレス">
電話番号 <meta name="tel" scheme="電話番号">

著作権とは、「©Chosakusha 2009」という表記のことです。
正しい著作権表記についてのコラムはこちらをご覧下さい。

作成に使用したソフトウェア

<meta name="generator" content="ソフト名">

この表記は必要ないと思います。この表示によって、そのページを作成したソフトウェアを示すことはソフトウェアの宣伝にはなりますが、自分のウェブサイトの宣伝やSEO等には効果はありません。
ウェブサイトの作成ソフトを使うと、自動的にページに埋め込まれます。

文書内容の要約

<meta name="description" content="紹介文">

その文書の概要を約100字以内で簡単に説明します。検索エンジンの検索結果を表示する画面で、その文書を示す要約文として採用されることがあります。
この説明文によって、クリック率に影響が出るほど重要な役割を果たしています。

文書に関するキーワード

<meta name="keywords" content="キーワード1,キーワード2">

その文書に関連するキーワードを記述します。ここに記述したキーワードは、以前は検索エンジンがその文書を判断する材料として使われていましたが、検索エンジンスパムが横行するようになってからは、あまり重視されなくなったようです。
キーワードとキーワードの間は、「,」(半角カンマ)で区切ります。
ページ内で使われている言葉のみを使い、長くても全角で70文字以内にまとめましょう。また、同じキーワードをくり返すことは避けましょう。

日付の明示

開設日 <meta name="creation date" content="日付">
作成日・更新日 <meta name="Date" content="日付">
キャッシュの有効期限 <meta http-equiv="Expires" content="日付">

開設日(creation date)

ウェブサイトの開設日を示します。
日付は、「月 日, 年」で示します。例えば、2009年の11月1日であれば、「Nov 1, 2009」となります。

作成日・更新日(Date)

そのページの作成日または更新日を示します。
日付は、「月 日, 年」で示します。例えば2009年の11月1日であれば、「Nov 1, 2009」となります。

キャッシュの有効期限(Expires)

検索エンジンのキャッシュから消す日付を指定できます。この期日をすぎると検索エンジンのキャッシュから削除されます。通常は、キャッシュから削除させる必要はないと思います。

日付は、「曜日, 日付 月 年 時刻 時計」で指定します。例えば、2009年11月1日(日)16時半であれば、「Sun, 1 Nov 2009 16:30:00 GMT」となります。

検索エンジンの巡回

<meta name="robots" content="index,follow">

ロボット型検索エンジンのクローラーが、文書内を巡回することの許可・拒否を設定します。content="~"の「~」の部分に、指定した値によって動作が変わります。値は複数設定可能で、それぞれの間は「,」(半角カンマ)で区切ります。
指定がない場合は、「このページを登録し、リンク先を巡回する」という設定がされます(この設定は、上記の例文と同じです)。

index この記載のあるページを検索エンジンに登録する。
noindex この記載のあるページを検索エンジンに登録しない。
follow この記載のあるページ内のリンク先を巡回する。
nofollow この記載のあるページ内のリンク先を巡回しない。
noimageindex この記載のあるページ内の画像を検索対象からはずす。
noimageclick この記載のあるページ内の画像へのリンクをさせない。廃止。
nomediaindex LiveSearch検索において、プレビューさせない。廃止。
nothumbnailindex Girafaのクローラーを拒否する。
noarchive 検索エンジンにこのページをキャッシュさせない。
nocache
noserve 用途不明。
noinclude 用途不明。
noodp Open Directory Projectに記載されているタイトル・紹介文を検索結果に引用しない。
noydir Yahoo!カテゴリに記載されているタイトル・紹介文を検索結果に引用しない。
nosnippet 検索結果に紹介文を表示しない。
nopreview 海外版Bingにおいて、ドキュメントプレビューをさせない。
notranslate 翻訳(Google)をさせない。
all すべて許可する。
none noindex,nofollowと同義。

これらの値のうち共通で定義されていたのは、noindex、nofollowだけですが、検索エンジンの拡張仕様としてその他の定義が追加されました。したがって、noindex,nofollow以外は、他の検索エンジンでは意味をなさない値もあります。

なお、Googleだけ、Yahoo!だけ、という個別の検索エンジンに対する指定もできます。以下の値をname属性の値に設定します。

googlebot Googleのクローラーにのみ適用。
slurp Yahoo!のクローラーにのみ適用。

言語の指定

使用言語 <meta name="language" content="Japanese">

デフォルトで使用される言語を指定します。使用言語の場合、日本語なので「Japanese」とします。

対象

閲覧対象年齢層 <meta name="rating" content="年齢層">
META要素の適用範囲 <meta name="distribution" content="範囲">
サービス提供対象 <meta name="coverage" content="範囲">
対象エリア <meta name="Targeted Geographic Area" content="エリア">
カテゴリ指定 <meta name="classification" content="カテゴリ">

閲覧対象年齢層の値(rating)

general 全年齢を対象とする。
adult 成人を対象とする。
child 未成年を対象とする。
safe for kids 子どもが見ても問題ないことを意味する。

META要素の適用範囲(distribution)

ほかのMETA要素が、外部に対しての指定なのか、内部に対しての指定なのかを示します。

global 外部に対して指定している。
local 内部に対して指定している。

サービス提供対象(coverage)

ウェブサイトで紹介しているサービスや商品を提供する対象範囲(国)を指定します。

worldwide 世界各国を提供対象とする。
Asia アジア全域を提供対象とする。
japan 日本国内を提供対象とする。

対象エリア(Targeted Geographic Area)

そのページが対象としている地域を示します。

Worldwide 世界各国を対象とする。
Asia アジア全域を対象とする。
Japan 日本国内を対象とする。

カテゴリ指定(classification)

カテゴリは自由に表記することが可能で、複数カテゴリに属する場合は、「,」(半角カンマ)で区切ります。keywordsとの差別化を図るために、Yahoo!カテゴリやOpen Directoryのカテゴリを参考にして、自分のウェブサイトがどこに属するかを考えて決めるといいでしょう。

HTTPヘッダを記述

文字コードの指定

<meta http-equiv="Content-Type" content="text/html; charset=文字コード">

予めそのページで使われている文字コードを指定しておくことで、文字化けを防ぐことができます。文字コードには以下のものがあります。

Shift_JIS 日本語文字コードの一つ。WindowsやMacOSの標準文字コードとして普及。
EUC-JP UNIXにおいて主に使われる日本語文字コード。
ISO-2022-JP JIS規格によって規定された日本語文字コード。主に電子メールに使われる。
UTF-8 全ての言語を扱えるようにしたUnicodeを8ビットに変換したもの。

なお、文字コードを指定するときは、一番最初に記述します。先に、<title>要素や、他のMETA要素を記述してしまうと、ブラウザがそれを読み込んで日本語が使われていたらShift_JISである、というように自動的に認識してしまう場合があります。

スタイルシートやスクリプトの言語を明示する

HTML文書内で、スタイルシートやスクリプトを使用する場合には、どの言語を使っているかを示す必要があります(明示しなくても大抵のブラウザでは認識しますが、正しいHTML文書書式によると指定します)。

スタイルシート <meta http-equiv="content-style-type" content="text/css">
スクリプト <meta http-equiv="content-script-type" content="text/javascript">

自動的にページを読み込む

同一ページを再読み込みする <meta http-equiv="refresh" content="時間">
別ページにジャンプする <meta http-equiv="refresh" content="時間; url=URL">

同じ文書を一定時間後に再読み込みしたり、別の文書情報に飛ばしたりすることができます。時間は秒数になります。

アクセス時に最新のページを読み込む

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

そのページをブラウザにキャッシュさせないようにします。pragmaとCache-Controlの違いは、ブラウザがHTTP1.0準拠であればpragma、HTTP1.1準拠であればCache-Controlを指定します。

InternetExplorerのレンダリングモードを指定する

<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7">

InternetExplorerは、バージョン7までは基本的にはHTMLの文法に沿った表示をしているけれど、独自の仕様によって表示させる部分もあり、これが他のブラウザで見たときにレイアウトがずれる原因となっていました。

IE8になってからは、よりウェブの標準技術に準拠して表示するようになったため、今までIE7できちんと表示できるように調整されていたウェブサイトは、崩れて見える場合があります。IE7できちんと表示するように組まれていたウェブサイトは、全て作り直ししなくてはならなくなります。
しかし、そのような手間をかけたくない場合、meta要素でレンダリングモードを指定してやると、今までと同じように表示させることができます。

IE=emulateIE7 DOCTYPEによりIE7又はIE5モードで描画する
IE=edge 最新のバージョンで描画する
IE=5 IE5モードで描画する
IE=7 IE7モードで描画する
IE=8 IE8モードで描画する

ページ切り替え時に演出する

<meta http-equiv="発生時期" content="RevealTrans(Duration=動作時間,Transition=効果の種類)">

ページが表示されたり移動するときに、切り替わる画面に演出を加えます。しかし、こういった演出を望んでいる閲覧者はほぼいないと思っていいでしょう。閲覧者のストレスとなるような効果は使わない方がいいと思います。

発生時期

Page-Exit 次のページに移動するときに発動する。
Page-Enter このページを読み込むときに発動する。
Site-Exit ほかのサイトへ移動するときに発動する。
Site-Enter ほかのサイトから移動してきたときに発動する。

動作時間

動作時間は、秒数で指定できます。短い場合には、演出を実感する前に終わってしまいますが、長く設定すると閲覧者のストレスになります。

効果の種類

効果の種類には0~23までの値を指定します。

0 外側から内側に四角形状に画面が切り替わります。
1 内側から外側に四角形状に画面が切り替わります。
2 外側から内側に円形状に画面が切り替わります。
3 内側から外側に円形状に画面が切り替わります。
4 下から上に画面が切り替わります。
5 上から下に画面が切り替わります。
6 左から右に画面が切り替わります。
7 右から左に画面が切り替わります。
8 縦じま模様に画面が切り替わります。
9 横じま模様に画面が切り替わります。
10 左から右に格子模様に画面が切り替わります。
11 上から下に格子模様に画面が切り替わります。
12 細かいドットでノイズが入るように画面が切り替わります。
13 左右両端から中央に向かって画面が切り替わります。
14 中央から左右両端に向かって画面が切り替わります。
15 上下両端から中央に向かって画面が切り替わります。
16 中央から上下両端に向かって画面が切り替わります。
17 右上から左下に向かって画面が切り替わります。
18 右下から左上に向かって画面が切り替わります。
19 左上から右下に向かって画面が切り替わります。
20 左下から右上に向かって画面が切り替わります。
21 細い横じま模様で画面が切り替わります。
22 細い縦じま模様で画面が切り替わります。
23 上記0~22までのいずれかをランダムに実行します。

scheme属性

scheme属性は、name属性とcontent属性の値の書式をを示すものです。例えば、<meta name="Date" content="09-11-1">とした場合、Dateに対応するcontentの値は正式なものではないために、意味が通らないものになってしまいますが、sheme="year-month-date"という属性を付け加えることで、日付であることを示すことができます。

ただし、ブラウザによっての対応は不明で、あまり使われることはありません。

META要素の取捨選択

ここまで、多くのMETA要素の設定方法を紹介してきましたが、中には必要のないものも含まれているので、そのすべてを設定する必要はありません。
指定することに意味があると思われるものを以下にリストアップしました。

属性=値 理由
name="description" 検索エンジンの結果表示のときに使われるため。
name="keywords" あまり参考にされていないといわれているが、一応設定すべき。
name="robots" 検索エンジンに登録されたくない場合に使用。
name="language" 使用言語をブラウザに対して明確にする。
name="classification" あまりみかけないが、カテゴリの指定はSEOに役立つ可能性がある。
http-equiv="content-style-type" スタイルシートのMIMEタイプを明確にする。
http-equiv="content-script-type" スクリプトのMIMEタイプを明確にする。
http-equiv="X-UA-Compatible" InternetExplorerの表示崩れを防ぐのに使用する。
http-equiv="Content-Type" 文字化けを防ぐために指定。
http-equiv="refresh" URL変更をした場合にジャンプさせるときに使う。

※なお、http-equiv属性は、XHTML1.1では認識されません。

よく読まれている記事

関連リンク

よく読まれている記事

UpDate:2009-11-6