HTML メタの説明

導入

メタタグは、HTML言語のHEAD領域にある補助タグです。

meta は、ページの説明、キーワード、最終更新日、その他のメタデータを定義するためによく使用されます。このメタデータは、ブラウザ（ページのレイアウト方法やリロード方法）、検索エンジン、その他の Web サービスに役立ちます。

mata タグにはグローバル属性が含まれています (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)

文字セット

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

<メタ文字セット="UTF-8">

コンテンツ

content 属性の内容は、使用する http-equiv 属性または name 属性の値になります。

http-同等

この属性には、HTTP ヘッダーの名前を含めることができます。属性の完全な名前は http-equivalent です。サーバーとユーザーエージェントの動作を変更できる命令を定義します。このディレクティブの値はコンテンツ属性内で定義され、次のいずれかになります。

コンテンツ言語 (非推奨)

ページのデフォルト言語を定義します。これは、任意の要素の lang 属性によって上書きできます。

プラグマ

ブラウザがローカル コンピュータのキャッシュからページ コンテンツにアクセスするのを防ぎます。のように：

<meta http-equiv="プラグマ" content="キャッシュなし">

期限切れ

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

キャッシュ制御

リクエストとレスポンスに従うキャッシュ メカニズムを指定します。用途はいくつかあります:

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 フィールドを使用する方法です。

コンテンツ セキュリティ ポリシー: スクリプト ソース 'self'; オブジェクト ソース 'none';
style-src cdn.example.org third-party.org;child-src https:

もう 1 つの方法は、Web ページのタグを使用することです。

<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 に準拠していない外部リソースの読み込みがブロックされます。

詳細については、コンテンツ セキュリティ ポリシー入門チュートリアルを参照してください。

コンテンツタイプ（非推奨）

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

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

この指令は以下を指定します。

コンテンツ属性に正の整数のみが含まれている場合、ページを再読み込みする秒数を示します。
コンテンツ属性に正の整数とそれに続く文字列「; url =」が含まれている場合、現在のページは XX 秒後に別の有効な URL にリダイレクトされます。

<meta http-equiv="refresh" content="2; URL=https://www.jb51.net/">
 //2秒後に123WORDPRESS.COMにジャンプすることを意味します

set-cookie (非推奨)

ページの Cookie を定義します。対応するコンテンツ値は、IETF HTTP Cookie 仕様 (https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14) に準拠している必要があります。

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

X-UA 互換

ブラウザにページをレンダリングするバージョンを指示するために使用されます。

<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1"/>
 //IE と Chrome を指定して、現在のページをレンダリングするために最新バージョンを使用するようにします

名前

name 属性はドキュメント レベルのメタデータとして定義されており、itemprop、http-equiv、charset などの属性と同時に設定することはできません。

このメタデータ名は、コンテンツ属性に含まれる値に関連付けられます。 name属性に指定できる値は次のとおりです。

アプリケーション名

Web ページで実行されるアプリケーションの名前を定義します。

著者

Web ページの作成者をマークするために使用されます。

説明

ページの内容について簡潔かつ正確な説明を記載します。 Firefox や Opera などの一部のブラウザでは、これを Web ブックマークのデフォルトの説明として使用します。

ジェネレータ

Web ページがどのようなソフトウェアで作成されているかを示すために使用されます。

キーワード

検索エンジンにウェブページのキーワードを伝えるために使用されます

再訪後

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

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

レンダラー

レンダラーはデュアルコア ブラウザ用に用意されており、デュアルコア ブラウザがデフォルトでページをレンダリングする方法を指定するために使用されます。たとえば、360 ブラウザ。例：

<meta name="レンダラー" content="webkit"> 
//デフォルトの Webkit カーネル <meta name="renderer" content="ie-comp"> 
//デフォルトの IE 互換モード <meta name="renderer" content="ie-stand"> 
//デフォルトのIE標準モード

リファラー

referrer は、ドキュメントによって開始された Request リクエストに添付される Referer HTTP ヘッダー (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer) を制御します。対応する値はコンテンツ内にあります。

ロボット

ロボットは、どのページをインデックスに登録し、どのページをインデックスに登録しないかをクローラーに伝えるために使用されます。

ビューポート

ビューポートの初期サイズに関するヒントを提供します。モバイル専用です。

一般的な使用法

ズームを無効にする:

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

ウェブページを自動的に更新する

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

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

自動リダイレクト

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

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

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

Web ページをローカルでテストすると、新しいコンテンツが時間内に更新されません。これは、ブラウザのキャッシュが原因である可能性があります。現時点では、メタタグを使用してブラウザのキャッシュを無効にすることで解決できます。一般的なコードは次のとおりです。

<meta http-equiv="有効期限" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="キャッシュコントロール" content="キャッシュなし">

Baiduのトランスコードは禁止されています

<meta http-equiv="キャッシュコントロール" content="no-siteapp"/>

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

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

参照する

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