よく使用される HTML メタ タグ属性 (Web サイトの互換性と最適化に必要)_HTML/Xhtml_Web ページの制作

オリジナルアドレス:http://segmentfault.com/blog/ciaocc/1190000002407912
作者:ciaocc
転載の際は著作権を明記してください。

概要

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

必須属性

属性	值	描述
content	some text	定义与http-equiv或name属性相关的元信息

オプションの属性

属性	值	描述
http-equiv	content-type / expire / refresh / set-cookie	把content属性关联到HTTP头部。
name	author / description / keywords / generator / revised / others	把 content 属性关联到一个名称。
content	some text	定义用于翻译 content 属性值的格式。

SEO の最適化

参考資料

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

コードをコピーします

コードは次のとおりです:

<meta name="キーワード" content ="your tags" />

ページの説明 、各 Web ページには、そのコンテンツを正確に反映する 150 文字以内の説明タグを含める必要があります。ウェブページ。

コードをコピーします

コードは次のとおりです:

<meta name="description" content ="150 単語" />

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

コードをコピー

コードは次のとおりです:

<meta name=" robots" content ="index,follow" />
<!--
all: ファイルが取得され、ページ上のリンクをクエリできます。
none: ファイルはクエリされません
インデックス: ファイルは取得されます。
noindex: ファイルは取得されません。取得済み;
nofollow: ページ上のリンクを照会できません。
-->

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

コードをコピーしますコードは次のとおりです:

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

その他

コードをコピーコードは次のとおりです:

<meta name=" author" content ="著者名" /> <!-- Web ページの作成者を定義します-->
<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 全画面モードでページを開くと黒い枠が表示されます -->

1.width: 幅 (数値/デバイスの幅) (200 ～ 10,000 の範囲、デフォルトは 980 ピクセル)

2.高さ: 高さ (数値/デバイスの高さ) (223 ～ 10,000 の範囲)
3.initial-scale: 初期スケーリング率 (>0 ～ 10 の範囲)
4.minimum-scale: ユーザーがズームできる最小スケール
5.maximum-scale:ユーザーは最大比率までズームできます。 (非推奨)
多くの人が応答しない 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 全画面モードがオンになっている場合にのみ有効です。コンテンツの値はデフォルトで黒 | 半透明です。

コードをコピー

コードは次のとおりです:

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

ホーム画面にタイトルが追加されました

コードをコピーします

コードは次のとおりです:

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

電話番号として自動的に認識される数字を無視します

コードをコピーします

コードは次のとおりです:

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

認識メールを無視する

コードをコピーします

コードは次のとおりです:

<meta content="email=no " name= "フォーマット検出" />

スマート アプリ バナーの追加 スマート アプリ バナー: この Web サイトに対応するアプリをブラウザーに指示し、ページ上にダウンロード バナーを表示します (以下を参照)。参考資料

コードをコピーします

コードは次のとおりです:

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

その他 参考資料

XML/HTML コードコンテンツをクリップボードにコピー

1. <!-- 主に BlackBerry などのビューポートを認識しない一部の古いブラウザ用に、ハンドヘルド デバイス用に最適化されています -->
2. <メタ 名前="ハンドヘルドフレンドリー" コンテンツ="true">
3. <! -- Microsoft の昔ながらのブラウザ -->
4. <メタ 名前="MobileOptimized" コンテンツ="320">
5. <!-- 強制縦画面 -->
6. <メタ 名前="画面-向き" コンテンツ="ポートレート">
7. <!-- QQ 強制縦画面 -->
8. <メタ 名前="x5-向き" コンテンツ="ポートレート">
9. <!-- UC 強制全画面表示 -->
10. <メタ 名前="full-画面" 内容="はい">
11. <!-- QQ 強制全画面表示 -->
12. <メタ 名前="x5-全画面" コンテンツ="true">
13. <!-- UC アプリケーション モード -->
14. <メタ 名前="ブラウザモード" コンテンツ=「アプリケーション」>
15. <!-- QQ アプリケーション モード -->
16. <メタ 名前="x5-ページモード" コンテンツ="アプリ">
17. <!-- Windows Phone で強調表示せずにクリック -->
18. <メタ name="msapplication-タップハイライト「 コンテンツ=「いいえ」>

ウェブ関連

宣言のエンコーディング

コードをコピーします

コードは次のとおりです:

<meta charset='utf-8 ' /> ;

最新バージョンの IE と Chrome を優先的に使用します

コードをコピーします

コードは次のとおりです:

<meta http-equiv ="X -UA 互換" content="IE=edge,chrome=1" />
<!-- X-UA 互換について -->
<meta http-equiv= "X- UA 互換" content="IE=6" ><!-- IE6 を使用 -->
<meta http-equiv="X-UA 互換" content="IE=7 " > <!-- IE7 を使用 -->
<meta http-equiv="X-UA-互換" content="IE=8" ><!-- IE8 を使用 --> ;

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

コードをコピーします

コードは次のとおりです:

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

国内のデュアルコアブラウザのデフォルトのカーネルモードは次のとおりです:

1. Sogou 高速ブラウザ、QQ ブラウザ: IE カーネル (互換モード)
2. 360 高速ブラウザ、Aoyou ブラウザ: Webkit カーネル (速度モード)

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

コードをコピーします

コードは次のとおりです:

<meta http-equiv="Pragma " content= "キャッシュなし">

Windows 8

コードをコピー

コードは次のとおりです:

<meta name=" msapplication-TileColor " content="#000"/> <!-- Windows 8 タイルの色 -->
<meta name="msapplication-TileImage" content="icon.png"/> < ;! -- Windows 8 タイル アイコン -->

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

コードをコピー

コードは次のとおりです:

<meta name=" mobile-agent" "content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5] モバイルのプロトコル言語による
url="url" 後者は、現在の PC ページに対応するモバイル ページの URL を表し、2 つは 1 対 1 対応している必要があります。
-->

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

。

コードをコピーします

コードは次のとおりです:

<meta http-equiv="キャッシュ-Control" content="no-siteapp" />

その他の参考資料

HTML メタタグの完全なリスト
W3C メタタグ
HTML5 のメタタグ
MDN メタタグ