<meta> - メタ

目次

概要

形式
<meta http-equiv="..." content="...">
<meta name="..." content="...">
<meta property="..." content="...">
サポート
https://caniuse.com/mdn-html_elements_meta
カテゴリ
メタデータコンテンツ
itemprop 属性を持つ場合: フローコンテンツ (HTML Living Standard)
itemprop 属性を持つ場合: フレージングコンテンツ (HTML Living Standard)
親要素
charset 属性を持つ場合: head 要素。
http-equiv 属性を持つが、content-type の場合: head 要素。
http-equiv 属性を持つが、content-type でない場合: head 要素、または head の子要素である noscript 要素。
name 属性を持つ場合: メタデータコンテンツ を子要素に持てる要素。
itemprop 属性を持つ場合: メタデータコンテンツ を子要素に持てる要素。(HTML Living Standard)
itemprop 属性を持つ場合: フレージングコンテンツ を子要素に持てる要素。(HTML Living Standard)
子要素
無し(Empty)
タグの省略
開始タグ:必須 / 終了タグ:無し
属性
グローバル属性
name
http-equiv
content
charset
media

説明

meta は METAinformation(メタ情報)の略です。英語の meta- は、後から(after)、超えて(beyond)、共に(with)、変化(change)などのニュアンスを持つ接頭語です。「それまでの機能に加えて、後から機能を追加するためのもの」といった意味でしょうか。<meta> タグは、HTML の規約で定義されているものに加えて、いろいろな目的で使用されます。

<meta name="name" content="content"> の形式は、ブラウザや検索エンジンのロボットなどに情報を与えます。

<meta http-equiv="name" content="content"> の形式は、HTTPヘッダに name: content というフィールドを追加したのと同じ働きをします。

属性

グローバル属性
詳細は グローバル属性 を参照してください。
name=name
LS/H2/e2/Ch/Fx/Sa/Op/N2
名前を指定します。
http-equiv=http-equiv
LS/H2/e2/Ch/Fx/Sa/Op/N2/i2
HTTPヘッダ名を指定します。
property=property
HTML5 や HTML Living Standard では定義されていませんが、OGP などで使用されます。
content=content
LS/H2/e2/Ch/Fx/Sa/Op/N2/i2
内容を指定します。HTML4.01 では必須の属性として定義されています。
charset=charset
LS/H5/e/Ch/Fx/Sa/Op
文字コードを指定します。下記の 文字セット を参照してください。
media=media
LS
name="theme-color" の対象とするメディアクエリを指定します。詳細は theme-color を参照してください。
scheme=scheme
[非推奨] H4-4
content を解釈する際のスキーマ情報(ヒント情報)を与えます。HTML5 では廃止されました。

詳細

文字セット(charset="...")

LS/Ch/Fx/e/Op/Sa。HTML5 では、文字エンコーディングを下記の様にしていします。これは、HTML文書の先頭 1024バイト以内に記述する必要があります。また、<title> が非ASCII文字を使用している場合は、<title> よりも前に記述する必要があります。

HTML
<meta charset="UTF-8">
<meta charset="Shift_JIS">
<meta charset="euc-jp">
<meta charset="iso-2022-jp">

アプリケーション名(name="application-name")

LS/H5.1。Webアプリケーション名を指定します。Webアプリケーションではない通常ページの場合には指定してはなりません。

HTML
<meta name="application-name" content="WebMail2">

文書の著者(name="author")

LS/H3。文書の著者を明記します。画面上では表示の変化はありません。

HTML
<meta name="author" content="Tohoho">

文書の概要(name="description")

LS/H5。この文書に関連する説明(description)を指定します。検索ロボットの中にはこのキーワードを解釈してくれるものがあります。

HTML
<meta name="description" content="HTMLリファレンス">

作成エディタ(name="generator")

LS/H5。文書を作成したHTMLエディタなどのソフトウェア名を指定します。

HTML
<meta name="generator" content="Simple HTML Editor V2.5">

キーワード(name="keywords")

LS/H4。この文書に関連するキーワードをカンマ(,)区切りで指定します。検索ロボットの中にはこのキーワードを解釈してくれるものがあります。

HTML
<meta name="keywords" content="HTML,CSS,JavaScript">

リファラポリシー(name="referrer")

LS。このページから別のページに遷移する際に、ブラウザからサーバに対してリファラ情報(遷移元URL情報)を送信する際のリファラポリシーを指定します。

HTML
<meta name="referrer" content="no-referrer">
no-referrer
LS。リファラ情報を送信しません。
no-referrer-when-downgrade
LS。https から http にダウングレードする場合にはリファラ情報を送信しません。デフォルト値です。
same-origin
LS。同じオリジン(プロトコル＋FQDN＋ポート番号)の場合のみリファラ情報を送信します。
origin
LS。オリジン情報(プロトコル＋FQDN＋ポート番号)のみをリファラ情報として送信します。
strict-origin
LS。オリジン情報(プロトコル＋FQDN＋ポート番号)のみをリファラ情報として送信します。ただし、https から http にダウングレードする場合は送信しません。
origin-when-cross-origin
LS。同一オリジンの場合は通常のリファラ情報を、異なるオリジンの場合はオリジン情報のみを送信します。
strict-origin-when-cross-origin
LS。同一オリジンの場合は通常のリファラ情報を、異なるオリジンの場合はオリジン情報のみを送信します。ただし、https から http にダウングレードする場合は送信しません。
unsafe-url
LS。常に送信します。
never
[非推奨] 古い値です。no-referrer を使用してください。
default
[非推奨] 古い値です。no-referrer-when-downgrade を使用してください。
always
[非推奨] 古い値です。unsafe-url を使用してください。
origin-when-crossorigin
[非推奨] 古い値です。origin-when-cross-origin を使用してください。

テーマカラー(name="theme-color")

LS。このページのテーマカラーを指定します。色の指定方法はスタイルシートの color を参照してください。Android 版の Chrome では、ページ上部のタブをこの色で表現します。

HTML
<meta name="theme-color" content="#469">

media 属性でテーマを適用するメディアを選択することもできます。下記の例では通常の画面で横幅が 400px 以上の場合は #633 を、900px 以上の場合は #336 を指定します。

HTML
<meta name="theme-color" content="#633" media="screen and (max-width: 400px)">
<meta name="theme-color" content="#336" media="screen and (max-width: 900px)">

ビューポート(name="viewport")

スマホブラウザなどでも適切に表示されるよう、ビューポートの設定を行います。カンマ区切りで複数指定することが可能です。推奨する記述は下記のいずれかです。

HTML
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
width=length
スマホやタブレットの場合のビューボートの横幅 (document.documentElement.clientWidth とほぼ同値) を 480 などのピクセル値、または device-width で指定します。PC版では数値指定は大半のブラウザで無視され、ブラウザの実際の横幅(ピクセル値)が設定されます。スマホやタブレットの場合、液晶の解像度(1080×2160等)ではなく、横幅に応じて 360 や 380 など、機種やブラウザによって異なる見かけ上のピクセル値が基準となります。デフォルト値は 980 ですが、このままだとスマホには大きすぎます。480 など、見かけ上のピクセル値より大きな値を指定した場合、それを超えた領域は横スクロールが必要になることがあります。300 など、見かけ上のピクセル値より小さな値を指定した場合は見かけ上のピクセル値が設定されるものが多いようです。結論としては、通常のページでは device-width を指定するのが推奨です。別解として、width=480 を指定し、initial-scale を省略すると、大きなスマホでも、小さなスマホでも、縦表示でも、横表示でも、横幅を 480 に固定したデザインを実現することができます。こちらは、ピクセル単位のデザインを画面ぴったりに表示したい場合などに利用されます。
height=length
ビューポートの高さを 480 などのピクセル値、または device-height で指定します。こちらは特に指定せず、スクロールに任せることが多いでしょう。
initial-scale=num
初期のズーム倍率を 1.0 などの数値で指定します。width に device-width を指定する場合は 1 を、width に数値を指定する場合は指定しないのがおすすめです。
minimum-scale=num
最少の縮小率を 0.25 などの数値で指定します。デフォルトは 0.25 で、0～10 の数値を指定します。拡大は許すけど縮小は許さない場合は 1 を指定します。
maximum-scale=num
最大の拡大率を 10.0 などの数値で指定します。デフォルトは 1.6 で、0～10 の数値を指定します。
user-scalable=yes_no
ユーザがズーム(スケール)することを許可するか否かを、yes(許可)、または no(禁止) で指定します。
target-densitydpi=dpi
Android 端末向けの設定で、ページが期待する画面密度を low-dpi(120dpi 程度の低解像度)、medium-dpi(160dpi程度の中解像度)、high-dpi(240dpi程度の高解像度)、device-dpi(デバイスの解像度) のいずれかで指定します。ただ、この値を指定すると問題が発生するケースが多く報告されているようです。

フォーマット検出(name="format-detection")

iPhone では、電話番号が自動的にリンクテキストとなり、クリックすると電話をかけてしまいますが、format-detection により、電話番号、メールアドレス、住所っぽいテキストを自動的に検出してリンクテキストにするのを抑制することができます。

HTML
<meta name="format-detection" content="telephone=no,email=no,address=no">

Google(name="google")

Google の検索結果に対する指示を指定します。

HTML
<meta name="google" content="notranslate">
notranslate
検索結果に、ページの自動翻訳へのリンクを表示しないようにします。
nositelinkssearchbox
検索結果に、サイト専用の検索ボックスが表示されることがありますが、専用検索ボックスの表示を抑制します。

言語(http-equiv="content-language")

LS/H5。コンテンツの言語を指定します。ただしこの指定方法は非推奨で、代わりに、任意の要素に lang 属性を使用することが推奨されています。

HTML
<meta http-equiv="content-language" content="ja">

コンテンツタイプ(http-equiv="content-type")

LS/H4/Ch/Fx/e/Op/Sa。文書のコンテンツタイプ(text/htmlなど)、および文字エンコーディング(utf-8など)を指定します。この指定方法は古い形式のもので、現在では代わりに charset を使用してください。

HTML
<meta http-equiv="content-type" content="text/html">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-type" content="text/html; charset=euc-jp">
<meta http-equiv="content-type" content="text/html; charset=iso-2022-jp">

コンテンツスクリプトタイプ(http-equiv="Content-Script-Type")

[非推奨] H4-4。デフォルトのスクリプト種別を指定します。HTML4系 では指定することが強く推奨されていましたが、HTML5 では、デフォルトのスクリプト種別は text/javascript に定められ、Content-Script-Type は廃止されました。

HTML
<meta http-equiv="Content-Script-Type" content="text/javascript">

コンテンツスタイルタイプ(http-equiv="Content-Style-Type")

[非推奨] H4-4。デフォルトのスタイル種別を指定します。HTML4系 では指定することが強く推奨されていましたが、HTML5 では、デフォルトのスタイル種別は text/css に定められ、Content-Style-Type は廃止されました。

HTML
<meta http-equiv="Content-Style-Type" content="text/css">

デフォルトスタイル(http-equiv="default-style")

LS/H5/Fx。代替スタイルシートを使用している場合のデフォルトのスタイルシートを指定します。下記の例では通常は style-blue.css がデフォルトとして選択されるところ、default-style の指定により、style-red.css がデフォルトとして選択されます。

HTML
<meta http-equiv="default-style" content="theme-color-red">
<link rel="stylesheet" href="style-blue.css" title="theme-color-brue">
<link rel="stylesheet alternate" href="style-red.css" title="theme-color-red">
<link rel="stylesheet alternate" href="style-green.css" title="theme-color-green">

リフレッシュ(http-equiv="refresh")

LS/H4/Ch/Fx/e/Op/Sa。ページを 10秒毎に再描画します。

HTML
<meta http-equiv="refresh" content="10">

下記の例では、10秒後に http://www.google.com/ に遷移します。

HTML
<meta http-equiv="refresh" content="10; url=http://www.google.com/">

LS/H5。Cookie を設定します。この機能は非推奨(non-conforming)です。代わりに HTTP ヘッダの Set-Cookie を使用してください。

HTML
<meta http-equiv="set-cookie" content="sid=123456789">

ブラウザの互換性指定(http-equiv="x-ua-compatible")

LS。ブラウザに、互換性モードでのレンダリングを指示します。

HTML
<meta http-equiv="X-UA-Compatible" content="IE=7">

IE=5, IE=6, IE=7, IE=8, IE=9, IE=10, IE=11 は、それぞれの IE 互換モードで表示します。IE=EnumlateIE7, IE=EnumlateIE8, IE=EnumlateIE9, IE=EnumlateIE10, IE=EnumlateIE11 は、<!DOCTYPE> の値に応じた互換モードで表示します。IE=edge は、ブラウザがサポートする範囲で最も上位互換のモードで表示します。これらの機能は Edge ではサポートされていません。

コンテンツセキュリティポリシー(http-equiv="content-security-policy")

LS/H5.1。クロスサイトスクリプティング(XSS:Cross Site Scripting)攻撃を回避するための、コンテンツセキュリティポリシー(CPS:Content Security Policy)を指定します。下記の例では、スクリプトの埋め込みは自サイトからのみを許可、オブジェクトの埋め込みはすべて拒否しています。

HTML
<meta http-equiv="content-security-policy" content="script-src 'self'; object-src 'none'">

下記の例では、スクリプトの読み込みを自サイト、および *.example.com からのみ許可しています。

HTML
<meta http-equiv="content-security-policy" content="script-src 'self' *.example.com">

下記の例では、スクリプトの読み込みを自サイトのみに制限し、違反が発生した場合は http://report.example.com/report に違反レポートを送信します。

HTML
<meta http-equiv="content-security-policy" content="script-src 'self'; report-uri http://report.example.com/report">

キャッシュの有効期限(http-equiv="Expires")

Ch/Fx/e/Op/Sa。この文書がキャッシュから消去されるべき時刻を指定します。過去の時刻を指定すると、キャッシュが無効化されます。0 を指定した場合はキャッシュが無効化されます。60 を指定するとキャッシュが 60秒間有効になるような説明もありますが、大半のブラウザではサポートされていないようです。RFC のガイドラインでは、キャッシュの最大時間は 1年とされています。HTML5 や HTML Living Standard では定義されていませんが、大半のブラウザでサポートされています。

HTML
<meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">
<meta http-equiv="Expires" content="0">

キャッシュ制御(http-equiv="Cache-Control")

文書がブラウザにキャッシュされるのを防ぎます。これにより、アクセスする度に最新のページを読み込ませる事ができます。(サポート状況はブラウザによって異なります)

HTML
<meta http-equiv="Cache-Control" content="no-cache">

content には下記の値のいずれかを指定します。

public
キャッシュを利用します。
private
ブラウザにはキャッシュされますが、CDN やプロキシなどの中間サーバではキャッシュしません。
no-store
コンテンツをキャッシュしません。
no-cache
基本的にはキャッシュは使用しないが、キャッシュが変更されているか否かをサーバに問い合わせ、検証トークン(ETag)が同じものであればキャッシュを利用します。
max-age=n
キャッシュ最大時間を秒単位で指定します。
s-maxage=n
s は共有(shared)キャッシュを意味します。中間サーバにおけるキャッシュ最大時間を秒単位で指定します。
must-revalidate
If-Modified-Since ヘッダを用いて、キャッシュが有効か否かを必ず問い合わせる。
no-transform
中間サーバで形式変換(画像の再圧縮などを含む)を禁止します。

値はカンマ区切りで複数指定することも可能です。下記の例では、中間サーバによる共有キャッシュは 60秒、ブラウザによる私用キャッシュは 120秒保持することを指示します。

HTML
<meta http-equiv="Cache-Control" content="s-maxage=60,max-age=120">

プラグマ(http-equiv="Pragma")

下記の例もまた、文書がブラウザにキャッシュされるのを防ぎます。HTTP/1.1 に対応していない古いプロキシサーバ等に対して有効かもしれません。

HTML
<meta http-equiv="Pragma" content="no-cache">

検索ロボット制御(http-equiv="robots")

goo や Google などの検索ロボットへの指示を指定します。

HTML
<meta name="robots" content="noindex,nofollow">
all
Google。インデックスやキャッシュの登録を制限しません。
index
インデックスの作成を許可します。デフォルト値です。
noindex
Google/Yahoo/Bing。インデックスの作成を禁止します。
nofollow
Google/Yahoo/Bing。ページリンクの追跡を禁止します。
none
Google。noindex, nofollow と同じ意味です。
noarchive
Google/Yahoo/Bing。ページキャッシュのアーカイブを禁止します。
nocache
Bing。noarchive と同じ意味を持ちます。
nosnippet
Google/Bing。検索結果にスニペット(ページの冒頭部のテキストや動画のサムネイルなど)を表示しないようにします。
noodp
Google/Yahoo/Bing。ODP(Open Directory Project) によるメタデータの解釈を禁止します。
notranslate
Google。翻訳を禁止します。
noimageindex
Google。画像のインデックス登録を禁止します。
unavailable_after: Fri, 24-Nov-2017 21:25:10 GMT
Google。指定日時以降、検索結果の表示を禁止します。

詳細は下記などを参照してください。

Googleロボット制御(http-equiv="googlebot")

Google ロボットに対してのみ有効です。content は robots を参照してください。

HTML
<meta name="googlebot" content="noindex,nofollow">

トランジション指定(http-equiv="Page-Enter")

Internet Explorer 4～9 でサポートされていた、ページを移動する時のビジュアル効果を指定します。詳細は トランジション を参照してください。

HTML
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.8)">

イメージツールバーの無効化(http-equiv="imagetoolbar")

Internet Explorer 6.0 でサポートされたイメージツールバー(画像にマウスを乗せたときに表示される印刷・保存などのツールバー)を無効化します。

HTML
<meta http-equiv="imagetoolbar" content="no">

OGP:Open Graph Protocol(property="og:～")

OGP(Open Graph Protocol) と呼ばれるもので、Twitter, Facebook, Line, mixi, google+ などがサポートしています。SNS でリンクやシェアした際のリンク先情報を付与します。

HTML
<meta property="og:title" content="タイトル">
<meta property="og:type" content="website">
<meta property="og:image" content="http://www.example.com/image/site_image.jpg">
<meta property="og:url" content="http://www.example.com/">

property には下記などを指定します。

og:title
タイトルを指定します。
og:type
種別を指定します。Webサイトのトップページの場合は website, それぞれの記事ページには article などを指定します。昔は blog も使用されていましたが、現在では使用されていないようです。
og:image
イメージファイルの URL を指定します。Fecebook では、1200x630 以上、8MB 以下、縦横比 1.91:1 の画像を推奨しています。600x315 以下の場合は画像が小さく表示されます。
og:url
サイトの URL を指定します。
og:audio
関連するオーディオファイルの URL を指定します。
og:description
サイトの概略を指定します。
og:determiner
タイトルにつける限定詞(冠詞)を a, an, the, auto から指定します。
og:locale
言語を指定します。デフォルトは en_US です。日本語の場合は ja_JP を指定します。
og:og:locale:alternate
このページが対象とする言語リストを指定します。
og:site_name
サイト名を指定します。

Fecebook Insight(property="fb:～")

Facebook の場合、Facebook Insight というアクセス解析サービスを利用するための情報を指定することができます。

HTML
<meta property="fb:admins" content="10002222xxxx,10002222yyyy">
<meta property="fb:app_id" content="1234567890">
fb:admins
Facebook 独自機能で、個人や少数人でサイトを管理している場合に使用します。Find your Facebook ID で取得する Facebook ID を指定します。これにより、Facebook Insight のドメインインサイトでアクセス解析できるようになります。複数人で管理している場合は、カンマ区切りで複数の Facebook ID を指定することができます。
fb:app_id
Facebook 独自機能で、fb:admins に似ていますが、組織でサイトを管理している場合などに使用します。Facebook for Developers の [スタート] ボタンから作成する Facebook Application ID を指定します。fb:admins の場合、個人の ID を記述する必要がありますし、サイトの管理者に変更があった場合、個々のページを修正する必要がありますが、app_id に管理者を割り当て、app_id をページに記載することで、個人 ID を記述することもなく、管理者も柔軟に変更できるようになります。
fb:page_id
Facebook で使用されていましたが、現在では廃止されています。

Twitter Card(property="twitter:～")

Twitter の場合、Twitter Card という、Twitter でリンクした際にリンク先の情報を表示する機能で利用される情報を記述できます。

HTML
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="Title of this content">
<meta name="twitter:description" content="Description of this content.">
<meta name="twitter:image" content="http://www.example.com/image/twitter-image.jpg">
twitter:card
Twitter Card に表示するサマリを記述します。Twitter Card を使用する場合は必須です。
twitter:site
Twitter Card に表示する Twitter ユーザ名を @username の形式で指定します。
twitter:title
Twitter Card に表示するタイトルを指定します。Twitter Card を使用する場合は必須です。
twitter:description
Twitter Card に表示する説明文を記述します。
twitter:image
Twitter Card に表示するイメージの URL を指定します。画像ファイルは 144x144～4096x4096 の大きさで縦横比は 1:1、5MB 未満の JPG, PNG, WEBP, GIF 画像を指定します。
twitter:image:alt
Twitter Card に表示するイメージの説明(alt属性)をテキストで指定します。

Microsoft:ピン止めサイトのメタデータ(name="msapplication-*")

Internet Explorer では、ピン止めしたサイトに関するメタデータを指定することができます。

HTML
<meta name="application-name" content="Channel 9 Audio Player">
<meta name="msapplication-tooltip" content="Channel 9 Podcasts">
<meta name="msapplication-starturl" content="./">
<meta name="msapplication-window" content="width=1024;height=768">
<meta name="msapplication-navbutton-color" content="#FF3300">
<meta name="msapplication-task"
   content="name=Check Order Status;
            action-uri=./orderStatus.aspx?src=IE9;
            icon-uri=./favicon.ico">
<meta name="msapplication-task-separator" content="separator1">
application-name
アプリケーション名を指定します。
msapplication-tooltip
ピン止めされたショートカットにマウスを乗せた場合に表示するテキストを指定します。
msapplication-starturl
アプリケーションのルート URL を指定します。
msapplication-window
アプリケーションを最初に起動した際のウィンドウの初期サイズを width=xxx;height=xxx の形式で指定します。
msapplication-navbutton-color
アプリケーション表示時の [戻る] [進む] ボタンの色を指定します。
msapplication-task
右クリックした際に表示されるタスクを指定します。name にはタスク名、action-uri には実行時に開くページの URL、icon-uri にはアイコンの URL を指定します。
msapplication-task-separator
タスクリストに区切り線を表示します。

詳細は下記などを参照してください。

Apple: Smart App Banners(name="apple-itunes-app")

Apple では、Apple Store に掲載するアプリケーション用のバナー(Smart App Banners)を定義する方法を提供しています。

HTML
<meta name="apple-itunes-app"
  content="app-id=myAppStoreID,
           affiliate-data=myAffiliateData,
           app-argument=myURL">
app-id
アプリに割り当てられた app ID を指定します。必須です。
affiliate-data
iTunes アフィリエイト文字列を指定します。https://www.apple.com/itunes/affiliates/ から取得します。
app-argument
アプリを提供する URL を指定します。
Copyright (C) 1996-2022 杜甫々
初版:1996年9月10日 最終更新:2022年2月6日
https://www.tohoho-web.com/html/meta.htm