meta標籤使用方法總結

時間 2019-11-13

原文原文鏈接

meta標籤是用來描述一個HTML網頁文檔的屬性，好比該網頁的做者，日期，網頁的關鍵字，刷新，網頁等級設定等等，是文檔中的最基本的元信息，本文是對meta標籤的學習總結，內容大多來自網上各個地方，非原創。html

　　一個好的meta標籤能夠提升你的網站被搜索到的可能性，在搜索引擎優化方面須要好好利用meta標籤的相關知識。web

　　meta標籤能夠分爲兩大部分：chrome

http-equiv： http標題信息
name：頁面描述信息

　　http-equiv 相似於http的頭部協議，做用是迴應給瀏覽器一些有用的信息來幫助正確精確的顯示網頁內容。經常使用的http-equiv 類型有：Content-Type 和 Content-Language(顯示字符集的設定)。數據庫

如下以示例代碼介紹http-equiv的詳細內容：

代碼1：編程

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

　　這段代碼指定了HTML頁面使用的字符編碼爲gb2312，即國標漢字碼，不一樣的語言對應不一樣的charset，日文對應的字符集是："iso-2022-jp", 韓文對應的字符集: 「ks_c_5601」windows

代碼2：瀏覽器

<meta http-equiv="Refresh" content="5; url=http://www.cnblogs.com" />

　　這段代碼讓網頁在指定的5秒內，跳轉到所指定的頁面，好比博客園首頁，或者網頁的自動刷新。緩存

代碼3：服務器

<meta http-equiv="Expires" content="Mon,1,May 2015 00:00:00 GMT" />

　　這段代碼能夠用於設定網頁的到期時間，一旦過時必須到服務器上從新調用（GMT時間格式）。ide

代碼4：

<meta http-equiv="Pragma" content="no-cache" />

　　這段代碼用於設定禁止瀏覽器從本地機的緩存中調閱頁面內容，設定後一旦離開網頁就沒法從Cache中再調出。

代碼5：

<meta http-equiv="Pics-label" content="" />

　　這段代碼用於網頁等級的評定，在IE的internet選項中有一項內容設置能夠防止瀏覽一些受限制的網站，而網站的限制等級就是經過meta屬性的設置。

　代碼6：

<meta http-equiv="windows-Target" content="_top" />

　　這段代碼能夠強制頁面在當前窗口中以獨立頁面顯示，防止本身的網頁被別人當成一個frame調用。Content選項：_blank、_top、_self、_parent

代碼7：

<Meta http-equiv="Page-Enter" Content="revealTrans(Duration=0.5,tansition=10" />

 <Meta http-equiv="Page-Exit" Content="revealTrans(Duration=0.5,transition=12" />

　　Page-Enter、Page-Exit是頁面被載入和調出時的一些特效。相應的還有：Site-Exit和Site-Enter離開和進入網站。content表示的是網頁過渡的效果設置，本例中的RevealTrans是動態濾鏡的一種，能夠用於進入和退出的效果，Duration表示濾鏡特效的持續時間(單位：s), Transition:表示濾鏡的類型，取值爲0到23。

　　注意：這些特效我本身作了一些測試，在Chrome, FF,下特效都顯示不出來，原文（HTML頁面過渡效果大全）中測試環境是IE5.5之上，不過我利用IE tester只在IE8中測試出效果了。

name，常見的有Keyword，Description，Robots等，下面逐一介紹。

Description:　

<meta name="description" content="這是個人一篇博客" />

　　description中的content=" ", 是對網頁概況的介紹，這些信息可能會出如今搜索結果中，所以要儘可能的避免和網頁內容不相關的描述。

網頁描述爲天然語言而不是羅列不少關鍵詞；
描述內容爲但願在搜索引擎檢索結果中展現的摘要信息。
必須和網頁的標題內容，網頁主題內容有高度的相關性。
不要超過255個字符，搜索引擎通常都會索引Description中的前255個字符，

　　有一個小技巧：若是你使用的網頁編碼是UTF-8，那麼在Description中的標點符號最好都使用英文，例如英文的逗號、句號等。若是是中文的話，那麼就使用中文的標點符號便可。

在Google網站管理員工具中，有個很是有用的工具——網頁內容分析。它能夠對你網站中全部的Description作出一個準確的判斷和建議，例如哪些Description是重複的，哪些Description過短或者太長，哪些Description是和網頁內容無關的等等問題。（Google網站管理員工具：http://www.google.com/webmasters/tools?hl=zh_CN）

Keywords:

<meta name="keywords" content="博客,meta標籤" />

　　Keywords和description相似，也是用來描述一個網頁的屬性的，只不過列出的是關鍵詞，而不是網頁的摘要。各個關鍵詞之間用逗號(英文逗號)隔開。

要根據網頁的主題和內容來選擇適合的關鍵詞，越是核心的關鍵詞越是放到前面
選擇關鍵詞既要考慮網頁的核心內容相關，還要用戶容易經過搜索引擎檢索，儘可能避免使用生僻的詞來作關鍵字。
不要堆砌過多的關鍵詞，羅列大量關鍵詞對於搜索引擎沒有太大的意義，對於N多同類型的網站來講可能還會有反作用。

來看一下博客園的description和Keywords：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>博客園 - 開發者的網上家園</title>
<meta name="keywords" content="開發者,博客園,開發者,程序猿,程序媛,極客,編程,代碼,開源,IT網站,Developer,Programmer,Coder,Geek,技術社區"/>
<meta name="description" content="博客園是一個面向開發者的知識分享社區。自建立以來，博客園一直致力並專一於爲開發者打造一個純淨的技術交流社區，推進並幫助開發者經過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。" />

以上來自博客園首頁的網頁源代碼中<meta>部分，參考一下。

Robots:

<meta name="Robots" content="All" />

　　不少搜索引擎都是經過放出robot/spider搜索網站，robot/spider自動在www上搜索，當發現新的網站後，這些robot/spider會檢索頁面中的keywords和descript，而後加入到本身的數據庫中。而Robots用來告訴機器人哪些頁面須要索引，哪些頁面不須要，content的參數有：all, none, index, noindex, follow, nofollow 。默認狀況下是all。

All:文件將被檢索，並且頁面的連接能夠被查詢。
none: 頁面不被檢索，頁面的連接不能夠被查詢。
index: 文件將被檢索，讓robot/spider登陸。
follow: 頁面的連接能夠被查詢。
noindex:阻止頁面被列入索引，頁面的連接能夠被查詢（不讓robot/spider登陸）。
nofollow: 阻止對頁面中任何連接進行索引（注，這不一樣於超級連接上的nofollow屬性，那個屬性只是組織索引單獨的連接。

　　META信息是對頁面自己給搜索引擎的一個說明。而有些時候，咱們可能須要拒絕搜索引擎來訪問咱們網站的某個文件夾（例如後臺文件夾），或者是要屏蔽一些搜索引擎的索引，咱們就能夠採起使用robots.txt文件來限制一些權限。具體本文再也不詳述，能夠本身搜索相關內容。

Author:

<meta name="Author" content="guihailiuli" />

這段代碼能夠說明網頁的做者，content的內容能夠是製做者或聯繫信息。

Copyright:

<meta name="Coptright" content="Created By guihailiuli" />

說明頁面的版權。

Revisit-after:

<meta name="revisit-after" content="7 days" />

　　設置robot/spiser的重訪時間，通常大型網站，蜘蛛爬行頻率至關頻繁，致使服務器重壓。所以作這樣的限制是讓蜘蛛在限定日期內重訪，例如7 days就是七天訪問一次

Distribubtion:

<meta name="Distribution" content="Global" />

　　這段代碼是指網站都在哪些地區範圍出現，通常設置爲Global即爲全球範圍。

補充：

　　在百度，知乎的首頁的meta標籤中看到有下面這段代碼：

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

HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什麼做用？

　　X-UA-Compatible是自從IE8新添加一個位置，對IE8一下的瀏覽器是不識別的，經過在meta中設置X-UA-Compatible的值，能夠指定網頁的兼容性模式設置。　

　　網頁中指定的模式優先於服務器經過HTTP Header指定的模式。

經常使用的例子：

<meta http-equiv="X-UA-Compatible" content="IE=7">  
#以上代碼告訴IE瀏覽器，不管是否用DTD聲明文檔標準，IE8/9都會以IE7引擎來渲染頁面。  
<meta http-equiv="X-UA-Compatible" content="IE=8">  
#以上代碼告訴IE瀏覽器，IE8/9都會以IE8引擎來渲染頁面。  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
#以上代碼告訴IE瀏覽器，IE8/9及之後的版本都會以最高版本IE來渲染頁面。  
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  
<meta http-equiv="X-UA-Compatible" content="IE=7,9">  
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代碼IE=edge告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame.

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

　　Edge告訴IE以最高的模式渲染文檔，也就是任何IE版本都以當前版本所支持的最高級別標準模式渲染，避免版本升級形成影響，也就是說：什麼版本的IE就用什麼版本的標準模式渲染

<meta http-equiv="X-UA-Compatible" content="chrome=1">

使用這段代碼強制IE使用Chrome Frame 渲染。有關Chrome Frame能夠到百科上查看：Google Chrome Frame

其餘注意：

「IE=Edge,chrome=1」 , 的弊端是代碼沒法經過W3C的驗證，不過若是隻有這一個"錯誤"基本上也不會有什麼不良的影響。
根據官網定義X-UA-compatible 標頭不區分大小寫；不過，它必須顯示在網頁中除 title 元素和其餘 meta 元素之外的全部其餘元素以前。若是不是的話，它不起做用

有關上面那段代碼更詳細的參見這裏：http://www.tuicool.com/articles/ra6Fjuj。

相關標籤/搜索