meta要素

Webページでは、文字コードを指定したり、ページの説明を記述したりできます。

本ページでは、meta要素について説明します。

meta要素とは

meta要素は、文字コードやページの説明など、title、base、link、style、script要素では表現できないメタデータを表します。

metaの定義は、以下のとおりです。

【metaの定義】
コンテンツカテゴリ	メタデータコンテンツ itemprop属性を持つ場合：フローコンテンツ、フレージングコンテンツ
可能な親要素	head http-equiv属性がエンコーディングを示さない場合：head内のnoscript name属性かitemprop属性がある場合：メタデータコンテンツを包含できる要素 itemprop属性がある場合：フレージングコンテンツを包含できる要素
可能なコンテンツ	なし(空要素)
タグの省略	開始タグは必須。終了タグはなし。
DOMインターフェース	HTMLMetaElement

利用例

以下は、metaを使ったHTMLの例です。

【metaの利用例】

<head>
<meta charset="utf-8">
<meta name="description" content="ページの説明">
<link rel="stylesheet" href="css/style.css">
<title>ページのタイトル</title>
</head>

head要素内で、文字コードとページの説明を記述しています。

属性

グローバル属性と、以下が使えます。

charset: エンコーディング(文字コード)を指定します。
content: nameやhttp-equiv属性の値を指定します。
http-equiv: リダイレクトやセキュリティポリシーなどを指定します。
name: メタデータの名前を定義します。

次からは、各属性の利用例を示します。

charset属性

charset属性の利用例は、以下のとおりです。

【charset属性の利用例】

<meta charset="utf-8">

上記は、UTF-8を指定しています。ここで指定した文字コードと、ファイルの文字コードが異なっていると、文字化けします。このため、HTMLファイルを保存する時に、UTF-8(DOM無)形式で保存する必要があります。

以前は、Shift-JISも使われていましたが、今はUTF-8以外は使わない方が無難です。

content属性

content属性の利用例は、以下のとおりです。

【content属性の利用例】

<meta name="description" content="ページの説明">

上記は、name属性がdescriptionでページの説明を意味します。このため、contentは、その内容を示します。

http-equiv属性

http-equiv属性は、以下の値が使えます。

【http-equiv属性で使える値】
値	説明
content-security-policy	コンテンツセキュリティポリシー(CSP)を定義します。
default-style	デフォルトで適用するスタイルを指定します。
refresh	ページの再読み込み時間やリダイレクト先を指定します。

次からは、各値での利用例を示します。

content-security-policy

content-security-policyの利用例は、以下のとおりです。

【content-security-policyの利用例】

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *">

上記は、外部ファイルは自身のサイト(self)からしか読み込まず、画像ファイルはすべてのドメインから読み込みを許可しています。

default-style

default-styleの利用例は、以下のとおりです。

【default-styleのlink適用例】

<meta http-equiv="default-style" content="test2">
<link rel="stylesheet" href="css/style1.css" title="test1">
<link rel="stylesheet alternate" href="css/style2.css" title="test2">

通常は、alternateがないstyle1.cssが適用されますが、default-styleでtest2を指定しているため、titleがtest2のstyle2.cssが適用されます。同じtitleがあれば、複数のCSSファイルが適用されます。

また、以下のようにも利用できます。

【default-styleのstyle適用例】

<meta http-equiv="default-style" content="test2">

<style title="test1">
p { color:red; }
</style>

<style title="test2">
p { color:green; }
</style>

上記で、p要素の色は緑が適用されます。

ブラウザによっては、スタイルを切り替えられるものもあります。

refresh

refreshの利用例は、以下のとおりです。

【refreshの利用例】

<meta http-equiv="refresh" content="10; url=https://example.com/page.html">

上記により、ページを開いてから10秒後にhttps://example.com/page.htmlへリダイレクト(移動)します。

name属性

name属性は、以下の値が使えます。

【name属性で使える値】
値	説明
application-name	Webアプリケーションの名前を指定します。
author	ページの作者名を指定します。
description	ページの要約を記述します。
generator	ページを作成したソフトウェア名などを指定します。
keywords	ページのキーワードを指定します。カンマ(,)で区切って複数指定できます。
referrer	ページを移動する時に送信するリファラーを制御します。
theme-color	テーマカラーを指定します。
color-scheme	darkモードなどが指定ができます。
robots	検索サイトへの情報収集方法(クローラの動作)を指定します。
viewport	ビューポート(ブラウザの表示領域)のサイズを指定します。

次からは、各値での利用例を示します。

application-name

application-nameの利用例は、以下のとおりです。

【application-nameの利用例】

<meta name="application-name" content="アプリ">

author

authorの利用例は、以下のとおりです。

【authorの利用例】

<meta name="author" content="山田　太郎">

description

descriptionの利用例は、以下のとおりです。

【descriptionの利用例】

<meta name="description" content="ページの説明を記述します。内容を要約して記述する必要があります。">

generator

generatorの利用例は、以下のとおりです。

【generatorの利用例】

<meta name="generator" content="Microsoft Word">

keywords

keywordsの利用例は、以下のとおりです。

【keywordsの利用例】

<meta name="keywords" content="HTML,CSS,ホームページ">

これを記述しても、検索サイトでの検索にヒットするようになる訳ではありません。

referrer

referrerの利用例は、以下のとおりです。

【referrerの利用例】

<meta name="referrer" content="no-referrer">

上記により、ページ全体のリンクなどでリファラーを送信しなくなります。contentで指定できる値は、referrerpolicy属性と同じです。

theme-color

theme-colorの利用例は、以下のとおりです。

【theme-colorの利用例】

<meta name="theme-color" content="red">

上記により、AndroidのChromeでページを参照すると、以下のように表示されます。

背景が赤のAndroidのChrome画面

ブラウザの上の部分が、赤色になっています。

使える色は、「CSSカラーコード一覧」をご参照ください。

color-scheme

color-schemeの利用例は、以下のとおりです。

【color-schemeの利用例】

<meta name="color-scheme" content="dark">

上記により、Google ChromeやMicrosoft Edgeで参照すると以下のように表示されます。

darkモードといって、背景が黒色になります。

robots

robotsの利用例は、以下のとおりです。

【robotsの利用例】

<meta name="robots" content="noindex">

上記により、ページが検索サイトで検索されないようになります(インデックスされません)。

contentには、以下の値が使えます。

【robotsのcontentで使える値(例)】
値	説明
index	検索されます。(デフォルト)
noindex	検索されません。
follow	検索サイト(ロボット)が、リンク先のページをたどります。(デフォルト)
nofollow	検索サイト(ロボット)が、リンク先のページをたどりません。

カンマ(,)で区切って、複数指定できます。(例：noindex,nofollow)

viewport

viewportの利用例は、以下のとおりです。

【viewportの利用例】

<meta name="viewport" content="width=device-width,initial-scale=1.0">

上記により、スマートフォンにあわせたビューポートになり、初期表示は拡大縮小されずに表示されます。詳細は、「ビューポートの説明と設定」をご参照ください。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
meta	〇	〇	〇	〇	〇	〇
charset	〇	〇	〇	〇	〇	〇
content	〇	〇	〇	〇	〇	〇
http-equiv	〇	〇	〇	〇	〇	〇
name	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
meta	〇	〇	〇	〇	〇	〇
charset	〇	〇	〇	〇	〇	〇
http-equiv	〇	〇	〇	〇	〇	〇
name	〇	〇	〇	〇	〇	〇

〇: サポート
△: 制限あり
×: 未サポート
？: 不明

IE: Internet Explorer
Ed: Edge
Fx: Firefox
Ch: Chrome
Sa: Safari
Op: Opera
An: Android Browser
Sm: Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

「HTML要素(タグ)一覧」に戻る