单页应用SEO浅谈

媒介

单页应用(Single Page Application)越来越受web开辟者迎接,单页应用的体验可以模仿原生应用,一次开辟,多端兼容。

单页应用并不是一个全新创造的技巧,而是跟着互联网的成长,知足用户体验的一种综合技巧。

SEO

一向以来,搜刮引擎优化(SEO)是开辟者轻易忽视的部分。

SEO是针对搜刮(Google、百度、雅虎搜刮等)在技巧细节上的优化,例如语义、搜刮重点词与内容相干性收录量、搜刮排名等。

SEO也是同业、市场竞争常用的的营销手段。

Google、百度的搜刮成果是重要的用户进口,腾讯云(www.qcloud.com)有30%阁下的流量来自搜刮引擎。

是以SEO在品牌、营销、用户量的纬度是异常重要的基本才能。

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

单页应用的长处

  1. 更好的用户体验,让用户在web感触感染natvie的速度和流畅;
  2. 经典MVC开辟模式,前后端各负其责。

  3. 一套Server API,多端应用(web、移动APP等)
  4. 重前端,营业逻辑全部在本地操作,数据都须要经由过程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来说抓取比较艰苦,于是给开辟者制订一个规范:

  1. 网站提交sitemap给Google;
  2. 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

评论列表

夏天
2022-11-27 15:43:53

看着挺不错的,联系方式加了

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
请先 登录 再评论,若不是会员请先 注册