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

Question

我设计了一个网站，整个网站包含在一个页面（index.php）中。 在页面内，

<section>

标签定义了网站的不同部分（主页、联系人、博客等）

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

更具体地说，这是通过使用 url 中的哈希并处理

hashchange

事件来完成的。这会产生诸如 www.site.com/#home（如果没有其他哈希值则为默认值）和 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。

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

我可以改变什么？

（我不知道这是否应该出现在网站管理员 stackexchange 上，如果放错地方了，很抱歉）

Answer 1

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

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

当点击链接（或执行其他无需 JS 即可加载新页面的操作）时，使用 JavaScript 将当前页面转换为目标页面。

使用

pushState

将 URL 更改为未使用 JavaScript 时会加载的 URL。 （这样做而不是使用片段标识符（

#

）黑客）。

确保您监听历史事件，以便在单击后退按钮时可以将页面转换回来。

这会导致以下情况：

1. 用户从 Google 到达

   /foo

2. /foo

   包含

   /foo

   页面
的所有内容
3. 用户点击链接到

   /bar

4. JavaScript 更改页面内容以匹配用户直接访问

   /bar

   所获得的内容，并将 URL 设置为

   /bar

   和

   pushState

---

请注意，还有（不推荐）hashbang 技术，它将单页网站破解为 Google 可以索引的形式，但这种技术并不健壮，不适用于任何其他非 JS 客户端，并且几乎无法使用。做事和正确做事一样多。