Backbone.js让路由器seo友好

时间:2012-11-04 01:41:41

标签: backbone.js url-rewriting seo single-page-application

我是backbone.js的新手,所以这可能是一个简单的问题。

路由器似乎使用语义敏感的网址,但它们不是非常用户友好。

在我见过的例子中,他们使用了:

  

local.com/post/id/1

但是在wordpress中我会选择将其重写为:

  

local.com/2012-11-03-backbone-js-router-question.html

这将通过一个大的重写表运行并转换为正确的控制器/动作。我不想将路由器暴露给突出的用户。

我对这个问题的最终申请是考虑到电子商务:

  • cms页面 local.com/about-us.html
  • 产品页面 local.com/blue-tooth-headset.html
  • 类别页面 local.com/phones.html
  • 产品类别页面 local.com/phones/blue-tooth-headset.html

所以我的问题是,在使用backbone.js时如何获得漂亮的网址?

我对选项的看法是:

  1. 你没有得到seo友好的网址
  2. 你有一张巨大的地图,它必须坐在客户端上:(
  3. 每次你要更改网址时,你都会有一个快速的ajax查找漂亮的网址,你需要等待漂亮的网址在你推送状态之前回来。
  4. 部分以字母为前缀,即local.com/p/product-name.html,p实际上用于区分哪个路由器,另一个可以是c用于类别

2 个答案:

答案 0 :(得分:4)

骨干路线几乎可以是任何东西。关于电子商务,你只需要使用冗长的网址:

<category>/<product-name>
television/samsung-i178

但是,这并不是关于SEO的关键问题。继去年“熊猫”更新后,谷歌在网址关键词中的价值大多增加了。

您应该考虑的是即使未启用javascript,也会在页面上提供后备和内容。但麻烦的是,您可能不希望对站点进行两次编码:前端模板/分页引擎+在后端加上相同的东西。

即将推出的技术将使用node.js(Mojito,Meteor等)来帮助解决这个问题,但是现在它们并不是最稳定的项目。并且,我认为在生产中使用这些可能有点早;如果您没有一个非常称职的团队来让您的服务器继续运行并在需要时调试这些项目。

无论如何,我的意思是,如果你的项目中SEO很重,那就不要使用骨干。

修改: 关于你在问题中添加的内容,我认为这很容易构思。

在Backbone中,您使用变量路由器,如下所示:

routes: {
  "product/:url" : "product" 
}

product: function( prettyUrl ) {
  console.log( prettyUrl );

  // Then you fetch your server
  server.fetch( prettyUrl );
}

然后在您的服务器数据库上,您只需通过产品漂亮网址获取数据库,例如SELECT * FROM product WHERE prettyurl=$prettyURL(或类似的东西,自从我使用mySQL以来已经很长时间了。)

这样,您不必在客户端保留地图,只需使用服务器提供的漂亮网址来获取完整产品。

因此,在您的收集中,当您致电fetch时,服务器应该返回给您:

{
  id: 1,
  name: "Product XYZ",
  prettyUrl: "product-xyz"
},
{
  id: 2,
  name: "Mac Book Pro",
  prettyUrl: "mac-book-pro"
}

这样,每个漂亮的网址都是用他的模型管理的,而不是在路由器中。这绝对是管理此类URL的方法。这主要是那里的Wordpress或Drupal。只有他们在后端进行。

答案 1 :(得分:2)

有一个仅限HTML5的解决方案,可让您将网址保持在Backbone中。

使用pushState set初始化Backbone.history。 http://documentcloud.github.com/backbone/#History-start

请注意:

If your application is not being served from the root url / of your domain, be sure to tell
History where the root really is, as an option:
Backbone.history.start({pushState: true, root: "/public/search/"})

然后像这样调用history.navigate:

navigateToTodo () {
    Backbone.history.navigate('/todos/' + this.model.toJSON().id, {trigger: true});
    return this;
},

或者只是在整个应用中使用传统的href链接。

此处的示例和说明: From Hashbangs to HTML5 PushState

IE的后备: Fallback for IE

编辑:所以过了一段时间,现在让我了解类似的问题,我想我理解你的问题。你想要的是与Backbone无关的转换这样的文字:

"Marissa Mayer can't stop acquiring things" to this "marissa-mayer-can-t-stop-acquiring..."

**你的问题是误导性的,因为你认为Backbone正在为你做这件事,但事实并非如此。 所以答案是: 你需要的是Urlify(还有其他人,但根据我的经验不太好。)

https://github.com/aliem/urlify

- 我会留下旧的答案,因为它似乎帮助了搜索此内容的人 -