使用javascript将hashtag附加到URL

I want to build an ajax site without sacrificing SEO. My question is: If I have link on my page like this:

我想在不牺牲SEO的前提下构建一个ajax站点。我的问题是:如果我的页面上有这样的链接:

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

...when each link is clicked I would like to update the address bar with the corresponding hashtag. So, if "Cats" link is clicked the current location will be http://example.com/#cats and I can use this to show my ajax content. If javascript is off or user is search engine, they will go directly to /cats

…单击每个链接时，我希望使用相应的hashtag更新地址栏。因此，如果单击“Cats”链接，当前位置将是http://example.com/# Cats，我可以使用它来显示我的ajax内容。如果javascript关闭或用户是搜索引擎，他们将直接进入/cats

5 个解决方案

#1

You can change the location.hash property, it will change the current anchor identifier without navigating away form the page, for example you could:

您可以更改位置。哈希属性，它将更改当前锚定标识符，而不导航离开页面，例如:

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

Then:

然后:

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

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

#2

Google will index a hash if it has an exclamation mark in the form: #!dogs

如果在表单中有一个感叹号，谷歌将索引一个散列。

It then assumes that these are AJAX-oriented:

然后假设这些是面向ajax的:

Google's FAQ about AJAX
谷歌对AJAX的FAQ
Google's guide on how to make AJAX website crawlable
谷歌关于如何使AJAX网站可爬行的指南

#3

You cannot set the window.location.href without reloading the page in javascript for security reasons.

不能设置window.location。出于安全原因，href不重新加载javascript中的页面。

From what I've seen some people are saying Google will index # urls but they will be not considered separate pages and I think that is not what you want. I also have very little experience with SEO.

从我看到的一些人说谷歌将索引# url，但他们不会被认为是单独的页面，我认为那不是你想要的。我对SEO也没什么经验。

#4

Although simplicity is best, but if you just want to automate this process or make it genericise then you can use this lite plugin jquery.hashTag.js

虽然简单性是最好的，但是如果您只是想自动化这个过程或使它成为通用的，那么您可以使用这个lite插件jquery.hashTag.js

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

Just put this snippet inside $(document).ready.

只需将这个代码片段放在$(document).ready中。

It will do rest of the work itself. Like auto clicking on the link whose id was provided as the hash.

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

#5

-1

BenMills, noone mentioned location.href, it's about location.hash which does not require page reload.

BenMills,没有人提到的位置。href,大概位置。不需要页面重载的散列。

#1