knockout.js - 如何提高单页应用的SEO

Question

我们已经建立了一个职位空缺搜索引擎。出于速度和良好用户体验的原因，我们使用了“单页应用程序”(SPA)的架构。我们知道对于 SPA 架构来说，启用 SEO 是一项挑战，因此我们做了很多优化来启用 SEO。尽管 Google 正在为我们的网页编制索引，但我们在 Google 中的排名很差，我们正在寻求改进建议。我们关注了Google’s recommendations , 但不满意。

SPA 不能被 Google-bot 直接索引，因为 Google bot 不会执行客户端 javascript。如果没有 javascript，我们的站点几乎不包含任何内容，因为数据是以 json 格式异步读取的，并且大部分 HTML 是在客户端呈现的。渲染由名为“knockout”的框架完成。 ”，它可以将 HTML 模板数据绑定(bind)到 javascript 对象。SPA 中的不同页面可以使用客户端 URL 进行寻址。为了让 Google 可读这些页面，我们的客户端 URL 确实包含一个“#”后跟一个“!”。这种“hash-bang”语法会触发 Google 机器人将 url 重写为特殊的“服务器端”url。当在我们的服务器上访问这个特殊的 url 时，我们会触发一个“ headless 浏览器”来在服务器上呈现页面。然后将完整的 HTML 语法(在执行 javascript 之后)发送到客户端。这个所谓的 HTML 快照可以被 Google 机器人用来索引页面。为了告诉 Google 我们的 SPA 中存在哪些页面，我们提供了一个 sitemap.xml，其中包含可以访问的不同 url。当我们要求 Google 显示从我们的站点编入索引的页面时，我们看到 Google 机器人确实访问了我们的页面并将其编入索引。所以我们的结论是，从技术上讲，我们的工作做得很好，但这些页面似乎都没有足够高的排名出现在正常的 Google 搜索中。不知道是不是跟我们使用SPA架构有关系，结果就是找不到我们的页面。

我们想知道是否有人对这种技术在 Google 排名方面有相同的经验，是否有人有其他建议可以帮助我们提高 SPA 的 SEO 排名(无需将网站完全更改为传统服务器-侧面渲染技术)。

Answer 1

要解决这个问题，您需要做一些事情:

1. 真实网址。真实<a>带有指向这些的 hrefs 的标签。
   • 当然，您可以使用 pushState 来保持 AJAX 行为
   • http://example.com/app#this_is_not_a_real_url_for_this_purpose
   • http://example.com/app/this_is_a_real_url_for_this_purpose
2. 您需要让服务器根据明确请求生成预填充 JSON 的页面
   • 这是最容易使用 PhantomJS 或类似工具完成的。
   • 如果您假设内容的更改频率低于其读取频率(即大多数成功的网站)，您可以使用队列将这些页面构建到静态文件中
   • 然后告诉您的网络服务器发送 index.html 如果请求的文件不存在

对于“软请求”(他们单击一个链接，您使用 JSON/AJAX 来覆盖)，它将像当前一样工作。

对于硬请求(他们点击来自另一个站点的链接，按 F5，或者是 Googlebot 抓取您的 URL)，您向他们发送预编译版本:

1. 改善搜索引擎优化
2. 提高页面加载性能(这也是 SEO 的好处)
3. 不需要任何困难的服务器处理，因为页面已经构建好