meta は METAinformation(メタ情報)の略です。英語の meta- は、後から(after)、超えて(beyond)、共に(with)、変化(change)などのニュアンスを持つ接頭語です。「それまでの機能に加えて、後から機能を追加するためのもの」といった意味でしょうか。<meta> タグは、HTML の規約で定義されているものに加えて、いろいろな目的で使用されます。
<meta name="name" content="content"> の形式は、ブラウザや検索エンジンのロボットなどに情報を与えます。
<meta http-equiv="name" content="content">の形式は、HTTPヘッダに name: content というフィールドを追加したのと同じ働きをします。
詳細は、使用例を参照してください。
LS/Ch/Fx/e/Op/Sa。HTML5 では、文字エンコーディングを下記の様にしていします。これは、HTML文書の先頭 1024バイト以内に記述する必要があります。また、<title> が非ASCII文字を使用している場合は、<title> よりも前に記述する必要があります。
<meta charset="UTF-8"> <meta charset="Shift_JIS"> <meta charset="euc-jp"> <meta charset="iso-2022-jp">
LS/H5.1。Webアプリケーション名を指定します。Webアプリケーションではない通常ページの場合には指定してはなりません。
<meta name="application-name" content="WebMail2">
LS/H3。文書の著者を明記します。画面上では表示の変化はありません。
<meta name="author" content="Tohoho">
LS/H5。この文書に関連する説明(description)を指定します。検索ロボットの中にはこのキーワードを解釈してくれるものがあります。
<meta name="description" content="HTMLリファレンス">
LS/H5。文書を作成したHTMLエディタなどのソフトウェア名を指定します。
<meta name="generator" content="Simple HTML Editor V2.5">
LS/H4。この文書に関連するキーワードをカンマ(,)区切りで指定します。検索ロボットの中にはこのキーワードを解釈してくれるものがあります。
<meta name="keywords" content="HTML,CSS,JavaScript">
LS。このページから別のページに遷移する際に、ブラウザからサーバに対してリファラ情報(遷移元URL情報)を送信する際のリファラポリシーを指定します。
<meta name="referrer" content="no-referrer">
LS。このページのテーマカラーを指定します。色の指定方法はスタイルシートの color を参照してください。Android 版の Chrome では、ページ上部のタブをこの色で表現します。
<meta name="theme-color" content="#469">
media 属性でテーマを適用するメディアを選択することもできます。下記の例では通常の画面で横幅が 400px 以上の場合は #633 を、900px 以上の場合は #336 を指定します。
<meta name="theme-color" content="#633" media="screen and (max-width: 400px)"> <meta name="theme-color" content="#336" media="screen and (max-width: 900px)">
スマホブラウザなどでも適切に表示されるよう、ビューポートの設定を行います。カンマ区切りで複数指定することが可能です。推奨する記述は下記のいずれかです。
<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">
iPhone では、電話番号が自動的にリンクテキストとなり、クリックすると電話をかけてしまいますが、format-detection により、電話番号、メールアドレス、住所っぽいテキストを自動的に検出してリンクテキストにするのを抑制することができます。
<meta name="format-detection" content="telephone=no,email=no,address=no">
Google の検索結果に対する指示を指定します。
<meta name="google" content="notranslate">
LS/H5。コンテンツの言語を指定します。ただしこの指定方法は非推奨で、代わりに、任意の要素に lang 属性を使用することが推奨されています。
<meta http-equiv="content-language" content="ja">
LS/H4/Ch/Fx/e/Op/Sa。文書のコンテンツタイプ(text/htmlなど)、および文字エンコーディング(utf-8など)を指定します。この指定方法は古い形式のもので、現在では代わりに charset を使用してください。
<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">
[非推奨] H4-4。デフォルトのスクリプト種別を指定します。HTML4系 では指定することが強く推奨されていましたが、HTML5 では、デフォルトのスクリプト種別は text/javascript に定められ、Content-Script-Type は廃止されました。
<meta http-equiv="Content-Script-Type" content="text/javascript">
[非推奨] H4-4。デフォルトのスタイル種別を指定します。HTML4系 では指定することが強く推奨されていましたが、HTML5 では、デフォルトのスタイル種別は text/css に定められ、Content-Style-Type は廃止されました。
<meta http-equiv="Content-Style-Type" content="text/css">
LS/H5/Fx。代替スタイルシートを使用している場合のデフォルトのスタイルシートを指定します。下記の例では通常は style-blue.css がデフォルトとして選択されるところ、default-style の指定により、style-red.css がデフォルトとして選択されます。
<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">
LS/H4/Ch/Fx/e/Op/Sa。ページを 10秒毎に再描画します。
<meta http-equiv="refresh" content="10">
下記の例では、10秒後に http://www.google.com/ に遷移します。
<meta http-equiv="refresh" content="10; url=http://www.google.com/">
HTML5 や HTML Living Standard では、; や URL= は不要となりました。
<meta http-equiv="refresh" content="10 http://www.google.com/">
LS/H5。Cookie を設定します。この機能は非推奨(non-conforming)です。代わりに HTTP ヘッダの Set-Cookie を使用してください。
<meta http-equiv="set-cookie" content="sid=123456789">
LS。ブラウザに、互換性モードでのレンダリングを指示します。
<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 ではサポートされていません。
LS/H5.1。クロスサイトスクリプティング(XSS:Cross Site Scripting)攻撃を回避するための、コンテンツセキュリティポリシー(CPS:Content Security Policy)を指定します。下記の例では、スクリプトの埋め込みは自サイトからのみを許可、オブジェクトの埋め込みはすべて拒否しています。
<meta http-equiv="content-security-policy" content="script-src 'self'; object-src 'none'">
下記の例では、スクリプトの読み込みを自サイト、および *.example.com からのみ許可しています。
<meta http-equiv="content-security-policy" content="script-src 'self' *.example.com">
下記の例では、スクリプトの読み込みを自サイトのみに制限し、違反が発生した場合は http://report.example.com/report に違反レポートを送信します。
<meta http-equiv="content-security-policy" content="script-src 'self'; report-uri http://report.example.com/report">
Ch/Fx/e/Op/Sa。この文書がキャッシュから消去されるべき時刻を指定します。過去の時刻を指定すると、キャッシュが無効化されます。0 を指定した場合はキャッシュが無効化されます。60 を指定するとキャッシュが 60秒間有効になるような説明もありますが、大半のブラウザではサポートされていないようです。RFC のガイドラインでは、キャッシュの最大時間は 1年とされています。HTML5 や HTML Living Standard では定義されていませんが、大半のブラウザでサポートされています。
<meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT"> <meta http-equiv="Expires" content="0">
文書がブラウザにキャッシュされるのを防ぎます。これにより、アクセスする度に最新のページを読み込ませる事ができます。(サポート状況はブラウザによって異なります)
<meta http-equiv="Cache-Control" content="no-cache">
content には下記の値のいずれかを指定します。
値はカンマ区切りで複数指定することも可能です。下記の例では、中間サーバによる共有キャッシュは 60秒、ブラウザによる私用キャッシュは 120秒保持することを指示します。
<meta http-equiv="Cache-Control" content="s-maxage=60,max-age=120">
下記の例もまた、文書がブラウザにキャッシュされるのを防ぎます。HTTP/1.1 に対応していない古いプロキシサーバ等に対して有効かもしれません。
<meta http-equiv="Pragma" content="no-cache">
goo や Google などの検索ロボットへの指示を指定します。
<meta name="robots" content="noindex,nofollow">
詳細は下記などを参照してください。
Google ロボットに対してのみ有効です。content は robots を参照してください。
<meta name="googlebot" content="noindex,nofollow">
Internet Explorer 4～9 でサポートされていた、ページを移動する時のビジュアル効果を指定します。詳細は トランジション を参照してください。
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.8)">
Internet Explorer 6.0 でサポートされたイメージツールバー(画像にマウスを乗せたときに表示される印刷・保存などのツールバー)を無効化します。
<meta http-equiv="imagetoolbar" content="no">
OGP(Open Graph Protocol) と呼ばれるもので、Twitter, Facebook, Line, mixi, google+ などがサポートしています。SNS でリンクやシェアした際のリンク先情報を付与します。
<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 には下記などを指定します。
Facebook の場合、Facebook Insight というアクセス解析サービスを利用するための情報を指定することができます。
<meta property="fb:admins" content="10002222xxxx,10002222yyyy"> <meta property="fb:app_id" content="1234567890">
Twitter の場合、Twitter Card という、Twitter でリンクした際にリンク先の情報を表示する機能で利用される情報を記述できます。
<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">
Internet Explorer では、ピン止めしたサイトに関するメタデータを指定することができます。
<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">
詳細は下記などを参照してください。
Apple では、Apple Store に掲載するアプリケーション用のバナー(Smart App Banners)を定義する方法を提供しています。
<meta name="apple-itunes-app"
content="app-id=myAppStoreID,
affiliate-data=myAffiliateData,
app-argument=myURL">