前端如何做好SEO優化


https://www.cnblogs.com/weiyf/p/9511021.html

一:什么是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、運維等去配合完成的,不過這個投入是絕對值得的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM