<meta>タグの解説
<meta>は、ドキュメントに必要な様々なメタデータを与えるために使用します。通常、メタデータは<head>の中に埋め込みます。
この要素に与えられる内容は、画面に映し出すものではなく、機械の解釈に影響を与えるものです。属性や値によって色々な効果が得られるので、必要に応じてパターンを習得していきましょう。
<meta>要素で提供されるデータの形式は、与える属性によって変わります。具体的には以下の中から選ぶことになります。
name属性を設定した場合、<meta>は文書全体に対してメタデータを提供します。charset属性を設定した場合、<meta>は文書がどの文字エンコーディング方式でエンコードされているかを宣言します。http-equiv属性を設定した場合、<meta>はHTTPヘッダーによって与えられるものと同等の情報を提供します。itemprop属性を設定した場合、<meta>はユーザー定義のメタデータを提供します。
<meta>タグの特徴
- この要素は可視化されないため、レイアウトには影響を与えません。
- この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
- 同一のページ内に複数使うことができます。基本的には
<head>の中に置かれます。
<meta>要素に指定できる属性
charset- ドキュメントで使用する文字のエンコーディング方式を宣言します。この値はソースコードを保存した時のエンコーディングと一致させなければなりません。標準的な環境では
"UTF-8"を使います。 name- メタデータの名前を定義します。内容は
content属性で指定します。itemprop、http-equiv、charset属性のいずれかが設定されている場合は設置すべきではありません。 http-equiv- ユーザーエージェントが文章を解読するプラグマディレクティブを定義します。内容は
content属性で指定します。 contentname属性またはhttp-equiv属性で定義されたメタデータの値を表します。itemprop属性が指定された場合、この値は直近のitemscope属性を持つ祖先要素が生成するアイテムのマイクロデータとなります。property- HTMLの標準仕様ではありませんが、OGP（Open Graph Protcol）を使う場合に採用される属性です。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
<meta>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。指定する属性によって、取り扱うデータの種別が変わります。
// name属性を持つ型
<meta name="key" content="value">
// charset属性を持つ型
<meta charset="value">
// http-equiv属性を持つ型
<meta http-equiv="key" content="value">
文字のエンコーディング方式
文字化けを防ぐために文字コードを指定します。ソースコードを保存した時のエンコーディング方式と同じ値を宣言してください。標準的な環境では"UTF-8"を使います。
<meta charset="UTF-8"> 標準
<meta charset="euc-jp"> 非推奨
<meta charset="Shift_JIS"> 非推奨
ドキュメントの概要
ドキュメントの内容に関して、簡単な説明文を提示できます。ここで与えられた内容は、検索結果やブラウザのブックマーク時の説明文として利用されます。
<meta name="description" content="このページで得られる情報の要約。">
ビューポートの設定
ユーザーエージェントに合わせて適切なレンダリングが行えるように、"viewport"と呼ばれる値を指定します。ビューポートは画面の中でドキュメントを表示できる範囲を表す言葉です。細かい仕様を覚えるまでは、以下の内容をコピーして使えば問題ありません。
// よく使われる例
<meta name="viewport" content="width=device-width,initial-scale=1">
検索クローラーの制御
検索サービスのインデックスを作成するために巡回しているロボットの振る舞いを（ある程度）制御します。name属性に"robots"を指定し、content属性に特性を与えることで、検索対象に含んでほしいページと、そうでないページを指定できます。
index：インデックスを許可noindex：インデックスを禁止follow：リンク先の参照を許可nofollow：リンク先の参照を禁止
// 検索結果の登録を許可する
<meta name="robots" content="index,follow">
// 検索結果に表示されないように登録を拒否する
<meta name="robots" content="noindex,nofollow">
OGPの設定
HTMLの標準仕様ではありませんが、SNSで利用されている（Open Graph Protcol）という仕組みを設定できます。
<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>は様々なメタデータをヘッダーに埋め込める便利なタグ
上記の通り、<meta>は扱える情報が多様であるため、最初のうちは覚えづらいタグではあります。しかし、慣れてくるとヘッダーの中に様々な情報を埋め込める便利な存在であることが分かります。
よく使うパターンは、サイトを制作する過程で目にする機会が多いので、無理しなくても自然に覚えていきます。慣れてくると、ヘッダーに埋め込まれている情報も、ソースコードを見ただけで分かるようになります。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>タイトル</title>
<meta name="description" content="このページの概要を表す内容です。">
<!--=== OGP Data ===-->
<meta property="og:url" content="page-url">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="このページの概要を表す内容です。">
<meta property="og:site_name" content="Site Name">
<meta property="og:type" content="website">
<meta property="og:image" content="og_image/URL">
<!--/=== OGP Data ===-->
<link rel="canonical" href="page-url">
<link rel="icon" href="favicon-96x96.png">
<link rel="apple-touch-icon" href="favicon-192x192.png">
<link rel="stylesheet" href="/style/main.css">
<script src="/js/script.js" defer></script>
</head>