Hashtags in URL - Ein Hindernis ?

Typo87 · **Typo87** » 19.07.2016, 06:50 **Hashtags in URL - Ein Hindernis ?**

Guten Morgen,

bei einem Kunden von mir wurde das CMS-System einem Upgrade unterzogen. In diesem Zuge wurde auch etwas an dem Design-Template geändert. So gibt es eine Unterseite, auf der der User sich mit Hilfe von Tabs durch weitere Inhalte navigiert.

Etwa so wie hier:
https://www.menucool.com/horizontal/tab-menu[b]#view1[/b]
https://www.menucool.com/horizontal/tab-menu[b]#view2[/b]
https://www.menucool.com/horizontal/tab-menu[b]#view3[/b]

Vorher waren richtige Pfade vorgesehen. Also wie zum Beispiel:
https://www.menucool.com/horizontal/tab ... view1.html[/b]
oder
https://www.menucool.com/horizontal/tab ... view2.html[/b]

Könnten hieraus irgendwelche Nachteile im Bereich des SEOs entstehen ?

Und wie sieht es bei folgenden Dingen aus:
- Sitemaps in den Webmaster-Tools (Lassen sich solche Pfade eintragen?)
- Google-Analytics (werden derartige Pfade überhaupt angezeigt?)
- Wie schauen derartige Pfade in den SERPS aus ?

Ich bin mir nicht sicher ob das eine solch gute Idee ist

Viele Grüße & Dank im Voraus

Can · **Can** » 19.07.2016, 08:12 **Hashtags in URL - Ein Hindernis ?**

1. geht ja
2. nein nicht by default. siehe unten
3. Hash weiß ich gerade nicht, der Hashbang (#!) wird auf jeden Fall in den SERPs angezeigt.

Also es geht. Man sollte noch die alten Links mit einer 301 versehen. Damit du diese Seiten in Google Analytics tracken kannst musst du den Pageview selbst senden da Analytics by defaut diesen nur sendet wenn die Seite neu geladen wurde und die Änderungen via JS keinen Reload der Seite triggern dafür und die History API nutzen.

Das erledigst du ganz einfach

ga('send', 'pageview', "/horizontal/tab-menu/#view1");

Btw. ich pflege mehrere komplett mit JavaScript erstellte Seiten und habe auch ohne HTML Prerendering keinerlei Einschränkungen.

1x wenn die Tabs zum ersten mal geladen werden und 1x bei jedem "Change".

Typo87 · **Typo87** » 19.07.2016, 10:57 **Hashtags in URL - Ein Hindernis ?**

Also kann man sagen, dass es keinen Nachteil bringt ?!

top · **top** » 19.07.2016, 11:27 **Hashtags in URL - Ein Hindernis ?**

Wie du hier an deinem eigenem Beitrag siehst, wird es weniger natürliche Links direkt auf view1, view2 und view3 geben.

Ich würde auch darauf achten, dass alle Inhalte (z. B. so wie bei deiner Beispielseite) auch ohne JS weiterhin erreichbar sind.

Typo87 · **Typo87** » 19.07.2016, 11:42 **Hashtags in URL - Ein Hindernis ?**

Also wenn ich das nun richtig erkenne, kann man eine Navigation durchaus so strukturieren, wobei dadurch aber ein gewisser "Aufwand" entsteht, weil man ein paar Dinge nachjustieren muss, damit eben KEINE Nachteile entstehen.

Herkömmliche Pfade wären also eigentlich schon besser !?

Kann man das so sagen ?

Can · **Can** » 19.07.2016, 13:50 **Hashtags in URL - Ein Hindernis ?**

Herkömmliche Pfad sind nicht besser aber ein wenig einfacher zu implementieren.

Wer bei JavaScript Lösungen die hier genannten Punkte beachtet hat defintiv keinen Nachteil und kann aus Usability Sicht sogar einen Vorteil haben.

Typo87 · **Typo87** » 20.07.2016, 09:40 **Hashtags in URL - Ein Hindernis ?**

Can hat geschrieben:1. geht ja
2. nein nicht by default. siehe unten
3. Hash weiß ich gerade nicht, der Hashbang (#!) wird auf jeden Fall in den SERPs angezeigt.

Also es geht. Man sollte noch die alten Links mit einer 301 versehen. Damit du diese Seiten in Google Analytics tracken kannst musst du den Pageview selbst senden da Analytics by defaut diesen nur sendet wenn die Seite neu geladen wurde und die Änderungen via JS keinen Reload der Seite triggern dafür und die History API nutzen.

Das erledigst du ganz einfach

ga('send', 'pageview', "/horizontal/tab-menu/#view1");

Btw. ich pflege mehrere komplett mit JavaScript erstellte Seiten und habe auch ohne HTML Prerendering keinerlei Einschränkungen.

1x wenn die Tabs zum ersten mal geladen werden und 1x bei jedem "Change".

Erstmal vielen Dank für die informativen Antworten!

Mit der Google-Analytics API habe ich mich ehrlich gesagt noch nie so detailiert ausseinandergesetzt.

Deswegen hätte ich hier noch 2 Fragen:

1) Wird die oben gennante Funktion "ga('send', 'pageview', "/horizontal/tab-menu/#view1"); " einfach nur zusätzlich in den Google-Analytics-Codeschnippsel hinzugefügt, oder handelt es sich um eine vollständig separate JavaScript-Funktion, die auf der betreffende Seite zusätzlich implementiert wird, und die dann bei Klick auf einen Tab aufgerufen wird ?

2) Ich habe etwa 5 Tabs deren Inhalte nachgeladen werden. Sollte zutreffen, dass es sich um eine separate Funktion handelt, muss ich dann pro Tab eine extra Funktion mit "ga('send', 'pageview',......." schreiben und diese dann auch pro Tab (bei Click) aufrufen ?

Ich habe zwar im Google-Developer-Manual dazu etwas gefunden, doch so richtig erschließt es sich mir noch nicht.

Vielen Dank

Can · **Can** » 20.07.2016, 13:20 **Hashtags in URL - Ein Hindernis ?**

Ist JavaScript spezifisch und hängt eher mit der Realisierung der Tabs zusammen. Bootstrap Tabs oder was für welche?

Muss über JavaScript getriggert werden, einfach in dem HTML Code schreiben reicht nicht. Sind aber nur 3 - 15 Zeilen je nach Realisierung der Tabs.

Typo87 · **Typo87** » 25.07.2016, 08:38 **Hashtags in URL - Ein Hindernis ?**

Von der Umsetzung her schaut es wie folgt aus:

Code: Alles auswählen

<script>
$&#40; document &#41;.ready&#40;function&#40;&#41; &#123;
    var tabId = window.location.hash.substr&#40;1&#41;;
    if&#40;tabId == ""&#41; &#123;
        var el = $&#40;"#tabContainer .tab&#58;first"&#41;;
        tabId = el.attr&#40;'id'&#41;.replace&#40;'tab-', ''&#41;;
    &#125;
    switchTo&#40;tabId&#41;;
    
    // initially display first img by setting height of stage - it is not visible because height = 0px;
    $&#40;'.tab.active .inline-gallery-sections'&#41;.css&#40;'height', $&#40;'.tab.active .active-section'&#41;.height&#40;&#41; &#41;;
&#125;&#41;;


function switchTo&#40;tabId&#41;&#123;
    var tabContainer = $&#40;"#tabContainer .tab"&#41;;
	$.each&#40;tabContainer, function&#40; i, val &#41; &#123;
	    var value = $&#40;val&#41;;
		value.removeClass&#40;"active"&#41;;
		if&#40;value.attr&#40;'id'&#41; == 'tab-' + tabId || value.attr&#40;'id'&#41; == 'tab-NOID'&#41;
			value.addClass&#40;"active"&#41;;
	&#125;&#41;;
	
	var tabHeaders = $&#40;"#tab-navigation .tabs li"&#41;;
	$.each&#40;tabHeaders, function&#40; i, val &#41; &#123;
	    var value = $&#40;val&#41;;
		value.removeClass&#40;"active"&#41;;
		if&#40;value.attr&#40;'id'&#41; == 'tabHeader-' + tabId&#41;
			value.addClass&#40;"active"&#41;;
	&#125;&#41;;
	
	return false;
&#125;
</script>

<div id="tab-navigation" class="tabs-wrapper">
			<ul class="tabs clearfix">		
				<li id="tabHeader-hardware" class="active"><a href="#hardware" onclick="switchTo&#40;'hardware'&#41;;">Hardware</a>
</li>
................................................

Can · **Can** » 25.07.2016, 09:00 **Hashtags in URL - Ein Hindernis ?**

1x abfeuern bei switchTo und 1x wenn die Seite das erste Mal lädt. Zusätzlich solltest du auch noch eine Funktion einbauen die prüft wenn die Seite zum ersten mal geladen wird ob schon ein Hash-Slug in der URL steht und dann das entsprechende Tab öffnen.

Typo87 · **Typo87** » 25.07.2016, 11:58 **Hashtags in URL - Ein Hindernis ?**

Also nur damit ich das richtig verstehe:

1) Erweitere ich die JavaScript-Funktion "switchTo" um den Befehl der Google-API ga('send', 'pageview', .....

Code: Alles auswählen

function switchTo&#40;tabId&#41;&#123; 
    var tabContainer = $&#40;"#tabContainer .tab"&#41;; 
   $.each&#40;tabContainer, function&#40; i, val &#41; &#123; 
       var value = $&#40;val&#41;; 
      value.removeClass&#40;"active"&#41;; 
      if&#40;value.attr&#40;'id'&#41; == 'tab-' + tabId || value.attr&#40;'id'&#41; == 'tab-NOID'&#41; 
         value.addClass&#40;"active"&#41;; 
   &#125;&#41;;

2) Lasse ich den gleichen Befehl "ga('send', 'pageview', ....." beim laden der Seite ebenfalls ausführen "onLoad".

3) Muss dann noch der IST-Zustand des aktuellen Status in der URL abgefragt werden ?!

Habe ich das soweit richtig verstanden ?

Can · **Can** » 25.07.2016, 13:00 **Hashtags in URL - Ein Hindernis ?**

1. Sicherstellen das der erste Tab keine URL hat sondern sozusagen auf /tab-menu hört (sonst hättest du doppelte URLs im Analytics).

2. immer beim PageLoad die switchTo methode aufrufen mit dem was gerade als Hash-Slug dasteht oder eben nichts um den ersten Tab zu selektieren.

3. Das send PageView steht nur im switchTo. Auch aus dem Google Analytics Code auf dieser Seite die pageview Zeile entfernen.

=> somit hast du ein Menü das Deeplinking ermöglicht und perfekt an GA submitted.

Typo87 · **Typo87** » 26.07.2016, 06:51 **Hashtags in URL - Ein Hindernis ?**

Okay, vielleicht Dank für die zahlreichen Infos.
Muss man auch bei Google-AdWords etwas berücksichtigen ?

Funktioniert eine solche Navigation problemlos mit Google-AdWords oder muss man da auch irgendwas einstellen ?

Can · **Can** » 26.07.2016, 08:24 **Hashtags in URL - Ein Hindernis ?**

Du meinst als Ziel URL in einer Anzeige auf einen Tab? Oder befindet sich in dem Tab eine mögliche Conversion die getrackt wird?

Typo87 · **Typo87** » 26.07.2016, 09:37 **Hashtags in URL - Ein Hindernis ?**

Ich habe ein an dieser Stelle eher die Sorge Google kann hier mit einer Hash-URL per Tab-Navigationen keinen optimalen Bezug zwischen Anzeige und Landingpage herstellen.

Ich nehme mal an, dass ich als Pfad eine Hash-Tag-URL angeben und verwenden kann. Aber kommt Google-AdWords dann damit ordentlich klar ?

Erkennt Google aufgrund der Keywords in der Anzeige sowohl auf der Landingpage den Zusammenhang ? Nicht das die Anzeige nicht geschaltet wird weil die Hash-URL angeblich nichts mit der Anzeige zu tun hat. Oder der Klick-Preis in die Höhe schießt.

PS: Ich sehe aber auch gerade das im Quelltext der komplette textliche Content ALLER TABS auf einer einzigen Seite bzw. HTML-Dokument liegt. Das ist SEO-Technisch absoluter Rotz (sorry)

Mag sein das es durchaus umsetzbar ist. Aber so wie ich das sehe gibt es da einige technischen Hürden die man überwinden muss damit alles passt.