您的當前位置： 前端代碼SEO規范，別讓網(wǎng)站優(yōu)化輸在起跑線(xiàn)上
發(fā)布時(shí)間：2026-05-05 10:05:04 瀏覽：6 次
前端是前端起跑構??建(jian)網(wǎng)站中很重要的一個(gè)環(huán)節，前端的代碼工??作主要是負責頁(yè)面的HTML+CSS+JS，優(yōu)化好這ヽ(′▽?zhuān)?ノ幾個(gè)方面會(huì )為SEO工作打好一個(gè)堅實(shí)的范別基礎。通過(guò)網(wǎng)站的讓網(wǎng)結構布局設計和網(wǎng)頁(yè)代碼優(yōu)化，使前端頁(yè)面既能讓瀏覽器用戶(hù)能夠看懂（提升用戶(hù)體驗），站優(yōu)也能讓“蜘蛛”看懂（提高搜索引擎友好度）?；斍岸薙EO注意事(′?ω?`)項：1、線(xiàn)上網(wǎng)站結構布局優(yōu)化：盡量簡(jiǎn)單、前端起跑開(kāi)門(mén)見(jiàn)ヾ(′▽?zhuān)??山，代碼提倡扁平化結構一般而言，范別建立的讓網(wǎng)網(wǎng)站結構層次越少，越容易被“蜘蛛”抓取，站優(yōu)也就容易被收錄?；斠话阒行⌒途W(wǎng)站目錄結構超過(guò)三級，線(xiàn)上“蜘蛛”便不愿意往下爬了。前端??起跑并且根據相關(guān)數據調查：如果訪(fǎng)客經(jīng)過(guò)跳轉3次還沒(méi)找到需要的信息，很可能離開(kāi)。因此??，三層目錄結(jie)構也是體驗的需要。為此我們需要做(zuo)到：（1）控制首頁(yè)鏈接數量(liang)網(wǎng)站首頁(yè)是權重最高的地方，如果首頁(yè)鏈接太少，沒(méi)有“橋”，“蜘蛛”不能繼續往下爬到內頁(yè)，直接影響網(wǎng)站收錄數量。但是首頁(yè)鏈接也不能(neng)太多，一旦太多，沒(méi)有實(shí)質(zhì)性的鏈接，很容易影響用戶(hù)體驗，也會(huì )降低網(wǎng)站首頁(yè)的權重，收錄效果(guo)也不好。（2）扁平化的目錄層次盡量讓“蜘蛛”只要跳轉3次，就能到達網(wǎng)站內的任何一個(gè)內頁(yè)。（3）導航優(yōu)化導航應該盡量采用文字方式，也可以(yi)搭配圖片導航，但是圖片代碼一定要進(jìn)行優(yōu)化，標簽必須添加“alt”和“title”屬性，告訴搜索引擎導航的定位，做??到即使圖片未能正常顯示時(shí)，用戶(hù)也能看到提示文字。其次，在每一個(gè)網(wǎng)頁(yè)上應該加上面包屑導航，好處：從用戶(hù)體驗方面來(lái)說(shuō)，可以讓用戶(hù)了解當前所處的位置以及當前頁(yè)面在整個(gè)網(wǎng)站中的位置，幫助用戶(hù)很快了解網(wǎng)站組織形式，從而形成更好的位置感，同時(shí)提供了返回各ヾ(′ω｀)?個(gè)頁(yè)面的接口，方便用(′▽?zhuān)?)戶(hù)操作；對“蜘蛛”而言，?能夠清楚的了解網(wǎng)站結構，同時(shí)還增??加了(le)大量的內部鏈接，方便抓取，降低跳出率。（4）網(wǎng)站的結構布局---不可忽略的細節頁(yè)面頭部：logo及主導??航，以及用??戶(hù)的信息。頁(yè)面主體：左邊正文，包括面包屑導航及正文；右邊放熱門(mén)文章及相關(guān)文章，好處：留住訪(fǎng)客(′；ω；`)，讓訪(fǎng)客多停留，對“蜘蛛”而言，這些文章屬于相關(guān)鏈接，增強了頁(yè)面(mian)相關(guān) 性，也能增強頁(yè)面的權重。頁(yè)面底部：版權信息和友情鏈接。特別注意：分頁(yè)導航寫(xiě)法，推薦寫(xiě)法：“首頁(yè) 1 2 3 4 5 6 7 8 9 下拉框”，這樣“蜘蛛”能夠根據相應頁(yè)碼直接跳轉，下拉框直接選擇頁(yè)面跳轉。而下面的寫(xiě)法是不推薦的，“首頁(yè) 下一頁(yè) 尾頁(yè)”，特別是當分??頁(yè)數量特別多時(shí)，“蜘蛛??”需要經(jīng)過(guò)很多次往下爬，才能抓取，會(huì )ヽ(′ー｀)ノ很(hen)累、會(huì )容易放棄。（5）利用布局，把重要內容(rong)HTML代碼放在最前搜索引擎抓取HTM(′▽?zhuān)?L內容是從上到下，利用這一特點(diǎn)，可以讓主要代碼優(yōu)先讀取，廣告等不重要(′?｀)代碼放在下邊。例如，在左欄和右欄的代碼不變的情況下，只需改一下樣式，利用??float:left;和float:right;就可以隨意讓兩欄在展現上位置互換，這樣就可以保證重要代碼在最前，讓爬 蟲(chóng)最先抓取。同樣也適用于多欄的情況。（6）控制頁(yè)面的大小，減少http請求，提高網(wǎng)站的加載速度。一個(gè)頁(yè)面最好不要超過(guò)100k，太大，頁(yè)面加載速度慢。當??速度很慢時(shí)，用戶(hù)體驗不好，留不住訪(fǎng)客，并且一旦超時(shí)，“蜘蛛”??也會(huì )離(li)開(kāi)。2、網(wǎng)頁(yè)代碼優(yōu)化（1）突出重要內容---合理的設計title、descriptio(?_?;)n和keywords***title***標題：只強調重點(diǎn)即可，??盡量把重要的關(guān)鍵詞放在前面，關(guān)鍵詞不(bu)要重復出現，盡量做到每個(gè)頁(yè)面的title標題中不(′?｀*)要設置相同的內容。***meta keywords***標簽：關(guān)鍵詞，列舉出幾個(gè)頁(yè)面的重(zhong)要關(guān)鍵字即可，切記過(guò)分堆砌。***meta description***標簽：網(wǎng)頁(yè)描述，需要高度概括網(wǎng)頁(yè)內容，切記不能太長(cháng)，過(guò)分堆砌關(guān)鍵詞，每個(gè)頁(yè)面也要有所不同。（2）語(yǔ)義化書(shū)寫(xiě)HTML代碼，符合W3C標準盡??量讓代碼語(yǔ)義化，在適當的位置使用適當的標簽，用正確的標簽做正確的事。讓閱讀源碼者和“蜘蛛”都一目了然。比如：h1-h6 是用于標題類(lèi)的，***nav***標簽是用來(lái)設置頁(yè)面主導航，列表形式的代碼使用u(′▽?zhuān)?l或ol，重要的文字使用ヾ(′▽?zhuān)??strong等。（3）***a***標簽：頁(yè)內鏈接，要加 ***title??***屬性加以說(shuō)明，讓訪(fǎng)客和 “蜘蛛” 知道。而外部鏈接，鏈接到其他網(wǎng)站的，則需要加上 el='nofollow' 屬性, 告訴 “蜘蛛” 不要爬，因為一旦“蜘蛛”爬了外部鏈接之后，就不會(huì )再回來(lái)了。<a href="https://www.#" title='360安全中心' class='logo'></a>（4）正文標題要用***h1***標簽：h1標簽自帶權重“蜘蛛(◎_◎;)” 認為它最重要，一個(gè)頁(yè)面有且最多只??能有一(′?_?`)個(gè)H1標簽，放在該頁(yè)面最重要的標題上面，如首頁(yè)的logo上可以加H1標簽。副標題用***h2***標簽, 而其它(╬?益?)地方不應該隨便亂用 h 標題標簽。（5）***img***應使用 "alt" 屬性加以說(shuō)明 <img?? src='ca??t.jpg' width='300' height='200' alt='貓??' />當網(wǎng)絡(luò )速度很慢，或者圖片地址失效的時(shí)候，就可以體現出alt屬性的作用，他可以讓用戶(hù)在(′?_?`)圖片沒(méi)有顯示的時(shí)候(hou)知道這個(gè)圖片的作用。同時(shí)為圖片設置高度和寬度，可提高頁(yè)面的加載速度。（6）表格應該使用***caption***表格標題標簽caption 元素定義表格標題。 caption 標簽必須緊隨 table 標簽之后，您只能對每個(gè)表格定義一 <table border='1'> <caption>表格標題</caption> <tbody> &n(╯°□°）╯bsp; <tr> <td>apple</t(???)d> <td>100</td> ??; (′ω｀); </tr>&(????)nbsp; &n??bsp; <tr> &nbs??p; &nbs??p; <td>banana</td> <td>20ヾ(′?｀)?0</td> &nb(′?ω?`)sp; </tr> </tbody> </table>（7）***br***標簽：只用于文本內容的換行，比如：(′?_?`) <p> 第一行文字內容<br/> 第二行文字內容<br/> 第三行文字內容 </p>（8）strong、***em***標簽 ：需要強調時(shí)使用。***strong***標??簽在搜索引擎中能夠得到高度的重視，它能突出關(guān)鍵詞，表現重要的內容，??***em***標簽強調效果僅次于***strong***標簽；b、***i***標簽：只是(′?ω?`)用于顯示效果時(shí)使用，在SEO中不會(huì )??起任何效果。（9）文本縮進(jìn)不要使用特殊符號 應(/ω＼)當使用CSS進(jìn)行設置。版權符號不要使用(yong)特殊符號 © 可以直接使用輸入法打出版權符號©。（10）重要內容不要用JS輸出，因為“蜘蛛”不會(huì )讀取JS里的內容，所以重要內容必須放在HTML里。（11）盡量少使用iframe框架,因為“蜘蛛”一般不會(huì )讀取其中的內容。（12）謹慎使用 display：none ：對于不想顯示的文字內容，應當設置z-index或縮進(jìn)設置成足夠大的負數偏離出瀏覽器之外。因為搜索引(???)擎??會(huì )過(guò)濾掉display:none其中的內容。3、前端網(wǎng)站性能優(yōu)化（1）減少http請求數量在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過(guò) HTTP 進(jìn)行通信。瀏覽器與服務(wù)器需要經(jīng)過(guò)三次握手，每次(//ω//)握手需要花費大量時(shí)間。而且不同ヾ(′ω｀)?瀏覽器對資源文件并發(fā)請求數量有限（不同瀏覽器允許并發(fā)數），一旦 HTTP 請求數量達到一定數量，資源請求就存在等待狀態(tài)，這是很致命的，因此減少 HTTP 的請求數量可以很大程度上對網(wǎng)站性能進(jìn)行優(yōu)化。CSS Sprites國內俗稱(chēng)CSS精靈，這??是將多張圖片合并成一張圖片達到減少┐(′ー｀)┌HTTP請求的一種(zhong)解決方案??，可以通過(guò)C??SS的background屬性來(lái)訪(fǎng)問(wèn)圖片內容。這種方案同時(shí)還可以減少圖片總字節數。合并CSS和JS文件現在前端有很多(duo)工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請求數量，可以通過(guò)這些工具再發(fā)布前將多個(gè)CSS或者多個(gè)JS合并成一個(gè)文件。采用lazyload俗稱(chēng)懶加載，可以控制網(wǎng)頁(yè)上的內容在一開(kāi)始無(wú)需加載，不需要發(fā)請求，等到用戶(hù)操作真正需要的時(shí)候立即加載出內容。這樣就控制了網(wǎng)頁(yè)資源一次性請求數量。（2）控制資源文件加載優(yōu)先級瀏覽器在加載HTML內容時(shí)，是將HTML內容從上至下依次解析，解析到link或者script標簽就會(huì )加載href或者src對應鏈接內容，為了第一時(shí)間展示(′?_?`)頁(yè)面給用戶(hù)，就需要將C??SS提前加載，不要受 JS 加載影響。一般情況下都是CSS在頭部，JS在底部。（3）盡量外鏈CSS和JS（結構、表現和行為的分離），保證網(wǎng)頁(yè)代碼的整潔，也有利于日后維護<link rel='sty??lesheet' href="asstes/css/style.css" /><??;script src="assets/js/main.js"></script>（4??）利用瀏覽器緩存瀏覽器緩存是將網(wǎng)絡(luò )資源ヽ(′▽?zhuān)?ノ存儲在本地，等待下次請求該資源時(shí)，如果資源已經(jīng)存在就不需要到服務(wù)器重新請求該資源，直接在本地讀取該資源。（5）減少重排（Reflow）基本原理：重排是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會(huì )重新計算元素的幾何屬性，會(huì )使渲染樹(shù)中受到影響的部分失效，瀏覽器會(huì )驗證 DOM 樹(shù)上的所有其它結點(diǎn)的visibility屬性，這也是Reflow低效的原因。如果Reflow的過(guò)于頻繁，CPU使用率就會(huì )急劇上升。減??少Reflow，如果??需??要在DOM操作時(shí)添加樣式，盡量使用 增加clヽ(′▽?zhuān)?ノass屬性，而不是通過(guò)style操作樣式??。（6）減少 DOM 操作（7）圖標使用IconFont替換（8(⊙_⊙)）不使用CSS表達式，會(huì )影響效率(′?ω?`)（9）使用CDN網(wǎng)絡(luò )緩存，加快用戶(hù)訪(fǎng)問(wèn)速度，減輕服務(wù)器壓力（(′?_?`)10）啟用G??ZIP壓縮，瀏覽??速度變快，搜索引擎的蜘蛛抓取信息量也會(huì )增大（11）??偽靜態(tài)設置如果是動(dòng)態(tài)網(wǎng)頁(yè)，可以開(kāi)啟偽靜態(tài)功能，讓蜘蛛“誤以為”這是靜態(tài)網(wǎng)頁(yè)，因為靜態(tài)網(wǎng)頁(yè)比較合蜘蛛的胃口，如果url中(′ω｀)帶有關(guān)鍵詞效果更好(hao)。
