前端開發工程師不只須要要跟視覺設計師、交互式設計師配合，完美還原設計圖稿，編寫兼容各大瀏覽器、加載速度快、用戶體驗好的頁面。如今還須要跟SEO人員配合，調整頁面的代碼結構和標籤。javascript
一些成熟的平臺，在開發初期並無考慮優化問題，因此作出來的頁面，就算是效果很炫，功能很強，可是對搜索引擎很是的不友善。任何一個成熟的網站，後期頁面都是動輒幾百萬的，到這個時候再來調整結構，既費時又費力，最怕的仍是會影響到排名和收錄。css
因此說與其在後期碰到問題再來調整，還不如把問題解決在源頭。我本人也是從事前端開發工做的，下面把我工做過程當中，積累的幾個開發過程當中就須要作好的SEO優化技巧，分享給你們。html
一、簡化代碼結構，更利於搜索引擎分析抓取有用內容：頁面儘可能採用DIV+CSS，固然，表格展示模式用table仍是比div方便不少的；全部js、css採用外聯方式，圖片採用css精靈，減小請求次數。看下下面一樣的內容，用div和talbe佈局的代碼比較，顯而易見用div簡便的多。前端
二、重要內容優先加載（第一個連接最好是網站主關鍵詞，不刻意要求），能夠用css來處理，索引一篇文章的長度也是有限制的，必定要把最重要的內容，優先展示給蜘蛛，這方面你能夠經過查看一些比較大的網頁快照來求證。java
三、每一個頁面只能出現一次H1標籤，H2標籤能夠屢次：H1權重很高，廣泛認爲僅次於title，通常資訊詳情頁的標題、商品詳情頁的標題，都放在H1裏。web
四、圖片必定要添加alt屬性，title屬性可選：蜘蛛不認識圖片上的內容，只能經過alt屬性來判斷，若是是商品列表頁，全部商品都加了alt和title的話，容易形成堆砌關鍵詞，因此我通常是隻加alt屬性。瀏覽器
五、圖片大小聲明：若是圖片大小不作定義的話，頁面須要從新渲染，就會影響到速度。佈局
六、連接可根據實際需求添加title屬性以及nofllow值；非特殊性連接，連接地址必定要寫入herf屬性，有些前端開發人員爲了省事，直接用div加個click事件當連接，在視覺上和使用上確實是實現了連接效果，可是作過SEO優化的人員都知道，蜘蛛目前對於js的支持不好，基本沒法讀取裏面的連接地址。因此說用click事件是絕對不容許的，特別是一些重要的導航連接。測試
七、頁面內容儘可能不要作成flash、圖片、視頻，這些東西蜘蛛是抓不到的，就算是必須的，也要生成相應的靜態頁面。有不少企業站看着很炫，全站flash，老闆看着是爽了，作SEO優化的人員就要抓狂了，全站沒一個連接。優化
八、除首頁外別的頁面最好要加上面包屑型導航，導航結構必定要清晰。
九、作好404頁面，通常會加首頁連接及錯誤提示，並測試其返回狀態碼爲404：一、用戶體驗友好，能夠留住用戶，不至於直接關閉頁面；二、蜘蛛友好，能夠返回抓取其餘頁面。
十、網站結構呈扁平狀樹型，目錄結構不宜過深，每一個頁面離首頁最多點擊不超過3次，過深不利於搜索引擎的抓取。