做网站优化不只是单把一个方面做极致就好了，而是每个环节都需要做好，这样才能更好的把网站做好。所以我们做网站优化就要从网站建设时就开始，如果前端的优化，后期站内的优化，再站外的优化，等各各环节，逐一做好。这样我们的网站排名才能更好，更加稳定。今北京SEO公司在这里主要来讲讲网站优化从网站建设前端开始。
网站优化
前端开发如何做好SEO优化的工作
一、简化代码结构，更利于搜索引擎分析抓取有用内容：页面尽量采用DIV+CSS，当然，表格展现模式用table还是比div方便很多的；所有js、css采用外联方式，图片采用css精灵，减少请求次数。看下下面同样的内容，用div和talbe布局的代码比较，显而易见用div简便的多。
二、重要内容优先加载（第一个链接好是网站主关键词，不刻意要求），可以用css来处理，索引一篇文章的长度也是有限制的，一定要把重要的内容，优先展现给蜘蛛，这方面你可以通过查看一些比较大的网页快照来求证。
三、每个页面只能出现一次H1标签，H2标签可以多次：H1权重很高，普遍认为仅次于title，一般资讯详情页的标题、商品详情页的标题，都放在H1里。
四、图片一定要添加alt属性，title属性可选：蜘蛛不认识图片上的内容，只能通过alt属性来判断，如果是商品列表页，所有商品都加了alt和title的话，容易造成堆砌关键词，所以我一般是只加alt属性。
五、图片大小声明：如果图片大小不做定义的话，页面需要重新渲染，就会影响到速度。
六、链接可根据实际需求添加title属性以及nofllow值；非特殊性链接，链接地址一定要写入herf属性，有些前端开发人员为了省事，直接用div加个click事件当链接，在视觉上和使用上确实是实现了链接效果，但是做过SEO优化的人员都知道，蜘蛛目前对于js的支持很差，基本无法读取里面的链接地址。所以说用click事件是绝对不允许的，特别是一些重要的导航链接。
七、页面内容尽量不要做成flash、图片、视频，这些东西蜘蛛是抓不到的，就算是必须的，也要生成相应的静态页面。有很多企业站看着很炫，全站flash，老板看着是爽了，做SEO优化的人员就要抓狂了，全站没一个链接。
八、除首页外别的页面好要加上面包屑型导航，导航结构一定要清晰。
九、做好404页面，一般会加首页链接及错误提示，并测试其返回状态码为404：1、用户体验友好，可以留住用户，不至于直接关闭页面；2、蜘蛛友好，可以返回抓取其他页面。
十、网站结构呈扁平状树型，目录结构不宜过深，每个页面离首页多点击不超过3次，过深不利于搜索引擎的抓取。
前端SEO技巧
通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂，也能让“蜘蛛”看懂。
一、网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。
一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬，“万一天黑迷路了怎么办”。并且根据相关调查：访客如果经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：
1、 控制首页链接数量
网站首页是权重高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。
2、扁平化的目录层次，尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。扁平化的目录结构，比如：“植物”--> "水果" --> "苹果"、“桔子”、“香蕉”，通过3级就能找到香蕉了。
3、导航优化
导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，<img>标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。
4、 网站的结构布局--不可忽略的细节
页面头部：logo及主导航，以及用户的信息。
页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
页面底部：版权信息和友情链接。
特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。
5、控制页面的大小，减少http请求，提高网站的加载速度。
一个页面好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。
二、网页代码优化
1、<title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容。
2、<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
3、<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
4、<body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，<nav>标签是用来设置页面主导航的等。
5、<a>标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
6、正文标题要用<h1>标签：“蜘蛛” 认为它重要，若不喜欢<h1>的默认样式可以通过CSS设置。尽量做到正文标题用<h1>标签，副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。
7、<br>标签：只用于文本内容的换行，比如:
<p>
第一行文字内容<br/>
第二行文字内容<br/>
第三行文字内容
</p>
8、表格应该使用<caption>表格标题标签
9、<img>应使用 "alt" 属性加以说明
10、<strong>、<em>标签 : 需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签。
<b>、<i>标签: 只是用于显示效果时使用，在SEO中不会起任何效果。
11、文本缩进不要使用特殊符号 应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号?。
12、巧妙利用CSS布局，将重要内容的HTML代码放在前面，前面的内容被认为是重要的，优先让“蜘蛛”读取，进行内容关键词抓取。
13、重要内容不要用JS输出，因为“蜘蛛”不认识
14、尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容
15、谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。
16、 不断精简代码
17、js代码如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后。
前端SEO优化方法及建议
一、启用GZIP压缩网页。
什么是GZIP压缩？GZIP早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。
GZIP压缩网页与什么用？
HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。
大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。
这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来.一般对纯文本内容可压缩到原大小的40%.这样传输就快了，效果就是你点击网址后会很快的显示出来.当然这也会增加服务器的负载。
二、网页（前端）支持浏览器缓存以达到速度优化效果。
浏览器缓存有什么用？浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。
浏览器缓存放在什么地方？
可放到文件，内存中（如session），还有cache（高速缓存），还有 cookie，session，viewstate，这些是我们经常用到的，但可以认为他们是缓存数据。其实cache跟session有相似功能，但 cache可在代码中设置过期时间，依赖项。所谓依赖项（例如：微软的类cachedependcy sqlCacheDependency）当依赖项变动了，系统会通知cache过期，无效。缓存可是有服务器缓存，客户端缓存。
举例如何使用浏览器缓存以优化网页（前端）。
使用浏览器缓存以优化网页（前端）
对于SEO优化人员来讲，不必掌握如何使用浏览器缓存代码，但需要知晓相关原理。
三、利用内容分发网络（CDN）优化网站加载速度。
网站页面（前端）优化方法及建议-内容分发网络（cdn）
内容分发网络（CDN）概念：CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
内容分发网络（CDN）原理：CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。
内容分发网络（CDN）目的：使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
内容分发网络（CDN）的主体是空间商而非网站管理员本身。
四、删除多余代码。
很多时候，一个网站的网页中存在很多多余的代码。如首页用到的js，列表页就用不到，如果全站使用头部调用，就让某些本不需要相关代码的网页也无故添加了许多代码，这些代码的精简，是有利于前端的打开速度的。也就是说：网站中的每一个页面，都无需多余代码。
五、充分利用css控制样式。
网站页面（前端）优化方法及建议-css样式
一个前端代码精简的网站，其css代码与div是分离的，无需在前端对某些代码使用style定义样式，一切以css控制即可。如：某一个网页中即使用了style定义样式，又使用了css定义样式，这样就重复了代码，也会造成网站前端加载速度的慢化。
六、CSS代码的优化与控制。
小明SEO教程所提供的一切网站页面（前端）优化方法及建议，其终目的都是加快网站打开速度，这些方法和建议的落地点在于精简代码，给网页前端进行减肥，css代码优化的点包括但不限于：缩写css代码；排列css代码；同属性提取共用css选择器；分离网页颜色和背景设置样式（较大站点需要注意）；条理化css代码等。
七、前端js代码优化。
与css代码类似，前端js代码优化方法包括但不限于：
避免全局查找：在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些；
定时器：如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval，因为setTimeout每一次都会初始化一个定时器，而setInterval只会在开始的时候初始化一个定时器；
字符串连接：如果要连接多个字符串，应该少使用+=；如果是收集字符串，比如多次对同一个字符串进行+=操作的话，好使用一个缓存，使用JavaScript数组来收集，后使用join方法连接起来；
避免with语句：和函数类似 ，with语句会创建自己的作用域，因此会增加其中执行的代码的作用域链的长度，由于额外的作用域链的查找，在with语句中执行的代码肯定会比外面执行的代码要慢，在能不使用with语句的时候尽量不要使用with语句；
数字转换成字符串：般好用”” + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是高的；
浮点数转换成整型：很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()；如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高；
多个类型声明：在JavaScript中所有变量都可以使用单个var语句来声明，这样就是组合在一起的语句，以减少整个脚本的执行时间，就如上面代码一样，上面代码格式也挺规范，让人一看就明了。
插入迭代器：如var name=values[i]; i++;前面两条语句可以写成var name=values[i++]；
使用DocumentFragment优化多次append；
使用一次innerHTML赋值代替构建dom元素；
通过模板元素clone，替代createElement；
使用firstChild和nextSibling代替childNodes遍历dom元素；
删除DOM节点；
使用事件代理；
重复使用的调用结果，事先保存到局部变量；
有关前端js代码优化的其他说明，可以查阅：http://www.cnblogs.com/liyunhua/p/4529086.html，有细致的说明。
注：SEO优化人员不必要求掌握前端js代码优化的具体代码，这是前端人员的工作。
八、tab表格的使用建议。
tab表格布局网页是较过时的技术，现目前效果更好的是div。对于tab表格的使用建议如下：尽量少使用tab表格，杜绝在嵌套条件下的表格使用。
九、网站图片SEO优化。
网站图片优化是加快整站打开，加载速度的重要一环，对于网站来讲，我们需要使用正确的图片尺寸与格式，并在不损害图片质量的情况下压缩图片。
首先，使用正确的图片格式如jpg格式的图片。
其次，使用合理的图片尺寸。图片尺寸越大，对加载的速度影响越大。有相关统计，图片减少50%，其网站整体页面会减少75%。对于图片尺寸的处理，其基本要求是在满足用户需求的基础上使用相应大小的图片。
再次，使用工具压缩图片。图片变小有利于网站打开速度的提升，使用压缩工具可以让图面所占的空间更小。
十、删除多余的字体和网页注释。
从字体方面分析，如果使用字体过多，势必会造成网站加载速度变慢，从而不利于网站前端的打开速度的提升；
从网页注释分析，网页注释有利于前端开发人员对于网站的维护，但另外一方面，这些注释对搜索引擎是无用的，是多余的“噪声”。
前端开发过程中SEO优化的注意点
html语义化
刚接触web前端开发的时候很奇怪，既然html标签可以通过css进行更改它的内置属性，为什么还有这么多的标签存在
<div>,<h1>,<span>,<strong>....
而现在，随着对前端的不断深入，才逐渐明白它的用处
语义化的html可以让开发者更容易看懂每一块代码的含义及其侧重点，同时，对于SEO优化也有帮助
网络爬虫在搜索的过程中会按着html语义去侧重搜索，
标准的符合W3C规范html能让网络爬虫更好的理解，从而提高网站的SEO优化水平。
在http://www.w3school.com.cn/html篇中，有对每一个标签的语义都做了说明，需要的同学可以注意看下。
ifame
对于前端开发来说，ifame已经是很久之前的技术了，现阶段应该很少有前端开发者使用ifame（当然，在后台框架搭建中还是会使用到）
ifame退出前端舞台的理由我想应该就有一点，web中使用ifame，ifame中的内容网络爬虫是搜索不到的，所以对于ifame页面来说基本不存在SEO优化
建议前端开发中少用，（后台开发对这点到不在意，后台系统对于SEO优化没这需求吧）
js输出
对于网站中一些重要的文字或内容好不要使用js输出生成html展现，因为网络爬虫对web中的js只会视而不见，所以用js输出过多的内容
会让网站的SEO优化水平降低，建议重要的信息不要用js输出（我还是挺喜欢用js去输出html的，被限制住~~~~）
alt属性
alt属性一般应用在<img>标签里，当图片无法正常加载时，alt属性设置的值就会显示出来作为解释文本
对于前端开发人员来说总感觉这个属性有点鸡肋，因为在开发过程中基本看不到这个属性的效果（PS：开发过程中一般情况都不会有加载图片失败的情况）
不过要注意，该加的属性还是要加上去的，网络爬虫是识别不了图片的，不管你的图片怎么炫怎么酷，在网络爬虫眼里终究只是一段code而已，而<img>
标签的alt属性在网络爬虫眼里就是图片的标志
<title>
<meta name="description" content="...">
<meta name="keywords" content="...">
合理的使用这三个对SEO也有很大的帮助，具体使用方法这里就不多说了，有兴趣的可以网上搜下。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
