1. 程式人生 > >合適的meta,你選對了嗎?

合適的meta,你選對了嗎?

meta標籤用來描述一個HTML網頁文件的屬性,例如作者、日期和時間、網頁描述、關鍵詞、頁面重新整理等。它提供的資訊雖然使用者不可見,但卻是文件的最基本的元資料。    對於網頁來說,meta data就是通過一些欄位資訊來描述一下當前網頁,以便瀏覽器和搜尋引擎在訪問到此網頁的時候,可以通過這些描述資訊來知道如何去解析此網頁資料。
    meta標籤共有四個屬性:http-equiv、name、scheme和content;不同的屬性又有不同的引數值,這些不同的引數值就實現了不同的網頁功能。其中http-equiv顧名思義,常用來做http協議上的一些限制,其作用是把 content 屬性關聯到 HTTP 頭部。scheme 屬性用於指定要用來翻譯屬性值的方案。

    簡單來說,就是meta標籤提供的是一個“鍵值對”,name/http-equiv作為鍵,content作為值,scheme不常用。

基於以上理念,meta標籤又常被用來作為SEO的有力提供。


常見的meta標識有:

[JavaScript] 純文字檢視 複製程式碼

?

01

02

03

04

05

06

07

08

09

10

11

//宣告文件使用的字元編碼

<meta charset=’utf-8′>

 

//頁面描述

<meta name=”description” content=”網頁描述”/>

 

//頁面關鍵詞

<meta name=”keywords” content=””/>

 

//網頁作者

<meta name=”author” content=”name, [url=mailto:

[email protected]][email protected][/url]”/>


    這裡的charset其實是h5的新屬性,等同於 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">,作用是會在本網頁的http請求頭中新增: content-type: text/html; charset=UTF-8

    這些是最正規的meta用法,基本上每個瀏覽器都支援,也是定義在標籤規範內的。



    然而尷尬的是,就像當初script標籤本意也不是作為jsonp的用法一樣,現代瀏覽器支援的meta標籤完全超出了其初始的定義。

上文有說過,meta標籤的資訊使用者是不可見的,而且其簡單的鍵值對結構無疑是最簡單的傳遞網頁資訊的方式,才是瀏覽器廠商最終對meta標籤下手的原因,加上每個瀏覽器希望體現自身特色,最終導致了meta標籤的凌亂不堪。
    其中有作為特定瀏覽器專用的meta標識。例:

[JavaScript] 純文字檢視 複製程式碼

?

01

02

03

04

05

06

07

08

09

10

11

//uc強制豎屏

<meta name=”screen-orientation” content=”portrait”>  

 

//QQ強制豎屏

<meta name=”x5-orientation” content=”portrait”>   

 

//UC強制全屏

<meta name=”full-screen” content=”yes”>     

 

//設定蘋果工具欄顏色

<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>

這些其實都是瀏覽器廠商定製版本的meta,雖然不常見,但是一旦用上也能減少很多複雜的需求。
作為一個前端開發者,不得不說一句,還是很期待瀏覽器早日實現統一的 

下面是收集的meta標籤,以後有更多收集會及時更新,也希望網友有更多的meta標籤能不吝賜教:

[JavaScript] 純文字檢視 複製程式碼

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

//宣告文件使用的字元編碼

<meta charset=’utf-8′>   

 

//優先使用 IE 最新版本和 Chrome

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>  

 

//頁面描述

<meta name=”description” content=”網頁描述”/>

 

//頁面關鍵詞

<meta name=”keywords” content=””/>     

 

//網頁作者

<meta name=”author” content=”name, [url=mailto:[email protected]][email protected][/url]”/>   

 

//搜尋引擎抓取

<meta name=”robots” content=”index,follow”/>     

 

//為移動裝置新增 viewport

<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”>

 

//新增智慧 App 廣告條 Smart App Banner(iOS 6+ Safari)

<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>

 

//設定蘋果工具欄顏色

<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>

 

//啟用360瀏覽器的極速模式(webkit)

<meta name=”renderer” content=”webkit”> 

 

//避免IE使用相容模式

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>    

 

//不讓百度轉碼

<meta http-equiv=”Cache-Control” content=”no-siteapp” />   

 

//針對手持裝置優化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓

<meta name=”HandheldFriendly” content=”true”>    

 

//微軟的老式瀏覽器

<meta name=”MobileOptimized” content=”320″>  

 

//uc強制豎屏

<meta name=”screen-orientation” content=”portrait”>  

 

//QQ強制豎屏

<meta name=”x5-orientation” content=”portrait”>   

 

//UC強制全屏

<meta name=”full-screen” content=”yes”>             

 

//QQ強制全屏

<meta name=”x5-fullscreen” content=”true”>      

 

//UC應用模式

<meta name=”browsermode” content=”application”>  

 

//QQ應用模式

<meta name=”x5-page-mode” content=”app”>   

 

//windows phone 點選無高光

<meta name=”msapplication-tap-highlight” content=”no”>   

 

//設定頁面不快取

<meta http-equiv=”pragma” content=”no-cache”>

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

<meta http-equiv=”expires” content=”0″>