前端是構建網(wǎng)站中很重要的一個環(huán)節(jié)，前端的工作主要是負責頁面的HTML+CSS+JS，優(yōu)化好這幾個方面會為SEO工作打好一個堅實的基礎。通過網(wǎng)站的結構布局設計和網(wǎng)頁代碼優(yōu)化，使前端頁面既能讓瀏覽器用戶能夠看懂（提升用戶體驗），也能讓“蜘蛛”看懂（提高搜索引擎友好度）。

前端SEO注意事項：

1、網(wǎng)站結構布局優(yōu)化：盡量簡單、開門見山，提倡扁平化結構

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

（1）控制首頁鏈接數(shù)量

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

（2）扁平化的目錄層次

盡量讓“蜘蛛”只要跳轉3次，就能到達網(wǎng)站內的任何一個內頁。

（3）導航優(yōu)化

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

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

（4）網(wǎng)站的結構布局---不可忽略的細節(jié)

頁面頭部：logo及主導航，以及用戶的信息。

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

頁面底部：版權信息和友情鏈接。

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

（5）利用布局，把重要內容HTML代碼放在最前

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

（6）控制頁面的大小，減少http請求，提高網(wǎng)站的加載速度。

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

2、網(wǎng)頁代碼優(yōu)化

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

***title***標題：只強調重點即可，盡量把重要的關鍵詞放在前面，關鍵詞不要重復出現(xiàn)，盡量做到每個頁面的title標題中不要設置相同的內容。

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

***meta description***標簽：網(wǎng)頁描述，需要高度概括網(wǎng)頁內容，切記不能太長，過分堆砌關鍵詞，每個頁面也要有所不同。

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

盡量讓代碼語義化，在適當?shù)奈恢檬褂眠m當?shù)臉撕?，用正確的標簽做正確的事。讓閱讀源碼者和“蜘蛛”都一目了然。比如：h1-h6 是用于標題類的，***nav***標簽是用來設置頁面主導航，列表形式的代碼使用ul或ol，重要的文字使用strong等。

（3）***a***標簽：頁內鏈接，要加 ***title***屬性加以說明，讓訪客和 “蜘蛛” 知道。而外部鏈接，鏈接到其他網(wǎng)站的，則需要加上 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="貓"  />
當網(wǎng)絡速度很慢，或者圖片地址失效的時候，就可以體現(xiàn)出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***標簽在搜索引擎中能夠得到高度的重視，它能突出關鍵詞，表現(xiàn)重要的內容，***em***標簽強調效果僅次于***strong***標簽；b、***i***標簽：只是用于顯示效果時使用，在SEO中不會起任何效果。

（9）文本縮進不要使用特殊符號   應當使用CSS進行設置。版權符號不要使用特殊符號 © 可以直接使用輸入法打出版權符號©。

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

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

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

3、前端網(wǎng)站性能優(yōu)化

（1）減少http請求數(shù)量

在瀏覽器與服務器進行通信時，主要是通過 HTTP 進行通信。瀏覽器與服務器需要經過三次握手，每次握手需要花費大量時間。而且不同瀏覽器對資源文件并發(fā)請求數(shù)量有限（不同瀏覽器允許并發(fā)數(shù)），一旦 HTTP 請求數(shù)量達到一定數(shù)量，資源請求就存在等待狀態(tài)，這是很致命的，因此減少 HTTP 的請求數(shù)量可以很大程度上對網(wǎng)站性能進行優(yōu)化。

CSS Sprites

國內俗稱CSS精靈，這是將多張圖片合并成一張圖片達到減少HTTP請求的一種解決方案，可以通過CSS的background屬性來訪問圖片內容。這種方案同時還可以減少圖片總字節(jié)數(shù)。

合并CSS和JS文件

現(xiàn)在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請求數(shù)量，可以通過這些工具再發(fā)布前將多個CSS或者多個JS合并成一個文件。

采用lazyload

俗稱懶加載，可以控制網(wǎng)頁上的內容在一開始無需加載，不需要發(fā)請求，等到用戶操作真正需要的時候立即加載出內容。這樣就控制了網(wǎng)頁資源一次性請求數(shù)量。

（2）控制資源文件加載優(yōu)先級

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

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

（3）盡量外鏈CSS和JS（結構、表現(xiàn)和行為的分離），保證網(wǎng)頁代碼的整潔，也有利于日后維護

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

<script src="assets/js/main.js"></script>
（4）利用瀏覽器緩存

瀏覽器緩存是將網(wǎng)絡資源存儲在本地，等待下次請求該資源時，如果資源已經存在就不需要到服務器重新請求該資源，直接在本地讀取該資源。

（5）減少重排（Reflow）

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

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

（6）減少 DOM 操作

（7）圖標使用IconFont替換

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

（9）使用CDN網(wǎng)絡緩存，加快用戶訪問速度，減輕服務器壓力

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

（11）偽靜態(tài)設置

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