javascript - 使用 AJAX 设计和 SEO 单页动态网站

Question

我设计了一个网站，其中整个网站都包含在一个页面 (index.php) 中。在页面内，<section>标签定义站点的不同部分(主页、联系人、博客等)

导航是通过始终可见的按钮实现的，单击时使用 javascript 更改部分的可见性，以便在任何时候只显示一个部分。

更具体地说，这是通过使用 url 中的哈希值并处理 hashchange 来完成的事件。这会生成诸如 www.site.com/#home(如果没有其他哈希值则为默认值)和 www.site.com/#contact 之类的 url。

我想知道这是否是一个好的设计。它有效，但我觉得必须有更好的方法来实现同样的事情？澄清一下，我的目标是一次加载所有主要内容的网站，以便在初始加载后不再加载页面，并且在部分之间移动会更顺畅。

在此之上，引入了另一个关于SEO的问题。该网站显示在谷歌中，但如果例如搜索查询包含特定部分中的术语，则它在单击时仍会加载默认的#home 页面，而不是找到该术语的特定部分。我该如何纠正这个问题？

最后，其中一个部分是博客部分，这是唯一不会一次加载所有部分的部分，因为默认情况下它会从数据库中加载最新的帖子。当用户从列表中选择不同的帖子(列表本身是使用 AJAX 加载的)时，AJAX 用于获取和显示新帖子，而 pushState 会更改历史记录。同样，为了给每个帖子一个可以在外部引用的唯一 url，菜单更改了由 javascript 处理的 url，导致 url 如 www.site.com/?blogPost=2#blog和 www.site.com/?blogPost=1#blog .

Google 根本看不到这些帖子。使用 Googlebot 工具显示抓取工具将博客部分视为始终为空，因此没有任何博客文章被编入索引。

我能改变什么？

(我不知道这是否应该在网站管理员stackexchange上，如果发错了请见谅)

Answer 1

建立一个正常的网站。给每个页面一个普通的 URL。让 Google 索引这些 URL。如果您没有供 Google 编制索引的网页，则它无法为您的内容编制索引。

使用 JS/Ajax 逐步增强站点。

当点击一个链接(或执行其他没有 JS 的情况下会加载新页面的操作)时，使用 JavaScript 将当前页面转换为目标页面。

使用pushState将 URL 更改为不使用 JavaScript 时将加载的 URL。 (执行此操作而不是使用片段标识符 (#) hack)。

确保你listen for history events这样您就可以在单击后退按钮时将页面转换回来。

这会导致以下情况:

1. 用户从 Google 到达 /foo
2. /foo 包含/foo 页面的所有内容
3. 用户点击链接到/bar
4. JavaScript 更改页面内容以匹配用户从直接转到 /bar 获得的内容，并使用 pushState< 将 URL 设置为 /bar/

---

请注意，还有一种 ( not recommended ) hashbang 技术，它可以将单页网站改造成 Google 可以索引的形式，但这种技术不够稳健，不适用于任何其他非 JS 客户端，并且是工作量几乎与正确做事一样多。