前端如何作好seo

一：什麼是SEO？

　　搜索引擎優化（Search Engine Optimization）,簡稱SEO。是按照搜索引擎給出的優化建議，以加強網站核心價值爲目標，從網站結構、內容建設方案、用戶互動傳播等角度進行合理規劃，以改善網站在搜索引擎中的表現，吸引更多搜索引擎用戶訪問網站。SEO與搜索引擎，互相促進，互利互助。 要想更好理解以上一段廢話，首先須要理解關於搜索引擎的兩個概念。

二：前端

• 提升頁面加載速度。 能用css解決的不用背景圖片，背景圖片也儘可能壓縮大小，能夠幾個icons放在一個圖片上，使用background-position找到須要的圖片位置。能夠減小HTTP請求數，提升網頁加載速度。

• 結構、表現和行爲的分離。另一個重要的拖慢網頁加載速度的緣由就是將css和JS都堆積在HTML頁面上，每次看到有人直接在頁面上編寫CSS和JS我都很痛心疾首。經過外鏈的方式能大大加快網頁加載速度的，css文件能夠放在head裏，JS文件能夠放置在body的最下方，在不影響閱讀的狀況下再去加載JS文件。

• 優化網站分級結構。在每一個內頁加麪包屑導航是頗有必要的，可讓蜘蛛進入頁面以後不至於迷路，有條件的話，最好能單獨加個Sitemap頁面，將網站結構一目瞭然地展現在蜘蛛面前，更有利於蜘蛛抓取信息。

• 集中網站權重。因爲蜘蛛分配到每一個頁面的權重是必定的，這些權重也將平均分配到每一個a連接上，那麼爲了集中網站權重，可使用」rel=nofollow」屬性，它告訴蜘蛛無需抓取目標頁,能夠將權重分給其餘的連接。

• 文本強調標籤的使用。當着重強調某個關鍵詞須要加粗表示，選用strong標籤比使用b標籤要更有強調做用。

• a標籤的title屬性的使用。在不影響頁面功能的狀況下，能夠儘可能給a標籤加上title屬性，能夠更有利於蜘蛛抓取信息。

• 圖片alt屬性的使用。這個屬性能夠在圖片加載不出來的時候顯示在頁面上相關的文字信息，做用同上。

• H標籤的使用。主要是H1標籤的使用須要特別注意，由於它自帶權重，一個頁面有且最多隻能有一個H1標籤，放在該頁面最重要的標題上面，如首頁的logo上能夠加H1標籤。

 

　　精減代碼 
       清除網頁中一些冗餘的代碼，網上有這樣的工具，能夠輔助完成，若是須要的話，咱們能夠把代碼中的註釋去掉，甚至空行之類的也去掉，儘可能的減小代碼量，從而減少頁面體積。

       CSS Sprites 
       通俗點講，就是圖片合併，能夠把網站中一些比較通用的小圖片，合併到一張圖片上，而後利用CSS技術來分別調用圖片不一樣的部分。這樣能夠大大的減小HTTP的請求量，在網頁加載的時候，速度就快不少，如今不少大中型網站都在用這個前端加速技術，效果也是很不錯的。

       爲圖片指定寬度與高度 
       這也是不少人比較容易忽略的，在頁面中，請你爲每個圖片，都指定一個width屬性與height屬性，這樣在頁面加載的時候，瀏覽器會預先留出既定的位置，圖片下邊的代碼能夠繼續下載而不用等待，提升並行下載的速度，提升了頁面加載的速度。

       啓用Keep-Alive屬性 
       Keep-Alive你能夠理解爲長鏈接，在沒有啓用keep-alive屬性以前，瀏覽器向服務器請求的connection是即連即斷的，執行一次HTTP請求完成後，立刻斷開這個鏈接的，而啓用Conncetion的Keep-Alive屬性以後，這個鏈接能夠保持一段時間，從而能夠提升頁面加載的速度。

       使用瀏覽器緩存 
       可使用緩存技術來提升頁面的加載速度，爲一些不常常變化的文件，設置一個相對較長的過時時間，這樣當用戶訪問網站後，就會在它的瀏覽器中留下緩 存，當它在下次請求的時候，留在緩存中的組件就不用再向服務器發出HTTP請求了，這樣減小了瀏覽器向網站服務器發出的HTTP請求數，從而提升了頁面加 載速度，這在一些圖片比較多的網站，效果是很是明顯的，咱們要善於使用緩存技術。

       啓用GZIP壓縮 
       大中型網站，基本都啓用了GZIP壓縮，若是你使用的是虛擬主機，你可讓服務商爲你啓用，若是本身有服務器，本身啓用也很簡單的，爲何啓用GZIP壓縮就會加快速度呢，由於當啓用了GZIP後，網站服務器向你傳輸數據以前，是通過壓縮了的，當傳輸到你的瀏覽器後，會再被解壓縮的，從而能夠在 你的瀏覽器上正常顯示，並且壓縮率能夠達到不少高，效果很是好。通常你啓用了壓縮後，搜索引擎對你網站的抓取量也是上升了的。 
       前端速度優化方面還有不少工做能夠去作，例如大公司都啓用了CDN加速，你的圖片也能夠進行無損壓縮，CSS、JS文件均可以用一些專業的工具去壓縮，在你網頁的head標頭要聲明字符集，儘可能少用重定向，指定Last-Modified 或 ETag標頭等，固然這些都多少涉及了一些技術方面的問題，作頁面前端優化是一個系統的工程，是須要技術、SEO、運維等去配合完成的，不過這個投入是絕對值得的。