prerender-SPA程序的SEO优化策略

news/2024/5/20 2:48:04/文章来源:https://blog.csdn.net/weixin_34310127/article/details/90001714

随着web2.0的兴起,ajax的时代已经成为了事实,更如今Knockout,backbone, angular,ember前端MDV(model driver view)框架强势而来,Single Page Application已经为大家所熟悉了。如今常见的SPA程序,restfull和前端MDV之类的框架能够实实在在的减少我们的代码开发量,让我更多的注意力关注在真正的业务逻辑上。在众多前端MDV框架从博客中可以看出来笔者还是钟爱于angular,然而服务端平台的选择的话:在.net平台笔者会首选webapi+oData,jvm平台spring restfull。

但是相应带来的是搜索引擎优化(SEO)是个难题,因为爬虫不会去执行JavaScript。现在很幸运的是在Google推出angular之后,也给出了一些解决方案:Google's ajax crawling protocol.此协议现在已被Google和bing所实现。

在协议中规定,搜索引擎会把带有#!someurl的链接转换为escaped_fragment=someurl访问解析,例如:

www.example.com/ajax.html#!key=value

将会变为

www.example.com/ajax.html?_escaped_fragment_=key=value

所以如果我们需要更好的SEO的支持的话,我们可以从现在开始把我们程序中的#变为#!,特别angular程序,因为框架原声支持对#!的解析。

基于这个协议和phantomjs(headless的浏览器内核)我们的SPA SEO工具 prerender(http://prerender.io/)应运而生,在官方和社区的支持下,现在已经有node.js express,ruby on rails,java,asp.net,php,python主流框架和nginx之类的支持。

prerender架构流程图如下:

011727108.jpg

prerender分为两个部分一部分为后端云服务和应用程序客户端,客户端主要拦截来自爬虫的请求在转发到后端云服务处理返回处理后并且去掉多余script/css的html在返回给爬虫。

后端云服务(nodejs项目),利用phantomjs这个无ui headless的浏览器内核加载页面地址,并等到页面解析后获取document html,并处理去掉无用的部分返回到前段客户端程序。



而前段程序则为不同语言框架而实现的不同拦截器,如java的filter,asp.net mvc的HttpModule,主要任务为拦截请求并转发给后端云服务处理。其拦截规则为:

  1. 检查url中是否带有escaped_fragment或者请求user-agent是已知或者配置的爬虫user-agent

  2. 确认拦截的不是js,css之类的资源文件

  3. 在确认url是在白名单中(可选如果配置的白名单的话)

  4. 确认不应该在黑名单中(可选如果配置了黑名单的话)

注:最好值配置黑名单或者白名单中的一种方式。

有了prerender,因为SEO而放弃SPA不再是理由了,关于prerender的任何issue大家可以及时提出,让它更加完善。具体关于如何使用和测试请转向主页和各个client程序页面,http://prerender.io/




 本文转自 破狼 51CTO博客,原文链接:http://blog.51cto.com/whitewolfblog/1338198,如需转载请自行联系原作者

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_838576.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Wordpress网站添加七牛云cdn

1.一个搭建好的网站和七牛云账号 2.七牛云进入控制面板 3创建存储空间 4创建好了空间拿七牛给你了测试域名(但只可以使用30天)所以绑定自定义域名(这个必须是备案过的) 5.设置自定义域名(加速域名最好是二级域名&#…

S-CMS企业建站v3几处SQL注入

0x01 前言 有段时间没有发文章了,主要没挖到比较有意思的漏洞点。然后看最近爆了很多关于S-CMS的漏洞,下载了源码简单挖了一下然后给大家分享一下。 0x02 目录 Wap_index.php sql注入Form.php Sql注入Input、query 0x03 插曲 这里分享一下在审计的时候自…

10年生日教大家轻松做一个网站

图片多~暂没时间传过来,如果QQ空间的图片防盗链,请看原文章地址:http://user.qzone.qq.com/296827066/blog/1266877782 去年的生日是教大家煎鸡蛋(http://user.qzone.qq.com/296827066/blog/1233724431),今…

05.net网站开发(设计):2.MVC控制器与视图的简单收发数据

上一节大概了解了MVC的运作方式。这一届发一个简单样例,在网页界面中的文本框输入一个值,在后台控制器中进行接收,然后跳转到另一个页面。一:要发送数据的视图在HomeController中新建一个视图public ActionResult MyView(){return…

06.net网站开发(设计):3.MVC注册强类型

什么是MVV注册强类型呢?其实一开始我也是混乱得不行。这个Model模型比我们写三层创建的Model强大得多,一旦创建之后,系统便可以快速生成常用的视图,包括“列表”、“增删查改”功能这些功能随意选择。配合使用"数据库模型&qu…

08.net网站开发(前端):5.jQuery

开发网站肯定要会JS,嫌代码太难看难学那至少要学会jQuery。当然我见过有些项目纯用服务端控件也是能做出来的,但我相信,那些碰到复杂的需求的话肯定很棘手的。jQuery是对JS和DOM的封装,少量代码直接解决大多兼容性问题。jQuery我是…

09.net网站开发(前端):6.类淘宝组合搜索效果jQuery+Ajax

上一节讲到jQuery,本来还不能这么快就发jQueryAjax的,因为这部分对于新手来说,不是很好理解,但为了配合发我的实习经验,就先贴出来了。新手先有个概念就好,Ajax是为了前端能和后台交互的,它们的…

11.net网站开发(交互):2.MVC 购物车

这一节完了之后,差不多就停止基础知识的更新了。接下来可能要做一个实例项目,用MVC或者传统.NET WEB 还不是很清楚,要做什么项目也还在考虑,反正肯定开源附加完整文档。但我需要它是以完成某种任务的形式,不然真没那么…

30个酷毙的交互式网站(HTML5+CSS3)

很久前就像找些文章来翻译,and这是第一篇,刚开始翻译着很有兴致,但中间就开始累了,感觉好多好多,因为不仅要翻译,还要看网站,还要排版,花了两天空闲时间还是硬着头皮翻译下来了&…

17项目简介与草稿设计(网站开发)

做网站需要的基础技能已经交待得差不多了,接下来就是给出一个项目案例了。想做一个开源的论坛源码,有兴趣的朋友可以一起参与哈,QQ 696619。 本项目简介: 《内部论坛》,为移动设备所开发的论坛,发展重点为…

19网站实现QQ登录功能

一般网站要先做个用户注册的功能页面,但我的网站名气不大,不需要要求用户注册,所以直接使用腾讯QQ登录的API接口。 如何使用JS_SDK让网站拥有QQ登录的功能,官网的这篇文章写得还算完整:http://connect.qq.com/intro/lo…

20快速开发网站项目的工具和方法

本来已经进入“正式开发”的教程部分了,但这次还是要先插入一些“旁门左道”,因为很多时候,我们仅仅只是要演示一个产品概念或者完成一次老师布置的课程设计,那就没必要仔仔细细地敲打每一行代码。像我这学期选修了“高级网页”课…

基于SSH的在线美食点评网站-java在线美食点评网

基于SSH的在线美食点评网站-java在线美食点评网 开发环境:Eclipse for J2EE,MYSQL5.1,JDK1.7,Tomcat 7首页主要展示一些当地美食。(1)用户注册:用户填写注册账号、密码。 (2)用户登录:用户注册成功后,使用注册账号、密码登录。成功…

关于各网站回到顶部的细节功能

对比一下吧,不说话了,很多人学到的皮毛和精髓是完全两码事。先看淘宝:http://item.taobao.com/item.htm?id9134206497&ali_refida3_619362_1007:1102299863:7:46702465U84y78608587678s868v3I:090efd2e7e3bc5c1f468dbe7eeb252b1&ali…

怎么看服务器linux版本,linux怎么查看版本命令_网站服务器运行维护,linux

如何解决docker内部访问不了宿主_网站服务器运行维护docker内部访问不了宿主的解决方法:首先配置防火墙规则并重载规则;然后启动容器时使用“--net host”模式;最后关闭防火墙即可。linux查看版本命令的方法是:1、# uname &#x…

网站服务器上安装的操作系统,服务器上安装的操作系统

服务器上安装的操作系统 内容精选换一换本节操作以Windows Server 2012 R2 标准版操作系统的弹性云服务器为例,介绍安装IIS服务的操作步骤。本节操作仅是安装IIS服务的操作步骤,后续搭建具体应用的操作步骤请根据业务实际情况进行配置。打开服务器管理器…

程序员实用工具网站

目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了&#…

如何在oracle网站下载jdk

第一步:https://www.oracle.com/index.html 网址 第二部:最下面 找到 Downloads and Trials 下面的 Java for Developers 点击进入 第三部:找到下面界面 选择你需要的版本(以java se 为例) 之后点击 jdk downl…