使用 javascript 将主题标签附加到 URL答案

【问题标题】：Attaching hashtag to URL with javascript使用 javascript 将主题标签附加到 URL
【发布时间】：2011-01-22 21:57:41
【问题描述】：

我想在不牺牲 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

【问题讨论】：

只有两个注意事项：1）这不称为“标签”（这是 Twitter 术语，表示完全不相关的东西）；它被称为片段标识符或锚标识符（请参阅 HTML 规范）。 2) 元素的 id 中不应该有 # 符号，即它应该是 id="cats"，这将对应于 /some-url#cats。

标签： javascript ajax

【解决方案1】：

如果哈希表中有感叹号，Google 会将其编入索引：#!dogs

然后假设这些是面向 AJAX 的：

【讨论】：

【解决方案2】：

虽然简单是最好的，但如果你只是想自动化这个过程或使其通用化，那么你可以使用这个精简版插件jquery.hashTag.js

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

只需将这个 sn-p 放入 $(document).ready。

它将自己完成其余的工作。就像自动点击 id 作为哈希值提供的链接一样。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以更改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...
});

【讨论】：

哇！我不知道这很容易。现在我可以在 ajax 中制作我所有未来的网站，并且仍然可以让我的网站被抓取和索引！ :D
不过，只有一件事，如果用户将此 URL 加入书签或从另一个站点单击它，则 id 不会返回当前哈希值。它返回空。这个问题有方法解决吗？如何检查哈希 onload 和 onclick？
您只需要在页面加载时检查location.hash属性的值，它将包含标识符，包括#符号，例如：if (location.hash == '#dogs') { /*...*/ }
对不起，如果这是一个愚蠢的问题，但为什么链接不像href="#cats" 或href="#dogs"。你不能使用href 来更改location.hash 属性吗？它似乎比拥有id...

【解决方案5】：

出于安全原因，您不能在不使用 javascript 重新加载页面的情况下设置 window.location.href。

据我所知，有些人说 Google 会将 # 个网址编入索引，但它们不会被视为单独的页面，我认为这不是您想要的。我对搜索引擎优化的经验也很少。

【讨论】：