HTMLメタタグの共通属性の整理_html/css_WEB-ITnose

概要

タグは、HTML ドキュメントに関するメタデータを提供します。メタデータはページには表示されませんが、機械で読み取り可能です。これは、ブラウザー (コンテンツの表示方法やページのリロード方法)、検索エンジン (キーワード)、またはその他の Web サービスで使用できます。 ?? W3School

必須属性

一部のテキスト http-equiv または Me で定義name 属性に関連する情報

属性	値	説明
コンテンツ

オプション属性

属性 名前 content

SEO 最適化

リファレンス ドキュメント

ページ キーワード では、各 Web ページには、Web ページのコンテンツを説明する固有のキーワード セットが必要です。
ユーザーが検索する可能性が高い、説明的で代表的なキーワードとフレーズを使用し、ページで提供される情報を正確に説明します。短すぎるコンテンツにはマークを付けてください。検索エンジンはそのコンテンツに関連性があるとみなさない可能性があります。また、タグは 874 文字を超えてはなりません。

<meta name="keywords" content="your tags" />

ページの説明、すべての Web ページには、ページのコンテンツを正確に反映する 150 文字以内の説明タグが必要です。

<meta name="description" content="150 words" />

検索エンジンのインデックス作成方法、robotterms はカンマ (,) で区切られた値のセットで、通常は none、noindex、nofollow、all、index、follow の値を持ちます。 nofollow および noindex 属性値を正しく使用していることを確認してください。

<meta name="robots" content="index,follow" /> <!--    all：文件将被检索，且页面上的链接可以被查询；    none：文件将不被检索，且页面上的链接不可以被查询；    index：文件将被检索；    follow：页面上的链接可以被查询；    noindex：文件将不被检索；    nofollow：页面上的链接不可以被查询。 -->

ページのリダイレクトと更新: コンテンツ内の数字は時間 (秒)、つまり更新にかかる時間を表します。 URL を追加すると、指定した Web ページにリダイレクトされます (検索エンジンはこれを自動的に検出することができ、エンジンによって誤解を招くものとみなされ、処罰される可能性があります)。

<meta http-equiv="refresh" content="0;url=" />

その他

<meta name="author" content="author name" /> <!-- 定义网页作者 --> <meta name="google" content="index,follow" /> <meta name="googlebot" content="index,follow" /> <meta name="verify" content="index,follow" />

モバイルデバイス

ビューポート: モバイルブラウザの表示を最適化できます。 Web サイトが応答しない場合は、初期スケールを使用しないか、スケーリングを無効にします。
ほとんどの 4.7 ～ 5 インチ デバイスのビューポート幅は 360 ピクセルに設定され、5.5 インチ デバイスは 400 ピクセルに設定され、iPhone6 プラスは 414 ピクセルに設定されます。

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

width: 幅 (値/デバイスの幅) (範囲は 200 ～ 10,000、デフォルトは 980 ピクセル) height: 高さ (値/デバイスの高さ) (範囲は 223 ～ 10,000) 初期スケール: 初期スケーリング (範囲 From >) ;0 ～ 10) minimum-scale: ユーザーがズームできる最小比率、maximum-scale: ユーザーがズームできる最大比率、user-scalable: ユーザーが手動でズームできるかどうか (いいえ、はい) minimum-ui: ページ上に配置可能 ロード時に上部と下部のステータス バーを最小化します。 (非推奨)

多くの人が応答しない Web サイトでInitial-scale=1 を使用するため、Web サイトが 100% の幅でレンダリングされ、ユーザーが手動でページを移動するかズームする必要があることに注意してください。 user-scalable=no または Maximum-scale=1 が、initial-scale=1 とともに使用される場合、ユーザーは Web ページを拡大/縮小してコンテンツ全体を表示することはできません。

WebApp 全画面モード: 偽装アプリ、オフライン アプリケーション。

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

ステータス バーを非表示にする/ステータス バーの色を設定する: WebApp 全画面モードがオンになっている場合にのみ有効です。コンテンツの値はデフォルトで黒 | 半透明です。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

ホーム画面にタイトルを追加します

<meta name="apple-mobile-web-app-title" content="标题">

番号を無視して電話番号として自動的に認識します

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

メールの認識を無視します

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

スマートアプリを追加 スマートアプリバナー: ブラウザにアプリを通知しますこの Web サイトに対応するものを選択して追加します。 ページ上にダウンロード バナーが表示されます (以下を参照)。参考ドキュメント

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

その他 参考ドキュメント

<!-- 针对手持设备优化，主要是针对一些老的不识别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">

Web ページ関連

エンコーディングの宣言

<meta charset='utf-8' />

IE と Chrome の最新バージョンを優先して使用する

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 关于X-UA-Compatible --> <meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 --> <meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 --> <meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

ブラウザカーネル制御: 国内ブラウザの多くはデュアルコア (Webkit とTrident)、Webkit カーネルの高速ブラウジング、Web ページや古い Web サイトと互換性のある IE カーネル。メタ タグを追加する Web サイトは、ブラウザがどのカーネル レンダリングを選択するかを制御できます。参考ドキュメント

<meta name="renderer" content="webkit|ie-comp|ie-stand">

国内デュアルコアブラウザのデフォルトのカーネルモードは以下の通りです:
1. Sogou 高速ブラウザ、QQ ブラウザ: IE カーネル (互換モード)
2. 360 速度ブラウザ、Aoyou ブラウザ: Webkit カーネル (速度)モード)

ローカル コンピューターのキャッシュにあるページ コンテンツへのブラウザーのアクセスを禁止します: この設定では、訪問者はオフラインで閲覧できなくなります。

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

Windows 8

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --> <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

Site Adaptation: 主に PC とモバイルのページの対応に使用されます。

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url"> <!--[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。 -->

トランスコーディング ステートメント: Baidu で Web ページを開くと、その Web ページがトランスコードされる可能性があります (広告の投稿など)。トランスコーディングを回避するには、次のメタ

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

を追加できます。

	値
著者 / 説明 / キーワード / ジェネレータ / 改訂 / その他	content 属性を名前に関連付けます。
some text	content 属性の値を変換するために使用される形式を定義します。