よく使われるhtmlメタfinishing_html/css_WEB-ITnose

要素

概要

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

必須属性

属性値の説明contentテキスト http-equiv または name 属性に関連するメタ情報を定義する

オプションの属性

プロパティ 値説明 http-equivcontent-type /expire/refresh / set-cookie content 属性を HTTP ヘッダーに関連付けます。 name作成者 / 説明 / キーワード / ジェネレーター / 改訂 / その他 content 属性を名前に関連付けます。 contentsome text content 属性値の翻訳に使用される形式を定義します。 SEO 最適化

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

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

ページの説明、すべての Web ページには、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 ピクセル)
高さ: 高さ (数字/デバイスの高さ) (223 ～ 10,000 の範囲)
initial-scale : 初期ズームスケール (>0 ～ 10 の範囲)
minimum-scale: ユーザーがズームできる最小スケール
maximum-scale: ユーザーがズームできる最大スケール
user-scalable : ユーザーが手動で最小化できるかどうか (いいえ、はい)
minimal-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" />