有人說(shuō)，前端開發(fā)工程師不用懂SEO優(yōu)化，SEO優(yōu)化人員也不必學(xué)會(huì)寫代碼。其實(shí)這個(gè)觀點(diǎn)是不科學(xué)的，一個(gè)好的前端開發(fā)工程師是有必要懂一些SEO基礎(chǔ)知識(shí)的，而一個(gè)合格的SEOer也是有必要懂一些程序代碼和命令的。下面本文就來(lái)簡(jiǎn)單介紹下，作為一個(gè)前端開發(fā)人員有必要了解的一些SEO基本知識(shí)。
一些成熟的平臺(tái)，在開發(fā)初期并沒有考慮優(yōu)化問(wèn)題，所以做出來(lái)的頁(yè)面，就算是效果很炫，功能很強(qiáng)，但是對(duì)搜索引擎非常的不友善。任何一個(gè)成熟的網(wǎng)站，后期頁(yè)面都是動(dòng)輒幾百萬(wàn)的，到這個(gè)時(shí)候再來(lái)調(diào)整結(jié)構(gòu)，既費(fèi)時(shí)又費(fèi)力，怕的還是會(huì)影響到排名和收錄。
所以說(shuō)與其在后期碰到問(wèn)題再來(lái)調(diào)整，還不如把問(wèn)題解決在源頭。我本人也是從事前端開發(fā)工作的，下面把我工作過(guò)程中，積累的幾個(gè)開發(fā)過(guò)程中就需要做好的SEO優(yōu)化技巧，分享給大家。
1、網(wǎng)站結(jié)構(gòu)呈扁平狀樹型，目錄結(jié)構(gòu)不宜過(guò)深，每個(gè)頁(yè)面離首頁(yè)多點(diǎn)擊不超過(guò)3次，過(guò)深不利于搜索引擎的抓取。
2、簡(jiǎn)化代碼結(jié)構(gòu)，更利于搜索引擎分析抓取有用內(nèi)容：頁(yè)面盡量采用DIV+CSS，當(dāng)然，表格展現(xiàn)模式用table還是比div方便很多的；所有js、css采用外聯(lián)方式，圖片采用css精靈，減少請(qǐng)求次數(shù)?？聪孪旅嫱瑯拥膬?nèi)容，用div和talbe布局的代碼比較，顯而易見用div簡(jiǎn)便的多。
3、重要內(nèi)容優(yōu)先加載（先進(jìn)個(gè)鏈接好是網(wǎng)站主關(guān)鍵詞，不刻意要求），可以用css來(lái)處理，索引一篇文章的長(zhǎng)度也是有限制的，一定要把重要的內(nèi)容，優(yōu)先展現(xiàn)給蜘蛛，這方面你可以通過(guò)查看一些比較大的網(wǎng)頁(yè)快照來(lái)求證。
4、每個(gè)頁(yè)面只能出現(xiàn)一次H1標(biāo)簽，H2標(biāo)簽可以多次：H1權(quán)重很高，普遍認(rèn)為僅次于title，一般資訊詳情頁(yè)的標(biāo)題、商品詳情頁(yè)的標(biāo)題，都放在H1里。
5、圖片一定要添加alt屬性，title屬性可選：蜘蛛不認(rèn)識(shí)圖片上的內(nèi)容，只能通過(guò)alt屬性來(lái)判斷，如果是商品列表頁(yè)，所有商品都加了alt和title的話，容易造成堆砌關(guān)鍵詞，所以我一般是只加alt屬性。
6、圖片大小聲明：如果圖片大小不做定義的話，頁(yè)面需要重新渲染，就會(huì)影響到速度。
7、鏈接可根據(jù)實(shí)際需求添加title屬性以及nofllow值；非特殊性鏈接，鏈接地址一定要寫入herf屬性，有些前端開發(fā)人員為了省事，直接用div加個(gè)click事件當(dāng)鏈接，在視覺上和使用上確實(shí)是實(shí)現(xiàn)了鏈接效果，但是做過(guò)SEO優(yōu)化的人員都知道，蜘蛛目前對(duì)于js的支持很差，基本無(wú)法讀取里面的鏈接地址。所以說(shuō)用click事件是絕對(duì)不允許的，特別是一些重要的導(dǎo)航鏈接。
8、頁(yè)面內(nèi)容盡量不要做成flash、圖片、視頻，這些東西蜘蛛是抓不到的，就算是必須的，也要生成相應(yīng)的靜態(tài)頁(yè)面。有很多企業(yè)站看著很炫，全站flash，老板看著是爽了，做SEO優(yōu)化的人員就要抓狂了，全站沒一個(gè)鏈接。
9、除首頁(yè)外別的頁(yè)面好要加上面包屑型導(dǎo)航，導(dǎo)航結(jié)構(gòu)一定要清晰。
10、做好404頁(yè)面，一般會(huì)加首頁(yè)鏈接及錯(cuò)誤提示，并測(cè)試其返回狀態(tài)碼為404：1、用戶體驗(yàn)友好，可以留住用戶，不至于直接關(guān)閉頁(yè)面；2、蜘蛛友好，可以返回抓取其他頁(yè)面。
總結(jié)
前端開發(fā)工程師不僅需要要跟視覺設(shè)計(jì)師、交互式設(shè)計(jì)師配合，完美還原設(shè)計(jì)圖稿，編寫兼容各大瀏覽器、加載速度快、用戶體驗(yàn)好的頁(yè)面?，F(xiàn)在還需要跟SEO人員配合，調(diào)整頁(yè)面的代碼結(jié)構(gòu)和標(biāo)簽。
