前端开发工程师不只须要要跟视觉设计师、交互式设计师配合，完美还原设计图稿，编写兼容各大浏览器、加载速度快、用户体验好的页面。如今还须要跟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次，过深不利于搜索引擎的抓取。