前端如何优化seo?seo如何优化网站步骤

　　为什么要做SEO

　　提高网站的权重，增强搜索引擎友好度，以达到提高排名，增加流量，改善(潜在)用户体验，促进销售的作用。

　　前端SEO规范

　　前端是构建网站中很重要的一个环节，前端的工作主要是负责页面的HTML+CSS+JS，优化好这几个方面会为SEO工作打好一个坚实的基础。通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂(提升用户体验)，也能让“蜘蛛”看懂(提高搜索引擎友好度)。

　　前端SEO注意事项：

　　1.网站结构布局优化

　　尽量简单、开门见山，提倡扁平化结构。

　　一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬了。并且根据相关数据调查：如果访客经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：

　　控制首页链接数量：

　　网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。

　　因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

　　扁平化的目录层次：

　　尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。比如：“植物”–> “水果” --> “苹果”、“桔子”、“香蕉”，通过3级就能找到香蕉了。

　　导航优化：

　　导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，img标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。

　　其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作;对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

　　网站的结构布局清晰易读：

　　页面头部：logo及主导航，以及用户的信息。

　　页面主体：左边正文，包括面包屑导航及正文;右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。

　　页面底部：版权信息和友情链接。

　　特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。

　　利用布局，把重要内容HTML代码放在最前

　　搜索引擎抓取HTML内容是从上到下，利用这一特点，可以让主要代码优先读取，广告等不重要代码放在下边。例如，在左栏和右栏的代码不变的情况下，只需改一下样式，利用float:left;和float:right;就可以随意让两栏在展现上位置互换，这样就可以保证重要代码在最前，让爬虫最先抓取。同样也适用于多栏的情况。

　　控制页面文件的大小，减少http请求，提高网站的加载速度

　　一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。

　　2.网页代码优化

　　突出重要内容—合理的设计title(网页标题)、description(网页描述)和keywords(关键字)

　　标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的

　　标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。

　　网页描述：需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。

　　语义化书写HTML代码，符合W3C标准

　　尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，nav标签是用来设置页面主导航，列表形式的代码使用ul(无序列表)或ol(有序列表)，重要的文字使用strong(字体加粗)等。

　　超标签设置链接

　　页内链接，要加上“title”属性加以说明，让访客和“蜘蛛”了解链接的用途。

　　外部链接，链接到其它网站时，则需要加上“el=‘nofollow’”属性，告诉“蜘蛛”不要爬，因为一旦“蜘蛛”爬了外站链接之后，就不会再回来了。

　　正文标题使用 h1标签

　　h1标签自带权重，“蜘蛛” 会认为它最重要，若不喜欢h1的默认样式可以通过CSS设置。尽量做到正文标题用h1标签，副标题用h2标签, 而其它地方不应该随便乱用 h 标题标签。

　　br换行标签应该只用于文本换行，而不使用在占位上。

　　img标签应该使用"alt"属性进行说明

　　当网络速度很慢，或者图片地址失效，图片无法正常显示时时，alt可以让用户知道当前位置图片的作用。同时应当为图片设置恰当的宽高，提高页面加载速度。或者使用占位图进行懒加载操作。

　　表格应该使用表格标题标签

　　caption标签能定义表格标题，但它必须紧跟在 table标签之后进行使用，一个表格只能定义一个标题。

　　加粗，强调标签 : 需要强调时使用。加粗标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，强调标签强调效果仅次于加粗标签。

　　文本缩进不要使用特殊符号 应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。

　　尽量少使用iframe框架，因为“蜘蛛”一般不会读取里面的内容。

　　重要内容不使用JS进行输出，因为蜘蛛不会读取js的内容，所以重要内容必须放在HTML中。

　　谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。

　　s代码如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后。

　　不断精简代码，降低相同代码的重复次数，删除累赘代码。

　　前段网站性能优化

　　减少 http请求次数

　　在浏览器与服务器进行通信时，主要是通过HTTP。浏览器需要与服务器进行三次握手，每次握手需要花费大量的时间。而且不同的浏览器对资源文件的并发请求数量存在限制(不同浏览器允许的并发数不同)。一旦http的请求次数到达限制，资源的请求就存在等待状态，这是十分致命的影响，会导致网页的很长的时间内无法正常展示。因此减少http的请求数量可以很大程度上对网站性能进行优化。

　　CSS sprite (使用精灵图)

　　将多张图片合并成一张，国内俗称精灵图或者雪碧图。这是一种减少http请求的解决方案。可以通过CSS的background属性来展现图片不同区域不同的内容。这种方式同时还能减少图片总字节数。

　　合并CSS和JS文件

　　现在前端有很多打包工具，例如：gulp，grunt，webpack等。可以通过这些工具在发布前将多个CSS或者多个JS合并成一个文件，也能减少HTTP请求。

　　采用 layzload(懒加载)

　　俗称懒加载，可以控制网页上非初始展示的内容部分在一开始无需加载，不发送请求，等到用户真正操作，真正需要的时候立即加载出内容，这样就控制了网页资源一次性请求的数量。

　　控制资源文件加载优先级

　　浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link 或者script 标签就会加载href或者src对应链接内容。为了第一时间将页面展现给用户，就需要将CSS提前加载，不要受 JS加载的影响。

　　尽量将 CSS，JS分离出HTML，使用外链进行加载(结构，表现，行为层的分离)，保证网页代码的整洁，也利于维护。

　　利用浏览器缓存

　　浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器进行重新请求，直接在本地读取调用。

　　减少重排(Reflow)

　　原理：重排是DOM的变化影响到了元素的几何属性(宽和高)，浏览器会重新计算元素的几何属性，会导致渲染树中受到影响的部分失效，浏览器会验证DOM树上所有其它节点的 visibility属性，这也是Reflow低效的原因。如果Reflow过于频繁，CPU的使用率就会急剧上升。

　　减少Reflow的重要操作，就是在通过JS操作DOM样式时，尽量采用增减class类名的方式，而不是直接通过style操作样式。

　　减少DOM操作

　　图片图标使用iconfont替换

　　不使用CSS表达式，会影响效率

　　使用CDN网络缓存，加快用户访问速度，减轻服务器压力

　　启用GZIP压缩，加快浏览速度，搜索引擎的蜘蛛抓取信息量也会增大

　　伪静态设置

　　如果是动态网页，可以开启伪静态功能，让蜘蛛误以为这是一个静态网页。因为蜘蛛对静态网页的爬取力度更大(合胃口)，在url中设置关键字效果更佳;

　　正确认识SEO，是为了规范某些特定操作，提高网站的加载效率，提升用户的访问体验等。但是设计、编写、构建网站时，还是应该以实际内容为准，不能过分"SEO"。