使用JavaScript将标签附加到URL

Question

我希望能够构建一个具有良好SEO的ajax网站。我的问题是： 如果我的页面上有像这样的链接：

   <a href="http://example.com/cats" id="cats">Cats</a>
   <a href="http://example.com/dogs" id="dogs">Dogs</a>

当每个链接被点击时，我希望更新地址栏与相应的哈希标签。因此，如果单击“Cats”链接，则当前位置将为http://example.com/#cats，我可以使用此来显示我的ajax内容。如果禁用JavaScript或用户是搜索引擎，则它们将直接转到/cats

- alooficha

---

只是两个注意事项：1）那不叫做“hashtag”（这是Twitter的术语，与此完全无关），它被称为片段标识符或锚点标识符（请参阅HTML规范）。2）你不应该在元素的id中使用#符号，即应该是id="cats"，这将对应于/some-url#cats。 - Jordan Running

Answer 1

你可以更改location.hash属性，这将更改当前锚点标识符而不会离开页面，例如你可以：

<a href="http://mysite.com/cats" id="cats" class="ajaxLink">Cats</a>
<a href="http://mysite.com/dogs" id="dogs" class="ajaxLink">Dogs</a>

然后：

$('.ajaxLink').click(function (e) {
  location.hash = this.id; // get the clicked link id
  e.preventDefault(); // cancel navigation

  // get content with Ajax...
});​

- Christian C. Salvadó

---

哇！我不知道这么容易。现在我可以用ajax制作所有未来的网站，仍然可以让我的网站被爬取和索引！:D - alooficha

只有一件事，如果用户收藏此URL或从其他网站点击它，则不会返回当前哈希。它会返回空。有解决方法吗？我如何在onload和onclick时检查哈希？ - alooficha

当页面加载时，您只需检查location.hash属性的值，它将包含标识符，包括#符号，例如：if (location.hash == '#dogs') { /*...*/ }。 - Christian C. Salvadó

抱歉，这可能是一个愚蠢的问题，但为什么链接不像 href="#cats" 或 href="#dogs" 这样呢？你不能使用 href 来更改 location.hash 属性吗？这似乎比也有一个 id 更少冗余... - ithil

Answer 2

如果一个哈希标记中有感叹号，形式为#!dogs，谷歌会对其进行索引。

然后，谷歌会认为这些标记是面向 AJAX 的：

• 谷歌关于 AJAX 的常见问题解答
• 谷歌的 AJAX 网站可爬行性指南

- anon

Answer 3

虽然简单最好，但如果您想自动化此过程或使其通用化，则可以使用这个轻量级插件jquery.hashTag.js

$('a').hashTag({
    source: function() {
      return $(this).attr('id');
    }
  });

只需将此片段放置在 $(document).ready 中。

它会自行完成其余的工作。 例如，自动点击 ID 为哈希提供的链接。

- Arpit Singh

Answer 4

出于安全原因，在JavaScript中无法设置window.location.href而不重新加载页面。

据我所见，有些人说Google会索引# URL，但它们不会被视为单独的页面，我认为这不是你想要的。我在SEO方面也缺乏经验。

- BenMills

Answer 5

BenMills，没有人提到location.href，这是关于location.hash的，它不需要重新加载页面。

- ZurabWeb