做爲前端，你不得不知道的SEO

  研發的同窗，其實不少人並無深刻了解SEO這個概念。在技術博客裏，說起這一塊的也寥寥無幾。我今天就拿本身的經驗，簡單給你們掃個盲，有什麼遺漏的地方，歡迎你們補充。

  文字內容有點多，可是乾貨滿滿，請耐心閱讀！

什麼是SEO：

  如下內容摘自百度百科：

SEO（Search Engine Optimization）:漢譯爲搜索引擎優化。搜索引擎優化是一種利用搜索引擎的搜索規則來提升目前網站在有關搜索引擎內的天然排名的方式。SEO是指爲了從搜索引擎中得到更多的免費流量，從網站結構、內容建設方案、用戶互動傳播、頁面等角度進行合理規劃，使網站更適合搜索引擎的索引原則的行爲。

SEO原理

  其實搜索引擎作的工做是至關複雜的，咱們這裏簡單說一下大體的過程。後續針對SEO如何優化，也會根據這幾個點展開描述。

• 頁面抓取： 蜘蛛向服務器請求頁面，獲取頁面內容
• 分析入庫：對獲取到的內容進行分析，對優質頁面進行收錄
• 檢索排序：當用戶檢索關鍵詞時，從收錄的頁面中按照必定的規則進行排序，並返回給用戶結果

SEO優化

  既然是優化，那咱們就得遵循SEO的原理來作，可謂知己知彼，百戰不殆。針對上面提出的三點，咱們分別展開敘述。咱們這裏主要以百度蜘蛛舉例。

頁面抓取

  如何才能吸引蜘蛛光顧咱們的網站，如何才能讓蜘蛛常常光顧咱們的網站。這裏提出如下幾個優化點：

1. 提交頁面。提交頁面又分爲幾種不一樣的方式

   1. sitemap提交。sitemap，顧名思義，就是網站地圖，當蜘蛛來到咱們的網站時，告訴它咱們有多少頁面，不一樣頁面是按什麼分類的，每一個頁面的地址是什麼。順着咱們的指引，蜘蛛會很輕鬆的爬遍全部內容。另外，若是你的頁面分類比較多，並且數量大，建議添加sitemap索引文件。若是站點常常更新添加新頁面，建議及時更新sitemap文件；
   2. 主動提交。就是把你的頁面直接丟給百度的接口，親口告訴百度你有哪些頁面，這是效率最高也是收錄最快的方式了。可是須要注意，百度對天天提交的數量是有限制的，並且反覆提交重複的頁面，會被下降每日限額，因此已被收錄的頁面不建議反覆提交。收錄有個時間過程，請先耐心等待；
   3. 實時提交。在頁面中安裝百度給的提交代碼，當這個頁面被用戶打開我，便自動把這個頁面提交給百度。這裏不須要考慮重複提交的問題。

以上幾種提交方式能夠同時使用，互不衝突。

1. 保證咱們的頁面是蜘蛛可讀的。

     早在ajax還沒流行的的時候，其實SEO對於前端的要求並無不少，或者說，那個時候尚未前端這個職業。頁面所有在服務器端由渲染好，無論是用戶仍是蜘蛛過來，都能很友好的返回html。ajax彷佛本來是爲了不有數據交互致使必須重刷頁面設計的，可是被大規模濫用，一些開發者無論三七二十一，全部數據都用ajax請求，使得蜘蛛不能順利的獲取頁面內容。慶幸的是這反倒促進了前端的飛速發展。

     到了後來，各類SPA單頁應用框架的出現，使得前端開發者再也不須要關心頁面的DOM結構，只需專一業務邏輯，數據所有由Javascript發ajax請求獲取數據，而後在客戶端進行渲染。這也就致使了老生常談的SEO問題。百度在國內搜索引擎的佔有率最高，可是很不幸，它並不支持ajax數據的爬取。因而，開發者開始想別的解決方案，好比檢測到是爬蟲過來，單獨把它轉發到一個專門的路由去渲染，好比基於Node.js的Jade引擎（如今更名叫Pug了），就能很好地解決這個問題。React和Vue，包括一個比較小衆的框架Marko也出了對應的服務端渲染解決方案。詳細內容查看對應文檔，我就很少說了。

2. URL與301

  URL設置要合理規範，井井有條。若是網站到了後期發現URL不合理須要從新替換時，會致使以前收錄的頁面失效，就是咱們所說的死鏈（這種狀況屬於死鏈的一種，404等也屬於死鏈）。因此必定要在網站建設初期就作好長遠的規劃。一旦出現這種狀況也不要過於擔憂，咱們能夠採起向搜索引擎投訴或者設置301跳轉的方式解決。

  URL層級嵌套不要太深，建議不超過四層。增長麪包屑導航可使頁面井井有條，也有利於爲蜘蛛營造順利的爬取路徑。

  除此以外，將指向首頁的域名所有設置301跳轉到同一URL，能夠避免分散權重。

分析入庫

  當蜘蛛把頁面抓取回去以後，就須要對頁面內容進行分析，並擇優收錄入庫。爲何說是擇優呢？下面我給你慢慢分析。

  搜索引擎的目的是給用戶提供高質量的、精準的搜索結果。若是整個頁面充斥着滿滿的廣告和各類不良信息，這無疑會很大程度上影響用戶體驗。

  除此以外，你確定不但願本身辛辛苦苦創做的文章被別人垂手可得的抄走，因此搜索引擎在必定程度上幫助你避免這種狀況的發生。對於已經收錄的內容，搜索引擎會下降其權重，甚至直接不收錄這個頁面。即使是這樣，爲了保證頁面的新鮮度，不少網站都會爬取或者轉載其餘網站的內容。這就是咱們常常聽到的僞原創。因此，想要讓你的頁面可以以較高的權重被收錄，就須要堅持更新網站內容，而且是高質量的原創內容。
  

檢索排序

  這塊個人理解是，頁面被收錄後，會給每一個頁面打一些tag。這些tag將做爲搜索結果排序的重要依據。好比用戶搜索「北京旅遊」，搜索引擎會檢索收錄頁面中被打了「北京旅遊」tag的頁面，並根據一系列規則進行排序。因此，如何提高這些tag在搜索引擎裏面的權重是相當重要的。

1. TDK優化

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

其中"T"表明頁頭中的title元素，這裏可能還要利用到分詞技術，當標題(Title)寫好後，咱們就儘可> 能不要再去修改了，儘可能簡潔，沒意義的詞儘可能不要加入到標題中，避免干擾到搜索引擎識別網站主題。

其中"D"表明頁頭中的description元素，要知道描述是對網頁的一個概述，也是對title的補充，由於title中只能書寫有限的字數，因此在description中就要稍微詳細的補充起來，通常用一句兩句話歸納文章的內容。

其中"K"表明頁頭中的keywords元素，提取頁面中的主要關鍵詞，數量控制在三到六個內。千方百計讓主關鍵字都出現。

  以上內容摘自百度百科，這裏須要補充幾點。

  TDK是搜索引擎判斷頁面主題內容的關鍵，因此要在title裏面言簡意賅的體現出頁面的主要內容，若是主體比較多，能夠用一些符號把不一樣的主題詞隔開，可是關鍵詞不要太多，最多不要超過五個。

  keywords裏面把每一個關鍵詞用英文逗號隔開，三到五個最佳。儘可能覆蓋每一個關鍵詞。

  description就是用天然語言描述頁面的主要內容，這裏注意一點就是把每一個關鍵詞至少覆蓋一遍才能達到最佳效果。

1. 提高頁面關鍵詞密度

  首先說個概念，叫關鍵詞密度。簡單理解就是關鍵詞在全部文字內容中出現的比例。提高關鍵詞的密度，有利於提高搜索引擎針對對應關鍵詞的搜索排名。但並非咱們整個頁面密密麻麻堆砌關鍵次就好，咱們來分析一個案例。

  咱們在百度搜索「北京旅遊」，排在第一的是百度旅遊，這個就不解釋了。排第二位是攜程，咱們就分析一下爲啥攜程會排名這麼靠前。

  經過查看百度快照，能夠一目瞭然的看到頁面上究竟哪些地方命中了這些詞。

  頁面頭部

  頁面底部

  頁面很清晰代表了關鍵詞出現的地方，咱們發現這個頁面除了正文部分外，還設置了許多的模塊，這些模塊看似只是一些簡單的連接，實際上他們更重要的使命就是服務SEO，提高關鍵詞的密度。同時，這些連接都是指向網站內部的連接，經過這樣的方式，還能夠在不一樣的頁面之間相互投權重。能夠說小連接，大學問！

  你覺得到此結束了？並無。請仔細觀察頁面上這些模塊的內容設置。分別覆蓋了地區、景點、攻略、導航、住宿、交通等等，能夠說是涵蓋了你要旅遊所須要的任何需求。這樣一來，無論你搜哪些有關於「北京旅遊」的關鍵詞，好比「北京旅遊住宿」，「北京特點美食」等都會命中這個頁面的詞，這使得這個頁面的關鍵詞數量獲得提高，更容易獲得曝光。

1. 細枝末節但不可忽視的優化

  頁面上常常會有各類圖片，對於搜索引擎來講，它是不識別圖片上的內容的。你可能知道代碼中img標籤的alt屬性是爲了圖片加載失敗的時候，給用戶看的。這個屬性代表了這張圖的內容。其實搜索引擎在分析頁面的時候，也會根據這個詞去判斷圖片的內容，因此要給頁面上有意義的圖片都加上alt屬性，寫清楚圖片索要反映的內容。

  頁面上的出站連接（也就是指向別的網站的A標籤），咱們要給它加上nofollow標籤，避免它向別的網站輸出權重。百度蜘蛛會忽略加了nofollow 的連接。你也能夠在網頁的meta標籤裏這麼寫<meta name="robots" content="nofollow" />，這樣一來，百度蜘蛛將不追蹤頁面上的全部連接，但不建議這麼作，除非這個頁面的全部連接都指向了別的域名。

  ......

其餘優化點

友情連接

  咱們常常會在頁面底部看到友情連接。友情連接是做爲網站之間相互交換流量，互惠互利的合做形式。事實上，友情連接對網站權重提高有着相當重要的做用。友鏈不只能夠引導用戶瀏覽，並且搜索引擎也會順着連接造成循環爬取，能夠有效提高網站流量和快照的更新速度。

關鍵詞篩選

  藉助站長工具、愛站網或者各類站長後臺咱們能夠分析出ip來路，以及關鍵詞的搜索熱度和相關詞，咱們再把這些詞以必定的密度添加到頁面中，以此來提高命中率。這裏主要是運營同窗的工做，我不專業，也就不展開說了，更多功能你們自行摸索。

利用好分析工具

  咱們要在本身的站點安裝百度統計代碼，這樣就能夠分析出站點內用戶的關注度和瀏覽流程，以此來不斷優化站點結構，提高用戶的留存率。同時也能夠作用戶畫像，分析用戶數據等等。

結語

  想要作好SEO並非一件簡單的事，須要鍥而不捨，面面俱到。對網站持續關注，並保持更新。從長遠打算，切不可投機取巧，只圖一時的效果作違背搜索引擎的操做，也就是常說的黑帽SEO，不然被百度K掉就得不償失了。

  以上觀點只是我最近學習的一些總結，並不權威，但願給不瞭解這塊的研發同窗簡單掃個盲，若有錯誤，還請各位指正與補充！