よく使用される HTML メタタグ属性 (Web サイトの互換性と最適化に必要)

よく使用される HTML メタタグ属性 (Web サイトの互換性と最適化に必要)
元の URL: http://segmentfault.com/blog/ciaocc/1190000002407912
著者:ciaocc
著作権はyouciaoccに帰属します。転載の際は著作権を明記してください。

まとめ

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

必須属性

財産価値説明する
コンテンツテキストhttp-equiv または name 属性に関連するメタ情報を定義します

オプション属性

財産価値説明する
http-同等コンテンツタイプ / 有効期限 / 更新 / Cookie の設定コンテンツ属性を HTTP ヘッダーに関連付けます。
名前著者 / 説明 / キーワード / ジェネレータ / 改訂 / その他コンテンツ プロパティを名前に関連付けます。
コンテンツテキストコンテンツ属性値を翻訳するために使用される形式を定義します。


SEO最適化

参照ドキュメント

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


コードをコピー
コードは次のとおりです。
<meta name="キーワード" content="タグ" />


ページの説明: 各 Web ページには、Web ページの内容を正確に反映する 150 文字以内の説明タグが必要です。

コードをコピー
コードは次のとおりです。
<meta name="説明" content="150 語" />

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


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

<meta name="ロボット" content="インデックス、フォロー" />
<!--
all: ファイルが取得され、ページ上のリンクを照会できます。
none: ファイルは取得されず、ページ上のリンクを照会することはできません。
index: ファイルが取得されます。
follow: ページ上のリンクをクエリできます。
noindex: ファイルはインデックス化されません。
nofollow: ページ上のリンクを照会できません。
-->

ページのリダイレクトと更新: コンテンツ内の数字は時間 (秒単位) を表します。つまり、一定時間後に更新が行われます。 URL を追加すると、指定した Web ページにリダイレクトされます (検索エンジンは自動的に検出できますが、誤解を招くとエンジンに判断されやすく、ペナルティを受ける可能性もあります)。


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

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

他の


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

<meta name="author" content="author name" /> <!-- Web ページの作成者を定義します -->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />


モバイルデバイス

viewport: モバイルブラウザの表示を最適化できます。レスポンシブなサイトでない場合は、initial-scale を使用しないか、スケーリングを無効にしてください。
ほとんどの 4.7 ~ 5 インチ デバイスのビューポートの幅は 360 ピクセルに設定されています。5.5 インチ デバイスは 400 ピクセルに設定されています。iPhone 6 は 375 ピクセルに設定されています。iPhone 6 Plus は 414 ピクセルに設定されています。


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

<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ"/>
<!-- `width=device-width` を指定すると、iPhone 5 のホーム画面に追加した後、WebApp フルスクリーン モードでページを開くと黒い縁が表示されます -->

1.width: 幅 (数値/デバイス幅) (範囲は 200 から 10,000、デフォルトは 980 ピクセル)
2.height: 高さ(数値/デバイスの高さ)(範囲は 223 ~ 10,000)
3.initial-scale: 初期スケール(範囲は0以上10以下)
4.最小スケール: ユーザーがズームできる最小スケール
5.最大スケール: ユーザーがズームできる最大スケール
6.ユーザースケーラブル: ユーザーが手動でスケールダウンできるかどうか (いいえ、はい)
7.minimal-ui: ページの読み込み時に上部と下部のステータスバーを最小化できます。 (非推奨)
多くの人が非レスポンシブな Web サイトで initial-scale=1 を使用していることに注意してください。これにより、Web サイトが 100% の幅でレンダリングされ、ユーザーは手動でページを移動したり、ズームしたりする必要があります。 initial-scale=1 と同時に user-scalable=no または maximum-scale=1 を使用すると、ユーザーは Web ページを拡大/縮小してすべてのコンテンツを表示できなくなります。

WebApp フルスクリーン モード: 偽装アプリ、オフライン アプリケーション。


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

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- WebApp フルスクリーン モードを有効にする -->

ステータス バーを非表示にする/ステータス バーの色を設定する: WebApp のフルスクリーン モードがオンになっている場合にのみ有効になります。コンテンツの値は default | black | black-translucent です。


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

<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">

その他の参考資料

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!-- ハンドヘルド デバイス向けに最適化されています。主に、BlackBerry などのビューポートを認識しない古いブラウザー向けです -->   
  2. <メタ 名前= "HandheldFriendly"  コンテンツ= "true" >   
  3. <!-- Microsoft の古いブラウザ -->   
  4. <メタ 名前= "モバイル最適化"  コンテンツ= "320" >   
  5. <!-- uc は垂直画面を強制します -->   
  6. <メタ 名前= "画面の向き"  コンテンツ= "ポートレート" >   
  7. <!-- QQ 強制縦画面 -->   
  8. <メタ 名前= "x5-方向"  コンテンツ= "ポートレート" >   
  9. <!-- UC 強制フルスクリーン -->   
  10. <メタ  name = "フルスクリーン"  コンテンツ= "はい" >   
  11. <!-- QQ は全画面を強制します -->   
  12. <メタ 名前= "x5-フルスクリーン"  コンテンツ= "true" >   
  13. <!-- UC アプリケーション モード -->   
  14. <メタ 名前= "ブラウザモード"  コンテンツ= "アプリケーション" >   
  15. <!-- QQ アプリケーション モード -->   
  16. <メタ 名前= "x5 ページ モード"  コンテンツ= "アプリ" >   
  17. <!-- Windows Phone をクリックしてもハイライトされない -->   
  18. <メタ 名前= "msapplication-tap-highlight"  コンテンツ= "いいえ" >   

ウェブ関連

宣言コード


コードをコピー
コードは次のとおりです。
<メタ文字セット='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 カーネルは高速ブラウジング用であり、IE カーネルは Web ページや古いバージョンの Web サイトと互換性があります。メタタグを追加する Web サイトは、ブラウザがレンダリングするために選択するカーネルを制御できます。参照ドキュメント


コードをコピー
コードは次のとおりです。
<meta name="レンダラー" content="webkit|ie-comp|ie-stand">


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

1. Sogou高速ブラウザ、QQブラウザ:IEカーネル(互換モード)
2. 360 Speed Browser、Maxthon Browser: Webkitカーネル(スピードモード)

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


コードをコピー
コードは次のとおりです。
<meta http-equiv="プラグマ" content="キャッシュなし">

ウィンドウズ8


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

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

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


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

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

トランスコーディングに関する声明: Baiduでウェブページを開くと、トランスコーディングされる可能性があります(広告の掲載など)。トランスコーディングを回避するには、次のメタを追加できます。


コードをコピー
コードは次のとおりです。
<meta http-equiv="キャッシュコントロール" content="サイトアプリなし" />

その他の参考資料

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

<<:  MySQL 接続制御プラグインの紹介

>>:  CSS で要素を垂直方向に中央揃えする 7 つの方法

推薦する

独立した IP を介して Windows コンテナ イントラネットの Docker に直接アクセスする方法

Docker では、ポート マッピングを使用して、Docker コンテナーのサービスをホスト マシン...

LinuxでPythonの組み込みバージョンを削除する手順の詳細な説明

大きな落とし穴、Linuxシステムに付属するPythonのバージョンを簡単に削除しないでください1....

jsネイティブ構文プロトタイプ、__proto__、コンストラクタの徹底的な理解

目次1 はじめに2 前提条件2.1 データ型2.2 それが自身のプロパティであるかどうかを判断する ...

HTMLはキャンバスを使用して箇条書きスクリーン機能を実装します

導入最近、大きな課題をこなす際に、弾幕プレイヤーを作る必要がありました。他の人のソースコードを借りて...

CocosCreatorでスワイプした位置にテクスチャを表示する方法

目次1. プロジェクト要件2. 文書の内容3. プロジェクト例4. プロジェクトコード1. プロジェ...

CSS の境界線を通して三角形と矢印を実装するサンプルコード

1. CSS ボックスモデルボックスには、余白、境界線、パディング、コンテンツが含まれます境界線の接...

MySQL で重複しない携帯電話番号テーブルをバッチ生成する方法のサンプルコード

序文多くの MySQL テスト シナリオでは、テスト用に一部のテスト データを手動で生成する必要があ...

Firefoxでリンクをクリックしたときに点線の枠線を削除する方法

今日、ブラウザの互換性の問題にいくつか遭遇しました。そのうちの 1 つは奇妙に感じました。Firef...

MySQL 8.0.15 のインストールと設定方法のグラフィック チュートリアル (Windows 10 X64)

最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...

...

CSSで制御可能な点線を実装する方法

序文CSS を使用して点線を生成するのは、フロントエンド開発者にとっては簡単です。一般的に、これを実...

Vue+js はビデオのフェードインとフェードアウト効果を実現します

Vue+jsはビデオのフェードインとフェードアウトを実現します。参考までに、具体的な内容は次のとおり...

ウェブデザイナーが知っておくべき効率的なナビゲーションデザインの3つの原則

ウェブサイトのナビゲーションを設計することは、家の基礎を築くようなものです。基礎がしっかりしていなけ...

MySQL マスタースレーブレプリケーションの原理と実践の詳細な説明

目次導入効果原理形状練習するこの記事では、例を使用して、MySQL マスター/スレーブ レプリケーシ...