<meta>要素

<meta>要素の定義

<meta>要素の定義

「超～」「高次～」「～の間の」「～の後ろの」「～を含む」などの意味を持つ英語の接頭辞に由来。
<meta>要素は、他のメタ関連要素（ <base> , <link> , <script> , <style> , <title> の各要素）で表せない、任意のメタ情報を扱うための要素です。
<meta>要素は空要素のため、子要素を持つことは出来ません。
itemprop属性を持つ場合は、フローコンテンツ、記述コンテンツとして扱われます。

親要素として使えるもの

<head> 要素

許可されているARIAロール

なし

DOMインターフェース

HTMLMetaElement

属性

グローバル属性が指定できます。

charset

ページで使用している「文字エンコーディング」を指定します。推奨されているのは ”UTF-8” です。
古い国内のページであれば、”EUC-JP” や ”SHIFT-JIS” が指定されているページも残っていますが、2019年時点で新しく作るページにこれらの文字エンコーディングを指定するメリットはないでしょう。

ここで指定した文字エンコーディングと、ファイルを保存する際の文字エンコーディングは一致させておきましょう。文字化けの原因となります。

content

http-equiv属性、またはname属性に関連付けられた値を持ちます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="description" content="Webサイトの概要です。">
  <meta name="keywords" content="Webサイト,ノウハウ">
  <title>Webページの表題を記載します</title>
  <link rel='stylesheet' href='style.css' />
  <script src='main.js'></script>
</head>
<body>
表示される部分です。内容が入ります。
</body>
</html>

サンプルを表示
この場合、”keyword”という名前のメタ情報に「Webサイト,ノウハウ」という値が、”description”という名前のメタ情報に「Webサイトの概要です。」という値が設定されていることになります。

http-equiv

プラグマディレクティブを定義します。以下の値をcontent属性に設定できます。

content-security-policy
この値で、ページ作者がページのコンテンツポリシーを指定できます。
refresh
content属性に正の整数が1つだけ含まれている場合は、ページを再読み込みするまでの秒数。更に、正の整数に続いて、文字列 ‘;url=’ と有効な URL がある場合は、別のページにリダイレクトするまでの秒数。

name

文書レベルのメタデータの名前を指定します。 itemprop属性、http-equiv属性、charset属性のいずれかが設定されている場合は設定するべきではありません。
このメタデータの名前は、 content 属性が持つ値と関連づけられます。 name 属性で使用できる値には以下のものがあります。

application-name ：ウェブページで実行するアプリケーションの名前を定義します。
author ：文書の作者名を定義します。
creator ：文書の製作者を定義します。author と似ていますが、こちらは「組織名」を記載しても良いとされています。
publisher ：文書の発行者を定義します。
description ：ページの内容を簡潔にまとめた文章を定義します。検索サイトでページのタイトルに続いて表示される情報のため、重要視されています。ページをブックマークに追加したときの説明文として使用するブラウザもあります。
generator ：ページを生成したソフトウェアの識別名を定義します。
keywords ：ページのコンテンツに関連するキーワードをカンマ区切りで列挙します。かつては、SEO目的で記載されることも多かったですが、最近ではあまり重視されていないようです。
robots ：「協力的」なクローラーあるいは “robot” がページ上で行うべき動作を定義します。これは、以下のリストにある値を content属性にコンマ区切りで並べます。
あくまでも「協力的」なクローラーの場合なので、すべてのクローラーがこの定義に従うとは限りません。既定値は”index,follow”です。
- index ：ページのインデックスを許可する。
- noindex ：ページのインデックスを行わないように要求する。
- follow ：ページ内のリンクをたどることを許可する。
- nofollow ：ページ内のリンクを辿らないように要求する。
- none ： ”noindex,nofollow”を定義するのと同じ。
- noodp ： Open Directory Project に説明文がある場合、検索結果のページでその説明文をサイトの説明として使用しないようにする。
- noarchive ：ページのコンテンツをキャッシュしないことを検索エンジンに要求する。
- nosnippet ：検索結果のページでページの説明を表示しないようにする。
- noimageindex ：インデックス登録された画像の参照元としてページを表示しないように要求する。
- nocache ： noarchiveと同じ。
slurp ：意味的には robots と同じで、クローラーに対して指示を与えるものですが、Yahoo! のクローラー専用の記述です。
googlebot ：意味的には robots と同じで、クローラーに対して指示を与えるものですが、Googleのクローラー専用の記述です。
viewport ：モバイル端末でのみ使用され、ビューポートの初期サイズに関する助言を与えます。モバイル端末のみで使用されます。
content属性に以下の値が設定できます。
- width ：ウェブサイトを描画したいビューポートの幅をピクセル数または、”device-width”で定義します。
- height ：ウェブサイトを描画したいビューポートの高さをピクセル数または、”device-height”で定義します。
- initial-scale ：表示倍率を 1.0 〜 10.0 までの正の数値で指定します。表示倍率はデバイスの幅（横向きでの device-width または縦向きでの device-height) とビューポートの寸法との比率となります。
- maximum-scale ：ズームの最大値を定義します。この値は minimum-scale と同じまたはより大きくしなければなりません。
- minimum-scale ：ズームの最大値を定義します。この値は maximum-scale と同じまたはより小さくしなければなりません。
- user-scalable ： yes か no を指定します。no を設定すると、ユーザーはページのズームができなくなります。既定値は yes です。

このサイトでは、HTML要素や属性の定義は下記サイトを参考にしています。
MDN Web Docs： https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。

HTML要素や属性がどのブラウザに対応しているのかは、下記のサイトで確認できます。
Can I Use?： https://caniuse.com/#home