常用<meta>整理

一鸭巴、概述

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末子姜,一起剝皮案震驚了整個(gè)濱河市锈锤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌闲询,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,194評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件浅辙,死亡現(xiàn)場(chǎng)離奇詭異扭弧,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)记舆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門鸽捻,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事御蒲∫赂希” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評(píng)論 0 346
  • 文/不壞的土叔 我叫張陵厚满,是天一觀的道長(zhǎng)府瞄。 經(jīng)常有香客問我,道長(zhǎng)碘箍,這世上最難降的妖魔是什么遵馆? 我笑而不...
    開封第一講書人閱讀 56,388評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮丰榴,結(jié)果婚禮上货邓,老公的妹妹穿的比我還像新娘。我一直安慰自己四濒,他們只是感情好换况,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評(píng)論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著盗蟆,像睡著了一般戈二。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上姆涩,一...
    開封第一講書人閱讀 49,764評(píng)論 1 290
  • 那天挽拂,我揣著相機(jī)與錄音,去河邊找鬼骨饿。 笑死亏栈,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的宏赘。 我是一名探鬼主播绒北,決...
    沈念sama閱讀 38,907評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼察署!你這毒婦竟也來了闷游?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,679評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤贴汪,失蹤者是張志新(化名)和其女友劉穎脐往,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扳埂,經(jīng)...
    沈念sama閱讀 44,122評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡业簿,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了阳懂。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片梅尤。...
    茶點(diǎn)故事閱讀 38,605評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡柜思,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出巷燥,到底是詐尸還是另有隱情赡盘,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評(píng)論 4 329
  • 正文 年R本政府宣布缰揪,位于F島的核電站陨享,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏邀跃。R本人自食惡果不足惜霉咨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望拍屑。 院中可真熱鬧途戒,春花似錦、人聲如沸僵驰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)损姜。三九已至,卻和暖如春曾掂,著一層夾襖步出監(jiān)牢的瞬間粉私,已是汗流浹背顽腾。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評(píng)論 1 265
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留诺核,地道東北人抄肖。 一個(gè)月前我還...
    沈念sama閱讀 46,297評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像窖杀,于是被迫代替她去往敵國(guó)和親漓摩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • < meta > 元素 概要 meta標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù)入客。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上管毙,但是對(duì)于機(jī)器是可讀...
    饑人谷_姓名閱讀 345評(píng)論 0 0
  • < meta > 元素 1、概要 標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù)桌硫。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上夭咬,但是對(duì)于機(jī)器是可讀的。...
    小豌豆書吧閱讀 424評(píng)論 0 0
  • 標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù)铆隘。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上皱埠,但是對(duì)于機(jī)器是可讀的。它可用于瀏覽器(如何顯示內(nèi)容或重新...
    7ece657ee3b6閱讀 394評(píng)論 3 2
  • 隨著html5的普及和Web技術(shù)的凈化咖驮,從Windows XP的IE6到IE8边器、IE9、IE10托修、IE11忘巧,Edg...
    波段頂?shù)?/span>閱讀 2,192評(píng)論 1 1
  • 那天上夜班,活不多睦刃,和人談起了學(xué)歷教育類的話題砚嘴。那位老哥四十多的樣子,估計(jì)家里有小孩正在上學(xué)念書涩拙。他問研究生到底學(xué)...
    寒夜旋林閱讀 186評(píng)論 0 1