網站頁面程式碼該如何做SEO優化
1、HEAD部分程式碼規範化
HEAD部分程式碼是搜尋引擎爬行網站的入口部分,現在很多網站的頭部程式碼都相當統一化,刻板效應明顯十足,這樣的網站程式碼是像模板框架一樣是不被spider喜歡的,而我們要做的就是將網站的程式碼規範化,建立起網站獨一無二的head部分,讓搜尋引擎有新鮮感,這樣才能夠吸引spider爬行。
2、使用DIV+CSS佈局網頁
雖然現在div+css已經很成熟了,但是很多網頁設計者可能考慮到網頁的相容性以及佈局的簡易性還是使用老式的table佈局,雖然table佈局很方便,但是其弊端也是顯而易見的,那就是會大大增加網頁的大小,尤其是多層表格的巢狀,這種佈局不僅會提升體積,同時如果巢狀數太多的話就會影響到搜尋引擎的爬行,影響到站點的收錄。
另外,一些網站會使用外部檔案,將css和js放在外部檔案中,頁面html中只要放一樣程式碼呼叫就可以了,有時候我們去檢視的一些原始檔程式碼,會看到很多css程式碼以及javasript程式碼,將javascript放置在網站頁面的html檔案中的最前面,而真正能用到得一些文字部分這被推倒了html的後面,認為這種程式碼都需要精簡。
3、CSS優化
CSS是頁面效果呈現中非常重要的組成部分,它包括顏色、大小尺寸、背景和字型等。寫CSS很簡單很容易,但是要想寫出精煉的CSS程式碼還是有很多技巧的。
(1)、CSS位置
CSS說明如果出現在網站之後,頁面需要重新渲染,開啟速度受到影響,所有css定義程式碼的位置要放到網站之前。
(2)、css sprite技術
網站上的一些圖片可以採用css sprite技術進行合併,減少載入請求次數,從而提高網頁的載入速度。
(3)、CSS程式碼優化
通過對css程式碼屬性的簡寫、移除多餘的結構(frameworks)和重設(resets)等一系列的方法和技巧來簡化css程式碼,減小css檔案的大小。
(4)、儘量不要使用內嵌式CSS
內嵌式CSS分為兩種,一是在head區域的普通內嵌式;二是在標籤內出現的行內內嵌式CSS,無論是何種內嵌CSS方式結果都會提升頁面的體積,對此,我們可以儘量使用外調式的CSS來為站點頁面的體積瘦身。
4、JS優化
JS優化與其他語言的優化也仍然有相同之處,JS優化的關鍵,仍然是要把精力放在最關鍵的地方,也就是瓶頸上,一般來說,瓶頸總是出現在大規模迴圈的地方,這倒不是說迴圈本身有效能問題,而是迴圈會迅速放大可能存在的效能問題。
(1)、JS位置
網頁程式碼中對js進行優化的時候,建議將JS放在頁面最後,這樣可以加快頁面開啟速度。
(2)、合併JS
合併相同域名下的js,通過減少網路連線次數從而提高網頁的開啟速度。
(3)、LazyLoad(延遲載入)技術
Lazy Load是一個用JavaScript編寫的jQuery外掛,它可以延遲載入長頁面中的圖片,在瀏覽器可視區域外的圖片不會被載入,直到使用者將頁面滾動到它們所在的位置。
(4)、JS程式碼外部的呼叫
我們知道當前的搜尋引擎還是不能夠識別JS程式碼的,倘若在網站中出現大批量的js程式碼網站在收錄上就會出現困難,而我們要做的就是將用到Javascript程式碼用外部呼叫的形式放在網站中,這樣可以簡化搜尋引擎的工作,也不會在無形中衍生出無效程式碼累及網站。
不僅如此,覺得可以採用外部呼叫的還有css程式碼,建站之初可以將網站的文字、顏色定義在css程式碼檔案中,儘量不要在頁面程式碼內出現過多的樣式程式碼。
(5)、降低頁面對於JS的依賴性
現在來說,JS對於搜尋引擎並不不友好,雖然有訊息稱搜尋引擎不會對JS有厭惡的情緒,但是多一事不如少一事,雖然JS可以製作出很多的效果,但是網頁中大量的JS將影響蜘蛛對頁面的抓取和增加網頁體積,尤其是頁面的關鍵位置如導航欄,儘量採用DIV+CSS的設計方法。
5、TABLE標籤的縮減
table標籤是現在大多數上線網站中最為常見的程式碼形式,原因根本在於table在建立網站時比較快捷,但是這也就影響了網站的後期優化。
相對於div+css佈局的精簡程式碼網站來說,它的佔位比較大,所以,在建站時候,儘量是少用表格,即便是要使用表格時,巢狀式表格也要儘量少用,以免產生冗雜程式碼。
那麼,現在的網站用什麼做呢?很多程式設計師第一想法就是採用CSS去做,採用CSS去排版,這種做法呢,就使頁面中的表格大大的降低了,但在看來,網站也不能沒有表格,有些事必須使用到得,使用表格本身沒什麼,但是有很多網站都採用巢狀表格,一般這樣的表格形式會給網站產生大量的垃圾程式碼,並且這些垃圾程式碼都是沒有任何用處的程式碼,這一類程式碼也是我們網站需要精簡的程式碼之一。
6、程式碼註釋省略
很多程式人員在編寫程式碼是都習慣在別人看不懂的地方給出一段註釋,這些程式碼往往是為了幾個程式設計師之間的協同工作,對於外人以及搜尋引擎來說沒有任何用處,相反還會給搜尋引擎蜘蛛帶來一定的困擾。
開啟頁面程式碼我們經常會看到一些註釋程式碼,這是程式設計師為了表明程式碼意義而做的註釋,其實這些開啟不必,因為對於搜尋引擎而言,它們是不存在任何意義的,只是會增加了頁面程式碼的容量,這樣對於網站不會有什麼利處,不如直接省略。
7、清除頁面中多餘的程式碼
有的網站以為製作者的程式碼書寫習慣問題,頁面會有很多空格程式碼,比如:空格程式碼、style和font重複定義的程式碼,不要小看這些體積很小的程式碼,積攢多了,也會使我們的網站異常的臃腫。
很多網站都是採用的DIV+CSS,在CSS中定義了文字的字型,顏色,以及頁面的排版,但是在網站的其他地方還用了以style以及font來再次定義字型字型,這些程式碼完全沒有必要重複定義,屬於可以精簡的程式碼。
8、將html控制方式轉換為CSS控制
很多網頁設計者習慣在標籤內對內容進行控制,比如img標籤裡通過width和height來控制圖片的大小,儘量將這些程式碼轉換成外調式的CSS,使網頁程式碼更加的瘦身。
9、快取靜態資源
通過設定瀏覽器快取,將css、js等不太經常更新的檔案快取在瀏覽器端,這樣同一訪客再次訪問你的網站的時候,瀏覽器就可以從瀏覽器的快取中獲取css、js等,而不必每次都從你的伺服器讀取,這樣在一定程度上加快了網站的開啟速度,又可以節約你的伺服器流量。
10、網頁壓縮技術
對於網頁壓縮而言,相信各位站長都比較熟悉,主要是啟用伺服器Gzip,對頁面Gzip壓縮,減少元素的體積,從而減少資料的傳輸,進而提高網頁的載入速度,這個功能需要你的伺服器的支援,GZIP壓縮一般能對網頁進行30%-80%的壓縮,是最重要的一種優化效果。
總之,通過程式碼優化來起到網站優化作用的方式還有很多,在這只是隨意的說了其中比較常見的而已,希望大家能多多鑽研。
點評:
網站頁面程式碼的SEO優化,不但可以提高網頁的開啟速度,還可以提升使用者的訪問體驗,同時從SEO的角度來說,還可以提高蜘蛛的訪問速度,有助於搜尋引擎對網站的索引體驗。