メタタグについて

メタタグとは

<meta> は、HTMLで<head> 部分に記述される、そのウェブページ(以下ページ)の情報(データ)を定義するタグ。メタとは、「メタデータ」=「データについてのデータ」にあるように、それに関するそれ、というような意味があります。

今回は、この <meta> に定義できるデータとその値について記述してみることにします。

メタに置かれる属性

http-equiv 属性
そのページの基準となる値を示すために使われる属性,HTTPヘッダの付加情報にもなる
name 属性
情報の名前を定める属性,自由に定義できる
content 属性
http-equiv 属性とname属性で指定した値の、データを定義する属性
scheme 属性
content 属性のための補足情報を定義できる属性

なお、今のところ charset は属性ではありません。とはいえ、HTML5では、属性とされるそうですが。

メタに定義できる情報(データ)

以下<meta>で定義できるデータと、その記述法。

文字コードの指定(HTML)

Shift-JIS
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
EUC-JP
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
UTF-8
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
JIS
<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">

文字コードの指定(XHTML)

Shift-JIS
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" />
EUC-JP
<meta http-equiv="Content-Type" content="text/html;charset=EUC-JP" />
UTF-8
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
JIS
<meta http-equiv="Content-Type" content="text/html;charset=ISO-2022-JP" />

XHTMLでは、先頭のXML宣言の部分でも、文字コードを記述しましょう。また、ファイル自体の文字コードにも気を付けましょう。文字化けの原因にもなりますので。

XHTMLでは値とするMIMEタイプを、application/xhtml+xml での指定が推奨されています。この場合 meta の http-equiv 属性が非推奨となり、MIMEタイプや文字コードの指定はHTTPレスポンスヘッダでするべきとされています。(meta で指定しただけだと text/html として解釈されます。)

スタイルシート言語の指定

下記の記述は、スタイルシート言語をCSSと指定するものです。他言語のスタイルシートを適用する場合は、 content の値の部分を変更しましょう。

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

スクリプト言語の指定

スクリプト言語を指定するものです。こちらは JavaScript を指定しています。

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

HTMLの自動更新、または移動

下記の refresh は、ページを秒数後に自動更新する場合に用いられます。また、移動先のURLを指定することで、自動的にそのURLに移動させることもできます。

  • <meta http-equiv="refresh" content="秒数;url=移動先" />

なお、 refresh 自体がW3Cで推奨されていないため、使用はあまり勧められません。

ページのキャッシュ制御

以下の記述は、どちらもブラウザによるページのキャッシュを、無効とさせる指示です。有効にしたい場合、このメタタグ自体、記述しなくていいです。

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

値を no-store にする事で、キャッシュは有効となりますが、保存はされません。

キャッシュの有効期限

ページキャッシュの有効期限を指定できます。日時(GMT(グリニッジ標準時)で指定)または秒数の経過(例(1日):"max-age=86400")後に消去されるものです。

  • <meta http-equiv="Cache-Control" content="日時または秒数" />
  • <meta http-equiv="expires" content="日時または秒数" />

サイト内関連ページ : .htaccess でキャッシュを制御する方法

ページの説明

ページの説明・概要となる記述を指定します。この部分は、「google」の検索結果に載ることもあります。

  • <meta name="description" content="説明文の内容" />

サイト内関連ページ : descriptionメタタグを設定しよう

ページのキーワード

ページのキーワード・手掛かりとなる単語を指定するものです。

  • <meta name="keywords" content="キーワード" />

この keywords と上記の description は、検索エンジン対策(SEO)に用いられることが多いようですが、効果のほどはわかりません。

とはいえ、ページの情報を正確に記述することにデメリットがあるわけではないので、記述しておくのもよいでしょう。(ただし、スパム扱いされない程度にですが。)

検索ロボットの巡回に対する指定

検索ロボットの巡回に対する、指示を設定できます。

  • <meta name="robots" content="指示" />

以下"content"の中に指定できる値と、その内容です。

index
ページ情報の登録を許可する
follow
ページからのリンク先への移動を許可する
all
登録、リンク移動をともに許可とする
noindex
ページ情報の登録を不許可とする
nofollw
ページからのリンク先への移動を不許可とする
none
登録、リンク移動をともに不許可とする

robots.txt でサイトごと指定することもできます。

サイト内関連ページ : robots.txtを効果的に設定しよう

ページの作成者

ページの作成者を明記する場合に使用します。

  • <meta name="author" content="作成者名" />

著作権情報

著作権情報を記述するものです。

  • <meta name="copyright" content="著作権情報" />

作成に使用したソフト

そのページを作成するために使用した、ソフトウェアの情報を記述するものです。

  • <meta name="generator" content="ソフトウェア名" />

ページが属するカテゴリの指定

そのページが、どんなカテゴリに属するかを指定できます。値には、business や general , computers などを記述するもので、もちろん日本語でも可能です。

  • <meta name="classification" content="カテゴリ" />

ページの更新日時

更新日時を記述できます。国(または人)によって、日時の表し方が異なるので、scheme 属性で年月日や日時の形式を定めることができます。

  • <meta name="date" content="日時" scheme="日時の形式" />

とりあえずここまで。まだ有用なものがあったら、こっそり追加します。なお、name などの値の頭文字が、大文字だったり小文字だったりしてますが、別にどちらでも問題ないようです。

スポンサードリンク

inserted by FC2 system