Anhängen eines Hashtags an eine URL mit javascript

Question

Ich möchte eine Ajax-Site aufbauen, ohne auf SEO zu verzichten. Meine Frage ist: Wenn ich einen Link auf meiner Seite wie diesen habe:

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

...wenn jeder Link angeklickt wird, würde ich gerne die Adressleiste mit dem entsprechenden Hashtag aktualisieren. Wenn also der Link "Cats" angeklickt wird, lautet der aktuelle Standort http://example.com/#cats und ich kann dies verwenden, um meine Ajax-Inhalte anzuzeigen. Wenn Javascript ausgeschaltet ist oder der Benutzer eine Suchmaschine ist, wird er direkt zu /cats gehen

Answer 1

Sie können die location.hash Eigenschaft wird der aktuelle Ankerbezeichner geändert, ohne dass die Seite verlassen werden muss, z.B. könnte man:

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

Dann:

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

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

Answer 2

Google indiziert eine Raute, wenn sie ein Ausrufezeichen in der Form enthält: #!dogs

Sie geht dann davon aus, dass diese AJAX-orientiert sind:

• Googles FAQ über AJAX
• Anleitung von Google, wie man eine AJAX-Website crawlbar macht

Answer 3

Sie können die window.location.href aus Sicherheitsgründen nicht setzen, ohne die Seite in Javascript neu zu laden.

Nach dem, was ich gesehen habe, sagen einige Leute, dass Google # Urls indizieren wird, aber sie werden nicht als separate Seiten betrachtet und ich denke, das ist nicht das, was Sie wollen. Ich habe auch sehr wenig Erfahrung mit SEO.

Answer 4

Obwohl Einfachheit am besten ist, aber wenn Sie nur diesen Prozess automatisieren oder generisch machen wollen, können Sie dieses Lite-Plugin verwenden jquery.hashTag.js

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

Fügen Sie einfach diesen Ausschnitt in $(document).ready ein.

Den Rest der Arbeit erledigt es selbst. Zum Beispiel klickt es automatisch auf den Link, dessen ID als Hash angegeben wurde.

Answer 5

BenMills, niemand erwähnt location.href, es ist über location.hash, die nicht Seite neu laden erfordert.