首頁 > web前端 > html教學 > 常用HTML meta 標籤屬性(網站相容與最佳化需求)_HTML/Xhtml_網頁製作

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

WBOY
發布: 2016-05-16 16:36:35
原創
12330 人瀏覽過

原文網址: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= " 
  9. content
  10. ="portrait"> >
  11.    meta name=name= 
  12. content
  13. ="yes">
  14.  >
  15.    meta name="x5-fullscreen " content
  16. =
  17. "true"> 
  18.    meta namename=name 🎜> content
  19. ="application"> >
  20.    meta name﹀ -mode" content="app"
  21. >"app"> >
  22.   
  23. 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 >
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板