前端SEO—詳細講解

一、搜尋引擎運作原理

當我們在輸入框中輸入關鍵字，點擊搜尋或查詢時，然後得到結果。深究背後的故事，搜尋引擎做了很多事。

在搜尋引擎網站，例如百度，在其後台有一個非常龐大的資料庫，裡面儲存了海量的關鍵字，而每個關鍵字又對應著很多網址，這些網址是百度程式從茫茫的網路上一點一點下載收集而來的，這些程式稱之為「搜尋引擎蜘蛛」或「網路爬蟲」。這些勤奮的“蜘蛛”每天在互聯網上爬行，從一個鏈接到另一個鏈接，下載其中的內容，進行分析提煉，找到其中的關鍵字，如果“蜘蛛”認為關鍵字在數據庫中沒有而對用戶是有用的便存入資料庫。反之，如果「蜘蛛」認為是垃圾訊息或重複訊息，就捨棄不要，繼續爬行，尋找最新的、有用的資訊保存起來提供用戶搜尋。當使用者搜尋時，就能檢索出與關鍵字相關的網址顯示給訪客。

一個關鍵字對用多個網址，因此就出現了排序的問題，對應的當與關鍵字最吻合的網址就會排在前面了。在「蜘蛛」抓取網頁內容，提煉關鍵字的這個過程中，就存在一個問題：「蜘蛛」能否看懂。如果網站內容是flash和js，那麼它是看不懂的，會犯迷糊，即使關鍵字再貼切也沒用。相應的，如果網站內容是它的語言，那麼它便能看懂，它的語言即SEO。

二、SEO簡介

#全名為：Search English Optimization，搜尋引擎優化。自從有了搜尋引擎，SEO便誕生了。

存在的意義：為了提升網頁在搜尋引擎自然搜尋結果中的收錄數量以及排序位置而做的最佳化行為。簡言之，就是希望百度等搜尋引擎能多多我們收錄精心製作後的網站，並且在別人造訪時網站能排在前面。

分類：白帽SEO和黑帽SEO。白帽SEO，起到了改良和規範網站設計的作用，使網站對搜尋引擎和用戶更加友好，並且網站也能從搜尋引擎中獲取合理的流量，這是搜尋引擎鼓勵和支持的。黑帽SEO，利用和放大搜尋引擎政策缺陷來獲取更多用戶的訪問量，這類行為大多是欺騙搜尋引擎，一般搜尋引擎公司是不支持與鼓勵的。本文針對白帽SEO，那麼白帽SEO能做什麼呢？

1. 對網站的標題、關鍵字、描述精心設置，反映網站的定位，讓搜尋引擎明白網站是做什麼的；

2. 網站內容優化：內容與關鍵字的對應，增加關鍵字的密度；

3. 在網站上合理地設定Robot.txt檔案；

4. 產生針對搜尋引擎友善的網站地圖；

5. 增加外部鏈接，到各個網站上宣傳；

三、前端SEO

#透過網站的結構佈局設計和網頁程式碼優化，讓前端頁面既能讓瀏覽器使用者看懂，也能讓「蜘蛛」看懂。

(1)網站結構佈局優化：盡量簡單、開門見山，提倡扁平化結構。

#

一般而言，建立的網站架構層次越少，越容易被「蜘蛛」抓取，也就容易被收錄。一般中小型網站目錄結構超過三級，「蜘蛛」便不願意往下爬，「萬一天黑迷路了怎麼辦」。並且根據相關調查：訪客如果經過跳轉3次還沒找到需要的資訊，很可能離開。因此，三層目錄結構也是體驗的需要。為此我們需要做到：

1. 控制首頁連結數量

網站首頁是權重最高的地方，如果首頁連結太少，沒有“橋”，“蜘蛛”不能繼續往下爬到內頁，直接影響網站收錄數量。但是首頁鏈接也不能太多，一旦太多，沒有實質性的鏈接，很容易影響用戶體驗，也會降低網站首頁的權重，收錄效果也不好。

因此對於中小型企業網站，建議首頁連結在100個以內，連結的性質可以包含頁面導航、底部導航、錨文字連結等等，注意連結要建立在使用者的良好體驗和引導使用者獲取資訊的基礎之上。

2.扁平化的目錄層次，盡量讓「蜘蛛」只要跳3次，就能到達網站內的任何一個內頁。扁平化的目錄結構，例如：“植物”--> "水果" --> "蘋果"、“桔子”、“香蕉”，透過3級就能找到香蕉了。

3.導航優化

導航應該盡量採用文字方式，也可以搭配圖片導航，但是圖片代碼一定要進行優化，標籤必須添加“alt”和“title”屬性，告訴搜尋引擎導航的定位，做到即使圖片未能正常顯示時，使用者也能看到提示文字。

其次，在每個網頁上應該加上麵包屑導航，好處：從用戶體驗方面來說，可以讓用戶了解當前所處的位置以及當前頁面在整個網站中的位置，幫助用戶很快了解網站組織形式，從而形成更好的位置感，同時提供了返回各個頁面的接口，方便用戶操作；對“蜘蛛”而言，能夠清楚的了解網站結構，同時還增加了大量的內部鏈接，方便抓取，降低跳出率。

4. 網站的結構佈局--不可忽略的細節

頁面頭部：logo及主導航，以及使用者的資訊。

頁面主體：左邊正文，包括麵包屑導航及正文；右邊放熱門文章及相關文章，好處：留住訪客，讓訪客多停留，對“蜘蛛”而言，這些文章屬於相關鏈接，增強了頁面相關性，也能增強頁面的權重。

頁面底部：版權資訊和友誼連結。

特別注意：分頁導覽寫法，推薦寫法：“首頁 1 2 3 4 5 6 7 8 9 下拉框”，這樣“蜘蛛”能夠根據對應頁碼直接跳轉，下拉框直接選擇頁面跳轉。而下面的寫法是不推薦的，“首頁 下一頁 尾頁”，特別是當分頁數量特別多時，“蜘蛛”需要經過很多次往下爬，才能抓取，會很累、會容易放棄。

5.控制頁面的大小，減少http請求，提高網站的載入速度。

一個頁面最好不要超過100k，太大，頁面載入速度慢。當速度很慢時，使用者體驗不好，留不住訪客，一旦超時，「蜘蛛」也會離開。

　(2)網頁程式碼最佳化

1.標題：只強調重點即可，盡量把重要的關鍵字放在前面，關鍵字不要重複出現，盡量做到每個頁面的。標題中不要設定相同的內容。

2.標籤：關鍵字，列舉出幾個頁面的重要關鍵字即可，切記過度堆砌。

3.標籤：網頁描述，需要高度概括網頁內容，切記不能太長，過分堆砌關鍵字，每個頁面也要有所不同。

4.中的標籤：盡量讓程式碼語意化，在適當的位置使用適當的標籤，用正確的標籤做正確的事。讓閱讀原始碼者和「蜘蛛」都一目了然。例如：h1-h6 是用於標題類別的。

5.超連結標籤：頁內鏈接，要加 “title” 屬性加以說明，讓訪客和 “蜘蛛” 知道。而外部鏈接，鏈接到其他網站的，則需要加上 el="nofollow" 屬性, 告訴 “蜘蛛” 不要爬，因為一旦“蜘蛛”爬了外部鏈接之後，就不會再回來了。

6.正文標題要用h1標籤：「蜘蛛」 認為它最重要，若不喜歡h1,h1的預設樣式可以透過CSS設定。盡量做到正文標題用h1標籤，副標題用h2標籤, 而其它地方不應該隨便亂用 h 標題標籤。

7.換行標籤：只用於文字內容的換行

8.表格應該使用表格標題標籤

9.圖片應使用 "alt" 屬性加以說明

10.加粗，強調標籤 : 需要強調時使用。加粗標籤在搜尋引擎中能夠得到高度的重視，它能突顯關鍵字，表現重要的內容，並強調標籤強調效果僅次於加粗標籤。

10、文字縮排不要使用特殊符號   應使用CSS進行設定。版權符號不要使用特殊符號 © 可以直接使用輸入法，拼出“banquan”，選擇序號5就能打出版權符號©。

12、巧妙利用CSS佈局，將重要內容的HTML程式碼放在最前面，最前面的內容被認為是最重要的，優先讓「蜘蛛」讀取，進行內容關鍵字抓取。

13.重要內容不要用JS輸出，因為「蜘蛛」不認識

14.盡量少使用iframe框架,因為「蜘蛛」一般不會讀取其中的內容

15.謹慎使用 display：none ：對於不想顯示的文字內容，應設定z-index或設定到瀏覽器顯示器之外。因為搜尋引擎會過濾掉display:none其中的內容。

16. 不斷精簡程式碼

17.js程式碼如果是操作DOM操作，應盡量放在body結束標籤之前，html程式碼之後。

----------------------------------------------- ------------------------小二給我來二、兩輪子！

以上是前端SEO—詳細講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！