<meta>
meta（メタ）要素は文書におけるさまざまなメタデータを表します。メタデータとは、文章の文字コードや文章の概要やキーワードなどの文章に関する情報のことを表します。
| meta要素 | 説明 |
|---|---|
| カテゴリー | メタデータコンテンツ ・itemprop 属性が付与された場合、フレージングコンテンツ ・itemprop 属性が付与された場合、フローコンテンツ |
| コンテンツモデル | 空 |
| 使用できる場所 | ・charset 属性が指定されている場合、または http-equiv 属性が文字コードの指定のために付与されている場合、head 要素内 ・http-equiv 属性が文字エンコードの指定のためではなく付与されている場合、head 要素内、または head 要素の子要素である noscript 要素の子要素として ・name 属性が指定されている場合、メタデータ・コンテンツが期待される場所 ・itemprop 属性が付与された場合はフロー・コンテンツ、またはフレージング・コンテンツが期待される場所 |
meta要素で使用できる属性
グローバル属性
すべてのHTML要素で使用できる属性になります。
name属性
name 属性は、要素に名前を付与します。この名前を使用して、JavaScript から要素にアクセスしたり、iframe 要素に付与した名前はリンクのターゲットに使用したりすることができます。
input要素におけるname 属性
input 要素に付与された name 属性値は、フォーム送信時に利用されます。また、name="_charset_" と name="isindex" という指定は特別な意味を持ちます。
details要素におけるname 属性
details 要素に付与された name 属性値は、details 要素をグループ化します。
複数の details 要素に name 属性で同じ名前を付けると、それらはグループと見なされ、相互に排他的な動作、つまり「1つを開いた時に他を閉じる」という動作を実現できます。
http-equiv属性
プラグマ指示子とする
meta要素に http-equiv 属性が指定されると、そのmeta 要素はプラグマ指示子となります。プラグマ指示子はプラグマ （ユーザエージェントへの指示） を指定するための名前のことです。該当文書の処理の仕方や扱いを指定することができます。
http-equiv属性に指定できる値
| 属性値 | 説明 |
|---|---|
| content-language | 非推奨のためlang属性を使用する。 |
| content-type | 文字コードの指定のために使用する。 |
| default-style | 優先スタイルシートの指定のために使用する。 |
| refresh | 自動更新やリダイレクトの指定のために使用します。 |
| set-cookie | Cookie の設定のために使用する。この指定は非推奨。代わりに HTTP ヘッダを利用すべき。 |
content属性
メタデータを指定する
content属性はmeta 要素において、メタデータを指定します。meta要素にname、http-equiv 属性が指定された場合、content 属性は必須となる。
charset属性
スクリプトや文書の文字コードを指定する
charset 属性は script 要素に指定することで埋め込まれたスクリプトの文字コードを指定します。読み込む文書の文字コードと、外部スクリプトの文字コードが異なる場合、スクリプトの文字コードを指定することで文字化けなどを防ぐことができます。
src 属性が指定されている場合のみ指定可能です。読み込まれるスクリプトの文字コードを指定します。
meta 要素に charset 属性を指定した場合は、head 要素内に記述することで、文書の文字コードを指定します。2つ以上の文字コード指定を文書内に入れることはできません。
meta要素によるOGPの指定例
使用例
<!-- ※基本共通設定 -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<title>ページのタイトル</title>
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページのディスクリプション" />
<!-- Facebook用設定 -->
<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />
もしくは
<meta property="fb:admins" content="adminID（15文字の半角数字）" />
<!-- ※Twitter共通設定 -->
<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:creator" content="@burnworks" />
</head>