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

前端SEO注意事項(xiàng)：

1、網(wǎng)站結(jié)構(gòu)布局優(yōu)化：盡量簡(jiǎn)單、開(kāi)門(mén)見(jiàn)山，提倡扁平化結(jié)構(gòu)

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

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

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

（2）扁平化的目錄層次

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

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

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

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

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

頁(yè)面頭部：logo及主導(dǎo)航，以及用戶的信息。

頁(yè)面主體：左邊正文，包括面包屑導(dǎo)航及正文；右邊放熱門(mén)文章及相關(guān)文章，好處：留住訪客，讓訪客多停留，對(duì)“蜘蛛”而言，這些文章屬于相關(guān)鏈接，增強(qiáng)了頁(yè)面相關(guān) 性，也能增強(qiáng)頁(yè)面的權(quán)重。

頁(yè)面底部：版權(quán)信息和友情鏈接。

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

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

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

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

一個(gè)頁(yè)面最好不要超過(guò)100k，太大，頁(yè)面加載速度慢。當(dāng)速度很慢時(shí)，用戶體驗(yàn)不好，留不住訪客，并且一旦超時(shí)，“蜘蛛”也會(huì)離開(kāi)。

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

（1）突出重要內(nèi)容---合理的設(shè)計(jì)title、description和keywords

***title***標(biāo)題：只強(qiáng)調(diào)重點(diǎn)即可，盡量把重要的關(guān)鍵詞放在前面，關(guān)鍵詞不要重復(fù)出現(xiàn)，盡量做到每個(gè)頁(yè)面的title標(biāo)題中不要設(shè)置相同的內(nèi)容。

***meta keywords***標(biāo)簽：關(guān)鍵詞，列舉出幾個(gè)頁(yè)面的重要關(guān)鍵字即可，切記過(guò)分堆砌。

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

（2）語(yǔ)義化書(shū)寫(xiě)HTML代碼，符合W3C標(biāo)準(zhǔn)

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

（3）***a***標(biāo)簽：頁(yè)內(nèi)鏈接，要加 ***title***屬性加以說(shuō)明，讓訪客和 “蜘蛛” 知道。而外部鏈接，鏈接到其他網(wǎng)站的，則需要加上 el="nofollow" 屬性, 告訴 “蜘蛛” 不要爬，因?yàn)橐坏爸┲搿迸懒送獠挎溄又?，就不?huì)再回來(lái)了。

<a href="https://www.360.cn" title="360安全中心" class="logo"></a>
（4）正文標(biāo)題要用***h1***標(biāo)簽：h1標(biāo)簽自帶權(quán)重“蜘蛛” 認(rèn)為它最重要，一個(gè)頁(yè)面有且最多只能有一個(gè)H1標(biāo)簽，放在該頁(yè)面最重要的標(biāo)題上面，如首頁(yè)的logo上可以加H1標(biāo)簽。副標(biāo)題用***h2***標(biāo)簽, 而其它地方不應(yīng)該隨便亂用 h 標(biāo)題標(biāo)簽。

（5）***img***應(yīng)使用 "alt" 屬性加以說(shuō)明

  <img src="cat.jpg" width="300" height="200" alt="貓"  />
當(dāng)網(wǎng)絡(luò)速度很慢，或者圖片地址失效的時(shí)候，就可以體現(xiàn)出alt屬性的作用，他可以讓用戶在圖片沒(méi)有顯示的時(shí)候知道這個(gè)圖片的作用。同時(shí)為圖片設(shè)置高度和寬度，可提高頁(yè)面的加載速度。

（6）表格應(yīng)該使用***caption***表格標(biāo)題標(biāo)簽

caption 元素定義表格標(biāo)題。 caption 標(biāo)簽必須緊隨 table 標(biāo)簽之后，您只能對(duì)每個(gè)表格定義一

  <table border='1'>
      <caption>表格標(biāo)題</caption>
      <tbody>
          <tr>
              <td>apple</td>
              <td>100</td>
          </tr>
          <tr>
              <td>banana</td>
              <td>200</td>
          </tr>
      </tbody>
  </table>
（7）***br***標(biāo)簽：只用于文本內(nèi)容的換行，比如：

  <p> 
    第一行文字內(nèi)容<br/>
    第二行文字內(nèi)容<br/>
    第三行文字內(nèi)容
  </p>
（8）strong、***em***標(biāo)簽 ：需要強(qiáng)調(diào)時(shí)使用。***strong***標(biāo)簽在搜索引擎中能夠得到高度的重視，它能突出關(guān)鍵詞，表現(xiàn)重要的內(nèi)容，***em***標(biāo)簽強(qiáng)調(diào)效果僅次于***strong***標(biāo)簽；b、***i***標(biāo)簽：只是用于顯示效果時(shí)使用，在SEO中不會(huì)起任何效果。

（9）文本縮進(jìn)不要使用特殊符號(hào)   應(yīng)當(dāng)使用CSS進(jìn)行設(shè)置。版權(quán)符號(hào)不要使用特殊符號(hào) © 可以直接使用輸入法打出版權(quán)符號(hào)©。

（10）重要內(nèi)容不要用JS輸出，因?yàn)椤爸┲搿辈粫?huì)讀取JS里的內(nèi)容，所以重要內(nèi)容必須放在HTML里。

（11）盡量少使用iframe框架,因?yàn)椤爸┲搿币话悴粫?huì)讀取其中的內(nèi)容。

（12）謹(jǐn)慎使用 display：none ：對(duì)于不想顯示的文字內(nèi)容，應(yīng)當(dāng)設(shè)置z-index或縮進(jìn)設(shè)置成足夠大的負(fù)數(shù)偏離出瀏覽器之外。因?yàn)樗阉饕鏁?huì)過(guò)濾掉display:none其中的內(nèi)容。

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

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

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

CSS Sprites

國(guó)內(nèi)俗稱(chēng)CSS精靈，這是將多張圖片合并成一張圖片達(dá)到減少HTTP請(qǐng)求的一種解決方案，可以通過(guò)CSS的background屬性來(lái)訪問(wèn)圖片內(nèi)容。這種方案同時(shí)還可以減少圖片總字節(jié)數(shù)。

合并CSS和JS文件

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

采用lazyload

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

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

瀏覽器在加載HTML內(nèi)容時(shí)，是將HTML內(nèi)容從上至下依次解析，解析到link或者script標(biāo)簽就會(huì)加載href或者src對(duì)應(yīng)鏈接內(nèi)容，為了第一時(shí)間展示頁(yè)面給用戶，就需要將CSS提前加載，不要受 JS 加載影響。

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

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

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

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

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

（5）減少重排（Reflow）

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

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

（6）減少 DOM 操作

（7）圖標(biāo)使用IconFont替換

（8）不使用CSS表達(dá)式，會(huì)影響效率

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

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

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

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