網站前端工作人(rén)員(yuán)不可(kě)避免的(de)會與網站優化(huà)打交道，會網站優化(huà)的(de)前端也(yě)會更吃(chī)香。

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

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

文字内容有點多(duō)，但是幹貨滿滿，請耐心閱讀！

什(shén)麽是SEO：

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

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

SEO原理(lǐ)

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

頁面抓取： 蜘蛛向服務器請求頁面，獲取頁面内容

分(fēn)析入庫：對(duì)獲取到的(de)内容進行分(fēn)析，對(duì)優質頁面進行收錄

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

SEO優化(huà)

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

頁面抓取

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

提交頁面。提交頁面又分(fēn)爲幾種不同的(de)方式

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

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

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

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

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

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

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

URL與301

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

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

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

分(fēn)析入庫

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

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

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

檢索排序

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

TDK優化(huà)

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

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

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

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

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

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

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

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

提升頁面關鍵詞密度

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