搜索引擎優(yōu)化（SEO）你或許知道，但是前端代碼優(yōu)化也同等重要，你知道嗎？通過網(wǎng)站的使用正確恰當(dāng)?shù)捻撁娲a，能夠?qū)W(wǎng)站整體的代碼框架形成規(guī)范，吸引“網(wǎng)絡(luò)爬蟲”前來爬取，提高用戶體驗(yàn)度和網(wǎng)站對用戶的粘性。深入淺出的前端代碼優(yōu)化，能讓你的網(wǎng)站更利于SEO優(yōu)化。

前端代碼基礎(chǔ)知識

<title>

一篇文章的標(biāo)題就是門面，就像敲門磚一樣，吸引人的標(biāo)題才有讓人讀下去的欲望。標(biāo)題強(qiáng)調(diào)網(wǎng)站重心，關(guān)鍵詞放在前面，切記不能進(jìn)行關(guān)鍵詞堆砌，每個頁面的title中不要 “新瓶裝舊酒”，設(shè)置符合頁面內(nèi)容的關(guān)鍵詞即可；

<meta keywords>

雖說文章的關(guān)鍵詞能夠突出文章的重要信息點(diǎn)，但是也需謹(jǐn)記不能堆砌關(guān)鍵詞，因?yàn)樵?9年谷歌便已提出不再使用屬性關(guān)鍵詞標(biāo)簽了，其它主流搜索引擎也緊跟其后，所以我們建議關(guān)鍵詞埋伏并不可取；

<meta description>

描述過長并不能給你帶來過多益處，一般需是頁面內(nèi)容的高度概括，其中穿插網(wǎng)頁關(guān)鍵詞，切勿過分重復(fù)羅列，否則易被網(wǎng)絡(luò)爬蟲判為作弊，被關(guān)進(jìn)“小黑屋在所難免”了；

Body的標(biāo)簽

盡量讓代碼語義化，標(biāo)簽恰當(dāng)使用，讓其能夠各施其職，這樣更方便閱讀源碼和讓“搜索蜘蛛”一目了然；而且不同的代碼標(biāo)簽有不同的作用，讓他們在各自的位置盡力反光發(fā)熱，才能發(fā)揮最大效用；

鏈接a標(biāo)簽

在使用鏈接a標(biāo)簽時，使用title屬性對鏈接標(biāo)簽進(jìn)行說明，更方便爬蟲和訪客清晰該鏈接的內(nèi)容；而為了告知爬蟲蜘蛛鏈接是否可爬取，設(shè)置nofollow屬性更有條理；

長度

關(guān)于標(biāo)題，最好規(guī)范使用h1~h6，一個網(wǎng)頁設(shè)置一個h1，更符合網(wǎng)站建設(shè)規(guī)范，吸引爬蟲爬??；

使用<br>

這只是簡單用來對文本內(nèi)容進(jìn)行換行的作用，當(dāng)網(wǎng)站建設(shè)時，要想實(shí)現(xiàn)網(wǎng)站的換行需求，它便能幫助你；

屬性標(biāo)簽

在使用到img標(biāo)簽時，設(shè)置alt屬性，因?yàn)檫@大大影響著圖片的SEO效果，設(shè)置它能有效幫助“爬蟲”識別圖片的內(nèi)容；及時網(wǎng)站在加載緩慢的情況下，圖片的alt標(biāo)簽?zāi)軌蛱崾灸銏D片的大概內(nèi)容；

小貼士

• 巧妙使用css布局，對于重要的代碼，先放在前面，因?yàn)榕佬小爸┲搿睍?yōu)先爬取，它爬取代碼是由上而下爬取代碼的；
• 很重要的一點(diǎn)，重要的內(nèi)容千萬不用js輸出，而且減少使用iframe框架，因?yàn)椤爸┲搿睂@并不買賬；
• 倘若你的js代碼是涉及有DOM操作的，小編建議最好放在</body>標(biāo)簽之前，html代碼之后；
• 對于代碼中你不想顯示在瀏覽器頁面的內(nèi)容，適當(dāng)使用display:none；因?yàn)闉g覽器會對這行代碼的隱藏內(nèi)容視而不見，不會顯示。
• 最好能優(yōu)先使用<strong><em>標(biāo)簽對文本內(nèi)容進(jìn)行加粗處理，因?yàn)樗鼈儗EO能夠產(chǎn)生良好的影響，可以自行調(diào)整樣式。

簡述

在網(wǎng)站建設(shè)過程中，要考慮到前端代碼的優(yōu)化，不斷精簡代碼，倘若一個標(biāo)簽可以實(shí)現(xiàn)功能，那就不要使用兩個，建設(shè)符合網(wǎng)站開發(fā)規(guī)范的程序。巧妙使用各個標(biāo)簽代碼，不要亂用標(biāo)簽，是每個標(biāo)簽都語義化，考慮爬蟲是否收錄，是否適合網(wǎng)站的后續(xù)開發(fā)。