淺析meta標籤用處

　　meta標籤是html文檔頭部的一個標籤，meta在計算機中是元的意思，w3shcool中稱之爲metadata，也就是元數據，固然，是描述網頁的元數據，這個標籤不是給用戶看的，是給搜索引擎看的，說白了就是爲了SEO。meta標籤關鍵點在於它的屬性，這些屬性很繁瑣，容易混淆，現將其用法作一個小小的總結，以供後來參考。

　　meta標籤的屬性用法分紅兩大類（charset屬性只有一個固定用法，暫不列入2大類之中），分別是:

　　1. <meta name = "XXX" content = "xxxxx" />，這種用法的核心是屬性name，其值是可變的，可是都有固定選項，不能隨意亂寫，咱們下邊會一一分析列舉

　　2. <meta http-equiv = "xxxxx" content = "xxxxx" /> 這種用法的核心是屬性http-equiv，其值是可變的，可是都有固定選項，不能隨意亂寫，咱們下邊會一一分析列舉

　　1、首先來看 使用name屬性的用法

　　name屬性主要用於描述網頁，好比網頁的關鍵詞，敘述等。與之對應的屬性值爲content，content中的內容是對name填入類型的具體描述，便於搜索引擎抓取。name屬性常見的值有：

　　1.1 title

　　title做爲name屬性的值，其做用與<title>標籤的做用是同樣的，通常用的較少，更多的是直接使用<title></title>標籤。能見到使用此值的網站好比優酷

<meta name="title" content="優酷-這世界很酷" />

 

　　1.2 keywords

　　顧名思義，描述網站的關鍵字，你們都會用它，好比：

優酷的：
<meta name="keywords" content="視頻,視頻分享,視頻搜索,視頻播放" />
京東的：
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,京東" />

　　1.3 description

　　對於網站功能，主要內容的描述性信息，好比：　　

京東的：
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通信、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，
爲您提供愉悅的網上購物體驗!" />

　　1.4 viewport

　　視口，用來作移動端網頁適配的。這個能夠做爲學習移動web開發時再詳細瞭解。最多見的用法以下：　　

<meta name="viewport" content="width=device-width, initial-scale=1">

　　1.5 robots

　　robots用來告訴爬蟲哪些頁面須要索引，哪些頁面不須要索引。當name屬性爲「robots」的時候，content的參數有all,none,index,noindex,follow,nofollow。默認是all。

　　1.6 author

　　描述網頁開發者信息，例如：

<meta name = "author" content = "barteam" />

　　1.7 generator 

　　描述網頁的開發工具，通常使用的較少

　　1.8 copyright

　　描述版權信息，好比：　　

起點中文網的：
<meta name="copyright" content="本頁版權 www.qidian.com 起點中文網全部。All Rights Reserved" />

　　其餘不常見的屬性就再也不贅述了，想了解的能夠在百度。

　　2、再來看http-equiv屬性

　　它的值也有好多種可選項，把經常使用的也扒出來看看。

　　2.1 content-type

　　這個值是後臺告訴瀏覽器，這次響應報文最基本的信息，很是關鍵，例如：　　

<meta http-equiv="content-Type" content="text/html; charset=utf-8">

　　這個例子中，meta標籤告訴了瀏覽器2個重要信息，其一，告訴瀏覽器這次響應報文是一個純文本文檔，而且這個文檔是html文檔。其二，這個html文檔的編碼格式是utf-8 。

　　這個信息是很是關鍵的，若是響應報文是一個jpg圖片，而響應頭的meta標籤寫成如上的示例，那麼這個圖片就會被當作html純文本文檔來解釋，結果是固然沒法看到圖片了。

　　2.2 X-UA-Compatible

　　IE8的專用標記，用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式，以此來解決部分兼容問題。好比：　　

<meta http-equiv="X-UA-Compatible" content="IE=7">  

　　以上代碼告訴IE瀏覽器，不管是否用DTD聲明文檔標準，IE8/9都會以IE7引擎來渲染頁面。 

　　2.3 cache-control

　　告訴瀏覽器緩存機制，不多用。

<meta http-equiv="cache-control" content="no-cache">

　　當使用 cache-control時，content對應的值也不少，以下：

• Public：指示響應可被任何緩存區緩存。
• Private：指示對於單個用戶的整個或部分響應消息，不能被共享緩存處理。這容許服務器僅僅描述當用戶的部分響應消息，此響應消息對於其餘用戶的請求無效
• no-cache：指示請求或響應消息不能緩存
• no-store：用於防止重要的信息被無心的發佈。在請求消息中發送將使得請求和響應消息都不使用緩存
• max-age：指示客戶機能夠接收生存期不大於指定時間（以秒爲單位）的響應
• min-fresh：指示客戶機能夠接收響應時間小於當前時間加上指定時間的響應
• max-stale：指示客戶機能夠接收超出超時期間的響應消息。若是指定max-stale消息的值，那麼客戶機能夠接收超出超時期指定值以內的響應消息

　　固然還有其餘不少，這裏再也不一一列舉了。

　　3、對於網頁編碼字符集的設置，如今更多的使用charset屬性

　　好比：

<meta charset="UTF-8">

 

　　這是更推薦的設置字符集的用法。

　　好了，就總結到這裏吧