HTML<head> 標簽用于定義文檔的頭部,它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。
文檔的頭部描述了文檔的各種屬性和信息,包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。
Head標簽在我們的開發實踐中最常用的大概是定義標題和網站小圖標、引入CSS/JS、定義字符集,這篇文章將總結幾個我所遇到的Head標簽的幾個高級用法。
一、SEO相關
1. 定義關鍵詞 keywords:
<meta name="keywords" content="your keywords">
頁面描述內容 description:
<meta name="description" content="your description">
2. 定義網頁搜索引擎索引方式,通常有如下幾種取值:none,noindex,nofollow,all,index和follow等。
<meta name="robots" content="index,follow">
其中的屬性說明如下:設定為all:文件將被檢索,且頁面上的鏈接可以被查詢;
設定為none:文件將不被檢索,且頁面上的鏈接不可以被查詢;
設定為index:文件將被檢索;
設定為follow:頁面上的鏈接可以被查詢;
設定為noindex:文件將不被檢索,但頁面上的鏈接可以被查詢;
設定為nofollow:文件將不被檢索,頁面上的鏈接可以被查詢。
-
3. 結構化數據
結構化,是通過網頁特殊的標簽將需要的數據提供給搜索引擎,并在搜索結果中按照既定的模版展現的實現形式,目的是為了提升搜索結果的體驗,幫助站長提升搜索結果點擊率。
** 如下時使用在head中設置結構化數據后的搜索引擎展示效果:**
Paste_Image.png
Paste_Image.png
- 360結構化數據幫助文檔: http://www.so.com/help/help_3_9.html
二、瀏覽器控制
一、頁面刷新:
refresh示例
5秒之后刷新本頁面:
<meta http-equiv="refresh" content="5" />
5秒之后轉到wangbaiyuan.cn:
<meta http-equiv="refresh" content="5; url=http://wangbaiyuan.cn" />**二、 控制頁面與移動設備寬度相等 **
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
網頁寬度默認等于屏幕寬度(width=device-width), 初始縮放比例(initial-scale=1)為1.0,即網頁初始大小占屏幕面積的100%。
三、緩存控制:cache-control
<meta http-equiv="pragma" content="no-cache">
pragma與no-cache用于定義頁面緩存,不緩存頁面(為了提高速度一些瀏覽器會緩存瀏覽者瀏覽過的頁面,通過下面的定義,瀏覽器一般不會緩存頁面,而且瀏覽器無法脫機瀏覽.)
<meta http-equiv="cache-control" content="no-cache">
常見的取值有private、no-cache、max-age、must-revalidate等,默認為private,其作用根據不同的重新瀏覽方式分為以下幾種情況:
- 1) 打開新窗口 值為private、no-cache、must-revalidate,那么打開新窗口訪問時都會重新訪問服務器。 而如果指定了max-age值,那么在此值內的時間里就不會重新訪問服務器,例如: Cache-control: max-age=5(表示當訪問此網頁后的5秒內再次訪問不會去服務器)
- 2) 在地址欄回車 值為private或must-revalidate則只有第一次訪問時會訪問服務器,以后就不再訪問。 值為no-cache,那么每次都會訪問。 值為max-age,則在過期之前不會重復訪問。
- 3) 按后退按扭 值為private、must-revalidate、max-age,則不會重訪問, 值為no-cache,則每次都重復訪問4) 按刷新按扭 無論為何值,都會重復訪問 Cache-control值為“no-cache”時,訪問此頁面不會在Internet臨時文件夾留下頁面備份。
<meta http-equiv="expires" content="0">
指定Expires值為一個早已過去的時間,那么訪問此網時若重復在地址欄按回車,那么每次都會重復訪問: Expires: Fri, 31 Dec 1999 16:00:00 GMT 比如:禁止頁面在IE中緩存 http響應消息頭部設置: CacheControl = no-cache Pragma=no-cache Expires = -1 Expires是個好東東,如果服務器上的網頁經常變化,就把它設置為0,表示立即過期。