meta標簽 · smart_jiaxiaoli

### 標簽是 HTML 語言頭部的一個輔助性標簽，我們可以定義頁面編碼語言、搜索引擎優化、自動刷新并指向新的頁面、控制頁面緩沖、響應式視窗等。 | 屬性 | 值 | 描述 | | --- | --- | --- | | charset( H5? New) | character_set | 定義文檔的字符編碼。 | | content | text | 定義與 http-equiv 或 name 屬性相關的元信息。 | | http-equiv | content-type default-style refresh |把 content 屬性關聯到 HTTP 頭部。 | | name | application-name author description generator keywords | 把 content 屬性關聯到一個名稱。 | | scheme(H5 刪除) | format/URI | HTML5不支持。定義用于翻譯 content 屬性值的格式。。 | 整體來看，HTML5之前，meta標簽只有兩個主要屬性，分別是 name 屬性和 http-equiv 屬性。 HTML5新添加"charset". ### **一、name** name屬性主要用于描述網頁，對應屬性是 content ，以便于搜索引擎機器人查找、分類（目前幾乎所有的搜索引擎都使用網上機器人自動查找meta值來給網頁分類）。語法： `<meta name="參數" content="參數值"></meta>` **1、Keywords(關鍵字)** 說明：為搜索引擎提供的關鍵字列表語法： `<meta name="keywords" content="程序員"></meta>` **2、Description（簡介）** 說明：Description用來告訴搜索引擎你的網站主要內容語法： `<meta name="description" content="meta標簽是HTML中的一個重要標簽，它位于HTML文檔頭部的<HEAD>標簽和<TITL>標簽之間">` **3、robots（機器人向導）** 說明：robots用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。語法： `<meta name="robots" content="" />` content的參數值有 all,none,index,noindex,follow,nofollow，默認值是all。參數說明：參數為 all ：文件將被檢索，且頁面上的鏈接可以被查詢；參數為 none ：文件將不被檢索，且頁面上的鏈接不可以被查詢；參數為 index ：文件將被檢索；參數為 follow ：頁面上的鏈接可以被查詢；參數為 noindex ：文件將不被檢索，但頁面上的鏈接可以被查詢；參數為 nofollow ：文件將被檢索，但頁面上的鏈接不可以被查詢； **4.author（作者）** 說明：標注網頁的作者語法： `<meta name="author" content="TG,TG@qq.com"/>` **5.copyright（版權）** 說明：標注版權語法： `<meta name="copyright" content="本網站版權歸TG所有"/>` **6.generator** 說明：說明網站采用什么編輯器制作。語法： `<meta name="generator" content="你所用的編輯器"/>` **7.revisit-after（重訪）** 說明：網站重訪 > 假如我設置，那這樣搜索引擎就是7天來一次。使用這個標簽的網站，通常是因為網站數據量非常大，被搜索引擎過于頻繁的抓取，會占用過大的資源，影響網站的訪問。所以，希望搜索引擎不要天天過來，抓取過一次了，那么等7天后再來。一般的網站是不需要這個標簽的。　　那如果原來搜索引擎可能十多天才來抓取一次，那么我把revisit-after設置的短一些，比如3天，那搜索引擎是不是會提高對我網站的抓取頻率，更利于SEO呢?答案是否定的。搜索引擎對網站的抓取頻率最主要是取決于你自身網站的更新頻率，只要你的網站經常更新、添加新的內容，那么搜索引擎的蜘蛛和爬蟲也會常來更新你的網站，可以說這是決定搜索引擎更新你的網站最重要的、最根本的因素。此外，PR值、[網站結構](https://www.baidu.com/s?wd=%E7%BD%91%E7%AB%99%E7%BB%93%E6%9E%84&tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao)以及服務器的穩定性等都影響到搜索引擎的抓取，不是一個revisit-after元標簽能夠決定的。如果原來是10天來一次，用這個標簽后，還是10天來一次。語法： `<meta name="revisit-after" content="7days"/>` ### **二、http-equiv** http-equiv類似于HTTP的頭部協議，它回應給瀏覽器一些有用的信息，以幫助正確和精確地顯示網頁內容。與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。語法： `<meta http-equiv="參數" ?content="參數值"/>` 參數說明： **1.Expires（期限）** 說明：指定網頁在緩存中的過期時間，一旦網頁過期，必須到服務器上重新傳輸。語法： `<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>` **注意**：必須使用GMT的時間格式，或者直接設為0（數字表示多久后過期） **2.Pragma（cache模式）** 說明：禁止瀏覽器從本地計算機的緩存中訪問頁面內容。語法： `<meta http-equiv="Pragma" content="no-cache"/>` 注意：網頁不保存在緩存中，每次訪問都刷新頁面。這樣設定，訪問者將無法脫機瀏覽。 **3.Refresh（刷新）** 說明：自動刷新并指向新頁面。語法： `<meta http-equiv="refresh" content="5"; url=http://www.baidu.com/" />` 其中的5表示5秒后自動刷新并調整到URL新頁面。 **4.Set-Cookie（cookie設定）** 說明：瀏覽器訪問某個頁面時會將它存在緩存中，下次再次訪問時就可從緩存中讀取，以提高速度。當你希望訪問者每次都刷新你廣告的圖標，或每次都刷新你的計數器，就要禁用緩存了。如果網頁過期，那么存盤的cookie將被刪除。語法： `<meta http-equiv="Set-Cookie" ?content="cookievalue=xxx; expires=Wednesday, 　　　　　　 21-Oct-98 16:14:21 GMT; path=/">` **注意**：必須使用GMT的時間格式 **5.Window-target（顯示窗口的設定）** 說明：強制頁面在當前窗口以獨立頁面顯示語法： `<meta http-equiv="Window-target" content="_top"/>` 可以用來防止別人在框架里調用你的頁面。 **6.content-Type（顯示字符集的設定）** 說明：設定頁面使用的字符集 `<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>` 其他參數值： meta標簽的charset的信息參數如GB2312時，代表說明網站是采用的編碼是簡體中文； meta標簽的charset的信息參數如BIG5時，代表說明網站是采用的編碼是繁體中文；? meta標簽的charset的信息參數如iso-2022-jp時，代表說明網站是采用的編碼是日文； ? meta標簽的charset的信息參數如ks_c_5601時，代表說明網站是采用的編碼是韓文； ? meta標簽的charset的信息參數如ISO-8859-1時，代表說明網站是采用的編碼是英文； ? meta標簽的charset的信息參數如UTF-8時，代表世界通用的語言編碼； ### 在HTML5中，我們一般都是：`<meta charset="utf-8"/>` **7.content-Language（顯示語言的設定）** 說明：顯示語言語法： `<meta http-equiv="Content-Language" content="zh-cn"/>` **8.http-equiv="imagetoolbar"** `<meta http-equiv="imagetoolbar" content="false"/>` 指定是否顯示圖片工具欄，當為false代表不顯示，當為true代表顯示。 ***** ## **HTML 5新增** 一、name 1.viewport 說明：能優化移動瀏覽器的顯示（屏幕的縮放）語法： `<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>` 參數值： width viewport的寬度[device-width | pixel_value]width如果直接設置pixel_value數值，大部分的安卓手機不支持，但是ios支持； ?? height – viewport 的高度（范圍從 223 到 10,000 ） ?? user-scalable [yes | no]是否允許縮放 ?? initial-scale [數值] 初始化比例（范圍從 > 0 到 10） ?? minimum-scale [數值] 允許縮放的最小比例 ?? maximum-scale [數值] 允許縮放的最大比例 ?? 2.format-detection（忽略電話號碼和郵箱）說明：忽略電話號碼和郵箱語法： //忽略頁面中的數字識別為電話號碼 `<meta name="format-detection" content="telephone=no">` //忽略頁面中的郵箱格式識別為郵箱 `<meta name="format-detection" content="email=no"/>` 也可以寫成： `<meta name="format-detection" content="telphone=no, email=no"/>` ? 3、瀏覽器內核控制：國內瀏覽器很多都是雙內核（webkit和Trident），webkit內核高速瀏覽，IE內核兼容網頁和舊版網站。而添加meta標簽的網站可以控制瀏覽器選擇何種內核渲染。（僅限360瀏覽器） `<meta name="renderer" content="webkit|ie-comp|ie-stand">` 若頁面需默認用極速核，增加標簽：`<meta name="renderer" content="webkit">` 若頁面需默認用ie兼容內核，增加標簽：`<meta name="renderer" content="ie-comp">` 若頁面需默認用ie標準內核，增加標簽：`<meta name="renderer" content="ie-stand"> ` ### **各渲染內核的技術細節** | 內核 | Webkit | IE兼容 | IE標準 | | --- | --- |--- | --- |--- | | 內核版本 | Chrome 45 | IE6/7 | IE9/IE10/IE11(取決于用戶的IE) | | HTML5支持 | YES | NO | YES | | ActiveX控件支持| NO | YES | YES | **4、WebApp全屏模式** `<meta name="apple-mobile-web-app-capable" content="yes" /> ` **5、隱藏狀態欄/設置狀態欄顏色：只有在開啟WebApp全屏模式時才生效。content的值為default | black | black-translucent 。** `<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> ` 6、不同瀏覽器 ```  ? <meta name="HandheldFriendly" content="true"> ?  ? <meta name="MobileOptimized" content="320"> ?  ? <meta name="screen-orientation" content="portrait"> ?  ? <meta name="x5-orientation" content="portrait"> ?  ? <meta name="full-screen" content="yes"> ?  ? <meta name="x5-fullscreen" content="true">  ? <meta name="browsermode" content="application"> ?  ? <meta name="x5-page-mode" content="app"> ?  ? <meta name="msapplication-tap-highlight" content="no"> ``` 二、http-equiv 1、優先使用 IE 最新版本和 Chrome ``` <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> ?  ? <meta http-equiv="X-UA-Compatible" content="IE=6" > ? <meta http-equiv="X-UA-Compatible" content="IE=7" > ? <meta http-equiv="X-UA-Compatible" content="IE=8" > ``` 2、轉碼申明：用百度打開網頁可能會對其進行轉碼（比如貼廣告），避免轉碼可添加如下meta `<meta http-equiv="Cache-Control" content="no-siteapp" />` 三、charset `<meta charset="UTF-8">` meta標簽的charset的信息參數如GB2312時，代表說明網站是采用的編碼是簡體中文； meta標簽的charset的信息參數如BIG5時，代表說明網站是采用的編碼是繁體中文；? meta標簽的charset的信息參數如iso-2022-jp時，代表說明網站是采用的編碼是日文； ? meta標簽的charset的信息參數如ks_c_5601時，代表說明網站是采用的編碼是韓文； ? meta標簽的charset的信息參數如ISO-8859-1時，代表說明網站是采用的編碼是英文； ? meta標簽的charset的信息參數如UTF-8時，代表世界通用的語言編碼。 ## 移動端適配meta標簽 `<meta name="viewport" content="initial-sacle=1.0, user-scalable=0, width=device-width, maximum-scale=1.0,minimum-scale=1.0"></meta>` 作用：在移動瀏覽器中，當頁面寬度超出設備，瀏覽器內部虛擬的一個頁面容器，將頁面容器縮放到設備那么大展示；視口的寬度可以通過meta標簽設置；此屬性為移動端頁面視口設置； width：視口的寬度，width=device-width：寬度是設備的寬度 initial-scale：初始化縮放，- initial-scale=1.0：不縮放 user-scalable：是否允許用戶自行縮放，取值0或1，yes或no minimum-scale：最小縮放 maximum-scale：最大縮放一般設置了不允許縮放，就沒必要設置最大最小縮放了。