前端SEO優化

一、搜尋引擎工作原理

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

一個關鍵詞對用多個網址，因此就出現了排序的問題，相應的當與關鍵詞最吻合的網址就會排在前面了。在“蜘蛛”抓取網頁內容，提煉關鍵詞的這個過程中，就存在一個問題：“蜘蛛”能否看懂。如果網站內容是flash和js等，那麼它是看不懂的，會犯迷糊，即使關鍵字再貼切也沒用。相應的，如果網站內容可以被搜尋引擎能識別，那麼搜尋引擎就會提高該網站的權重，增加對該網站的友好度。這樣一個過程我們稱之為SEO。

二、SEO簡介

SEO(Search Engine Optimization)，即搜尋引擎優化。SEO是隨著搜尋引擎的出現而來的，兩者是相互促進，互利共生的關係。SEO的存在就是為了提升網頁在搜尋引擎自然搜尋結果中的收錄數量以及排序位置而做的優化行為。而優化的目的就是為了提升網站在搜尋引擎中的權重，增加對搜尋引擎的友好度，使得使用者在訪問網站時能排在前面。

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

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

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

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

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

5. 增加外部連結，到各個網站上宣傳。

三、為什麼要做SEO

提高網站的權重，增強搜尋引擎友好度，以達到提高排名，增加流量，改善（潛在）使用者體驗，促進銷售的作用。

四、前端SEO規範

前端是構建網站中很重要的一個環節，前端的工作主要是負責頁面的HTML+CSS+JS，優化好這幾個方面會為SEO工作打好一個堅實的基礎。通過網站的結構佈局設計和網頁程式碼優化，使前端頁面既能讓瀏覽器使用者能夠看懂（提升使用者體驗），也能讓“蜘蛛”看懂（提高搜尋引擎友好度）。

前端SEO注意事項： 

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

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

（1）控制首頁連結數量

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

（2）扁平化的目錄層次

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

（3）導航優化

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

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

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

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

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

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

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

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

搜尋引擎抓取HTML內容是從上到下，利用這一特點，可以讓主要程式碼優先讀取，廣告等不重要程式碼放在下邊。例如，在左欄和右欄的程式碼不變的情況下，只需改一下樣式，利用float:left;和float:right;就可以隨意讓兩欄在展現上位置互換，這樣就可以保證重要程式碼在最前，讓爬蟲最先抓取。同樣也適用於多欄的情況。

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

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

2、網頁程式碼優化

（1）突出重要內容---合理的設計title、description和keywords

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

<meta keywords>標籤：關鍵詞，列舉出幾個頁面的重要關鍵字即可，切記過分堆砌。

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

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

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

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

<a href="https://www.360.cn" title="360安全中心" class="logo"></a>複製程式碼

（4）正文標題要用<h1>標籤：h1標籤自帶權重“蜘蛛” 認為它最重要，一個頁面有且最多隻能有一個H1標籤，放在該頁面最重要的標題上面，如首頁的logo上可以加H1標籤。副標題用<h2>標籤, 而其它地方不應該隨便亂用 h 標題標籤。

（5）<img>應使用 "alt" 屬性加以說明

<img src="cat.jpg" width="300" height="200" alt="貓"  />複製程式碼

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

（6）表格應該使用<caption>表格標題標籤

caption 元素定義表格標題。caption 標籤必須緊隨 table 標籤之後，您只能對每個表格定義一

<table border='1'>
    <caption>表格標題</caption>
    <tbody>
        <tr>
            <td>apple</td>
            <td>100</td>
        </tr>
        <tr>
            <td>banana</td>
            <td>200</td>
        </tr>
    </tbody>
</table>複製程式碼

（7）<br>標籤：只用於文字內容的換行，比如：

<p> 
    第一行文字內容<br/>
    第二行文字內容<br/>
    第三行文字內容
</p>複製程式碼

（8）<strong>、<em>標籤 ：需要強調時使用。<strong>標籤在搜尋引擎中能夠得到高度的重視，它能突出關鍵詞，表現重要的內容，<em>標籤強調效果僅次於<strong>標籤；<b>、<i>標籤：只是用於顯示效果時使用，在SEO中不會起任何效果。

（9）文字縮排不要使用特殊符號 &nbsp; 應當使用CSS進行設定。版權符號不要使用特殊符號 &copy; 可以直接使用輸入法打出版權符號©。

（10）重要內容不要用JS輸出，因為“蜘蛛”不會讀取JS裡的內容，所以重要內容必須放在HTML裡。

（11）儘量少使用iframe框架,因為“蜘蛛”一般不會讀取其中的內容。

（12）謹慎使用 display：none ：對於不想顯示的文字內容，應當設定z-index或縮排設定成足夠大的負數偏離出瀏覽器之外。因為搜尋引擎會過濾掉display:none其中的內容。

3、前端網站效能優化

（1）減少http請求數量

在瀏覽器與伺服器進行通訊時，主要是通過 HTTP 進行通訊。瀏覽器與伺服器需要經過三次握手，每次握手需要花費大量時間。而且不同瀏覽器對資原始檔併發請求數量有限（不同瀏覽器允許併發數），一旦 HTTP 請求數量達到一定數量，資源請求就存在等待狀態，這是很致命的，因此減少 HTTP 的請求數量可以很大程度上對網站效能進行優化。

CSS Sprites

國內俗稱CSS精靈，這是將多張圖片合併成一張圖片達到減少HTTP請求的一種解決方案，可以通過CSS的background屬性來訪問圖片內容。這種方案同時還可以減少圖片總位元組數。

合併CSS和JS檔案

現在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請求數量，可以通過這些工具再發布前將多個CSS或者多個JS合併成一個檔案。

採用lazyload

俗稱懶載入，可以控制網頁上的內容在一開始無需載入，不需要發請求，等到使用者操作真正需要的時候立即載入出內容。這樣就控制了網頁資源一次性請求數量。

（2）控制資原始檔載入優先順序

瀏覽器在載入HTML內容時，是將HTML內容從上至下依次解析，解析到link或者script標籤就會載入href或者src對應連結內容，為了第一時間展示頁面給使用者，就需要將CSS提前載入，不要受 JS 載入影響。

一般情況下都是CSS在頭部，JS在底部。

（3）儘量外鏈CSS和JS（結構、表現和行為的分離），保證網頁程式碼的整潔，也有利於日後維護

<link rel="stylesheet" href="asstes/css/style.css" />

<script src="assets/js/main.js"></script>複製程式碼

（4）利用瀏覽器快取

瀏覽器快取是將網路資源儲存在本地，等待下次請求該資源時，如果資源已經存在就不需要到伺服器重新請求該資源，直接在本地讀取該資源。

（5）減少重排（Reflow）

基本原理：重排是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證 DOM 樹上的所有其它結點的visibility屬性，這也是Reflow低效的原因。如果Reflow的過於頻繁，CPU使用率就會急劇上升。

減少Reflow，如果需要在DOM操作時新增樣式，儘量使用 增加class屬性，而不是通過style操作樣式。

（6）減少 DOM 操作

（7）圖示使用IconFont替換

（8）不使用CSS表示式，會影響效率

（9）使用CDN網路快取，加快使用者訪問速度，減輕伺服器壓力

（10）啟用GZIP壓縮，瀏覽速度變快，搜尋引擎的蜘蛛抓取資訊量也會增大

（11）偽靜態設定

如果是動態網頁，可以開啟偽靜態功能，讓蜘蛛“誤以為”這是靜態網頁，因為靜態網頁比較合蜘蛛的胃口，如果url中帶有關鍵詞效果更好。

動態地址：http://www.360.cn/index.php

偽靜態地址：http://www.360.cn/index.html

結束語：正確認識SEO，不過分SEO，網站還是以內容為主。