備忘録的プログラミングリファレンス

meta タグエレメント

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

文字コードを指定
<meta charset="utf-8">
詳しくは Example を参照してください

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

　<meta> エレメントにはその属性によって以下の機能があります。

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

- ad -

属性

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

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

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

- ad -

Example

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

文字コードの指定

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

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

AttributeValueExtra information
name 文字コード

web レスポンシブの対応

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

<meta name="viewport" content="width=device-width,initial-scale=1.0" />
AttributeValueExtra information
name
contentCSS ファイルのある場所

著作者

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

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

検索ロボットへの設定

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

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

検索への配慮 description

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

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

AttributeValueExtra information
name
contentdescription 内容

検索への配慮 keywords

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

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

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

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

AttributeValueExtra information
name
content検索条件用の単語

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

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

AttributeValueExtra information
http-equiv代替えページを意味する
contentRSS ファイルのある場所

スタイルシート宣言

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

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

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

スクリプト宣言

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

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

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

SNSへの配慮

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

- ad -

JavaScript

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

関連（Related）