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要素(タグ)一覧」に戻る