CODEWITHSUNDEEP
javascriptajax
alooficha
alooficha

Reputation: 333

Attaching hashtag to URL with javascript

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

Upvotes: 32

Views: 33031

Answers (6)

GMAN
GMAN

Reputation: 1

window.location.hash = 'yourhash'

Upvotes: -1

anon
anon

Reputation: 161

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

It then assumes that these are AJAX-oriented:

Upvotes: 16

Arpit Singh
Arpit Singh

Reputation: 3467

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.

Upvotes: 0

ZurabWeb
ZurabWeb

Reputation: 1368

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

Upvotes: -2

Christian C. Salvad&#243;
Christian C. Salvad&#243;

Reputation: 827416

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

Upvotes: 48

BenMills
BenMills

Reputation: 1095

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.

Upvotes: -1

Related Questions