常用HTML meta 標籤屬性(網站相容與最佳化需求)_HTML/Xhtml_網頁製作

原文網址：http://segmentfault.com/blog/ciaocc/1190000002407912
作者：ciaocc
版權貴吸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最佳化

參考文件

頁面關鍵字，每個網頁應具有描述該網頁內容的一組唯一的關鍵字。
使用人們可能會搜索，並準確描述網頁上所提供資訊的描述性和代表性關鍵字及短語。標記內容太短，則搜尋引擎可能不會認為這些內容相關。另外標記不應超過 874 個字元。

複製程式碼

程式碼如下:

頁面描述
，每個網頁都應有一個不超過150 個字元且能準確反映網頁內容的描述標籤。

複製程式碼

程式碼如下:

搜尋引擎索引方式，robotterms是一組使用逗號(,)分割的值，通常有以下幾種取值：none，noindex，nofollow，all，index和follow。確保正確使用nofollow和noindex屬性值。

複製程式碼

程式碼如下:

頁面重定向和刷新

：content內的數字代表時間（秒），既多少時間後刷新。如果加url,則會重定向到指定網頁（搜尋引擎能夠自動偵測，也很容易被引擎視作誤導而受到懲罰）。

複製程式碼

程式碼如下:

其他

複製程式碼

程式碼如下:

行動裝置


行動裝置

]view ：能優化行動瀏覽器的顯示。如果不是響應式網站，請不要使用initial-scale或停用縮放。 大部分4.7-5吋設備的viewport寬設為360px；5.5吋設備設為400px；iphone6設為375px；ipone6 plus設為414px。

複製程式碼

程式碼如下:

程式碼如下:



程式碼如下:

1.width：寬度（數值/ device-width）（範圍從200 到10,000，預設為980 像素）
2.height：高度（數值/ device-height）（範圍從223 到10,000）

3.initial-scale：初始的縮放比例（範圍從>0 到10）

4.minimum-scale：允許用戶縮放到的最小比例5.maximum-scale：允許用戶縮放到的最大比例6.user-scalable：使用者是否可以手動縮(no,yes)7.minimal-ui：可以在頁面載入時最小化上下狀態列。 （已棄用）注意，許多人使用initial-scale=1到非響應式網站上，這會讓網站以100%寬度渲染，用戶需要手動移動頁面或縮放。如果和initial-scale=1同時使用user-scalable=no或maximum-scale=1，則使用者將無法放大/縮小網頁來看到全部的內容。

WebApp全螢幕模式：偽裝app，離線應用。 複製程式碼程式碼如下:

隱藏狀態列/設定狀態列顏色：只有在開啟WebApp全螢幕模式時才生效。 content的值為default | black | black-translucent 。

複製程式碼

程式碼如下:

加入主畫面後的標題

複製程式碼

程式碼如下:

忽略數字自動辨識為電話號碼

複製碼

複製碼

代碼>

忽略辨識信箱

複製程式碼

程式碼如下:

新增智慧型 App 廣告條 Smart App Banner：告訴瀏覽器這個網站對應的app，並在頁面上顯示下載banner(如下圖)。參考文件

複製程式碼

程式碼如下:

其他 參考文件

XML/HTML Code

複製內容到剪貼簿

1.   
2. meta name=name=name 🎜> content="true"
3. > 
4.    meta name=name=name= content=
5. "320"> 🎜> 
6.    meta name=name=name=名
7. " content=
8. "portrait"> >    meta name＝ " 
content
9. ="portrait"> >
10.    meta name=name= 
content
11. ="yes">
 >
12.    meta name="x5-fullscreen " content
=
13. "true"> 
14.    meta namename=name 🎜> content
15. ="application"> >
16.    meta name﹀ -mode" content="app"
17. >"app"> >
  
18. meta name=name=name -highlight" content="no"

>

"no"

> >

網頁相關

申明編碼

複製程式碼

程式碼如下:

優先使用 IE 最新版本和 Chrome

複製程式碼


程式碼如下:

瀏覽器核心控制：國內瀏覽器很多都是雙核心（webkit和Trident），webkit核心高速瀏覽，IE核心相容網頁和舊版網站。而新增meta標籤的網站可以控制瀏覽器選擇何種核心渲染。參考文件

複製程式碼

程式碼如下:

國內雙核心瀏覽器預設核心模式如下：

1. 搜狗高速瀏覽器、QQ瀏覽器：IE核心（相容模式）

2. 360極速瀏覽器、遨遊瀏覽器：Webkit核心（極速模式）

禁止瀏覽器從本機電腦的快取存取頁面內容：這樣設定，訪客將無法離線瀏覽。

複製程式碼

程式碼如下:

Windows 8

複製程式碼

程式碼如下:

網站適配：主要用於PC-手機頁的對應關係。

複製代碼


代碼如下:

轉碼申明：用百度開啟網頁可能會對其進行轉碼（例如貼廣告），避免轉碼可添加如下meta

複製程式碼

程式碼如下:

其他參考文件
COMPLETE LIST OF HTML META TAGS
W3C META TAGS

METATAGES in HTML5METATAGES in HTML5METATAGE >