javascript - “单页” JS网站和SEO

Question

如今，有许多很酷的工具可用于创建功能强大的“单页” JavaScript网站。在我看来，这是通过让服务器充当API（仅此而已）和让客户端处理所有HTML生成内容来正确完成的。这种“模式”的问题是缺乏搜索引擎支持。我可以想到两种解决方案：


当用户进入网站时，让服务器完全按照客户端在导航时的方式呈现页面。因此，如果我直接进入http://example.com/my_path，则服务器将呈现与客户端通过pushState进入/my_path时相同的内容。
让服务器仅为搜索引擎机器人提供一个特殊的网站。如果普通用户访问http://example.com/my_path，则服务器应为其提供JavaScript重型版本的网站。但是，如果Google漫游器访问，服务器应为其提供一些最小的HTML，其中包含我希望Google索引的内容。


here进一步讨论第一种解决方案。我一直在一个网站上这样做，这不是一个很好的体验。它不是DRY，在我的情况下，我必须为客户端和服务器使用两个不同的模板引擎。

我想我已经看到了一些不错的Flash网站的第二种解决方案。与第一种方法相比，我更喜欢这种方法，并且在服务器上使用正确的工具可以轻松完成。

所以我真正想知道的是以下内容：


您能想到更好的解决方案吗？
第二种解决方案的缺点是什么？如果Google以某种方式发现我没有像普通用户一样为Google机器人提供完全相同的内容，那么我会在搜索结果中受到惩罚吗？

Answer 1

尽管对于开发人员来说，＃2可能更“轻松”，但它仅提供搜索引擎爬网。是的，如果Google发现您提供的内容不同，您可能会受到处罚（我不是专家，但是我听说过这种情况）。

SEO和可访问性（不仅适用于残障人士，而且可通过移动设备，触摸屏设备和其他非标准计算/支持互联网的平台进行可访问性）都具有相似的基本理念：“可访问”（即可以被所有这​​些不同的浏览器访问，查看，阅读，处理或以其他方式使用）。屏幕阅读器，搜索引擎搜寻器或启用JavaScript的用户都应该能够使用/索引/理解您网站的核心功能，而不会出现问题。

根据我的经验，pushState不会增加此负担。它只会将过去的想法和“如果有时间的话”带到Web开发的最前沿。

您在选项＃1中描述的通常是最好的方法-但是，与其他可访问性和SEO问题一样，在拥有大量JavaScript的应用中使用pushState进行此操作需要预先计划，否则将成为一个沉重的负担。应该从一开始就将其烘焙到页面和应用程序体系结构中-改造很痛苦，并且会导致不必要的重复。

最近，我一直在pushState和SEO上进行一些不同的应用程序开发，我发现我认为这是一种很好的方法。它基本上遵循您的项目＃1，但考虑到没有复制html /模板。

大多数信息可以在以下两个博客文章中找到：

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等），并创建了Backbone可以使用的客户端模板，以及我的Jasmine JavaScript规范。这消除了服务器端和客户端之间标记的重复。

从那里开始，您需要采取一些额外的步骤来使JavaScript与服务器呈现的HTML一起使用-真正的渐进增强功能；接受已交付的语义标记并使用JavaScript对其进行增强。

例如，我正在使用pushState构建图像库应用程序。如果从服务器请求/images/1，它将在服务器上渲染整个图像库，并将所有HTML，CSS和JavaScript发送到您的浏览器。如果您禁用了JavaScript，它将可以正常工作。您执行的每个操作都会从服务器请求一个不同的URL，并且服务器将为您的浏览器呈现所有标记。但是，如果启用了JavaScript，则JavaScript将获取已经渲染的HTML以及服务器生成的一些变量，然后从那里接管。

这是一个例子：

<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提供给视图实例。加载第一个视图时，我没有调用render或使视图为我生成el。在视图启动并运行并且页面全部为JavaScript之后，我有一个可用于的渲染方法。这使我以后可以根据需要重新渲染视图。

在启用JavaScript的情况下，单击“说我的名字”按钮将导致出现一个警告框。没有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>

现在，您需要遍历此列表，并将Backbone视图和模型附加到每个<li>项目。使用data-id属性，您可以轻松找到每个标签来自的模型。然后，您将需要一个足够聪明的将其自身附加到此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>标记，并为每个视图对象附加具有正确模型的视图对象。它为模型的名称更改事件设置事件处理程序，并在发生更改时更新元素的显示文本。



这种获取服务器呈现的html并让我的JavaScript接管并运行它的过程，是使事情不断获得SEO，可访问性和pushState支持的好方法。

希望能有所帮助。