HTML メタを使用して Web ページを最適化する方法

今回は、HTML メタを使用して Web ページを最適化する方法と、HTML メタを使用して Web ページを最適化するための注意事項について説明します。実際のケースを見てみましょう。

概要

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

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

ページのキーワード。各 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

属性 の値を必ず正しく使用してください。

ページのリダイレクトと更新: コンテンツ内の数字は時間 (秒)、つまり更新にかかる時間を表します。 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 plus は 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.

height

: 高さ (数値/デバイスの高さ) (範囲は 223 ～ 10,000)
3.initial-scale: 初期スケーリング率 (>0 ～ 10 の範囲) 4.minimum-scale: ユーザーがズームできる最小スケール 5.maximum-scale: 最大スケールユーザーはズームすることができます
6 .user-scalable: ユーザーがステータス バーを手動で縮小できるかどうか (いいえ、はい)
7.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" />

スマートアプリを追加 スマートアプリバナー：ブラウザに通知この 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=&#39;utf-8&#39; />

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カーネルは高速ですブラウジング、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="no-cache">

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

XHTML でタイトル タグと段落タグを使用する方法

レスポンシブ フレームワークで、テーブル ヘッダーの自動行折り返しに対処する方法

HTMLで水平線の注釈とコードコメントを使用する方法

以上がHTML メタを使用して Web ページを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。