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

Question

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

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

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

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

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

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

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 所获得的内容，并将 URL 设置为 /bar 和 pushState

---

请注意，还有 (not recommended) hashbang 技术可以将单页网站破解为 Google 可以索引的形式，但这种技术并不可靠，不适用于任何其他非 JS 客户端，并且几乎和正确地做事一样多。