meta要素

Home>HTML>要素リファレンス>meta

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

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

meta要素の役割

meta要素は、そのファイルのメタデータを示す要素です。
body要素よりも前、head要素の中に配置され、ブラウザでは視覚的に表示されません。
meta要素は、http-equivまたはname属性で指定したプロパティの値をcontent属性で示す、という使い方をします。

meta要素に設定できる属性

属性名 意味
content メタデータのプロパティの値を入力。name属性に指定したプロパティの値を入力する。
dir 文字表記の方向。左から右(ltr)と、右から左(rtl)を指定する。通常はltrなので、右から左へ表記する言語を使わないのであれば、指定しなくてよい。
http-equiv HTTPヘッダのプロパティを指定するときに使用。
lang 言語コード。日本語、英語といった言語を指定する。
name メタデータのプロパティの名前。
scheme プロパティの値の形式を指定。

meta要素の使い方

http-equiv属性を使った方法

文字コードと文書形式の指定

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

そのファイルの文字コードと、ファイル形式を明示します。上記はUTF8で書かれたHTMLファイルの場合です。

charsetに指定できる文字コードは、以下のものです。

  • EUC-JP
  • Shift_JIS
  • utf-8

他の言語のMIMEタイプを指定

スクリプトのMIMEタイプ

<meta http-equiv="Content-Script-Type" content="text/javascript">

ファイル内に直接記述しているスクリプトや、外部スクリプトファイルを読み込む場合には、予めそのスクリプトが何であるかを記しておきます。上記はJavaScriptを使っている場合の記述です。

スタイルシートのMIMEタイプ

<meta http-equiv="Content-Style-Type" content="text/css">

スタイルシートを、直接ファイル内に記述したり外部ファイルを読み込む場合には、スタイルシートを使用していることを記します。

ファイルを再読み込みさせる

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

refreshを指定すると、そのファイルを再度読み込ませます。content属性の数値は秒数を指定します。上記の場合には、5秒おきにそのファイルが再読み込みされます。

ファイルをリダイレクトする

<meta http-equiv="refresh" content="5; url=http://www.yahoo.co.jp/">

再読み込みの指定は、秒数の後に「;」で区切ってURLを記述することで、再読み込みの際にそのURLを読み込ませることができます。一般的にリダイレクトと呼ばれる手法ですが、この秒数を0秒など極端に少ない値にすると、SEOスパムと見なされるので注意しましょう。

上記の例では、5秒後にYahoo!Japanのページが読み込まれます。

キャッシュをコントロールする

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

ブラウザは、一度ウェブページを読み込むと、次回の表示に時間をかけないように、一時的にハードディスクに保存する機能があります。このデータをキャッシュと呼びます。キャッシュファイルがあると、次に同じページを読み込むときに時間を短縮できるため、表示がすばやくなる反面、HDDにある過去のデータを表示しているだけなので、そのページが更新されていても反映されない場合があります。

そのため、キャッシュをさせないで常に最新のページを表示させたい場合には、以上の指定をします。
Cache-Controlは、HTTP1.1準拠のブラウザ対応、pragmaはHTTP1.0準拠のブラウザに対応した指定方法です。

<meta http-equiv="Expires" content="Thu, 1 Apr 2010 12:00:00 GMT">

Expiresを指定すると、キャッシュを保存する期限を指定できます。contentの値はグリニッジ標準時または、秒数で指定します。
秒数で指定した場合、「何秒後」に削除する、という動作になります。

name属性を使った方法

name属性には様々なプロパティを指定できます。
以下の表は、いずれも<meta name="プロパティ名" content="値">で記します。

プロパティ名 重要度
author そのファイルの著者名。
classification そのファイルの内容が属するカテゴリ。自由に設定可能。
copyright そのファイルの著作権の帰属。「©NK」のような表記のこと。
coverage そのページ内で紹介しているサービスや商品の提供対象。
creation date そのファイルが含まれるサイトの開設日。
date そのファイルの作成日・更新日。
description そのファイルの要約を100文字程度で説明。h1要素やh2要素などの重要な語句を含めるとよい。検索結果の要約文に採用される場合がある。
distribution ほかのMETA要素の適用範囲。外部か内部かを示す。
generator そのファイルを作成したソフト名。
keywords そのファイルに関連するキーワード。そのページで使われている重要語句をカンマ(,)で区切って10程度を指定する。スパムが横行したためGoogleでは効果がないいわれている。
language デフォルトで使用される言語を指定。
rating そのファイルの対象年齢層。
robots 検索エンジンのクローラーの動作を制御する。
targeted geographic area そのファイルの対象エリア。

classificationプロパティに設定できる値

カテゴリとは、そのファイルの内容が属すると思われるグループを指定する、という意味です。
カテゴリ名は自由に設定することができます。複数のカテゴリを指定する場合には「,」(半角カンマ)で区切ります。
どのようなカテゴリにした方がいいのか、悩んだ場合には、Yahoo!Japanのカテゴリなど、検索エンジンのカテゴリを参考にするといいでしょう。

coverageプロパティに設定できる値

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

distribution

global 外部に対して指定していることを示す。
local 内部に対して指定していることを示す。

ratingプロパティに設定できる値

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

robotsプロパティに設定できる値

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と同義。

targeted geographic areaプロパティに設定できる値

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

※このほかにも国名を指定できますが、日本であれば以上の3つのうちのどれかでいいでしょう。

scheme属性

name属性とcontent属性の関連を定義づけする属性です。
name属性は、自由に名前を指定することが可能になっていますが、その意味をブラウザが理解するには、何を意味するプロパティなのかを説明しなければなりません。その際に使用するのがscheme属性です。ただし、scheme属性が有効であるかどうかは不明です。

<meta name="aaa" content="2010-04-10" scheme="year-month-day">

上記の例では、aaaというプロパティはの値である2010-04-10は、年月日を表していることを示しています。

関連リンク

よく読まれている記事

UpDate:2010-4-21