Attacher un hashtag à une URL avec javascript

Question

Je veux construire un site ajax sans sacrifier le référencement. Ma question est la suivante : Si j'ai un lien sur ma page comme ceci :

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

...lorsque chaque lien est cliqué, je voudrais mettre à jour la barre d'adresse avec le hashtag correspondant. Ainsi, si l'on clique sur le lien "Cats", l'emplacement actuel sera le suivant http://mysite.com/#cats et je peux l'utiliser pour afficher mon contenu ajax. Si le javascript est désactivé ou si l'utilisateur est un moteur de recherche, il ira directement sur /cats.

Answer 1

Vous pouvez modifier le location.hash pour changer l'identifiant de l'ancre actuelle sans quitter la page, par exemple :

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

Ensuite :

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

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

Answer 2

Google indexera un hash s'il comporte un point d'exclamation dans sa forme : #!dogs

Il suppose ensuite que ceux-ci sont orientés AJAX :

• FAQ de Google sur AJAX
• Guide de Google sur la façon de rendre un site AJAX accessible aux robots.

Answer 3

Pour des raisons de sécurité, vous ne pouvez pas définir le paramètre window.location.href sans recharger la page en javascript.

D'après ce que j'ai vu, certaines personnes disent que Google indexera les urls mais qu'elles ne seront pas considérées comme des pages distinctes et je pense que ce n'est pas ce que vous voulez. J'ai également très peu d'expérience en matière de référencement.

Answer 4

Bien que la simplicité soit la meilleure solution, si vous souhaitez simplement automatiser ce processus ou le rendre générique, vous pouvez utiliser ce plugin léger. jquery.hashTag.js

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

Il suffit de mettre cet extrait dans $(document).ready.

Il fera le reste du travail lui-même. Comme cliquer automatiquement sur le lien dont l'identifiant a été fourni en tant que hash.

Answer 5

BenMills, personne n'a mentionné location.href, il s'agit de location.hash qui ne nécessite pas de rechargement de la page.