meta タグエレメント

　meta タグエレメントは、ページの作成者名、検索ロボットへのテキスト情報、文字コードなどの web ページへの付加情報を設定するための HTML タグエレメントです。
　web ページの表示に関する設定、スクリプトやスタイルシートの形式、Twitter や FaceBook などのSNSからの検索情報やページの更新、遷移に関する設定もこのエレメントを利用します。

文字コードを指定

<meta charset="utf-8">

詳しくは Example を参照してください

　<meta> は <head> エレメントに包括されるエレメントです。 <head> エレメントについては<head> エレメントを参照してください。

　<meta> エレメントにはその属性によって以下の機能があります。検索情報や SNS との連携、レスポンシブ web ページへの対応に使用します。


charset	文字コードの指定。言語ではありません
name="viewport"	web ページの表示設定の指定
name="author"	著作者
name="robots"	検索ロボットへの設定
name="description"	検索への配慮 description
name="keywords"	検索への配慮 keywords
http-equiv="refresh"	ページのリダイレクト、更新
property="og:"	SNSへの配慮

属性

　meta タグエレメントには以下の属性があります。用途によって属性の組み合わせが変わります。

　ここでは属性の一覧のみを示します。使用例は以下のExampleを参照してください。

プロパティ	概要
charset	文字コード。utf-8、shift_jis、euc-jp など
content	name または http-equiv 属性の値に関連付けられた値。 DOMString 型
http-equiv	プラグマディレクトリの名称。content データとペアで利用。 DOMString 型
name	メタデータの名称。content データとペアで利用。 DOMString 型

Example

　ブラウザで meta タグを確認したい場合は、web ページの上で右クリックし、メニューのページのソースを表示を選択します。
　またはショートカットキーを使用します。CTRL + U、Mac ではCommand + Option + Uです。

　meta タグエレメントは、用途によって属性の組み合わせが変わります。以下に用途による作成例を紹介します。

文字コードの指定

　web ページの作成に使われた文字コードを指定します。もしも Shift-JIS で作成された HTML ファイルを utf-8 で指定して開くと文字化けが起こります。
　保存ファイルの文字コードとこの <meta> 設定による文字コードは合わせる必要があります。

　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> は古い書き方です。

Attribute	Value	Extra information
name		文字コード

web レスポンシブの対応

　web レスポンシブへの対応に利用する <meta> エレメントの設定です。
　詳しくはname="viewport"を参照してください。

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

Attribute	Value	Extra information
name
content		CSS ファイルのある場所

著作者

　<meta> に著作者を設定しておくことができます。表示はされませんが、コード上に明記されます。

Attribute	Value	Extra information
name		このメタデータが著作者であることを指定
content		著作者名

検索ロボットへの設定

　google などの検索一覧にインデックスする/しない、このページを検索ロボットが巡回するか/しないかを設定します。

Attribute	Value	Extra information
name		検索ロボットへの設定であることを指定
rel		検索ロボットへの設定

検索への配慮 description

　検索結果の一覧に表示される紹介文の役割をする 100 文字の description テキストです。なくても検索ロボットで自動作成してくれます。

　検索一覧に表示されるためにページの PR の役割をし、クリックされるか／否かの要素になります。ページの意図にあった内容であった方がよいでしょう。

Attribute	Value	Extra information
name
content		description 内容

検索への配慮 keywords

　ページの特徴を示す単語 keywords を設定します。検索時の条件と照らし合わせられます。

　Google の検索ロボットでは参照していないそうです。なくても問題ありません。

　keywords はよく分からないうちはそのページを特徴づける代表的なキーワードを1〜3単語、もしくはなくてもよいようです。

　単語間は,で区切ります。

Attribute	Value	Extra information
name
content		検索条件用の単語

ページのリダイレクト、更新

　ページのリダイレクトまたは更新頻度を設定します。
　ページのリダイレクトは、URL= に移動先ページを指定することで、そのページに自動で移動します。
　更新頻度は、そのページを指定秒ごとにリロードするものです。リロードの場合は URL は記述しません。

Attribute	Value	Extra information
http-equiv		代替えページを意味する
content		RSS ファイルのある場所

スタイルシート宣言

　HTML5 から以下のような Content-Style-Type の meta 宣言は不要になりました。デフォルトで CSS を利用するためで、CSS の一択のためです。

　スタイルシートを利用するためには先に <meta> エレメントでスタイルシートの利用宣言をします。

Attribute	Value	Extra information
http-equiv		スクリプトタイプの宣言である
content		スクリプトタイプ

　<style> エレメントについてはstyle タグエレメントを参照してください。

スクリプト宣言

　HTML5 から以下のような Content-Script-Type の meta 宣言は不要になりました。デフォルトで JavaScript を利用するためで、JavaScript の一択のためです。

　JavaScript を利用するためには先に <meta> エレメントで script のタイプを宣言します。

Attribute	Value	Extra information
http-equiv		スクリプトタイプの宣言である
content		スクリプトタイプ

　<script> エレメントについてはscript タグエレメントを参照してください。

SNSへの配慮

　<meta> エレメントに設定する OGP ( Open Graph Protocol )とは、Twitter や FaceBook などのSNS上で web ページやブログがシェアされたときに、そのページのタイトルや概要、URL、画像などの情報を提供するためのメタ設定です。
　詳しくは<meta> OGP についてを参照してください。

JavaScript

　<meta> の定義は HTMLMetaElement を参照してください。