什(shén)麽是前端seo？前端seo該學習(xí)什(shén)麽？

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

很多(duō)時(shí)候，從事網站前端開發的(de)朋友缺乏對(duì)seo的(de)基本了(le)解，導緻整個(gè)網站建設，運營效率偏低。實際上seo對(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)搜索排名。但并不是我們整個(gè)頁面密密麻麻堆砌關鍵次就好，我們來(lái)分(fēn)析一個(gè)案例。

我們在百度搜索“seo教程”，排在第一的(de)是seo教程自學網http://www.xminseo.com/，這(zhè)個(gè)就不解釋了(le)。我們就分(fēn)析一下(xià)爲啥攜程會排名這(zhè)麽靠前。

通(tōng)過查看百度快(kuài)照(zhào)，可(kě)以一目了(le)然的(de)看到頁面上究竟哪些地方命中了(le)這(zhè)些詞。

頁面頭部

頁面底部

頁面很清晰表明(míng)了(le)關鍵詞出現的(de)地方，我們發現這(zhè)個(gè)頁面除了(le)正文部分(fēn)外，還(hái)設置了(le)許多(duō)的(de)模塊，這(zhè)些模塊看似隻是一些簡單的(de)鏈接，實際上他(tā)們更重要的(de)使命就是服務SEO，提升關鍵詞的(de)密度。同時(shí)，這(zhè)些鏈接都是指向網站内部的(de)鏈接，通(tōng)過這(zhè)樣的(de)方式，還(hái)可(kě)以在不同的(de)頁面之間相互投權重。可(kě)以說小鏈接，大(dà)學問！

你以爲到此結束了(le)？并沒有。請仔細觀察頁面上這(zhè)些模塊的(de)内容設置。分(fēn)别覆蓋了(le)技術、視頻(pín)等等，可(kě)以說是涵蓋了(le)你要seo教程周邊的(de)大(dà)部分(fēn)需求。這(zhè)樣一來(lái)，不管你搜哪些有關于“seo教程”的(de)關鍵詞，比如“seo視頻(pín)教程”，“seo技術教程”等都會命中這(zhè)個(gè)頁面的(de)詞，這(zhè)使得(de)這(zhè)個(gè)頁面的(de)關鍵詞數量得(de)到提升，更容易得(de)到曝光(guāng)。

細枝末節但不可(kě)忽視的(de)優化(huà)

頁面上經常會有各種圖片，對(duì)于搜索引擎來(lái)說，它是不識别圖片上的(de)内容的(de)。你可(kě)能知道代碼中img标簽的(de)alt屬性是爲了(le)圖片加載失敗的(de)時(shí)候，給用(yòng)戶看的(de)。這(zhè)個(gè)屬性表明(míng)了(le)這(zhè)張圖的(de)内容。其實搜索引擎在分(fēn)析頁面的(de)時(shí)候，也(yě)會根據這(zhè)個(gè)詞去判斷圖片的(de)内容，所以要給頁面上有意義的(de)圖片都加上alt屬性，寫清楚圖片索要反映的(de)内容。

頁面上的(de)出站鏈接（也(yě)就是指向别的(de)網站的(de)A标簽），我們要給它加上nofollow标簽，避免它向别的(de)網站輸出權重。百度蜘蛛會忽略加了(le)nofollow 的(de)鏈接。你也(yě)可(kě)以在網頁的(de)meta标簽裏這(zhè)麽寫<meta name=”robots” content=”nofollow” />，這(zhè)樣一來(lái)，百度蜘蛛将不追蹤頁面上的(de)所有鏈接，但不建議(yì)這(zhè)麽做(zuò)，除非這(zhè)個(gè)頁面的(de)所有鏈接都指向了(le)别的(de)域名。

……

其他(tā)優化(huà)點

友情鏈接

我們經常會在頁面底部看到友情鏈接。友情鏈接是作爲網站之間相互交換流量，互惠互利的(de)合作形式。事實上，友情鏈接對(duì)網站權重提升有著(zhe)至關重要的(de)作用(yòng)。友鏈不僅可(kě)以引導用(yòng)戶浏覽，而且搜索引擎也(yě)會順著(zhe)鏈接形成循環爬取，可(kě)以有效提升網站流量和(hé)快(kuài)照(zhào)的(de)更新速度。

關鍵詞篩選

借助站長(cháng)工具、愛(ài)站網或者各種站長(cháng)後台我們可(kě)以分(fēn)析出ip來(lái)路，以及關鍵詞的(de)搜索熱(rè)度和(hé)相關詞，我們再把這(zhè)些詞以一定的(de)密度添加到頁面中，以此來(lái)提升命中率。這(zhè)裏主要是運營同學的(de)工作，我不專業，也(yě)就不展開說了(le)，更多(duō)功能大(dà)家自行摸索。

利用(yòng)好分(fēn)析工具

我們要在自己的(de)站點安裝百度統計代碼，這(zhè)樣就可(kě)以分(fēn)析出站點内用(yòng)戶的(de)關注度和(hé)浏覽流程，以此來(lái)不斷優化(huà)站點結構，提升用(yòng)戶的(de)留存率。同時(shí)也(yě)可(kě)以做(zuò)用(yòng)戶畫(huà)像，分(fēn)析用(yòng)戶數據等等。

結語

想要做(zuò)好SEO并不是一件簡單的(de)事，需要持之以恒，面面俱到。對(duì)網站持續關注，并保持更新。從長(cháng)遠(yuǎn)打算(suàn)，切不可(kě)投機取巧，隻圖一時(shí)的(de)效果做(zuò)違背搜索引擎的(de)操作，也(yě)就是常說的(de)黑(hēi)帽SEO，否則被百度K掉就得(de)不償失了(le)。

以上觀點隻是我最近學習(xí)的(de)一些總結，并不權威，希望給不了(le)解這(zhè)塊的(de)研發同學簡單掃個(gè)盲，如有錯誤，還(hái)請各位指正與補充！

seo教程自學網點評：

技多(duō)不壓身是恒古不變的(de)道理(lǐ)，作爲前端，更多(duō)的(de)學習(xí)前端周邊知識如seo，對(duì)于提升工作效率的(de)結果是明(míng)顯的(de)。作爲seo技術人(rén)員(yuán)，多(duō)了(le)解前端，了(le)解服務器知識等，也(yě)是同樣的(de)道理(lǐ)。