“单页”JS网站和SEO

现在有很多很酷的工具可以制作function强大的“单页”JavaScript网站。 在我看来,这是通过让服务器充当一个API(而不是其他任何东西)并让客户端处理所有的HTML生成东西来完成的。 这种“模式”的问题是缺乏search引擎支持。 我可以想到两个解决scheme:

  1. 当用户进入网站时,让服务器完全按照客户端的导航来呈现页面。 所以如果我直接去http://example.com/my_path那么如果我通过pushState去到/my_path ,服务器将会呈现和客户端一样的东西。
  2. 让服务器只为search引擎机器人提供一个特殊的网站。 如果一个普通用户访问http://example.com/my_path ,服务器应该给他一个JavaScript网站的繁重版本。 但是,如果谷歌机器人访问,服务器应该给它一些最小的HTML与我要谷歌索引的内容。

第一个解决scheme在这里进一步讨论。 我一直在做这个网站,这不是一个很好的经验。 这不是干的,在我的情况下,我不得不为客户端和服务器使用两个不同的模板引擎。

我想我已经看到了一些好的Flash网站的第二个解决scheme。 我比第一个更喜欢这种方法,并且在服务器上使用正确的工具,可以非常轻松地完成。

所以我真正想知道的是以下几点:

  • 你能想到更好的解决scheme吗?
  • 第二种解决scheme有什么缺点? 如果Google以某种方式发现我没有像普通用户那样为Google bot提供完全相同的内容,那么我是否会在search结果中受到惩罚?

虽然#2对于开发者来说可能“更容易”,但它只提供search引擎抓取。 是的,如果谷歌发现你的服务不同的内容,你可能会受到惩罚(我不是一个专家,但我听说过这种情况发生)。

search引擎优化和可访问性(不只是残疾人,但通过移动设备,触摸屏设备,以及其他非标准计算/互联网平台)都具有类似的基本理念:语义丰富的标记是“可访问的”被访问,查看,读取,处理或以其他方式使用)到所有这些不同的浏览器。 屏幕阅读器,search引擎抓取工具或启用了JavaScript的用户应该都能够毫无问题地使用/索引/理解您网站的核心function。

pushState不会增加这个负担,以我的经验。 它只是把曾经是事后的想法和“如果我们有时间”带到networking发展的最前沿。

在选项#1中描述的通常是最好的方法 – 但像其他的可访问性和search引擎优化问题一样,在JavaScript应用程序中使用pushState做这件事需要pushState规划,否则将会成为一个重大的负担。 它应该从一开始就被烘焙到页面和应用程序体系结构中 – 加装是痛苦的,会导致比必要的更多的重复。

最近我一直在使用pushState和SEO来处理几个不同的应用程序,我发现我认为是一个好方法。 它基本上跟随您的项目#1,但帐户不重复的HTML /模板。

大部分的信息可以在这两篇博文中find:

http://lostechies.com/derickbailey/2011/09/06/test-driving-backbone-views-with-jquery-templates-the-jasmine-gem-and-jasmine-jquery/

http://lostechies.com/derickbailey/2011/06/22/rendering-a-rails-partial-as-a-jquery-template/

其要点是我使用ERB或HAML模板(运行Ruby on Rails,Sinatra等)来进行服务器端渲染,并创buildBackbone可以使用的客户端模板以及Jasmine JavaScript规范。 这样就消除了服务器端和客户端之间的标记重复。

从那里,你需要采取一些额外的步骤,让你的JavaScript与服务器呈现的HTML一起工作 – 真正的渐进增强; 采用已经交付的语义标记并使用JavaScript进行增强。

例如,我正在用pushState构build一个图像库应用pushState 。 如果您从服务器请求http://img.dovov.com1 ,它将呈现服务器上的整个图像库,并将所有的HTML,CSS和JavaScript下载到您的浏览器。 如果你禁用了JavaScript,它将会工作得很好。 您执行的每个操作都将从服务器请求一个不同的URL,服务器将呈现浏览器的所有标记。 但是,如果您启用了JavaScript,则JavaScript将拾取已经呈现的HTML以及由服务器生成的一些variables,并从那里接pipe。

这是一个例子:

 <form id="foo"> Name: <input id="name"><button id="say">Say My Name!</button> </form> 

在服务器渲染完成之后,JavaScript会将其提取出来(在本例中使用Backbone.js视图)

 FooView = Backbone.View.extend({ events: { "change #name": "setName", "click #say": "sayName" }, setName: function(e){ var name = $(e.currentTarget).val(); this.model.set({name: name}); }, sayName: function(e){ e.preventDefault(); var name = this.model.get("name"); alert("Hello " + name); }, render: function(){ // do some rendering here, for when this is just running JavaScript } }); $(function(){ var model = new MyModel(); var view = new FooView({ model: model, el: $("#foo") }); }); 

这是一个非常简单的例子,但是我认为这是一个很好的例子。

当我在页面加载后立即查看视图时,我将由服务器呈现的表单的现有内容作为视图的el提供给视图实例。 当第一个视图被加载时,我不会调用渲染或者让视图为我生成一个el 。 在视图启动并运行之后,我有一个可用的呈现方法,并且页面全部是JavaScript。 这可以让我稍后重新渲染视图,如果我需要。

点击启用JavaScript的“说出我的名字”button将导致一个警告框。 没有JavaScript,它会回发到服务器,并且服务器可能会将该名称呈现给某个html元素。

编辑

考虑一个更复杂的例子,你有一个需要附加的列表(从下面的评论)

假设你有一个<ul>标签的用户列表。 当浏览器发出请求时,该列表由服务器呈现,结果如下所示:

 <ul id="user-list"> <li data-id="1">Bob <li data-id="2">Mary <li data-id="3">Frank <li data-id="4">Jane </ul> 

现在,您需要遍历这个列表,并为每个<li>项目附加一个Backbone视图和模型。 通过使用data-id属性,您可以轻松find每个标签所来自的模型。 然后,您需要一个足够聪明的集合视图和项目视图来将自己附加到这个html。

 UserListView = Backbone.View.extend({ attach: function(){ this.el = $("#user-list"); this.$("li").each(function(index){ var userEl = $(this); var id = userEl.attr("data-id"); var user = this.collection.get(id); new UserView({ model: user, el: userEl }); }); } }); UserView = Backbone.View.extend({ initialize: function(){ this.model.bind("change:name", this.updateName, this); }, updateName: function(model, val){ this.el.text(val); } }); var userData = {...}; var userList = new UserCollection(userData); var userListView = new UserListView({collection: userList}); userListView.attach(); 

在这个例子中, UserListView将遍历所有的<li>标签,并为每个标签附加一个正确模型的视图对象。 它为模型的名称更改事件设置事件处理程序,并在发生更改时更新元素的显示文本。


这种types的过程,采取服务器呈现并让我的JavaScript接pipe并运行它的html,是让SEO,辅助function和pushState支持滚动的好方法。

希望有所帮助。

我认为你需要这个: http : //code.google.com/web/ajaxcrawling/

您还可以安装一个特殊的后端,通过在服务器上运行JavaScript“呈现”您的页面,然后将其提供给谷歌。

结合这两件事情,你有一个解决scheme,没有两次编程的事情。 (只要你的应用程序完全可以通过锚点片段来控制)。

所以,主要担心的是DRY

  • 如果您使用的是pushState,请让您的服务器为所有的URL(不包含用于提供图片的文件扩展名)发送相同的确切代码“/ mydir / myfile”,“/ myotherdir / myotherfile”或root“ “ – 所有请求都会收到相同的确切代码。 你需要有一些types的url重写引擎。 您也可以提供一小部分的HTML,其余的可以来自您的CDN(使用require.js来pipe理依赖项 – 请参阅https://stackoverflow.com/a/13813102/1595913 )。
  • (通过将链接转换为您的urlscheme并通过查询静态或dynamic源来testing内容是否存在来testing链接的有效性,如果无效,则发送404响应。
  • 当请求不是从谷歌机器人,你只是正常处理。
  • 如果请求是来自谷歌机器人,请使用phantom.js – 无头webkit浏览器( “无头浏览器只是一个没有可视化界面的全function的Web浏览器” )来在服务器上呈现html和javascript,并发送谷歌机器人由此产生的HTML。 当botparsinghtml时,它可以在服务器<a href="/someotherpage">mylink</a>上打开其他“pushState”链接/ somepage,服务器将url重新写入应用程序文件,并将其加载到phantom.js中并将生成的html发送到机器人,等等…
  • 对于你的HTML我假设你正在使用正常的链接与某种劫持(例如使用backbone.js https://stackoverflow.com/a/9331734/1595913
  • 为了避免混淆与任何链接分开您的api代码,提供json到一个单独的子域名,例如api.mysite.com
  • 为了提高性能,您可以通过使用与phantom.js相同的机制创build页面的静态版本,从而在下class时间提前为search引擎预处理您的网站页面,从而将静态页面提供给Google机器人。 预处理可以使用一些简单的应用程序来parsing<a>标签。 在这种情况下,处理404比较容易,因为您可以简单地检查包含urlpath的名称是否存在静态文件。
  • 如果你使用#! 哈希爆炸语法为您的网站链接类似的情况适用,除了重写URL服务器引擎将寻找URL中的_escaped_fragment_并将格式化URL到您的urlscheme。
  • 在github上有一些node.js与phantom.js的集成,您可以使用node.js作为Web服务器来生成html输出。

下面是几个使用phantom.js进行seo的示例:

http://backbonetutorials.com/seo-for-single-page-apps/

http://thedigitalself.com/blog/seo-and-javascript-with-phantomjs-server-side-rendering

如果您使用Rails,请尝试poirot 。 这是一个gem,使它死了很简单,重用胡子或句柄模板客户端和服务器端。

在您的视图中创build一个文件,如_some_thingy.html.mustache

渲染服务器端:

 <%= render :partial => 'some_thingy', object: my_model %> 

把模板放在客户端使用:

 <%= template_include_tag 'some_thingy' %> 

Rendre客户端:

 html = poirot.someThingy(my_model) 

要采取一个稍微不同的angular度,你的第二个解决scheme将是无障碍方面正确的…你将提供替代内容的用户谁不能使用JavaScript(屏幕阅读器等)。

这将自动增加search引擎优化的好处,在我看来,不会被视为谷歌“淘气”的技术。

有趣。 我一直在寻找可行的解决scheme,但似乎是相当成问题的。

我其实更倾向于你的第二种方法:

让服务器只为search引擎机器人提供一个特殊的网站。 如果一个普通用户访问http://example.com/my_path ,服务器应该给他一个JavaScript网站的繁重版本。 但是,如果谷歌机器人访问,服务器应该给它一些最小的HTML与我要谷歌索引的内容。

这是我解决问题的方法。 虽然它没有被证实工作,它可能会为其他开发人员提供一些见解或想法。

假设您使用支持“推送状态”function的JS框架,而后端框架是Ruby on Rails。 你有一个简单的博客网站,你希望search引擎索引所有的文章indexshow页面。

假设你有这样的路线:

 resources :articles match "*path", "main#index" 

确保每个服务器端控制器呈现与客户端框架运行相同的模板(html / css / javascript / etc)。 如果没有一个控制器在请求中匹配(在这个例子中,我们只对ArticlesController有一个REST风格的操作),那么只需匹配其他任何东西,然后渲染模板,让客户端框架处理路由。 点击控制器和点击通配符匹配器的唯一区别就是能够根据向JavaScript禁用的设备请求的URL呈现内容。

根据我的理解,渲染浏览器不可见的内容是一个坏主意。 因此,当Google进行索引时,人们会通过Google访问某个页面,而且没有任何内容,那么您可能会受到处罚。 想到的是,你呈现在你display: nonediv节点的内容display: none CSS中display: none

但是,我敢肯定,如果你只是这样做并不重要:

 <div id="no-js"> <h1><%= @article.title %></h1> <p><%= @article.description %></p> <p><%= @article.content %></p> </div> 

然后使用JavaScript,当JavaScript禁用的设备打开页面时,JavaScript不会运行:

 $("#no-js").remove() # jQuery 

这样,对于Google,以及任何使用JavaScript的设备,他们都会看到原始/静态内容。 所以这些内容在那里,任何有JavaScript禁用的设备的人都可以看到。

但是,当用户访问相同的页面并且实际上启用了JavaScript时, #no-js节点将被删除,所以它不会混淆您的应用程序。 然后,您的客户端框架将通过路由器处理请求,并显示启用JavaScript时用户应该看到的内容。

我认为这可能是一个有效的,相当简单的使用技巧。 虽然这可能取决于您的网站/应用程序的复杂性。

虽然,如果不是,请纠正我。 只是想我会分享我的想法。

在服务器端使用NodeJS,浏览您的客户端代码,并通过服务器端客户端路由每个http请求(除了静态http资源)uri以提供第一个“bootsnap”(它是状态页面的快照)。 使用类似jsdom的东西来处理服务器上的jquery dom-ops。 bootnap返回后,设置websocket连接。 可能最好通过在客户端(服务器端客户端可以直接与服务器通信)上进行某种包装连接来区分websocket客户端和服务器端客户端。 我一直在做这样的事情: https : //github.com/jvanveen/rnet/

使用Google Closure模板呈现网页。 它编译为JavaScript或Java,所以很容易在客户端或服务器端渲染页面。 在第一次遇到每个客户端,呈现HTML和添加JavaScript作为链接在标题。 爬虫只会读取html,但浏览器将执行您的脚本。 所有后续的浏览器请求都可以通过api来完成,以尽量减lessstream量。