<meta> ドキュメントに関するメタ情報を追加する
| 取り扱い | 現行の標準 |
| カテゴリ |
メタデータ・コンテンツitemprop属性が指定された場合、フロー・コンテンツおよびフレージング・コンテンツ |
| 親にできる要素 | <head> |
| 子にできる要素 | なし |
| 対応ブラウザ | caniuseで確認 |
<meta>タグの説明
<meta>は、ドキュメントに必要な様々なメタデータを与えるために使用します。通常、メタデータは<head>の中に埋め込みます。
この要素に与えられる内容は、画面に映し出すものではなく、機械の解釈に影響を与えるものです。属性や値によって色々な効果が得られるので、必要に応じてパターンを習得していきましょう。
<meta>タグの特徴
- この要素は可視化されないため、レイアウトには影響を与えません。
- この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
- 同一のページ内に複数使うことができます。基本的には
<head>の中に置かれます。
<meta>に指定できる主な属性
- charset
- ドキュメントで使用する文字のエンコーディング方式を宣言します。この値はソースコードを保存した時のエンコーディングと一致させなければなりません。標準的な環境ではUTF-8を使います。
- name
- メタデータの名前を定義します。内容は
content属性で指定します。itemprop、http-equiv、charset属性のいずれかが設定されている場合は設置すべきではありません。 - http-equiv
- ユーザーエージェントが文章を解読するプラグマディレクティブを定義します。内容は
content属性で指定します。 - content
name属性またはhttp-equiv属性で定義されたメタデータの値を表します。itemprop属性が指定された場合、この値は直近のitemscope属性を持つ祖先要素が生成するアイテムのマイクロデータとなります。- property
- HTMLの標準仕様ではありませんが、OGP（Open Graph Protcol）を使う場合に採用される属性です。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
<meta>の使い方とサンプル
このタグを使ったマークアップのサンプルです。
文字のエンコーディング方式
文字化けを防ぐために文字コードを指定します。ソースコードを保存した時のエンコーディング方式と同じ値を宣言して下さい。標準的な環境ではUTF-8を使います。
HTML
<meta charset="UTF-8"> 推奨
<meta charset="euc-jp"> 非推奨
<meta charset="Shift_JIS"> 非推奨
ドキュメントの概要
ドキュメントの内容に関して、簡単な説明文を提示できます。ここで与えられた内容は、検索結果やブラウザのブックマーク時の説明文として利用されます。
HTML
<meta name="description" content="このページで得られる情報の概要を書きます。">
ビューポートの設定
ユーザーエージェントに合わせて適切なレンダリングが行えるように、viewportと呼ばれる値を指定します。
HTML
よく使われる例
<meta name="viewport" content="width=device-width,initial-scale=1">
検索クローラーの制御
検索サービスのインデックスを作成するために巡回しているロボットの振る舞いを（ある程度）制御します。検索対象に含んで欲しいページと、そうでないページを指定できます。
index：インデックスを許可noindex：インデックスを禁止follow：リンク先の参照を許可nofollow：リンク先の参照を禁止
HTML
<meta name="robots" content="index,follow">
<meta name="robots" content="noindex,nofollow">
OGPの設定
HTMLの標準仕様ではありませんが、SNSで利用されている（Open Graph Protcol）という仕組みを設定できます。
HTML
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの概要">
<meta property="og:site_name" content="サイト名">
<meta property="og:type" content="ページの種類">
<meta property="og:image" content="アイキャッチ画像のURL">
<meta>に関連するHTMLタグ
| ヘッダー情報を構成する要素 | |
|---|---|
| <title> | ウェブページのタイトルを指定する |
| <meta> | ドキュメントに関するメタ情報を追加する |
| <link> | 外部ファイルへのリンクを埋め込む |
| <base> | ページの基準となるURLを指定する |
| <style> | スタイルシートをドキュメントの中で指定する |