網(wǎng)站前端工作人員不可避免的會與seo打交道，會seo的前端也會更吃香。 很多時(shí)候，從事網(wǎng)站前端開發(fā)的朋友缺乏對seo的基本了解，導(dǎo)致整個(gè)網(wǎng)站建設(shè)，運(yùn)營效率偏低。實(shí)際上seo對于前端來講很有必要，學(xué)習(xí)一些通用的seo技術(shù)， […]

網(wǎng)站前端工作人員不可避免的會與seo打交道，會seo的前端也會更吃香。

很多時(shí)候，從事網(wǎng)站前端開發(fā)的朋友缺乏對seo的基本了解，導(dǎo)致整個(gè)網(wǎng)站建設(shè)，運(yùn)營效率偏低。實(shí)際上seo對于前端來講很有必要，學(xué)習(xí)一些通用的seo技術(shù)，不耗時(shí)不費(fèi)力，又可提升工作效率，提升自身能力，很好很好。

研發(fā)的同學(xué)，其實(shí)很多人并沒有深入了解SEO這個(gè)概念。在技術(shù)博客里，提及這一塊的也寥寥無幾。我今天就拿自己的經(jīng)驗(yàn)，簡單給大家掃個(gè)盲，有什么遺漏的地方，歡迎大家補(bǔ)充。

文字內(nèi)容有點(diǎn)多，但是干貨滿滿，請耐心閱讀！

什么是SEO：

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

SEO（Search Engine Optimization）:漢譯為搜索引擎優(yōu)化。搜索引擎優(yōu)化是一種利用搜索引擎的搜索規(guī)則來提高目前網(wǎng)站在有關(guān)搜索引擎內(nèi)的自然排名的方式。SEO是指為了從搜索引擎中獲得更多的免費(fèi)流量，從網(wǎng)站結(jié)構(gòu)、內(nèi)容建設(shè)方案、用戶互動傳播、頁面等角度進(jìn)行合理規(guī)劃，使網(wǎng)站更適合搜索引擎的索引原則的行為。

SEO原理

其實(shí)搜索引擎做的工作是相當(dāng)復(fù)雜的，我們這里簡單說一下大致的過程。后續(xù)針對SEO如何優(yōu)化，也會根據(jù)這幾個(gè)點(diǎn)展開描述。

頁面抓?。?蜘蛛向服務(wù)器請求頁面，獲取頁面內(nèi)容

分析入庫：對獲取到的內(nèi)容進(jìn)行分析，對優(yōu)質(zhì)頁面進(jìn)行收錄

檢索排序：當(dāng)用戶檢索關(guān)鍵詞時(shí)，從收錄的頁面中按照一定的規(guī)則進(jìn)行排序，并返回給用戶結(jié)果

SEO優(yōu)化

既然是優(yōu)化，那我們就得遵循SEO的原理來做，可謂知己知彼，百戰(zhàn)不殆。針對上面提出的三點(diǎn)，我們分別展開敘述。我們這里主要以百度蜘蛛舉例。

頁面抓取

如何才能吸引蜘蛛光顧我們的網(wǎng)站，如何才能讓蜘蛛經(jīng)常光顧我們的網(wǎng)站。這里提出以下幾個(gè)優(yōu)化點(diǎn)：

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

sitemap提交。sitemap，顧名思義，就是網(wǎng)站地圖，當(dāng)蜘蛛來到我們的網(wǎng)站時(shí)，告訴它我們有多少頁面，不同頁面是按什么分類的，每個(gè)頁面的地址是什么。順著我們的指引，蜘蛛會很輕松的爬遍所有內(nèi)容。另外，如果你的頁面分類比較多，而且數(shù)量大，建議添加sitemap索引文件。如果站點(diǎn)經(jīng)常更新添加新頁面，建議及時(shí)更新sitemap文件；

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

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

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

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

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

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

URL與301

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

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

除此之外，將指向首頁的域名全部設(shè)置301跳轉(zhuǎn)到同一URL，可以避免分散權(quán)重。

分析入庫

當(dāng)蜘蛛把頁面抓取回去之后，就需要對頁面內(nèi)容進(jìn)行分析，并擇優(yōu)收錄入庫。為什么說是擇優(yōu)呢？下面我給你慢慢分析。

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