单页应用SEO优化_单页应用SEO浅谈

前言

单页应用在Web开发者中备受欢迎，其提供的用户体验能够模仿原生应用，实现一次开发，多平台兼容。这项技术并非创新，而是随着互联网的进步，逐渐演变出的一种旨在提升用户体验的综合技术。

SEO

长期以来，搜索引擎优化（SEO）往往被开发者所忽视。SEO主要涉及对搜索引擎（如百度、雅虎等）在技术层面的优化，包括语义处理、关键词与内容的关联性、收录数量以及搜索排名等方面。此外，SEO也是业界同行和市场竞争中常用的营销策略之一。以百度为例，其搜索结果成为众多用户获取信息的重要渠道，而腾讯云大约有30%的流量来源于搜索引擎。因此SEO在品牌、营销、用户量的纬度是非常重要的基础能力。

那么单页应用与传统直出页面在SEO方面有哪些不同之处呢？

单页应用具备诸多优势，它为用户带来了更佳的交互体验，使他们在浏览网页时能够享受到更快的速度和更流畅的体验；采用经典的MVC开发模式，前端和后端各司其职。通过一套API，实现多端应用（如web、移动APP等）的兼容，其中前端占据主导地位，而业务逻辑则全部在本地执行，数据交换则依赖于AJAX进行同步和提交；然而，这种应用对搜索引擎的友好度并不高。

单页应用实际上是将视图渲染的任务交由浏览器处理，仅提供JSON格式的数据，视图与内容均由本地进行组织与渲染。然而，对于搜索引擎抓取的内容，则需要完整的HTML以及内容信息。因此，采用单页应用架构的网站在支持搜索功能方面存在一定的局限性。

若站点在平衡用户体验与搜索便利性时，若能同时提供更优质的体验和更友好的搜索服务，那便是双管齐下，一举两得。

URL中的哈希（#号）

单页应用仅包含一个页面，其视图的切换通常由路由机制实现。首先，让我们探讨一下单页应用URL中的井号（#）符号，许多采用模块化设计的URL都包含了这个特殊字符。

在浏览器地址栏中，#号充当着页面的锚点角色，当调整该符号后的参数时，页面会自动跳转至对应锚点所标记的具体位置。我们能够通过这种方式，获取并读取#号之后所跟的参数信息。

1 2 

获取当前网页的URL中的hash部分，然后将URL的hash部分设置为"#list"。

调整#号所代表的参数并不会导致页面重新加载，因此，许多采用单页架构的网站，普遍在URL中使用#号来标识当前的视图地址，比如：

1 2 3 

example.com/#index 代表首页的显示效果，example.com/#list 则指向列表页的视图，而example.com/#list/1 则特指id为1的列表信息的展示界面。

.js通过调整井号符号后的参数来对视图进行编排，同时提供了一个示例，让您能够直观地感受到URL的变动。

浏览完这个演示后，你将注意到一个相当熟悉的符号#!，它曾在网址中作为分隔符被广泛使用。这个符号的运用，正是（在《AJAX 抓取：网站站长和开发人员指南1》中）被提出并探讨的。

由于单页架构页面结构复杂，导致抓取信息存在一定难度，因此我们为开发者制定了一项规范。

网站在提交后，检测到URL中存在#!符号，比如/#!//1，随后便启动了对/?=//1的抓取过程。

此参数代表着特定的标识，若开发者意图将网站资料进行提交，则必须借助该参数来创建静态网页。

根据上面的demo，我简单示例一下要抓取的页面的样子:

如此以来，就需要通过生成静态的内容以便抓取。

下面将进行简要阐述，关于单页架构，当爬虫访问网站的根目录时，若已对端口的路由进行了设置。

判断爬虫

当您输入网址119.28.4.22/#!//1，系统会自动进行转换，以Nginx服务器为例：

1 2 3 

当检测到参数中的$args变量包含_escaped_fragment_时，则执行重写操作，将请求的URL路径^/api替换为新的路径。

/api为后台服务的接口，已为例，代理设置如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 

在Node.js的上游配置中，指定服务器地址为127.0.0.1，端口号为3000；在location /api部分，设置代理头信息，包括将请求URI、真实IP、代理链和主机名以及端口号传递给Node.js服务器；同时关闭了代理重定向功能。

因此，我们已将访问操作重新编写至/api接口，并在该接口中处理请求，从而输出静态内容。

该规范需得到认可，鉴于某些单页应用架构的网站，其索引页面同样需要渲染。在提交过程中，无需关注参数名称，只需提交附有哈希符号的URL，比如：

1 2 3 

禁止访问该链接，每周仅限一次，每次使用时长为半小时。

结语

技术发展迅速，单页应用和通过URL哈希处理而不进行渲染的技术早已普及。在众多用户数据良好的国外网站，开发者倾向于利用HTML5 API的功能进行开发，并在URL中舍弃了#!符号。然而，对于IE6、7等老旧浏览器用户较多的网站来说，使用#符号可以实现良好的兼容性。关于构建基于HTML5 API的单页应用策略，我们同样乐于进行交流与探讨。