前端是構(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è)面既能讓瀏覽器用戶(hù)能夠看懂（提升用戶(hù)體驗(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)查：如果訪(fǎng)客經(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ì)性的鏈接，很容易影響用戶(hù)體驗(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í)，用戶(hù)也能看到提示文字。
其次，在每一個(gè)網(wǎng)頁(yè)上應(yīng)該加上面包屑導(dǎo)航，好處：從用戶(hù)體驗(yàn)方面來(lái)說(shuō)，可以讓用戶(hù)了解當(dāng)前所處的位置以及當(dāng)前頁(yè)面在整個(gè)網(wǎng)站中的位置，幫助用戶(hù)很快了解網(wǎng)站組織形式，從而形成更好的位置感，同時(shí)提供了返回各個(gè)頁(yè)面的接口，方便用戶(hù)操作；對(duì)“蜘蛛”而言，能夠清楚的了解網(wǎng)站結(jié)構(gòu)，同時(shí)還增加了大量的內(nèi)部鏈接，方便抓取，降低跳出率。
（4）網(wǎng)站的結(jié)構(gòu)布局---不可忽略的細(xì)節(jié)
頁(yè)面頭部：logo及主導(dǎo)航，以及用戶(hù)的信息。
頁(yè)面主體：左邊正文，包括面包屑導(dǎo)航及正文；右邊放熱門(mén)文章及相關(guān)文章，好處：留住訪(fǎng)客，讓訪(fǎng)客多停留，對(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í)，用戶(hù)體驗(yàn)不好，留不住訪(fǎng)客，并且一旦超時(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ō)明，讓訪(fǎng)客和 “蜘蛛” 知道。而外部鏈接，鏈接到其他網(wǎng)站的，則需要加上 el=nofollow 屬性, 告訴 “蜘蛛” 不要爬，因?yàn)橐坏爸┲搿迸懒送獠挎溄又螅筒粫?huì)再回來(lái)了。
<a href=https://www.# 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屬性的作用，他可以讓用戶(hù)在圖片沒(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)訪(fǎng)問(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)求，等到用戶(hù)操作真正需要的時(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è)面給用戶(hù)，就需要將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ò)緩存，加快用戶(hù)訪(fǎng)問(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)鍵詞效果更好。