单页应用SEO浅谈

qzmjef

前言

单页应用（Single Page Application）越来越受web研发者欢迎，单页应用的体验能够模拟原生应用，一次研发，多端兼容。单页应用并不是一个全新发明的技术，而是随着互联网的发展，满足用户体验的一种综合技术。

seo

始终败兴，搜索引擎优化（SEO）是研发者容易忽略的部分。SEO是针对搜索（Google、百度、雅虎搜索等）在技术细节上的优化，例如语义、搜索关键词与内容关联性、收录量、搜索排名等。SEO亦是同行、市场竞争常用的的营销手段。Google、百度的搜索结果是重要的用户入口，腾讯云（www.qcloud.com）有30%上下的流量来自搜索引擎。因此呢SEO在品牌、营销、用户量的纬度是非常重要的基本能力。

那样单页应用与传统直出页面在SEO方面有那些区别之处呢？

单页应用的优点

更好的用户体验，让用户在web感受natvie的速度和流畅；经典MVC研发模式，前后端各负其责。一套Server API，多端运用（web、移动APP等）重前端，业务规律所有在本地操作，数据都需要经过AJAX同步、提交；

对搜索引擎不友好

单页应用实质是把视图（View）渲染从Server交给浏览器，Server只供给JSON格式数据，视图和内容都是经过本地JavaScript来组织和渲染。而搜索搜索引擎抓取的内容，需要有完整的HTML和内容，单页应用架构的站点，并不可很好的支持搜索。

倘若站点在用户体验和搜索友好权衡时，倘若咱们做到更好的体验，亦做到友好的搜索支持，既是一箭双雕。

URL中的哈希（#号）

单页应用仅有一个页面，视图的变化一般是经过路由（route）来驱动，首要，咱们先来谈一谈单页应用的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便是经过改变#号参数来组织视图，这儿有一个demo能够很直观的体验URL的变化。

看过这个demo，你获取会发掘很熟练的符号#!，Twitter曾在URL运用这个标识。这个标识是Google提出。（AJAX 抓取：网站站长和研发人员指南1：

由于繁杂的单页架构页面，对Google来讲抓取比较困难，于是给研发者制定一个规范：

网站提交sitemap给Google；Google发掘URL里有#!符号，例如example.com/#!/detail/1，于是Google起始抓取example.com/?_escaped_fragment_=/detail/1；

_escaped_fragment_这个参数是Google指定的命名，倘若研发者期盼把网站内容提交给Google，就必须经过这个参数生成静态页面。

按照上面的demo，我简单示例一下Google要抓取的页面的样子:

http://119.28.4.22/?escapedfragment_=/detail/1

如此败兴，就需要Server经过生成静态的内容以便Google抓取。

以下将简单介绍，单页架构，爬虫拜访根目录时倘若配置Server端的路由。

判断爬虫

当Google拜访119.28.4.22/#!/detail/1时，会自动转化成http://119.28.4.22/?_escaped_fragment_=/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; }

如此，咱们便将Google的拜访重写到/api这个接口，而后在Server的/api处理请求把静态内容输出就可。

sitemap

Gogole的这个规范，必须有sitemap支持，由于有可能单页架构的站点，索引页面亦是JavaScript渲染的。提交sitemap时，不消关注_escaped_fragment_这个参数名，只提交带哈希符号的URL就可，例如：

1 2 3 http://119.28.4.22/#!/detail/1 weekly 0.5

结语

技术潮流的步伐火速，单页应用，URL哈希处理亦没渲染的方式实质上已然流行了很久，在国外非常多用户数据较好的状况下，研发者会选取HTML5 History API的pushstate特性研发，在URL中抛弃#!。然则IE6、7等低端浏览器用户状况较多的网站，#能够很好的兼容。关于采用HTML5 History API来架构单页应用的方法，亦欢迎讨论。

文案源自：腾讯isux