单页面应用怎么做seo

单页应用如何解决SEO？很多seoer在网站seo优化的时候都会遇到一些网站优化的疑问，并且单页应用是比较受web开发欢迎，单页应用并不是一个全新发明的技术，而是随着互联网的发展，满足用户体验的一种综合技术。

单页应用是指在浏览器中运行的应用，所谓单页也就是页面始终都只有一个页面，它们在使用期间不会重新加载页面。像所有的应用一样，它旨在帮助用户完成任务，可以认为单页应用是一种从web服务器加载的富客户端。

我们在做SEO优化时需要注意的是，SEO也不例外，网站单页的优化是更详细的工作，对于网站页面的一些优化使网络流量无限扩展，每个细节，每个模块的分析，找到优化的模块优化。

*回答来源链接：https://zhuanlan.zhihu.com/p/344302458

以上就是《单页面应用怎么做seo》的全部内容，感谢阅读，希望对你有帮助！

1 按了F5不是理所当然的应该刷新页面么，即使我SPA被刷新了又怎么样呢？也没有改变任何用户习惯，用户不会觉得confused。 2 而是应该让用户慢慢培养SPA不用去按F5的习惯。 3 我感觉需要做的也就是保存个用户登录状态，这个可以存在server的session里，和传统的web应用是一样的，并没有特别之处。

coding

teambition

cloud9

注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。（使用js控制渲染来替换html跳转）

单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。

因此，对单页面应用来说，模块化的开发和设计显得相当重要。

原理：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。

单页面应用的优缺点：

优点：

1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。

2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

缺点：

1、首页加载慢

单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好

2、SEO不友好

SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录。

1、Hash模式：（也就是通过锚点？）

这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 " www.baidu.com/#hashhash " ，其中 "#hashhash" 就是我们期望的 hash 值。

hash 值的变化不会导致浏览器像服务器发送请求，而且hash 的改变会触发 hashChange 事件，浏览器的前进后退也能对其进行控制，所以在 H5 的 history 模式出现之前，基本都是使用 hash 模式来实现前端路由。

2、History模式

在 HTML5 之前，浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转。

在 HTML5 的规范中，history 新增了以下几个 API：

hash模式和history模式对比

1、hash 模式相比于 history 模式的优点：

兼容性更好，可以兼容到IE8

无需服务端配合处理非单页的url地址

2、hash 模式相比于 history 模式的缺点：

看起来更丑。

会导致锚点功能失效。

相同 hash 值不会触发动作将记录加入到历史栈中，而 pushState 则可以。

引用：

https://www.cnblogs.com/ppforever/p/5126640.html

https://www.jianshu.com/p/0c32c85c668b

https://juejin.im/post/5dac1d0d6fb9a04e0762e3f1

---