meta要素
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は、年月日を表していることを示しています。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-4-21