HTMLメタの説明

はじめに

metaタグは、HTML言語のHEADセクションのためのヘルパータグです。

metaは、ページの説明、キーワード、最終更新日、その他のメタデータを定義するために一般的に使用されます。このメタデータは、ブラウザ（ページのレイアウトや再読み込みの方法）、検索エンジン、その他のウェブサービスに提供されます。

mataタグには、グローバル属性( https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes )

文字セット

ページの文字エンコーディングを宣言する。

<meta charset="UTF-8">

内容

content属性の内容は、htp-equivまたはname属性の値で、どちらを使用するかによって異なります。

http-equiv

この属性は、HTTP ヘッダーの名前を含むことができます。属性の正式名称は http-equivalent で、サーバーとユーザーエージェントの動作を変更できるディレクティブを定義しています。ディレクティブの値は content 属性内で定義され、以下のいずれかになります。

content-language (非推奨)

ページのデフォルト言語を定義します。任意の要素の lang 属性で上書きすることができます。

プラグマ

ブラウザがローカルコンピュータのキャッシュからページのコンテンツにアクセスすることを無効にします。たとえば、以下のようになります。

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

期限切れ

は、ウェブページの有効期限を設定するために使用できます。ページが期限切れになると、サーバーに再送信する必要があります。

キャッシュコントロール

リクエストとレスポンスに対して従うべきキャッシュ機構を指定します。これにはいくつかの用途があります。

no-cacheを使用します。最初にリクエストを送信し、サーバーにリソースが変更されたかどうかを確認し、変更されていない場合はキャッシュを使用します。
no-storeを使用します。キャッシュを許可せず、毎回サーバーに行き、フルレスポンスをダウンロードします。(セキュリティ対策)
public : すべてのレスポンスをキャッシュするが、必須ではない。なぜなら、max-age は同じことをすることができるからです
private : 単一ユーザーに対してのみキャッシュを行うため、リレーでのキャッシュは不可。(例えば、CDNはプライベートレスポンスのキャッシュを許可しません)
max-age : 現在のリクエストから、サーバーに再リクエストに行かずにレスポンスをキャッシュし、再利用できる時間を示します。例えば、max-age=60は、レスポンスがキャッシュされ、さらに60秒間再利用できることを意味します。

コンテンツセキュリティポリシー

ページ作成者が現在のページのコンテンツ・ポリシーを定義できるようにします。コンテンツ・ポリシーは基本的に、許可されたサーバー・アドレスとスクリプトのエンドポイントを指定し、クロスサイト・スクリプティング攻撃を防ぐのに役立ちます。

CSPの本質はホワイトリスト方式であり、開発者はクライアントに対して、どの外部リソースを読み込んで実行できるかを明示的に指示する、つまりホワイトリストを提供することに等しい。その実装と実行はすべてブラウザが行い、開発者は設定を提供するだけでよい。

CSPは、Webページのセキュリティを大幅に向上させます。攻撃者が脆弱性を見つけても、ホワイトリストに登録された信頼できるホストも操作していない限り、スクリプトを注入することはできません。CSPを有効にする方法は2つあり、1つはHTTPヘッダーのContent-Security-Policyフィールドを介する方法です。

Content-Security-Policy: script-src 'self'; object-src 'none';
style-src cdn.example.org third-party.org;child-src https:

もうひとつは、ページのタグを介したものです。

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

上記のコードでは、CSPは以下のように構成されています。

スクリプトを実行します。現在のドメインのみを信頼する
タグ：どのURLも信用しない、つまりどのリソースもロードしない
スタイルシート: cdn.example.org と third-party.org のみを信頼します。
フレーム: HTTPS プロトコルで読み込むこと
その他のリソース：制限なし
有効にすると、CSPに一致しない外部リソースの読み込みがブロックされます。

より詳細な説明は、以下を参照してください。 コンテンツセキュリティポリシー入門チュートリアル

content-type (非推奨)

ドキュメントの MIME タイプを定義し、その後に文字エンコーディングを記述します。

この値は廃止されたので使用しないでください。要素のcharset属性を使用することが推奨されます。
XHTMLやHTML5のXHTMLシリアライズではドキュメントタイプを変更することができないため、MIMEタイプをXHTML MIMEタイプに設定することは使用しないでください。
リフレッシュ

このディレクティブは、以下のように指定します。

content属性が正の整数だけを含む場合、ページの再読み込みにかかる秒数を示す。
content 属性が正の整数の後に文字列 '; url =' を含む場合、現在のページが XX 秒後に他の有効な URL にリダイレクトされることを示します。

<meta http-equiv="refresh" content="2; URL=https://www.jb51.net/">
 //means 2 seconds to jump to the script house

set-cookie (非推奨)

ページのクッキーを定義します。対応するコンテンツの値は、IETF HTTP Cookie 仕様に従わなければなりません ( https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14 )

このディレクティブは使用せず、Set-Cookie の HTTP ヘッダを使用してください ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie の代わりに

X-UA-Compatible

どのバージョンでページをレンダリングするかをブラウザに伝えるために使用します。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 // Specify that IE and Chrome use the latest version to render the current page

名称

name 属性は文書レベルのメタデータとして定義され、以下の属性と一緒に設定することはできません： itemprop, http-equiv, charset。

このメタデータの名前は、content 属性に含まれる値に関連付けられている。name 属性に指定できる値は、以下のとおりです。

アプリケーション名

Webページで動作しているアプリケーションの名前を定義します。

作者

ページの作者へのタグ付けに使用します。

説明

ページの内容に関する省略された、しかし正確な説明を含みます。FirefoxやOperaなどの一部のブラウザでは、ウェブページのブックマークのデフォルトの説明文として使用されます。

ジェネレータ

どのようなソフトウェアがページを作ったかを示すために使用します。

キーワード

検索エンジンにページのキーワードを伝えるために使用します。

再訪問後

ページの更新頻度が低い場合、検索エンジンのクローラーによるサーバーへの負担を軽減するために、クローラーに再訪問時間を設定することができます。再訪問時間が短すぎる場合は、クローラーが定義したデフォルトの時間に訪問することになります。例

<meta name="revisit-after" content="7 days">

レンダラ

renderer はデュアルコアブラウザ用で、デュアルコアブラウザがデフォルトでどのようにページをレンダリングするかを指定するために使用されます。例えば、360ブラウザなどです。例

<meta name="renderer" content="webkit"> 
// Default webkit kernel
<meta name="renderer" content="ie-comp"> 
//default IE compatibility mode
<meta name="renderer" content="ie-stand"> 
//default IE standard mode

リファラー

Referer は、ドキュメントから始まる Request リクエストに付けられる Referer HTTP ヘッダを制御します ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer ) に対応する値をコンテンツに設定します。

ロボット

robotsは、どのページがインデックスされる必要があり、どのページがそうでないかをクローラーに伝えるために使用されます。

ビューポート

ビューポートの初期サイズに関するヒントを提供します。モバイル端末向けのみ。

一般的な使用方法

スケーリングを無効にする。

<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user- scalable=no"/>

自動更新のページ

meta http-equiv="refresh" は、ブラウザが自動的にページを更新するのを一定時間遅らせることを指定します。次のmetaタグは、ブラウザが自動的に5秒ごとに更新することを指定します。

<meta http-equiv="refresh" content="5″ />

自動リダイレクト

refresh metaタグを使用して、ページをリダイレクトすることができます。次の例では、5秒後に www.jb51.net にアクセスします。

<meta http-equiv="refresh" content="5;url='https://www.jb51.net' " />

ブラウザのキャッシュを無効にする

ローカルでページのテストを行っていて、新しいコンテンツがタイムリーに更新されない場合、ブラウザのキャッシュが発生しているだけかもしれません。このとき、Metaタグを使ってブラウザのキャッシュを無効にすれば解決する。一般的なコードは以下の通りです。

<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">

Baiduトランスコーディングの無効化

<meta http-equiv="Cache-Control" content="no-siteapp"/>

モバイル開発で電話番号として数字をブロックするコード。

<meta content="telephone=no" name="format-detection" />

参考文献

MDN HTML 要素 ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta )