SPA之SEO

参考连接：6 Things You Should Know About Fragment URLs

在项目开发中，由于使用了Vue.js来开发一个SPA（单页面应用），因此在这个项目开始变大的时候，很天然的就想到用vue-router来创建多个模块入口。vue-router默认的是使用hash模式，就是会在#后面跟着路径用来区分并渲染相应的组件，还有一种是history模式，这种模式能在不刷新当前页面的状况下改变URL，而且形式很是干净清爽的，好比：https://segmentfault.com/u/zh...，带上了hash就多是 https://segmentfault.com#!/u/zhoushx3。

开发过SPA网站的朋友应该知道，SPA是SEO不友好的（后面会解释）。咱们通常是会根据URL的路径或者hash来渲染对应的组件或页面。打个比方：

1. 网站首页：aa.bb.com/index

2. 点击页面某一按钮，修改window.location.hash='#how'，URL变成aa.bb.com/index#how，同时经过ajax或者其余方式得到数据并渲染。

3. 点击另外一按钮，修改window.location.hash='#what'，URL变成aa.bb.com/index#what，同时页面更新渲染。

上面我举的栗子是使用hash。固然也可使用以下的history模式，好比：

1. 网站首页：aa.bb.com/index

2. 点击页面某一按钮，执行history.pushState({}, '', '/how')，URL会变成aa.bb.com/how

3. 点击页面某一按钮，执行history.pushState({}, '', '/what')，URL会变成aa.bb.com/what

使用这种方式URL就会更好看点。

好像有点扯远了，其实我只是想找个引子带出hash这货而已，开始。

认识URL中的Hash

举个栗子：http://www.zuodanye.com/pcent...，代号为W。
对应下URL的组成：protocol :// hostname[:port] / path / ;parameters#fragment
没错，#后面的部分也叫作fragment，带有#的URL也叫Fragment URL。
这里fragment等同于hash.
在#左边的表明这个资源在服务器的位置，右边的则是指明资源内的位置，能够理解成就是锚点。好比标签<a>的用法，<a href='#what'>，当点击它的时候屏幕会滚到它的位置。

Fragment部分没有包含在请求头中

check it out:

听说是由于Fragment部分只对浏览器有用，也就是前端，而且它不会对服务器返回什么资源有所影响，因此这个部分就在Request URL中被忽略掉了。
因此若是把?key=value这部分放在了#后面，那么服务器在拿GET参数的时候就拿不到这块了的哦。

Fragment的特色

修改window.location.hash也就是#后面并不会致使页面刷新，这一点在优化用户体验上是大大的好。
虽然页面不会刷新，不过会在浏览器的history记录中添加一条记录，因此返回和前进按钮就能够利用了。

说说Google爬虫（不一样爬虫其原理应该是差很少的）

Google爬虫在爬网站的时候，HTML中的内容和内嵌的连接会成为搜索索引的一部分。因为它并不具备一个脚本引擎，因此它只会爬网站的源码而不会执行任何脚本，这样子#后面的部分就彻底失去了做用，毕竟#只有javascrip才会去使用到。
因此，若是使用AJAX和#来区分路径的话，这样的路径是不会被收录到索引的。为了解决这个问题，Google支持了一种转化，即爬虫会把hash部分识别成URL参数，方式：

• 首先须要把#变成#!，即 http://www.zuodanye.com/pcent... ==> http://www.zuodanye.com/pcenter#!myProject

• 当Google爬虫遇到这样的URL，会将其识别成 http://www.zuodanye.com/pcent...。
  这样子咱们只要为这个连接返回相应的页面或者数据便可。

不过这种方式仍是显得略很差看，因此若是浏览器支持history API的话，固然仍是用history的好。

总结

若是SPA网站要对SEO友好点的话，应该至少有下面的部分：

• 利用history.pushState来修改URL，监听onpopstate来相应返回和前进。
  URL的变化可能以下：www.zuodanye.com -> www.zuodanye.com/pcenter -> www.zuodanye.com/home
  这个过程当中页面不会刷新，用户体验好。

• server路由添加/pcenter和/home，以及对应的Render页面，这样子就能够为不一样路径下的页面编写不一样的TDK。

• 若是浏览器不支持histroyAPI，那就降级使用hash来切换不一样的路径，这样子至少可以不刷新跳转，优化体验。