HTMLメタタグの使い方のまとめ

メタタグ機能

METAタグはHTMLタグのHEAD領域にある重要なタグであり、ドキュメントの文字セット、言語、作成者などの基本情報と、キーワードやWebページのレベルの設定を提供します。検索エンジン最適化 (SEO) を有効にします。

追記: 検索エンジンロボットにとっては検索と分類に便利なので、インターネットアプリケーションはそれに注意を払う必要があります。

大手ウェブサイトでどうやって書くの？

このタグについて学ぶ前に、次のように、さまざまな主流 Web サイトでメタ設定を検索しました。

JDホームページのメタ設定:

リーリー

淘宝網ホームページのメタ設定:

リーリー

Youku ホームページのメタ設定:

リーリー

Douyuホームページのメタ設定:

リーリー

Tencentホームページのメタ設定:

リーリー

Qidian Novel Network のホームページのメタ設定:

リーリー

メタ詳細説明

meta タグは、http-equiv と name 変数の 2 つの部分に分けることができます。

http-equiv

http-equiv は http のファイル ヘッダーに相当し、ブラウザーが Web ページのコンテンツを正しく表示できるようにするために、いくつかの有用な情報をブラウザーに返すことができます。

価値説明例コンテンツタイプページで使用する文字セットを設定します互換性の問題を解決するために、IE8 ブラウザーを指定して特定バージョンの IE ブラウザーのレンダリング方法をシミュレートするために使用される IE8 用の特別なタグ。 上記のコードは、ドキュメント標準が DTD で宣言されているかどうかに関係なく、IE8/9 が IE7 エンジンを使用してページをレンダリングすることを IE ブラウザーに伝えます。 Webページの有効期限を設定します。 自動的に更新され、新しいページが表示されます。 Web ページの有効期限が切れると、ローカル Cookie は自動的に削除されます。 ページを現在のウィンドウ内で独立したページとして強制的に表示します。これにより、自分の Web ページが他の人によってフレーム ページとして呼び出されるのを防ぐことができます リーリー キャッシュメカニズム

		リーリー GB2312 が使用される場合、担当者は、Web サイトで使用されるエンコーディングが簡体字中国語であることを示します。 ISO-8859-1 が使用されている場合、担当者は Web サイトで使用されているエンコーディングが英語であることを示します。 UTF-8 は世界共通言語エンコーディングを表します。 追記: HTML5 ページを使用する方法は、 を直接使用することです X-UA互換
	リーリー	リーリー 上記のコードは、IE8/9 が IE8 エンジンを使用してページをレンダリングすることを IE ブラウザーに伝えます。 リーリー 上記のコードは、IE 8/9 以降のバージョンがページのレンダリングに最上位バージョンの IE を使用することを IE ブラウザーに伝えます。 リーリー 上記のコード IE=edge は、最新のエンジンを使用して Web ページをレンダリングするように IE に指示し、chrome=1 で Chrome Frame をアクティブ化できます。 追記: Google はプラグインを追加しました: Google Chrome Frame (Google Embedded Browser Framework GCF) このプラグインはユーザーの IE ブラウザを変更せずに維持できますが、ユーザーが Web を閲覧するときは実際には Google Chrome ブラウザを使用します。 . カーネルをサポートし、IE6、7、8 などの複数のバージョンの IE ブラウザをサポートします。 期限切れ
	リーリー	追記: GMT 時間形式を使用する必要があります リフレッシュ
	リーリー	追記: 2 は、ページが 2 秒間留まり、その後次の URL にジャンプすることを意味します クッキーのセット
	リーリー	追記: GMT 時間形式を使用する必要があります。 Windowsターゲット
		キャッシュ制御
	リーリー	パブリック: 応答を任意のキャッシュにキャッシュできることを示します。 Private：指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。 no-cache：指示请求或响应消息不能缓存。 no-store：用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。 max-age：指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。 min-fresh：指示客户机可以接收响应时间小于当前时间加上指定时间的响应。 max-stale：指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

name

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

值	描述	例子
author	标注网页的作者	<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="dashen"</span> <span style="color: #0000ff;">/></span>
keywords	页面关键词，用于被搜索引擎收录	<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keywords"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="新闻,新闻中心, 新闻频道"</span><span style="color: #0000ff;">></span>
description	页面描述，用于搜索引擎收录	<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站"</span><span style="color: #0000ff;">></span>
viewport	用于控制页面缩放	<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1, <br />maximum-scale=1, minimum-scale=1, user-scalable=no"</span><span style="color: #0000ff;">></span> 详情可查看：http://www.cnblogs.com/lovesong/p/4355029.html
renderer	指定双核浏览器默认以何种方式渲染页面。	<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="renderer"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="webkit"</span><span style="color: #0000ff;">></span><span style="color: #000000;">//默认webkit内核 </span><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="renderer"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie-comp"</span><span style="color: #0000ff;">></span><span style="color: #000000;">//默认IE兼容模式 </span><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="renderer"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie-stand"</span><span style="color: #0000ff;">></span>//默认IE标准模式 PS：360浏览器支持
generator	说明网站的采用的什么软件制作	<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="generator"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Microsoft"</span><span style="color: #0000ff;">/></span>
revised	网页文档的修改时间	<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="revised"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="设计网, 6/24/2015"</span><span style="color: #0000ff;">/></span>
robots	用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。	<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="robots"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="none"</span><span style="color: #0000ff;">/></span> 取值：all|none|index|noindex|follow|nofollow, 默认all all：文件将被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询； noindex：文件将不被检索，但页面上的链接可以被查询； nofollow：文件将不被检索，页面上的链接可以被查询。
copyright	网站版权信息	<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="copyright"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="本页版权XXX所有。All Rights Reserved"</span> <span style="color: #0000ff;">/></span>

 

 

总结

通过大网站对于meta的设置，可以看到常用的有，X-UA-Compatible、keywords、description。

 

参考文献

1. http://www.haorooms.com/post/html_meta_ds

 

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/5745893.html