HTML裏link meta所有標籤的做用

作網站建設的時候不多用到太多的標籤，可是在網站運營的時候，特別是像移動互聯網發展、作SEO以後咱們就特別容易看到不少不常見的link標籤。那麼這些標籤都有什麼做用呢？E維科技今天來爲您整理一下，歡迎其餘技術大牛共同分享。

HTML裏link 和 meta 標籤詳解

meta http-equiv=Content-Type content=text/html; charset= 指定網站編碼

用於指定網站編碼，通常國內用戶默認系統文字編碼都是GB2312 （簡體中文）GBK（繁體中文），國際網站編碼都是UTF-8。不少時候網站出現了亂碼，都是由於沒有指定文字編碼致使的。

link rel=canonical 指定規範網址

對於動態網站來講，出現不少重複的網頁能夠訪問到相同的內容是很正常的。例如，E維科技

我的主頁是：http://e.v-get.com/

原始連接是：http://e.v-get.com/ index.html

訪問兩個網址均可以查看到E維科技主頁，對於搜索引擎優化來講，這就是重複了的網頁內容。因此爲了告訴搜索引擎這個頁面只須要一個網址訪問，就可使用like rel=canonical 來告訴搜索引擎。

meta name=keywords 網站關鍵詞

作搜索引擎優化的對這個是特別熟悉的，由於這個是網站SEO入門必知的要點。網站在這裏表示網頁內關鍵詞，關鍵詞通常在60字符如下最佳，不一樣的關鍵詞用英文逗號或者空格隔開。

meta name=description 網站簡介

這也是作搜索引擎優化的入門標籤，用於網頁簡介，通常在220字符如下。網頁簡介儘可能包含該網頁內的主要關鍵詞越多越好，同時描述儘可能優美，由於搜索引擎通常標題連接下的描述都是顯示這裏的內容。

link re=shortcut icon 指定網站小圖標

網站小圖標，通常IE只支持ico格式的16x16px 的圖標;rel屬性必須包含shortcut, 纔會在IE下顯示; link rel="shortcut icon" 供IE瀏覽器調用.ico圖標，link rel="icon"供其它瀏覽器調用。png等其餘格式圖標;

link rel=stylesheet 網站CSS地址

這個比較經常使用，不管是作Web前端設計，仍是網站入門都必需要熟悉這個，這就是知道網站CSS樣式的標籤。

link media=print 定義打印格式

規定了文檔顯示在打印設備上時的CSS樣式。

meta http-equiv=window-target 禁止被嵌套

有時候防止釣魚網站或者禁止網站被其餘網站用iframe 嵌套，可使用上面代碼防止網頁被別人做爲一個Frame調用。

meta name=generation 網站生成的工具

通常用於標識網站源碼來源，像Disuz wordpress ecshop等網站開源代碼都會有此標識。當用戶搜索某款開源代碼的時候，能夠查詢到包含此標籤的網站。

meta authoer 文章做者

對於不少著名的做者所撰寫的文章可使用此標籤，這樣別人搜索某個做者的時候，能夠同時在搜索引擎上展現含此標籤的網頁文章內容。

meta name=copyright 網站版權

用於標識網站版權。

meta name=MSSmartTagsPreventParsing

在IE 6 中有一個 Smart tag 開關，若是您包含下面標記，訪問這將看不到某些相關網站連接，這樣能夠避免訪問者流失到競爭對手的網站上去。

meta http-equiv=X-UA-Compatible IE8使用IE7標準

X-UA-Compatible是針對ie8新加的一個設置，對於ie8以外的瀏覽器是不識別的，這個區別與content=」IE=7″在不管頁面是否包含指令，都像是使用了 Windows Internet Explorer 7的標準模式。而content="IE=EmulateIE7"模式遵循指令。對於多數網站來講，它是首選的兼容性模式。

爲了不製做出的頁面在IE8下面出現錯誤，建議直接將IE8使用IE7進行渲染。

meta name =msapplication-TileImage 是否在IE中關閉xp 的主題

是否在IE中關閉xp 的主題用法： 關閉xp 的藍色立體按鈕系統顯示樣式。

meta name=msapplication-TileImage win8磁貼圖像

磁貼圖像必須是長 144px 寬 144px 的方形 PNG。爲了得到最佳效果，咱們建議使用透明的背景，而不是與磁貼顏色一致的背景色。可使用 CSS 的 #rrggbb 表示法（經過 CSS 顏色名稱或經過 CSS RGB() 函數）將磁貼顏色指定爲十六進制 RGB 顏色。當用戶將該網站固定到其「開始」屏幕，IE10 僅會下載磁貼圖像，以便網站不會帶來額外的寬帶消耗。

base href= 指定相對連接前綴網址

不少開源網站，如Discuz Wordpress等，都是用相對網址，如href="home.php"等，但是若是該相對程序位置並不是在根目錄下，如http://e.v-get.com/tech/ 就是使用Discuz X3系統開發的，而網站和其餘論壇不一樣之處在於論壇在二級目錄下而不是根目錄下，因此若是不知道base href="http://e.v-get.com/tech/"> 就會致使http://e.v-get.com/tech/ home.php 網址所有變成根目錄下 http://e.v-get.com/ home.php 等，因此使用相對連接的網站，最好添加這個指定相對連接前綴。

而 base target="_blank"則默認全部連接打開都是打開新窗口，若是不指定這條，通常連接都是在當前窗口打開。對於單獨的連接須要使用PHP 來實現打開的連接重寫打開一個窗口而不是在當前網頁。base target= 標籤和 a target= 同樣有 _blank（新窗口打開連接） _self（當前窗口打開連接）等形式。

link rel=apple-touch-icon 添加Apple Touch圖標

該圖標的尺寸是57*57的PNG格式，若是不是，會自動縮放，且若是我沒搞錯的話，不必定要弄成iPhone風格那種漂亮的圓角，iPhone會自動按它的風格把圖標弄成圓角漸變的。

link rel=archives 指定archiver網址

相似Wordpress 和 Discuz X3等都有archiver網站內容簡版，通常這些就是網站內容的連接，而沒有CSS和圖片等大容量內容，主要用於告訴搜索引擎網站的結構。link rel="archives" 和 HTML版的sitemap有殊途同歸之處。

meta http-equiv=refresh HTML跳轉

純HTML實現網址跳轉，跳轉時間最好設置比較好。若是設置爲 content="0;URL=http://e.v-get.com" 就是0秒跳轉到網址http://e.v-get.com/ 這樣該網頁在搜索引擎中將會被降權。因此從SEO角度出發，最好在10秒左右纔開始跳轉將對SEO更友好。

meta name=robots 是否容許搜索引擎索引

robots用來告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引。

content的參數有all,none,index,noindex,follow,nofollow，默認是all。這個標籤能夠經過在網站根目錄上傳robots.txt替代。

meta http-equiv=expire

能夠用於設定網頁的緩存到期時間。一旦網頁過時，必須到服務器上從新傳輸。時間必須使用GMT的時間格式。

meta http-equiv=Pragma 禁止緩存

不少瀏覽器爲了加快瀏覽速度會把瀏覽過的網頁內容緩存起來，當再次調用的時候直接調用本地緩存的。而這樣調用本地緩存的會致使不少及時更新的內容沒法及時顯示，而顯示很早之前的舊的內容。咱們能夠禁止緩存來禁止瀏覽器緩存達到每次獲取的內容都是最新的。禁止瀏覽器從本地計算機的緩存中訪問頁面內容。這樣設定，訪問者將沒法脫機瀏覽。

meta http-equiv=Page-Enter 網站過渡動畫效果

網站打開千篇一概，可使用meta http-equiv=Page-Ente/Page Exit 效果網站進入和退出時的淡出、百葉窗等動畫特效。默認狀況下都已經啓用了，若是須要手動啓用則只需在Internet選項中： Advanced（高級） - Browsing（瀏覽） - Enable page transitions（啓用頁面過渡）便可。更多詳細設置及特效源碼請瀏覽：http://e.v-get.com/tech/20130701/113521623.html

meta name=google-site-verification 谷歌站長工具網站驗證

使用谷歌站長工具的時候，用於驗證網站使用。

og標籤是Facebook的分享開放圖譜協議