前端SEO優化

1、搜索引擎工做原理

在搜索引擎網站的後臺會有一個很是龐大的數據庫，裏面存儲了海量的關鍵詞，而每一個關鍵詞又對應着不少網址，這些網址是被稱之爲「搜索引擎蜘蛛」或「網絡爬蟲」程序從茫茫的互聯網上一點一點下載收集而來的。隨着各類各樣網站的出現，這些勤勞的「蜘蛛」天天在互聯網上爬行，從一個連接到另外一個連接，下載其中的內容，進行分析提煉，找到其中的關鍵詞，若是「蜘蛛」認爲關鍵詞在數據庫中沒有而對用戶是有用的便存入後臺的數據庫中。反之，若是「蜘蛛」認爲是垃圾信息或重複信息，就捨棄不要，繼續爬行，尋找最新的、有用的信息保存起來提供用戶搜索。當用戶搜索時，就能檢索出與關鍵字相關的網址顯示給訪客。

一個關鍵詞對用多個網址，所以就出現了排序的問題，相應的當與關鍵詞最吻合的網址就會排在前面了。在「蜘蛛」抓取網頁內容，提煉關鍵詞的這個過程當中，就存在一個問題：「蜘蛛」可否看懂。若是網站內容是flash和js等，那麼它是看不懂的，會犯迷糊，即便關鍵字再貼切也沒用。相應的，若是網站內容能夠被搜索引擎能識別，那麼搜索引擎就會提升該網站的權重，增長對該網站的友好度。這樣一個過程咱們稱之爲SEO。

2、SEO簡介

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

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

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

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

3. 在網站上合理設置Robot.txt文件；

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

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

3、爲何要作SEO

提升網站的權重，加強搜索引擎友好度，以達到提升排名，增長流量，改善（潛在）用戶體驗，促進銷售的做用。

4、前端SEO規範

前端是構建網站中很重要的一個環節，前端的工做主要是負責頁面的HTML+CSS+JS，優化好這幾個方面會爲SEO工做打好一個堅實的基礎。經過網站的結構佈局設計和網頁代碼優化，使前端頁面既能讓瀏覽器用戶可以看懂（提高用戶體驗），也能讓「蜘蛛」看懂（提升搜索引擎友好度）。

前端SEO注意事項： 

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

通常而言，創建的網站結構層次越少，越容易被「蜘蛛」抓取，也就容易被收錄。通常中小型網站目錄結構超過三級，「蜘蛛」便不肯意往下爬了。而且根據相關數據調查：若是訪客通過跳轉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，太大，頁面加載速度慢。當速度很慢時，用戶體驗很差，留不住訪客，而且一旦超時，「蜘蛛」也會離開。

二、網頁代碼優化

（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其中的內容。

三、前端網站性能優化

（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，網站仍是之內容爲主。