よく使用される 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 文字を超えてはなりません。

コードをコピーします

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

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

コードをコピーします

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

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

コードをコピー

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

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

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

その他

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

モバイルデバイス

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

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

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 フルスクリーン モード: 偽装アプリ、オフライン アプリケーション。

コードをコピーします

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

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

コードをコピー

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

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

コードをコピーします

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

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

コードをコピーします

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

認識メールを無視する

コードをコピーします

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

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

コードをコピーします

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

その他 参考資料

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

2. <メタ 名前="ハンドヘルドフレンドリー" コンテンツ="true">
4. <メタ 名前="MobileOptimized" コンテンツ="320">
6. <メタ 名前="画面-向き" コンテンツ="ポートレート">
8. <メタ 名前="x5-向き" コンテンツ="ポートレート">
10. <メタ 名前="full-画面" 内容="はい">
12. <メタ 名前="x5-全画面" コンテンツ="true">
14. <メタ 名前="ブラウザモード" コンテンツ=「アプリケーション」>
16. <メタ 名前="x5-ページモード" コンテンツ="アプリ">
18. <メタ name="msapplication-タップハイライト「 コンテンツ=「いいえ」>

ウェブ関連

宣言のエンコーディング

コードをコピーします

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

;

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

コードをコピーします

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

< ;! -- Windows 8 タイル アイコン -->

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

コードをコピー

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

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

。

コードをコピーします

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

その他の参考資料

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