一鸭巴、概述
HTML <meta> 元素表示那些不能由其它HTML元相關(guān)元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元數(shù)據(jù)信息眷细。
標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上鹃祖,但是對(duì)于機(jī)器是可讀的溪椎。它可用于瀏覽器(如何顯示內(nèi)容或重新加載頁(yè)面),搜索引擎(關(guān)鍵詞)恬口,或其他 web 服務(wù)校读。詳情了解搜索引擎的工作原理。
二祖能、屬性
必要屬性
|屬性| 值 |描述
|---|---|
|content| some text| 定義與http-equiv或name屬性相關(guān)的元信息
可選屬性
|屬性 |值 |描述
|---|---|
|http-equiv| content-type / expire / refresh / set-cookie |把content屬性關(guān)聯(lián)到HTTP頭部歉秫。
|name |author / description / keywords / generator / revised / others |把 content 屬性關(guān)聯(lián)到一個(gè)名稱。
|content| some text |定義用于翻譯 content 屬性值的格式养铸。
應(yīng)用在搜索引擎優(yōu)化
在了解<meta>的頁(yè)面關(guān)鍵字之前端考,先了解一下什么是搜索引擎優(yōu)化。
搜索引擎優(yōu)化揭厚,簡(jiǎn)稱SEO:搜索引擎優(yōu)化 (SEO) 是指可改善您的網(wǎng)站在搜索引擎(例如 Bing、Yahoo! 和 Google)中的排名的一系列技術(shù)扶供。Microsoft Expression Web 4 包括一些工具筛圆,這些工具可幫助您改善您的網(wǎng)站的搜索引擎排名。
搜索引擎提供網(wǎng)頁(yè)的列表椿浓,每個(gè)網(wǎng)頁(yè)都依據(jù)其與用戶搜索查詢的相關(guān)性進(jìn)行排名太援。搜索引擎通常使用 Web 爬網(wǎng)程序(一種用于瀏覽萬(wàn)維網(wǎng)的自動(dòng)化程序或任務(wù))來發(fā)現(xiàn)網(wǎng)頁(yè)和編制網(wǎng)頁(yè)索引。Web 開發(fā)人員的一項(xiàng)重要任務(wù)是確保搜索引擎爬網(wǎng)程序能夠找到網(wǎng)頁(yè)中的信息并建立信息索引扳碍,以便搜索查詢將用戶引導(dǎo)至該網(wǎng)頁(yè)提岔。
1、頁(yè)面關(guān)鍵字
<meta>元素笋敞,作用之一就是能被搜索引擎搜到碱蒙,你在<meta>元素中寫頁(yè)面關(guān)鍵字,從而展現(xiàn)出來。
每個(gè)網(wǎng)頁(yè)應(yīng)具有描述該網(wǎng)頁(yè)內(nèi)容的一組唯一的關(guān)鍵字赛惩。
使用人們可能會(huì)搜索哀墓,并準(zhǔn)確描述網(wǎng)頁(yè)上所提供信息的描述性和代表性關(guān)鍵字及短語(yǔ)。標(biāo)記內(nèi)容太短喷兼,則搜索引擎可能不會(huì)認(rèn)為這些內(nèi)容相關(guān)篮绰。另外標(biāo)記不應(yīng)超過 874 個(gè)字符,參考季惯。
<meta name="keywords" content="artical information" />
2吠各、頁(yè)面描述
在 <meta name="description"> 標(biāo)記中使用人們可能會(huì)搜索,并準(zhǔn)確描述網(wǎng)頁(yè)上所提供信息的描述性和代表性關(guān)鍵字短語(yǔ)勉抓。
超過 150 個(gè)字符的 <meta name="description"> 標(biāo)記可能會(huì)將網(wǎng)頁(yè)標(biāo)記為待審閱贾漏,或標(biāo)記為使用欺詐行為。每個(gè)網(wǎng)頁(yè)都應(yīng)有一個(gè)以不超過 150 個(gè)字符準(zhǔn)確反映網(wǎng)頁(yè)內(nèi)容的唯一描述琳状。參考
<meta name="description" content="150 words" />
3磕瓷、搜索引擎索引方式
<meta name="robots" content="index,follow" />
<meta name="robots"> 標(biāo)記的其他有效屬性值包括以下值:
在 <meta name="robots"> 標(biāo)記中不正確地使用 nofollow 或 noindex 屬性值可能會(huì)顯著改變您的網(wǎng)站的搜索引擎結(jié)果。
搜索引擎使用 Robots.txt 文件來確定應(yīng)對(duì)哪些網(wǎng)頁(yè)進(jìn)行爬網(wǎng)念逞。請(qǐng)確保在 <meta name="robots"> 標(biāo)記中正確地使用 nofollow 和 noindex 屬性困食。 nofollow 屬性指示搜索引擎將當(dāng)前網(wǎng)頁(yè)的內(nèi)容編入索引,但忽略該網(wǎng)頁(yè)上超鏈接的目標(biāo)翎承。 noindex 屬性指示搜索引擎忽略當(dāng)前網(wǎng)頁(yè)的內(nèi)容硕盹,并繼續(xù)將網(wǎng)站中的其他網(wǎng)頁(yè)編入索引。參考
4叨咖、頁(yè)面重定向和刷新
<meta http-equiv="refresh" content="0;url=" />
content內(nèi)的數(shù)字代表時(shí)間(秒)瘩例,既多少時(shí)間后刷新。
說明:避免使用 <meta http-equiv="refresh"> 標(biāo)記進(jìn)行重定向甸各。
網(wǎng)頁(yè)重定向應(yīng)提供包含新網(wǎng)頁(yè)位置的消息垛贤,并應(yīng)提供足夠的時(shí)間讓用戶閱讀該消息。超時(shí)期限小于五秒的網(wǎng)頁(yè)重定向可能會(huì)導(dǎo)致搜索引擎排名降低趣倾。
若要重定向網(wǎng)頁(yè)聘惦,請(qǐng)考慮改用 HTTP 重定向。HTTP 重定向更有可能將舊網(wǎng)頁(yè)的授權(quán)傳送到新網(wǎng)頁(yè)儒恋。即加url,則會(huì)重定向到指定網(wǎng)頁(yè)(搜索引擎能夠自動(dòng)檢測(cè)善绎,也很容易被引擎視作誤導(dǎo)而受到懲罰)。參考
應(yīng)用在移動(dòng)設(shè)備
5诫尽、viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
viewport:能優(yōu)化移動(dòng)瀏覽器的顯示禀酱。
content 的其他值:
width:寬度(數(shù)值 / device-width)(范圍從200 到10,000,默認(rèn)為980 像素)
height:高度(數(shù)值 / device-height)(范圍從223 到10,000)
initial-scale:初始的縮放比例 (范圍從>0 到10)
minimum-scale:允許用戶縮放到的最小比例
maximum-scale:允許用戶縮放到的最大比例
user-scalable:用戶是否可以手動(dòng)縮 (no,yes)
注意牧嫉,很多人使用initial-scale=1到非響應(yīng)式網(wǎng)站上剂跟,這會(huì)讓網(wǎng)站以100%寬度渲染,用戶需要手動(dòng)移動(dòng)頁(yè)面或者縮放。如果和initial-scale=1同時(shí)使用user-scalable=no或maximum-scale=1浩聋,則用戶將不能放大/縮小網(wǎng)頁(yè)來看到全部的內(nèi)容观蜗。如果不是響應(yīng)式網(wǎng)站,不要使用initial-scale或者禁用縮放衣洁。參考
應(yīng)用在網(wǎng)頁(yè)
6墓捻、定義作者
<meta name="author" content="author name" />
7、指定字符集
<meta charset="utf-8" />
8坊夫、優(yōu)先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
"X-UA-Compatible"表示優(yōu)先選擇某種瀏覽器砖第。
<meta http-equiv="X-UA-Compatible" content="IE=6" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
9、瀏覽器內(nèi)核控制
國(guó)內(nèi)的主流瀏覽器都是雙核瀏覽器:基于Webkit的內(nèi)核用于常用網(wǎng)站的高速瀏覽环凿,基于IE的內(nèi)核主要用于部分網(wǎng)銀梧兼、政府、辦公系統(tǒng)等網(wǎng)站的正常使用智听。
若頁(yè)面需默認(rèn)用極速核羽杰,增加標(biāo)簽:<meta name="renderer" content="webkit">
若頁(yè)面需默認(rèn)用ie兼容內(nèi)核,增加標(biāo)簽:<meta name="renderer" content="ie-comp">
若頁(yè)面需默認(rèn)用ie標(biāo)準(zhǔn)內(nèi)核到推,增加標(biāo)簽:<meta name="renderer" content="ie-stand">
content的取值為webkit,ie-comp,ie-stand之一考赛,區(qū)分大小寫,分別代表用webkit內(nèi)核莉测,IE兼容內(nèi)核颜骤,IE標(biāo)準(zhǔn)內(nèi)核。參考
未完待續(xù)····
參考資料:
1捣卤、https://msdn.microsoft.com/zh-cn/library/ff724041(v=expression.40).aspx
2忍抽、https://msdn.microsoft.com/zh-cn/library/ff724016
3、https://segmentfault.com/a/1190000002407912
4董朝、https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta
5鸠项、http://se.#/v6/help/meta.html
6、https://msdn.microsoft.com/zh-cn/library/ff724055(v=expression.40).aspx