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

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

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

文字內(nèi)容有(yǒu)點多(duō)，但(dàn)是幹貨滿滿，請(qǐng)耐心閱讀！

什麽是SEO：

以下內(nèi)容摘自百度百科：

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

SEO原理(lǐ)

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

頁面抓取： 蜘蛛向服務器(qì)請(qǐng)求頁面，獲取頁面內(nèi)容

分析入庫：對獲取到的內(nèi)容進行(xíng)分析，對優質頁面進行(xíng)收錄

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

SEO優化

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

頁面抓取

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

提交頁面。提交頁面又分為(wèi)幾種不同的方式

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

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

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

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

保證我們的頁面是蜘蛛可(kě)讀的。

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

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

URL與301

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

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

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

分析入庫

當蜘蛛把頁面抓取回去之後，就需要對頁面內(nèi)容進行(xíng)分析，并擇優收錄入庫。為(wèi)什麽說是擇優呢？下面我給你(nǐ)慢慢分析。

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

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

檢索排序

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

TDK優化

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

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

其中”D”代表頁頭中的description元素，要知道(dào)描述是對網頁的一個(gè)概述，也是對title的補充，因為(wèi)title中隻能書(shū)寫有(yǒu)限的字數(shù)，所以在description中就要稍微詳細的補充起來(lái)，一般用一句兩句話(huà)概括文章的內(nèi)容。

其中”K”代表頁頭中的keywords元素，提取頁面中的主要關鍵詞，數(shù)量控制(zhì)在三到六個(gè)內(nèi)。想方設法讓主關鍵字都出現。

以上(shàng)內(nèi)容摘自百度百科，這裏需要補充幾點。

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

keywords裏面把每個(gè)關鍵詞用英文逗号隔開(kāi)，三到五個(gè)最佳。盡量覆蓋每個(gè)關鍵詞。

description就是用自然語言描述頁面的主要內(nèi)容，這裏注意一點就是把每個(gè)關鍵詞至少(shǎo)覆蓋一遍才能達到最佳效果。

提升頁面關鍵詞密度

首先說個(gè)概念，叫關鍵詞密度。簡單理(lǐ)解就是關鍵詞在所有(yǒu)文字內(nèi)容中出現的比例。提升關鍵詞的密度，有(yǒu)利于提升搜索引擎針對對應關鍵詞的搜索排名。