＜meta要素＞ - メタデータ

公開日: 2017/02/08

meta要素は、HTMLドキュメントのメタデータを表す要素です。メタデータとは、文字や画像のようにウェブページ上に表示されるわけではありませんが、ブラウザやクローラーが処理をするために利用できる情報のことです。人間で例えたら年齢や名前がメタデータです。

概要

名前

属性

name

メタデータの名前を表すキーワード。仕様書はStandard metadata namesを参照。拡張されたメタデータはMetaExtensionsを参照。Google専用のメタデータはMeta tags that Google understandsを参照。

application-name

ウェブページを動作させているアプリケーション。ブログやニュースなどのページで用いるべきではありません。content属性にはアプリケーション名を指定する。

author

著者。content属性には著者名を指定する。

description

ドキュメントの説明。content属性には説明文を指定する。Googleはこのメタデータを参照していません。

generator

ドキュメントを生成したジェネレーター。例えば、WordPressなど。content属性にはジェネレーター名を指定する。特定のジェネレーターを狙ったスパムがこの値を参考にするかもしれないので、指定しない方が安全でしょう。

keywords

ドキュメントを表すキーワード。content属性にはキーワードをカンマ(,)区切りで指定する。Googleはこのメタデータを参照していません。

referrer

このウェブページから別のウェブページにアクセスする際のリファラーポリシー。content属性は下記のキーワードの中から指定する。

no-referrer: リファラーを送信しない。
no-referrer-when-downgrade: https接続以外ではリファラーを送信しない。
origin: スキーム、ホスト、ポートのみをリファラーに含める。パスは含めない。
origin-when-cross-origin: 異なるオリジンへのアクセスの場合だけ、リファラーにパスを含めない。
unsafe-url: https接続、http接続ともに、スキーム、ホスト、ポート、パスをリファラーに含める。

theme-color

テーマカラー。content属性にはカラーコードを指定する。例えば、AndroidのChromeで反映される。

robots

検索エンジン向けの要求。content属性にはキーワードをカンマ(,)区切りで指定する。

index: インデックスを許可。
noindex: インデックスを拒否。
follow: ウェブページ上のリンクを辿ることを許可。
nofollow: ウェブページ上のリンクを辿ることを拒否。
noarchive: ウェブページ上のキャッシュを拒否。Googleで有効。
nosnippet: 検索結果でタイトル下に説明文やリッチスニペットを表示するのを拒否。Googleで有効。
noimageindex: 画像がインデックスされた場合に参照元として表示されるのを拒否。Googleで有効。

viewport

ビューポート。content属性にはビューポートを表す内容を指定する。仕様書にはなくCSS Device Adaptation Moduleで定義されていて、一般的なブラウザが採用している。

http-equiv

コンテンツの動作に影響するメタデータをキーワードで指定する。Pragma directivesを参照。

content-language: ドキュメントの言語。content属性には言語コードを指定する。この値は非推奨で、代わりにhtml要素にlang属性を指定すること。
content-type: ドキュメントの種類。content属性にはMIMEタイプを指定する。
default-style: デフォルトのスタイルシート。content属性には対象のlink要素、またはstyle要素のidを指定する。複数のスタイルシートを用意してユーザーが任意で選択できる場合に、優先的に適用されるスタイルシートとなる。
refresh: リフレッシュ。content属性の内容が秒数の場合はその秒数後に再読み込みする。秒数;URLが指定された場合はそのURLに秒数後にアクセスする。
set-cookie: クッキーをセットする。content属性にはクッキーの内容を指定する。この値は非推奨で、代わりに、HTTPヘッダーでクッキーを設定すること。
x-ua-compatible: Internet Explore専用の値。content属性にはIE=edgeを指定すること。Internet Exploreが仕様を厳密に守るように要求する。
Content-Security-Policy: CSP。content属性にはポリシーの内容を指定する。

charset

値に文字コード名を指定すると、ドキュメントの文字コードをユーザーエージェントに知らせることができる。このメタデータは、ドキュメントの開始から1024Byte以内に配置しないといけない。

content

メタデータの内容。name属性やhttp-equiv属性によって指定できる内容が違う。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

HTMLで指定できるメタデータは数多くあります。一般的ないくつかの例を紹介します。

文字コード

charset属性を使って文字コードをユーザーエージェントに伝えます。このメタデータは、ドキュメントの開始から1024Byte以内に配置しないといけません。head要素内の最初の子要素にしておくといいでしょう。

HTML

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">

ビューポート

name=viewportは、スマホなどのデバイスで閲覧する時のビューポートを調整できます。下記の通り指定すると、スマホの画面幅とコンテンツの横幅を合わせることができます。

HTML

<!-- スマホで見た時にコンテンツの幅と画面幅を合わせる -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">

検索エンジン

robots.txtの仕様を利用した、name=robotsという検索エンジン向けのメタデータがあります。例えば、下記のメタデータを加えたウェブページはGoogleの検索結果に掲載されません。メタデータに強制性はないことに留意しておきましょう。

HTML

<!-- このウェブページを検索エンジンに掲載しないように要求 -->
<meta name="robots" content="noindex">

タイトル

ドキュメントのタイトルはもちろんメタデータですが、専用のタグが用意されているのでそちらを利用します。

HTML

<!-- タイトルはtitle要素で指定 -->
<title>SYNCER</title>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜meta要素＞ - メタデータ</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/meta/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>メタデータで文字コードを指定して、ブラウザにその文字コードで処理するように伝えてあります。</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/573/"> <meta charset="utf-8"> <title>【デモ】＜meta要素＞ - メタデータ</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/meta/"> </head> <body>

<p>メタデータで文字コードを指定して、ブラウザにその文字コードで処理するように伝えてあります。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>