带有 pushstate SEO 的可抓取 javascript spa

Question

我制作了一个单页应用程序。我已阅读以下文章create-crawlable-pushstate。 我在使用 hashbang 时遇到了问题。这对我来说似乎是一个解决方案。但我不太确定我是否能理解那里发生的事情。这是文章中的一个示例：

// We're using jQuery functions to make our lives loads easier
$('nav a').click(function(e) {
      url = $(this).attr("href");

      //This function would get content from the server and insert it into the id="content" element
      $.getJSON("content.php", {contentid : url},function (data) {
            $("#content").html(data);
      });

      //This is where we update the address bar with the 'url' parameter
      window.history.pushState('object', 'New Title', url);

      //This stops the browser from actually following the link
      e.preventDefault();
}

这很好，但谷歌如何知道内容可用。 getJson 函数是异步的，所以在加载内容之前会推送状态。我的想法是在加载内容后调用 pushstate 以显示链接已准备好。

1. 在我的场景中，用户单击了 href。
2. 路由器捕获哈希变化并调用函数。 （我可以在内容生成后将点击事件覆盖为pushstate。
3. 内容将被加载和生成。 （时间流逝）

Answer 1

Google 不关心 JavaScript。它所看到的只是 URL。

您的服务器仍然需要为每个给定的 URL 生成适当的页面。

用JS：

1. 客户端（浏览器、googlebot 等）请求http://example.com/whatever/whatever/whatever
2. 服务器响应/whatever/whatever/whatever 的页面
3. 客户端点击链接：
   • href="/something/something/something
   • Ajax</li> <li>preventDefault`
4. 客户端使用 Ajax 加载内容
5. 客户端将 URL 更改为 /something/something/something 而不重新加载整个页面

没有 JS：

1. 客户端（浏览器、googlebot 等）请求http://example.com/whatever/whatever/whatever
2. 服务器响应/whatever/whatever/whatever 的页面
3. 客户端点击链接：
   • href="/something/something/something
   • Ajax</li> <li>preventDefault`
4. 客户端去/something/something/something（因为没有JS触发preventDefault）

然后，有人直接转到/something/something/something，同样适用。服务器直接传递/something/something/something 的内容。然后 JS 在单击链接时执行 Ajax 操作（如果 JS 可用）。