seo经典之作-2011最新搜索引擎优化实战(单页应用与传统直出页面在SEO方面有哪些不同之处？)

　　seo经典之作-2011最新搜索引擎优化实战(单页应用与传统直出页面在SEO方面有哪些不同之处？)

　　前言

　　单页应用程序（Single Page Application）在 web 开发者中越来越流行。单页应用体验可模拟原生应用，一次开发，多终端兼容。单页应用并不是一项新技术，而是随着互联网的发展，满足用户体验的综合性技术。

　　搜索引擎优化

　　搜索引擎优化 (SEO) 一直是开发人员忽视的一部分。SEO是对搜索（谷歌、百度、雅虎等）技术细节的优化，比如语义、搜索关键词和内容相关性、​​收录体积、搜索排名等。同行和市场竞争的常用营销工具。谷歌和百度的搜索结果是重要的用户入口。腾讯云约 30% 的流量来自搜索引擎。因此，SEO是品牌、营销、用户量纬度上非常重要的基础能力。

　　那么单页应用和传统的直出页面在SEO方面有什么区别呢？

　　单页应用程序的优势

　　更好的用户体验，让用户在网页上感受natvie的速度和流畅度；经典的MVC开发模式，前后端各负其责。一套Server API，多端使用（web、手机APP等）重前端，业务逻辑全部在本地操作，数据需要通过AJAX同步提交；

　　对搜索引擎不友好

　　单页应用程序实际上将视图的呈现从服务器传输到浏览器。服务器只提供 JSON 格式的数据，视图和内容通过本地 JavaScript 组织和呈现。搜索引擎抓取的内容需要完整的 HTML 和内容。具有单页应用程序架构的站点不能很好地支持搜索。

　　如果网站在用户体验和搜索友好性之间进行权衡，如果我们实现更好的体验和友好的搜索支持，那将是一块石头杀死两只鸟。

　　URL 中的哈希（# 符号）

　　单页应用程序只有一个页面，视图的变化通常由路由驱动。首先说一下单页应用的URL中的#。许多使用单元结构的 URL 网站 出现此符号。

　　# 符号是浏览器 URL 中的锚点。如果改变当前页面#号的参数，页面会跳转到锚点的位置。通过JavaScript，我们可以得到#号后面的参数：

　　location.hash // 获取 URL 哈希

　　location.hash = "#list" //更改网址哈希

　　如果更改#号后面的参数，页面将不会重新加载，所以大部分单页架构网站使用URL中的#号作为当前视图的URL地址，例如：

　　/#index //主视图

　　/#list //列出页面视图

　　/#list/1 //查看id为1的列表信息

　　Backbone.js 通过更改 # 参数来组织视图。这是一个可以直观体验URL变化的demo()。

　　观看此演示，您可能会发现熟悉的符号 #!，这是 Twitter 过去在 URL 中使用的符号。此徽标由 Google 提出（AJAX Crawl：网站Webmaster and Developer Guidelines1）：

　　由于单页架构页面复杂，谷歌难以抓取，因此制定了一个规范给开发者：

　　网站向谷歌提交站点地图；

　　谷歌找到了#! URL 中的符号，例如 /#!/detail/1，因此 Google 开始抓取 /?_escaped_fragment_=/detail/1；

　　参数 _escaped_fragment_ 是 Google 指定的名称。如果开发者希望将网站的内容提交给谷歌，则必须通过该参数生成静态页面。

　　根据上面的demo，我简单说明一下Google要抓取的页面是什么样子的：

　　这样，服务器就需要生成静态内容供谷歌抓取。

　　下面将简单介绍单页架构，并在爬虫访问根目录时配置服务端路由。

　　判断爬行动物

　　Google访问119.28.4.22/#!/detail/1时会自动转换为，以Nginx为例：

　　if ($args ~ _escaped_fragment_) {

　　重写 ^ /api;

　　}

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

　　上游节点{

　　服务器 127.0.0.1:3000；

　　}

　　位置 /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;

　　proxy_set_header 端口 $server_port;

　　代理通行证；代理重定向关闭；

　　}

　　这样，我们重写了谷歌对/api接口的访问，然后在服务器的/api中处理请求，输出静态内容。

　　网站地图

　　Gogole的这个规范必须有sitemap支持，因为可能有单页架构的站点，索引页也是JavaScript渲染的。提交站点地图时，不要注意参数名_escaped_fragment_，只提交带有井号的URL，例如：

　　#!/detail/1

　　每周

　　0.5

　　本文到此结束，欢迎讨论。