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

Design and SEO for a single page dynamic website with AJAX

本文关键字：网站设计 SEO 动态 单页 AJAX 使用      更新时间：2023-09-26

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

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

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

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

除此之外，还介绍了另一个关于SEO的问题。该网站显示在谷歌中，但例如，如果搜索查询在特定部分中包含一个术语，它在单击时仍然加载默认的#主页，而不是该术语所在的特定部分。我该如何更正？

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

谷歌根本看不到这些帖子。使用Googlebot工具表明，爬网程序看到博客部分总是空的，因此没有任何博客文章被索引。

我能换什么？

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

建立一个正常的站点。给每个页面一个正常的URL。让谷歌为这些网址建立索引。如果你没有可供谷歌索引的页面，那么它就无法索引你的内容。

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

当链接被跟踪时（或者在没有JS的情况下执行其他加载新页面的操作），使用JavaScript将当前页面转换为目标页面。

使用pushState将URL更改为如果不使用JavaScript就会加载的URL。（这样做而不是使用片段标识符（#）破解）。

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

这会导致以下情况：

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

请注意，还有一种（不推荐）hashbang技术，它将一个页面的网站破解成谷歌可以索引的形式，但它并不健壮，不适用于任何其他非JS客户端，而且几乎与正确处理事情一样工作量大。

相关文章：