前端SEO搜索引擎优化

前端SEO优化喽
一、搜索引擎优化
SEO（Search Engine Optimization）:汉译为搜索引擎优化。是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，如同希望百度等搜索引擎能收录我们精心制作的网站，并且在别人访问时网站能靠前。

二、关于前端的SEO
一些成熟的平台，在开发初期并没有考虑优化问题，所以做出来的页面，就算是效果很炫，功能很强，但是对搜索引擎非常的不友善。任何一个成熟的网站，后期页面都是动辄几百万的，到这个时候再来调整结构，既费时又费力，最怕的还是会影响到排名和收录。

三、前端做好SEO的一些方案列举
一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬，“万一天黑迷路了怎么办”。并且根据相关调查：访客如果经过跳转3次还没找到需要的信息，很可能离开。所有js、css采用外联方式，图片采用css精灵，减少请求次数，合理的title、description和keywords。

1、 优化网站分级结构。在每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路，

2、语义化书写HTML代码，符合W3C标准。不要什么都用div，尽量合理的使用ul、ol、table等使用符合语义化的标签。

3、meta描述。可定义关键词、网站描述等：

< meta name=“keywords” content=“关键词1，关键词2” />

< meta name=“description” content=“描述1，描述2” />

4、图片添加alt属性。这个比较重要，有很多适用场景：

（1）当图片未成功显示时候，仍可以显示文本，用户也可以大致了解图片主题；

（2）当图片成功显示的时候，鼠标以上图片，可显示图片描述；

（3）可解决网速慢、src引用错误、浏览器禁用图像、用户使用屏幕阅读器等情况。

5、图片大小声明。如果图片大小不做定义的话，页面需要重新渲染，就会影响到加载速度。

6、 集中网站权重。由于蜘蛛分配到每个页面的权重是一定的，这些权重也将平均分配到每个a链接上，可以适当的给链接标签a添加 rel=“nofollow” 属性(例如：当我们项目的某一个导航不需要蜘蛛跟踪链接)：

不需要跟踪的导航

作用：（1）引导爬虫抓取一些有用的信息页面，提高爬虫的抓取效率；

        （2）防止一些不可信内容，防止页面指向一下垃圾站点和页面。

7、 a标签的title属性的使用。在不影响页面功能的情况下，可以尽量给a标签加上title属性，可以更有利于蜘蛛抓取信息。

8、内链采用绝对路径，减少服务器的响应时间：

9、 H标签的使用。主要是H1标签的使用需要特别注意，因为它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。

例如：淘宝网首页，不要采用。

10、网站结构呈扁平状树型。目录结构不宜过深。每个页面离首页最多点击不超过3次，过深不利于搜索引擎的抓取。

11、重要的内容优先加载。第一个链接最好是网站主关键词，不刻意要求，可以用css来处理，索引一篇文章的长度也是有限制的，一定要把最重要的内容（html），优先展现给蜘蛛，这方面你可以通过查看一些比较大的网页快照来求证，蜘蛛不会读取JS里的内容，所以重要内容必须放在HTML里。