meta要素
meta要素は、title要素、base要素、link要素、style要素、script要素を用いて表現することができない各種のメタデータを表します。
charset属性では文字エンコーディング宣言を表し、name属性でドキュメントレベルのメタデータを表すことができます。また、http-equiv属性でプラグマ・ディレクティブの指定を行うことができます。
meta要素にはname属性、http-equiv属性、charset属性のうちの1つを必ず指定する必要があり、name属性、http-equiv属性のいずれかを指定する場合は、content属性を指定しメタデータの内容と名前を関連付ける必要があります。
charset属性(文字エンコーディング宣言)
ドキュメントの文字コードをcharset属性で指定し、文字エンコーディング宣言を表します。値となる文字コードはUTF-8を指定します。また、文字コードは、ほかのメタデータを記述する前に記述します。
なお、文字コードを指定しているhttp-equiv属性を持つmeta要素と、charset属性持つmeta要素の両方をドキュメントに記述することはできませんので従来の文字コードの指定形式は代替扱いとなりました。
例)
<meta charset="UTF-8">
余談ですが、文字コードにUTF-8を指定し文字化けが起きる場合は、HTMLファイルがUTF-8で保存されていない可能性があります。エディタの保存時のオプションや、エディタ自体の保存時の設定などでUTF-8で保存されているかどうかを確認し、Shift-JISなどほかの文字コードが指定されている場合はエディタでUTF-8にセットし上書き保存して下さい。
なお、エディタの設定でUTF-8とUTF-8Nがある場合は、UTF-8Nを選択して下さい。
name属性とcontent属性
name属性には標準メタデータ名やキーワードに分類されているメタデータ名を指定し、content属性にはメタデータ名の内容をテキストで記述します。
標準メタデータ名
Author
ドキュメントの著者名を自由形式の文字列で指定します。
例)
<meta name="Author" content="著者情報">
Description
ページに関連する説明文を自由形式の文字列で指定します。
例)
<meta name="Description" content="説明文">
Keywords
ページに関連するキーワードを指定します。キーワードは、カンマ( , )で区切ります。
なお、検索エンジンは、これらのキーワードを考慮しないことがあります。スパムとして検索エンジンの結果に誤解を与えるといった行為もあり、歴史的に信頼して使えるものではなく、ユーザーにとっても役に立たなかった機能であったからです。
例)
<meta name="Keywords" content="キーワード,キーワード1,キーワード2">
generator
ページを作成したパッケージソフトウェア名などを自由形式の文字列で指定します。ただし、この指定はページを生成したツールがそのページを出力する際に挿入するメタデータなのでテキストエディタでマークアップした場合は記述する必要はありません。
例)
<meta name="generator" content="Frontweaver 8.2">
application-name
ページが表すウェブ・アプリケーションの名前を自由形式の文字列で指定します。ただし、この指定はページがウェブ・アプリケーションでない場合は使用することはできません。
例)
<meta name="application-name" content="ウェブア・プリケーション名">
そのほかのメタデータ名(キーワード)
robots
クロールとインデックス登録を行う検索エンジンの動作を指定します。
noindexは検索を禁止、nofollowはリンク先参照を禁止します。なお、index,followは、ほとんどの検索エンジンのデフォルト値がallなどindex,followと同じ値なのでこれらを指定する必要はありません。
例)
<meta name="robots" content="noindex,nofollow">
※お役立ち資料のリンク:Googleがサポートしているメタタグ
そのほかのキーワード名はWHATWG WikiのMetaExtensionsを参照して下さい。
http-equiv属性(プラグマ・ディレクティブ)
http-equiv属性にはブラウザなどユーザー・エージェントに対してドキュメントの状態や挙動を指示するキーワードを記述します。
なお、以前のHTMLでは、この属性で指定するメタ・データはHTTPサーバーによって使用されることを想定していましたが、HTML5では、ユーザー・エージェントが使用するプラグマ・ディレクティブとしてのみ機能します。
キーワード
refresh
任意の時間を指定したリロード(再読み込み)とリダイレクトを指定します。時間は秒数で指定します。
リロード 例)refreshを指定したページを300秒(5分)ごとに再読み込みを行います。
<meta http-equiv="Refresh" content="300">
リダイレクト 例)refreshを指定したページから20秒後に指定したURLにジャンプします。
<meta http-equiv="Refresh" content="20; URL=http://homepagelecture.web.fc2.com/">
※お役立ち資料リンク:ページのURLの変更と301リダイレクトの使用
default-style
優先スタイルシートや代替スタイルシートなど複数のスタイルシートファイルを対応ブラウザで選択できるようにページに設定してある場合に優先して適用するスタイルシートファイルを指定します。
例)
<meta http-equiv="default-style" content="ファイル名(半角英数文字).css">
content-type
文字エンコーディングを指定します。ただし、これはcharset属性でのエンコーディング宣言の代替形式であり、エンコーディング宣言状態にあるhttp-equiv属性のmeta要素と、charset属性を持つmeta要素の両方をドキュメントに記述することはできません。
例)
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
そのほかのキーワード名はWHATWG WikiのPragmaExtensionsを参照して下さい。
当サイトの使用例)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <title></title> </head> <body> </body> </html>
- カテゴリ
- メタデータ・コンテンツ。
- 要素を使用することができる場所
-
charset属性が存在する場合、または要素のhttp-equiv属性がエンコーディング宣言状態にある場合はhead要素の内容として。
http-equiv属性が存在するが、エンコーディング宣言状態ではない場合はhead要素の内容として。
http-equiv属性が存在するが、エンコーディング宣言状態ではない場合はhead要素の子であるnoscript要素の内容として。
name属性が存在する場合はメタデータ・コンテンツが使用できる場所。 - コンテンツ モデル(内容に含めることのできる要素)
- 空
- コンテンツ属性
- グローバル属性、name属性、content属性、http-equiv属性、charset属性。
- この要素に追加された属性
- charset属性。
- この要素で変更があった属性
- http-equiv属性。
- この要素で廃止された属性
- scheme属性。