搜索引擎优化有什么用( 单页应用与传统直出页面在SEO方面有哪些不同之处？)
优采云 发布时间: 2022-03-07 12:07搜索引擎优化有什么用(
单页应用与传统直出页面在SEO方面有哪些不同之处？)
前言
单页应用程序（Single Page Application）在 web 开发者中越来越流行。单页应用体验可模拟原生应用，一次开发，多终端兼容。单页应用并不是一项新技术，而是随着互联网的发展，满足用户体验的综合性技术。
搜索引擎优化
搜索引擎优化 (SEO) 一直是开发人员忽视的一部分。SEO是对搜索（谷歌、百度、雅虎等）技术细节的优化，比如语义、搜索关键词和内容相关性、收录体积、搜索排名等。同行和市场竞争的常用营销工具。谷歌和百度的搜索结果是重要的用户入口。腾讯云约 30% 的流量来自搜索引擎。因此，SEO是品牌、营销、用户量纬度上非常重要的基础能力。
那么单页应用和传统的直出页面在SEO方面有什么区别呢？
单页应用的优势在于更好的用户体验，让用户在网页上体验到natvie的速度和流畅度；经典的MVC开发模式，前后端各负其责。一套Server API，多端使用（web、手机APP等）和前端，业务逻辑全部在本地操作，数据需要通过AJAX同步提交；对搜索引擎不友好
单页应用程序实际上将视图的呈现从服务器传输到浏览器。服务器只提供 JSON 格式的数据，视图和内容通过本地 JavaScript 组织和呈现。搜索引擎抓取的内容需要完整的 HTML 和内容。具有单页应用程序架构的站点不能很好地支持搜索。
如果网站在用户体验和搜索友好性之间进行权衡，如果我们实现更好的体验和友好的搜索支持，那将是一块石头杀死两只鸟。
URL 中的哈希（# 符号）
单页应用只有一页，视图的变化通常由路由驱动。首先说一下单页应用的URL中的##。很多使用单元结构王浩赞的网址都出现了这个。象征。
# 符号是浏览器 URL 中的锚点。如果改变当前页面#号的参数，页面会跳转到锚点的位置。通过JavaScript，我们可以得到#号后面的参数：
1
2
location.hash // 获取URL hash
location.hash = "#list" //改变URL hash
如果更改#号后面的参数，页面将不会重新加载，所以大部分单页架构网站使用URL中的#号作为当前视图的URL地址，例如：
1
2
3
example.com/#index //首页视图
example.com/#list //列表页视图
example.com/#list/1 //id为1的列表信息的视图
Backbone.js 通过更改 # 参数来组织视图。这是一个可以直观体验URL变化的demo。
观看此演示后，您会发现 Twitter 过去在 URL 中使用的熟悉符号 #!。这个标志是由谷歌提出的。（AJAX 抓取：网站网站管理员和开发者指南 1：
由于单页架构页面复杂，谷歌难以抓取，因此制定了一个规范给开发者：
网站将站点地图提交给谷歌；谷歌发现有一个#! URL中的符号，比如/#!/detail/1，所以谷歌开始抓取/?_escaped_fragment_=/detail/1；
参数 _escaped_fragment_ 是 Google 指定的名称。如果开发者希望将网站的内容提交给谷歌，则必须通过该参数生成静态页面。
根据上面的demo，我简单说明一下Google要抓取的页面是什么样子的：
转义片段_=/detail/1
这样，服务器就需要生成静态内容供谷歌抓取。
下面将简单介绍单页架构，并在爬虫访问根目录时配置服务端路由。
判断爬行动物
Google访问119.28.4.22/#!/detail/1时会自动转换为，以Nginx为例：
1
2
3
if ($args ~ _escaped_fragment_) {
rewrite ^ /api;
}
/api是后台服务的接口，以nodejs为例，代理设置如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
upstream nodejs {
server 127.0.0.1:3000;
}
location /api {
proxy_set_header X-Request-URI $request_uri;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header Port $server_port;
proxy_pass http://nodejs;
proxy_redirect off;
}
这样，我们重写了谷歌对/api接口的访问，然后在服务器的/api中处理请求，输出静态内容。
网站地图
Gogole的这个规范必须有sitemap支持，因为可能有单页架构的站点，索引页也是JavaScript渲染的。提交站点地图时，不要注意参数名_escaped_fragment_，只提交带有井号的URL，例如：
1
2
3
http://119.28.4.22/#!/detail/1
weekly
0.5
结语
技术趋势的步伐非常快，单页应用的方式，不渲染的 URL 哈希其实已经流行了很长时间。在国外用户多且数据良好的情况下，开发者会选择 HTML5 History API 的 pushstate 特性进行开发。放弃#！在网址中。但是IE6、7等低端浏览器用户较多网站，#可以很好的兼容。也欢迎讨论使用 HTML5 History API 构建单页应用程序的方案。
参考1：
