參考網站

網站優化seo基本概念及方法

一、搜尋引擎工作原理簡述

在搜尋引擎網站的後臺會有一個非常龐大的資料庫，裡面儲存了海量的關鍵詞，而每個關鍵詞又對應著很多網址，這些網址是被稱之為“搜尋引擎蜘蛛”或”網路爬蟲”。

程式從茫茫的網際網路上一點一點下載收集而來的。隨著各種各樣網站的出現，這些勤勞的“蜘蛛”每天在網際網路上爬行，從一個連結到另一個連結，下載其中的內容，進行分析提煉，找到其中的關鍵詞，如果“蜘蛛”認為關鍵詞在資料庫中沒有而對使用者是有用的便存入後臺的資料庫中。反之，如果“蜘蛛”認為是垃圾資訊或重複資訊，就捨棄不要，繼續爬行，尋找最新的、有用的資訊儲存起來提供使用者搜尋。當使用者搜尋時，就能檢索出與關鍵字相關的網址顯示給訪客。

一個關鍵詞對用多個網址，因此就出現了排序的問題，相應的當與關鍵詞最吻合的網址就會排在前面了。

在“蜘蛛”抓取網頁內容，提煉關鍵詞的這個過程中，就存在一個問題:“蜘蛛”能否看懂？。

如果網站內容是flash和js等，那麼它是看不懂的，即使關鍵字再貼切也沒用。

相應的，如果網站內容可以被搜尋引擎能識別，那麼搜尋引擎就會提高該網站的權重，增加對該網站的友好度。這樣一個過程我們稱之為SEO（Search Engine Optimization），漢譯為搜尋引擎優化。。

二、前端SEO規範簡潔版

1. 合理的title、description、keywords:搜尋對著三項的權重逐個減小，title值強調重點即可;
   description把頁面內容高度概括，不可過分堆砌關鍵詞; keywords列舉出重要關鍵詞。
2. 語義化的HTML標籤
3. 非裝飾性的圖片必須加alt
4. 讓重要的內容放在HTML最前面，優先載入:搜尋引擎抓取HTML順序是從上到下，保證重要內谷一正極抓取
5. 每個頁面只出現一個h1標籤
6. 頁面儘量不要做成flash、圖片、視訊，因為搜尋引擎抓取不到
7. 少用iframe，iframe抓取不到
8. 頁面儘量扁平，層級太深也不利於抓取
9. 非同步載入內容(ajax)速費-依險和seo優化息選擇直接輸出，有利於使用者體驗和seo優化
10. 採用友情連結:在別人的網站匯入自己網站的連結
11. 向各大搜尋引擎登陸入口提交尚未收錄站點
12. 提高網站速度:網站速度是搜尋引擎排序的一個重要指標
13. 做好404頁面。不僅是為了提高蜘蛛體驗，也是為了使用者體驗的更好。

三、前端SEO規範詳細版

3.1 網站結構佈局優化：儘量簡單、開門見山，提侶扁平化結構

一般而言，建立的網站結構層次越少，越容易被“蜘蛛”抓取，也就容易被收錄。

一般中小型網站目錄結構超過三級，“蜘蛛”便不願意往下爬了。

並且根據相關資料調查:如果訪客經過跳轉3次還沒找到需要的資訊，很可能離開。因此，三層目錄結構也是體驗的需要。

為此，需要重視以下幾點。

控制首頁連結數量

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

扁平化的目錄層次

儘量讓“蜘蛛”只要跳轉3次，就能到達網站內的任何一個內頁。

導航優化

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

其次，在每一個網頁上應該加上面包屑導航。

好處：

• 從使用者體驗方面來說，可以讓使用者瞭解當前所處的位置以及當前頁面在整個網站中的位置，幫助使用者很快了解網站組織形式，從而形成更好的位置感，同時提供了返回各個頁面的介面，方便使用者操作。
• 對“蜘蛛”而言，能夠清楚的瞭解網站結構，同時還增加了大量的內部連結，方便抓取，降低跳出率。

網站的結構佈局—不可忽略的細節

頁面頭部

logo及主導航，以及使用者的資訊。頁面主體:左邊正文，包括麵包屑導航及正文;右邊放熱門文章及相關文章，好處:留住訪客，讓訪客多停留，對“蜘蛛”而言，這些文章屬於相關連結，增強了頁面相關性，也能增強頁面的權重。

頁面底部

版權資訊和友情連結。

特別注意

分頁導航寫法，推薦寫法:“首頁1234 567 8 9下拉框”，這樣“蜘蛛”能夠根據相應頁碼直接跳轉，下拉框直接選擇頁面跳轉。

而下面的寫法是不推薦的，“首頁 下—頁 尾頁"，特別是當分頁數量特別多時，“蜘蛛”需要經過很多次往下爬，才能抓取，會很累、會容易放棄。

利用佈局，把重要內容HTML程式碼放在最前

搜尋引擎抓取HTML內容是從上到下，利用這—特點，可以讓主要程式碼優先讀取，廣告等不重要程式碼放在下邊。

例如，在左欄和右欄的程式碼不變的情況下，只需改一下樣式，利用float:left;和float:right;就可以隨意讓兩欄在展現上位置互換，這樣就可以保證重要程式碼在最前，讓爬蟲最先抓取。同樣也適用於多欄的情況。

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

一個頁面最好不要超過100k，太大，頁面載入速度慢。

當速度很慢時，使用者體驗不好，留不住訪客，並且一旦超時，“蜘蛛”也會離開。

3.2 網頁程式碼優化

突出重要內容

合理地設計title，description和keywords。

• <title>標題:只強調重點即可，儘量把重要的關鍵詞放在前面，關鍵詞不要重複出現，儘量做到每個頁面的
• <title>標題中不要設定相同的內容。<meta keywords>標籤:關鍵詞，列舉出幾個頁面的重要關鍵字即可，切記過分堆砌。
• <meta description>標籤:網頁描述，需要高度概括網頁內容，切記不能太長，過分堆砌關鍵詞，每個頁面也要有所不同。

語義化書寫HTML程式碼，符合W3C標準

儘量讓程式碼語義化，在適當的位置使用適當的標籤，用正確的標籤做正確的事。讓閱讀原始碼者和“蜘蛛”都一目瞭然。比如: h1-h6是用於標題類的，<nav>標籤是用來設定頁面主導航，列表形式的程式碼使用ul或ol，重要的文字使用strong等。

a標籤

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

正文標題要用h1標籤

h1標籤自帶權重。

“蜘蛛”認為它最重要，一個頁面有且最多隻能有一個H1標籤，放在該頁面最重要的標題上面，如首頁的logo上可以加H1標籤。

副標題用

標籤,而其它地方不應該隨便亂用h標題標籤。

img應使用"alt"屬性加以說明

當網路速度很慢，或者圖片地址失效的時候，就可以體現出alt屬性的作用，他可以讓使用者在圖片沒有顯示的時候知道這個圖片的作用。同時為圖片設定高度和寬度，可提高頁面的載入速度。

表格應該使用caption表格標題標籤

caption元素定義表格標題。caption標籤必須緊隨table標籤之後

strong 、em標籤需要強調是使用。

標籤在搜尋引擎中能夠得到高度的重視，它能突出關鍵詞，表現重要的內容，標籤強調效果僅次於標籤; 、標籤:只是用於顯示效果時使用，在SEO中不會起任何效果。

重要內容不要用JS輸出

因為“蜘蛛”不會讀取JS裡的內容，所以重要內容必須放在HTML裡。前端框架針對SEO的缺陷，可通過服務端渲染彌補。例如vue的ssr框架nuxt。

少用iframe框架

“蜘蛛”一般不會讀取其中的內容。

搜尋引擎會過濾掉display:none其中的內容

蜘蛛只能抓取a標籤中href

<a href="Default.aspx?id=1">測試</a>最好後面不要帶引數
<a href="Default.aspx">測試</a>

如果帶上引數蜘蛛不會考慮的。這樣的話，就需要用到URL重寫了。

蜘蛛不會執行JavaScript

換句話說如果在a標籤中使用了onclick 蜘蛛是不會抓到的。

蜘蛛只能抓到get請求的頁面，不會抓到post請求的頁面

合理編寫robots.txt

我們希望網頁的前臺頁面全部被蜘蛛抓到，但是不希望後臺頁面被蜘蛛抓到，蜘蛛可沒有那麼智慧，知道你的網站哪個是前臺頁面，哪個是後臺頁面。
這裡就需要建立一個名為“robots.txt”(注意robots.txt是一個協議，不是命令，一般最好要遵守的robots.txt是搜尋引擎搜尋該網站時的第一個檔案。