Attaching hashtag to URL with javascript

Question

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

   <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

Just two notes: 1) That isn't called a "hashtag" (which is Twitter jargon for something totally unrelated); it's called a fragment identifier or anchor identifier (see the HTML spec). 2) You shouldn't have a # symbol in an element's id, i.e. it should be id="cats", which will correspond to /some-url#cats. — Jordan Running, Mar 02 '10 at 20:36

score 48 · Accepted Answer · answered Mar 02 '10 at 20:40

48

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...
});

answered Mar 02 '10 at 20:40

Christian C. Salvadó

807,428
183
922
838

1

WOW! I didn't know it was this easy. Now I can make all my future sites in ajax and still get my site crawled and indexed! :D – alooficha Mar 02 '10 at 20:49
Only one thing though, if the user bookmarks this URL or clicks to it from another site, id doesn't return the current hash. It returns empty. Is there a solution to this? How can I check for the hash onload as well as onclick? – alooficha Mar 02 '10 at 20:54
1

You just have to check the value of the `location.hash` property when the page loads, it will contain the identifier, including the `#` symbol, e.g.: `if (location.hash == '#dogs') { /*...*/ }` – Christian C. Salvadó Mar 02 '10 at 21:00
sorry if it's a stupid question but why aren't the links something like `href="#cats"` or `href="#dogs"`. Can't you use the `href` to change the `location.hash` property? It seems less redundant than having also an `id`... – ithil Oct 09 '13 at 10:41

score 16 · Answer 2 · edited Feb 02 '14 at 13:46

16

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

It then assumes that these are AJAX-oriented:

edited Feb 02 '14 at 13:46

drdaeman

11,159
7
59
104

answered Mar 19 '11 at 23:06

anon

161
1
2

Arpit Singh · Answer 3 · 2013-09-10T07:46:31.423

0

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

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

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

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

edited Sep 10 '13 at 07:46

answered Sep 10 '13 at 05:56

Arpit Singh

3,387
2
17
11

score 0 · Answer 4 · answered Mar 02 '10 at 20:39

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

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.

score -1 · Answer 5 · answered Aug 06 '13 at 19:41

-1

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

answered Aug 06 '13 at 19:41

ZurabWeb

1,241
1
12
21

Attaching hashtag to URL with javascript

5 Answers5

Linked