網站(zhàn)前端工(gōng)作(zuò)人員不可避免的會(huì)與網站(zhàn)優化打交道(dào)，會(huì)網站(zhàn)優化的前端也(yě)會(huì)更吃香。

很(hěn)多時(shí)候，從(cóng)事(shì)網站(zhàn)前端開(kāi)發的朋友缺乏對(duì)seo的基本了(le)解，導緻整個網站(zhàn)建設，運營效率偏低(dī)。實際上(shàng)網站(zhàn)優化對(duì)于前端來(lái)講很(hěn)有必要，學習一些(xiē)通用(yòng)的seo技術，不耗時(shí)不費力，又可提升工(gōng)作(zuò)效率，提升自(zì)身能(néng)力，很(hěn)好(hǎo)很(hěn)好(hǎo)。

研發的同學，其實很(hěn)多人并沒有深入了(le)解SEO這(zhè)個概念。在技術博客裏，提及這(zhè)一塊的也(yě)寥寥無幾。我今天就拿自(zì)己的經驗，簡單給大(dà)家掃個盲，有什(shén)麽遺漏的地方，歡迎大(dà)家補充。

文(wén)字内容有點多，但(dàn)是幹貨滿滿，請(qǐng)耐心閱讀！

什(shén)麽是SEO：

以下(xià)内容摘自(zì)百度百科：

SEO（Search Engine Optimization）:漢譯爲搜索引擎優化。搜索引擎優化是一種利用(yòng)搜索引擎的搜索規則來(lái)提高(gāo)目前網站(zhàn)在有關搜索引擎内的自(zì)然排名的方式。SEO是指爲了(le)從(cóng)搜索引擎中獲得更多的免費流量，從(cóng)網站(zhàn)結構、内容建設方案、用(yòng)戶互動傳播、頁面等角度進行合理(lǐ)規劃，使網站(zhàn)更适合搜索引擎的索引原則的行爲。

SEO原理(lǐ)

其實搜索引擎做的工(gōng)作(zuò)是相當複雜(zá)的，我們這(zhè)裏簡單說一下(xià)大(dà)緻的過程。後續針對(duì)SEO如何優化，也(yě)會(huì)根據這(zhè)幾個點展開(kāi)描述。

頁面抓取： 蜘蛛向服務器請(qǐng)求頁面，獲取頁面内容

分析入庫：對(duì)獲取到(dào)的内容進行分析，對(duì)優質頁面進行收錄

檢索排序：當用(yòng)戶檢索關鍵詞時(shí)，從(cóng)收錄的頁面中按照一定的規則進行排序，并返回給用(yòng)戶結果

SEO優化

既然是優化，那我們就得遵循SEO的原理(lǐ)來(lái)做，可謂知(zhī)己知(zhī)彼，百戰不殆。針對(duì)上(shàng)面提出的三點，我們分别展開(kāi)叙述。我們這(zhè)裏主要以百度蜘蛛舉例。

頁面抓取

如何才能(néng)吸引蜘蛛光顧我們的網站(zhàn)，如何才能(néng)讓蜘蛛經常光顧我們的網站(zhàn)。這(zhè)裏提出以下(xià)幾個優化點：

提交頁面。提交頁面又分爲幾種不同的方式

sitemap提交。sitemap，顧名思義，就是網站(zhàn)地圖，當蜘蛛來(lái)到(dào)我們的網站(zhàn)時(shí)，告訴它我們有多少頁面，不同頁面是按什(shén)麽分類的，每個頁面的地址是什(shén)麽。順着我們的指引，蜘蛛會(huì)很(hěn)輕松的爬遍所有内容。另外(wài)，如果你(nǐ)的頁面分類比較多，而且數量大(dà)，建議(yì)添加sitemap索引文(wén)件。如果站(zhàn)點經常更新添加新頁面，建議(yì)及時(shí)更新sitemap文(wén)件；

主動提交。就是把你(nǐ)的頁面直接丢給百度的接口，親口告訴百度你(nǐ)有哪些(xiē)頁面，這(zhè)是效率最高(gāo)也(yě)是收錄最快(kuài)的方式了(le)。但(dàn)是需要注意，百度對(duì)每天提交的數量是有限制的，而且反複提交重複的頁面，會(huì)被降低(dī)每日限額，所以已被收錄的頁面不建議(yì)反複提交。收錄有個時(shí)間過程，請(qǐng)先耐心等待；

實時(shí)提交。在頁面中安裝百度給的提交代碼，當這(zhè)個頁面被用(yòng)戶打開(kāi)我，便自(zì)動把這(zhè)個頁面提交給百度。這(zhè)裏不需要考慮重複提交的問題。

以上(shàng)幾種提交方式可以同時(shí)使用(yòng)，互不沖突。

保證我們的頁面是蜘蛛可讀的。

早在ajax還沒流行的的時(shí)候，其實SEO對(duì)于前端的要求并沒有很(hěn)多，或者說，那個時(shí)候還沒有前端這(zhè)個職業。頁面全部在服務器端由渲染好(hǎo)，不管是用(yòng)戶還是蜘蛛過來(lái)，都能(néng)很(hěn)友好(hǎo)的返回html。ajax似乎原本是爲了(le)避免有數據交互導緻必須重刷頁面設計(jì)的，但(dàn)是被大(dà)規模濫用(yòng)，一些(xiē)開(kāi)發者不管三七二十一，所有數據都用(yòng)ajax請(qǐng)求，使得蜘蛛不能(néng)順利的獲取頁面内容。慶幸的是這(zhè)反倒促進了(le)前端的飛(fēi)速發展。

到(dào)了(le)後來(lái)，各種SPA單頁應用(yòng)框架的出現(xiàn)，使得前端開(kāi)發者不再需要關心頁面的DOM結構，隻需專注業務邏輯，數據全部由Javascript發ajax請(qǐng)求獲取數據，然後在客戶端進行渲染。這(zhè)也(yě)就導緻了(le)老(lǎo)生常談的SEO問題。百度在國内搜索引擎的占有率最高(gāo)，但(dàn)是很(hěn)不幸，它并不支持ajax數據的爬取。于是，開(kāi)發者開(kāi)始想别的解決方案，比如檢測到(dào)是爬蟲過來(lái)，單獨把它轉發到(dào)一個專門(mén)的路由去渲染，比如基于Node.js的Jade引擎（現(xiàn)在改名叫Pug了(le)），就能(néng)很(hěn)好(hǎo)地解決這(zhè)個問題。React和(hé)Vue，包括一個比較小(xiǎo)衆的框架Marko也(yě)出了(le)對(duì)應的服務端渲染解決方案。詳細内容查看(kàn)對(duì)應文(wén)檔，我就不多說了(le)。

URL與301

URL設置要合理(lǐ)規範，層次分明(míng)。如果網站(zhàn)到(dào)了(le)後期發現(xiàn)URL不合理(lǐ)需要重新替換時(shí)，會(huì)導緻之前收錄的頁面失效，就是我們所說的死鏈（這(zhè)種情況屬于死鏈的一種，404等也(yě)屬于死鏈）。所以一定要在網站(zhàn)建設初期就做好(hǎo)長遠的規劃。一旦出現(xiàn)這(zhè)種情況也(yě)不要過于擔心，我們可以采取向搜索引擎投訴或者設置301跳轉的方式解決。

URL層級嵌套不要太深，建議(yì)不超過四層。增加面包屑導航可以使頁面層次分明(míng)，也(yě)有利于爲蜘蛛營造順利的爬取路徑。

除此之外(wài)，将指向首頁的域名全部設置301跳轉到(dào)同一URL，可以避免分散權重。

分析入庫

當蜘蛛把頁面抓取回去之後，就需要對(duì)頁面内容進行分析，并擇優收錄入庫。爲什(shén)麽說是擇優呢(ne)？下(xià)面我給你(nǐ)慢慢分析。

搜索引擎的目的是給用(yòng)戶提供高(gāo)質量的、精準的搜索結果。如果整個頁面充斥着滿滿的廣告和(hé)各種不良信息，這(zhè)無疑會(huì)很(hěn)大(dà)程度上(shàng)影響用(yòng)戶體驗。

除此之外(wài)，你(nǐ)肯定不希望自(zì)己辛辛苦苦創作(zuò)的文(wén)章被别人輕而易舉的抄走，所以搜索引擎在一定程度上(shàng)幫助你(nǐ)避免這(zhè)種情況的發生。對(duì)于已經收錄的内容，搜索引擎會(huì)降低(dī)其權重，甚至直接不收錄這(zhè)個頁面。即便是這(zhè)樣，爲了(le)保證頁面的新鮮度，很(hěn)多網站(zhàn)都會(huì)爬取或者轉載其他(tā)網站(zhàn)的内容。這(zhè)就是我們經常聽到(dào)的僞原創。所以，想要讓你(nǐ)的頁面能(néng)夠以較高(gāo)的權重被收錄，就需要堅持更新網站(zhàn)内容，并且是高(gāo)質量的原創内容。

檢索排序

這(zhè)塊我的理(lǐ)解是，頁面被收錄後，會(huì)給每個頁面打一些(xiē)tag。這(zhè)些(xiē)tag将作(zuò)爲搜索結果排序的重要依據。比如用(yòng)戶搜索“seo教程”，搜索引擎會(huì)檢索收錄頁面中被打了(le)“seo教程”tag的頁面，并根據一系列規則進行排序。所以，如何提升這(zhè)些(xiē)tag在搜索引擎裏面的權重是至關重要的。

TDK優化

TDK是個縮寫，seo頁面中的頁面描述與關鍵詞設置。

其中”T”代表頁頭中的title元素，這(zhè)裏可能(néng)還要利用(yòng)到(dào)分詞技術，當标題(Title)寫好(hǎo)後，我們就盡可> 能(néng)不要再去修改了(le)，盡量簡潔，沒意義的詞盡量不要加入到(dào)标題中，避免幹擾到(dào)搜索引擎識别網站(zhàn)主題。

其中”D”代表頁頭中的description元素，要知(zhī)道(dào)描述是對(duì)網頁的一個概述，也(yě)是對(duì)title的補充，因爲title中隻能(néng)書寫有限的字數，所以在description中就要稍微詳細的補充起來(lái)，一般用(yòng)一句兩句話(huà)概括文(wén)章的内容。

其中”K”代表頁頭中的keywords元素，提取頁面中的主要關鍵詞，數量控制在三到(dào)六個内。想方設法讓主關鍵字都出現(xiàn)。

以上(shàng)内容摘自(zì)百度百科，這(zhè)裏需要補充幾點。

TDK是搜索引擎判斷頁面主題内容的關鍵，所以要在title裏面言簡意赅的體現(xiàn)出頁面的主要内容，如果主體比較多，可以用(yòng)一些(xiē)符号把不同的主題詞隔開(kāi)，但(dàn)是關鍵詞不要太多，最多不要超過五個。

keywords裏面把每個關鍵詞用(yòng)英文(wén)逗号隔開(kāi)，三到(dào)五個最佳。盡量覆蓋每個關鍵詞。

description就是用(yòng)自(zì)然語言描述頁面的主要内容，這(zhè)裏注意一點就是把每個關鍵詞至少覆蓋一遍才能(néng)達到(dào)最佳效果。

提升頁面關鍵詞密度

首先說個概念，叫關鍵詞密度。簡單理(lǐ)解就是關鍵詞在所有文(wén)字内容中出現(xiàn)的比例。提升關鍵詞的密度，有利于提升搜索引擎針對(duì)對(duì)應關鍵詞的搜索排名。