メタタグの定義

メタタグは、HTML ドキュメントに関するメタデータを提供する head セクションの補助タグです。ページには表示されませんが、機械で読み取り可能です。ブラウザ（コンテンツの表示方法やページのリロード方法）、検索エンジン（SEO）、その他のWebサービスに使用できます。

使用

HTML では、<meta> タグには終了タグがありません。

XHTML では、<meta> タグを適切に閉じる必要があります。

メタデータは常に名前と値のペアで渡されます。

属性

属性	価値	説明
文字コード	キャラクターセット	HTML文書の文字エンコーディングを指定します。
コンテンツ	文章	http-equiv または name 属性に関連するメタ情報を定義します。
http 相当	コンテンツセキュリティポリシーコンテンツタイプデフォルトのスタイルリフレッシュする	content 属性を HTTP ヘッダーに関連付けます。
名前	アプリケーション名著者説明発生器キーワードビューポート	content 属性を名前に関連付けます。
図式	いくつかのテキスト	content 属性の値を変換するために使用される形式を定義します。

名前属性

name属性は主に Web ページを説明するために使用され、対応する属性値はcontent であり、コンテンツ内のコンテンツは主に検索エンジンロボットが情報を検索して分類するために使用されます。

名前属性の構文形式は次のとおりです。

	<meta name="参数" content="具体的参数值">

キーワード

「キーワード」はよく使われる名前です。ドキュメントの一連のキーワードを定義します。一部の検索エンジンは、ドキュメントに遭遇したときにこれらのキーワードを使用してドキュメントを分類します。

<meta name="keywords" content="HTML,ASP,PHP,SQL">

説明

説明:説明は、 Web サイトのメインコンテンツを検索エンジンに伝えるために使用されます。

<meta name="description" content="主要包括web前端及周边技术">

著者

説明: author はWeb ページの作成者をマークします。

<meta name="author" content="[email protected]">

ビューポート

説明:ビューポートは、モバイル Web サイトの幅と高さの倍率などの情報を説明するために使用されます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

コンテンツの距離パラメーターは次のとおりです。

1)幅width (値/デバイス幅)

2)高さの高さ (値/デバイスの高さ)

3)初期スケールの初期ズーム率

4)最大スケール最大ズーム比

5)最小スケール最小ズーム率

6)ユーザースケーラブルでユーザーがズームできるかどうか (はい/いいえ)

http-equiv 属性

http-equiv 属性は http ヘッダーのコンテンツを追加するもので、ブラウザに送信されるカスタムまたは追加の http ヘッダーコンテンツにこの属性を使用できます。

http-equiv 属性の構文形式:

<meta http-equiv="参数" content="具体的参数值">

文字コード

説明: Web ページの作成に使用されるテキストと言語を説明するために使用されます。

<meta http-equiv="charset" content="iso-8859-1">

有効期限が切れます

説明: Web ページの有効期限を設定します。有効期限が切れたら、サーバーから取得する必要があります。GMT 時刻形式を使用する必要があることに注意してください。

<meta http-equiv="expires" content="31 Dec 2023">

コンテンツタイプ

説明: ページで使用される文字セットを設定するために使用されます。

<meta http-equiv="content-Type" content="text/html; charset=utf-8">

http-equiv 属性は、名前と値のペアの名前を提供します。また、実際のドキュメントを送信する前に、ブラウザに送信する MIME ドキュメントのヘッダーに名前。

サーバーがブラウザにドキュメントを送信するとき、最初に多くの名前。一部のサーバーはこれらの名前、すべてのサーバーは少なくとも 1 つの content-type:text/html を送信します。これにより、 ブラウザは HTML ドキュメントを受け入れる準備ができていることがわかります。

たとえば、次のように追加します。

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

ブラウザに送信されるヘッダーには次のものが含まれる必要があります。

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

もちろん、これらのフィールドは、ブラウザがこれらの追加のヘッダーフィールドを受け入れ、適切な方法で使用できる場合にのみ意味を持ちます。

コンテンツ属性

content 属性は、名前と値のペアで値を提供します。値には任意の有効な文字列を指定できます。

content 属性は、常にname属性またはhttp-equiv属性とともに使用する必要があります。

一般的な使い方

<!-- 设定字符集 ，以下两种定义均可-->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<!-- 页面关键词 keywords -->
<meta name="keywords" content="your keywords">
 
<!-- 页面描述内容 description -->
<meta name="description" content="your description">
 
<!-- 定义网页作者 author -->
<meta name="author" content="author,email address">
 
<!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow">
 
<!-- 优先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
 
<!-- 禁止自动翻译 -->
<meta name="google" value="notranslate">
 
<!-- 禁止转码 -->
<meta http-equiv="Cache-Control" content="no-transform">
 
<!-- 选择使用的浏览器解析内核 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
 
<!-- 移动端 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->

HTML でのメタの基本的な適用