Menu
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
694
In a URL, a hash mark, number sign, or pound sign ( # ) points a browser to a specific spot in a page or website. It is used to separate the URI of an object from a fragment identifier. When you use a URL with a # , it doesn't always go to the correct part of the page or website.
'#' is used to selected a certain element you gave an ID to, it's mostly used because if a selection has multiple of the target such as two divs, you can select each on individual one directly. The # is used mostly for convenience , it's a quick and easy way to tell if something is an ID.
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...
});
Google will index a hash if it has an exclamation mark in the form: #!dogs
It then assumes that these are AJAX-oriented:
16
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
