javascript - 带有 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();
}

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

1. 在我的场景中，用户点击了 href。
2. 路由器捕获哈希变化并调用一个函数。 (我可以在内容生成后将click事件覆盖为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>防止默认`
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>防止默认`
4. 客户转到 /something/something/something (因为没有 JS 来触发 preventDefault )

然后后来有人直接去/something/something/something同样适用。服务器传送 /something/something/something 的内容直接地。然后 JS 在单击链接时执行 Ajax 操作(如果 JS 可用)。