Kein Seemannsgarn: Wie Anker die Usability erhöhen

Christian Stobitzer
Christian Stobitzer

Christian Stobitzer ist SEO-Manger bei der 1&1 Internet SE. Dort ist er unter anderem für das technische SEO für den Digital Guide, ein IT-Fachportal mit Fokus auf Hostingthemen, verantwortlich. Neben dem Enterprise-SEO ist er seit über zehn Jahren selbstständig im Bereich Online-Marketing. Hierbei betreibt er eigene Projekte und berät Kunden aus den unterschiedlichsten Branchen.

Mehr von diesem AutorArtikel als PDF laden

Der Anker steht für Beständigkeit. Während er in der Liebe die Treue symbolisiert, verstehen Matrosen, wenn sie untereinander von „vor Anker gehen“ sprechen, den Gang in die nächstgelegene Spelunke. Ob aber nun in der Liebe, in der Kneipe oder auf hoher See, ein Anker hält fest. Ist es nicht genau das, was sich alle Online-Marketer in der heutigen schnelllebigen, mit Reizen überfluteten Online-Welt wünschen? Der Besucher soll den mit Liebe und/oder viel Geld produzierten Inhalt doch gefälligst auch konsumieren, und nicht nach ein bisschen Scrollen schnell wieder zum nächsten Content-Happen weiterspringen. Wie man mit grundlegendem HTML die Usability der eigenen Seite deutlich steigern kann, um so den Besucher zum Werfen des Ankers zu animieren, zeigt Ihnen nachfolgend Christian Stobitzer.

Wir brauchen Inhalt, Inhalt und noch mehr Inhalt! Holistisch soll er sein, ganzheitlich, allumfassend – so liest man überall. Dabei wusste schon Großmeister Goethe: „Mit dem Wissen wächst der Zweifel.“ Trotz Content-Schock vor der Tür (Wer soll denn das noch alles lesen!? Und auch noch auf diesem kleinen Smartphone-Bildschirm!? Zum Glück kann Alexa nicht heiser werden …), muss man aber dennoch konstatieren – es funktioniert! Google liebt Informationen, je mehr umso besser.

Was dabei aber leider immer noch häufig übersehen wird, ist die Tatsache, dass Google zwar Informationen liebt, diese aber doch bitte auch wohlaufbereitet serviert werden sollen. Wem jetzt sofort das Thema strukturierte Daten à la schema.org durch den Kopf schießt, der kann sich an dieser Stelle selbst auf die Schultern klopfen und sich bescheinigen, zumindest die neuste SEO-Sau im Online-Marketing-Dorf nicht verpasst zu haben.

Dieser Artikel soll aber tatsächlich auf eine grundlegendere Sache eingehen - auf ein Strukturierungselement, das primär dem Menschen dient und nicht einer Maschine, die durch den ganzen Auszeichnungswahn zukünftig viele Informationsanbieter im Internet überflüssig machen könnte. Es geht um Inhaltsverzeichnisse und wie diese in Form von Sprungankerlinks von Google in den Suchergebnissen (SERPs) verarbeitet werden. Nachfolgend wird darauf eingegangen, wie man interne Sprunganker innerhalb der eigenen Seite auszeichnen kann und worauf man im Hinblick auf die Verarbeitung durch den Googlebot achten muss.

Worum es geht

Damit wir alle von dem Gleichen reden, lasst uns erst einmal zwei Suchen vergleichen, dann wird es auf den ersten Blick klar; siehe hierzu Abbildung 1.

Während sich die ersten Sitelinks auf andere Unterseiten (!) bei Wikipedia beziehen, verweist der Link in der unteren Suche direkt auf eine Sektion innerhalb der Seite de.wikipedia.org/wiki/Hamster. Mit einem Klick auf den Link „Weiter zu Lebensraum“ landet man direkt im entsprechenden Abschnitt des Artikels. Man bekommt also im besten Fall nicht nur die gewünschten Informationen, sondern navigiert auch noch gleich an die Stelle, wo sie zu finden sind.

Hinweis:

Teilweise zeigt Google diese Navigationslinks innerhalb eines Dokuments auch unterhalb der Meta-Description an. Auch um diese Links geht es in diesem Artikel.

Eine super Sache. Man denkt nur einmal an den 68-jährigen Hamsterliebhaber Hans, der eigentlich nur wissen möchte, in welchem Lebensraum seine kleinen Freunde zu Hause sind. Da kann ein Artikel mit über 3.000 Wörtern über den myomorphen Kauapparat oder die rezenten Hamsterarten auf den ersten Blick ganz schön erschlagend wirken. Oder die 11-jährige Frida, die immer ganz wunde Finger durch das Smartphone-Scrollen bekommt, wenn sie mal wieder auf der Suche ist nach bestimmten Informationen zu den Verwandten ihres flinken Fritz, wie sie liebevoll ihren Goldhamster nennt.

Beide bekommen mit einem Klick sofort die Informationen, die sie suchen: Google you did a great job!

Bei immer längeren Texten (inzwischen geistert ja eine Länge von 5000 + Wörtern durch den Raum) macht solch ein Strukturierungselement, das sogar noch von Google adaptiert wird, also durchaus großen Sinn.

Zwar sieht man immer häufiger solche Sprungankerlinks direkt in den SERPs von Google, eine Selbstverständlichkeit sind sie aber noch lange nicht. Worauf man bei der Implementierung solcher Ankerlinks achten sollte, erfahrt ihr nun anschließend.

Anker ≠ Anker – jetzt wird‘s ein bisschen technisch

Ein Anker, oder auch Sprungmarke genannt, ist im Grunde nichts anderes als ein speziell ausgezeichneter Abschnitt, auf den über einen Link, den sogenannten Ankerlink, referenziert werden kann. Klickt man nun auf den Ankerlink, springt der Browser an die entsprechende Stelle des Dokuments. Der Ankerlink ist ein normaler Link, wobei dem Sprungziel im href-Attribut ein Hash-Zeichen (# – auch Raute oder Doppelkreuz genannt) vorangestellt wird.

Für das einführende Hamster-Beispiel lautet der Ankerlink dementsprechend:

<a href=“#Lebensraum“>Lebensraum</a>

So weit, so unspektakulär. Bei den Ankern wird es hingegen nun deutlich interessanter. Es gibt nämlich zwei Arten, einen Anker innerhalb des Dokuments zu implementieren.

Historisch bedingt: der name-Anker

Die erste Möglichkeit, einen internen Anker zu setzen, ist mithilfe des name-Attributs innerhalb des a-Elements. Der Sprunganker für unseren Lebensraum-Ankerlink innerhalb des Hamster-Artikels könnte demnach so lauten:

<h2><a name=“Lebensraum“>Lebensraum des Hamsters</a></h2>

Wie man auf den ersten Blick erkennen kann, bringt diese Möglichkeiten einige Nachteile mit sich. So muss mit dem a-Element ein zusätzliches Element eingefügt werden. Da der Anker nun ein Link ist, müsste dieser, falls man per CSS das a-Element gestylt hat, hier mit separaten Klassen für „normalen“ Link und Linkanker hantieren. Sonst könnte ein mögliches CSS-Styling der H2-Unterüberschrift überschrieben werden. Alternativ könnte man zwar auch den Anker alleine ohne Linktext vor die H2 stellen, was allerdings auch keine zufriedenstellende Lösung wäre.

So ist die Auszeichnung via name vor allem umständlich, aber tatsächlich noch nicht der Todesstoß für solch eine Auszeichnung des Ankers. Diesen vollführt aber nun HTML5, da dort (wie auch bei XHTML) das name-Attribut für das a-Element obsolet (deprecated) ist. Damit hätte man nicht nur unschöne Validitätsfehler beim W3C-Check, sondern es könnte im schlimmsten Fall auch jederzeit die Browser-Unterstützung wegfallen, sodass solche Anker zukünftig nicht mehr funktionieren.

Zwar hat Google bisher keine Probleme mit dem name-Anker und nimmt diesen auch in die SERPs auf, dennoch sollte aus den oberen zwei genannten Gründen auf das nachfolgende id-Attribut zurückgegriffen werden.

Der universelle Alleskönner: der id-Anker

Das id-Attribut zählt zu den HTML-Universalattributen und macht das Setzen des Ankers deutlich einfacher. Statt eines zusätzlichen Elements kann man die id in einem schon vorhandenen Element unterbringen, in unserem Beispiel beispielsweise in der H2-Überschrift:

<h2 id=“Lebensraum“>Lebensraum des Hamsters</h2>

Einzig zu beachten: Der Inhalt des id-Attributs, also der eigentliche Anker, muss innerhalb des Dokuments einzigartig sein.

Wann ein Anker greift und wann nicht

Wenn sowohl der Ankerlink als auch der Anker eingebunden wurde, bedeutet dies nicht zwingend, dass Google diesen auch innerhalb der SERPs anzeigt. Zum einen muss die Suchanfrage zum Anker passen. In unserem Hamster-Beispiel spielt Google beispielsweise bei einer generischen Suchanfrage wie „Hamster“ nicht den Ankerlink aus. Wird hingegen diese Suchanfrage mit „Hamster Lebensraum“ konkretisiert, dann erscheint der Ankerlink im Such-Snippet. Aber auch unabhängig von der konkreten Suchanfrage kann Google sich dagegen entscheiden, einen Ankerlink in den SERPs anzuzeigen.

Kein Anker ohne Link

Manch einen mögen die ausschweifenden Inhaltsverzeichnisse nerven, sodass man schnell auf die Idee kommen könnte, zwar auf der eigenen Seite Anker zu setzen, allerdings keine Links, die darauf verweisen. Da Anker aber vordergründig für die Besucher der Website und nicht für den Googlebot gedacht sind, macht dieses Vorgehen wenig Sinn und so sieht es wohl auch Google selbst.

Eigene Tests ergaben, dass, sobald auf einer Seite nur Anker, aber keine Links zu finden sind, die auf diese Anker verweisen, z. B. in Form eines Inhaltsverzeichnisses, diese Anker von Google auch nicht in den SERPs angezeigt werden. Wo diese Ankerlinks aber innerhalb des Dokuments zu finden sind, ob am Anfang der Seite, in der Sidebar oder gar am Ende, macht für Google keinen Unterschied. Auch ist es nicht entscheidend, ob das Inhaltsverzeichnis standardmäßig aufgeklappt oder zugeklappt ist. Wichtig ist hierbei aber, dass dieser Link auch wirklich innerhalb des Dokuments zu finden ist, in dem die Anker referenziert werden. Denn sonst hat man nachfolgendes Problem.

 

Hinweis

Die Benennung des Ankers ist bzgl. der Adaptation von Google nicht ausschlaggebend. Er kann auch durchaus nur aus kryptischen Zeichenkombinationen wie beispielsweise #c9285 bestehen. Dennoch sollte man, falls möglich, den Anker mit einem sprechenden Namen auszeichnen.

Absolute Anker – ein No-Go für Google

Bei der Verlinkung unterscheidet man zwischen relativen und absoluten URLs. Bei absoluten URLs wird die komplette URL als Ziel gewählt, bei relativen Links ist es hingegen lediglich der Pfad zum verlinkten Dokument.

Wie meine Tests gezeigt haben, tut sich Google mit absoluten Ankerlinks sehr schwer und verwendet diese nicht für die Anzeige in den SERPs. Wird also beispielsweise der Anker auf einer Unterseite A nur von der Unterseite B der Domain beispiel.de über einen absoluten Ankerlink (z. B. www.beispiel.de/unterseiteA.php) verlinkt, dann wird dieser Anker nicht für die Anzeige in den SERPs für die Unterseite A von Google herangezogen.

Selbst relative Verlinkungen des Ankers ignoriert Google, falls diese noch einen Pfad innerhalb des Linksziels haben. Diese Konstellation findet man beispielsweise bei der Implementierung des Base-Tags vor, dessen Base-URL für alle relativen URLs innerhalb des Dokuments gilt. Dies kann man bei vielen Typo3-Installationen beobachten, die trotz eines Inhaltsverzeichnisses mit Sprungankern keine Erweiterung im SERP-Snippet bekommen, da sie statt auf #anker folgendermaßen verlinken: /kategorie/subkategorie/UnterseiteA.php#anker.

Google zieht Ankerlinks für die Anzeige in den SERPs nur in Erwägung, wenn diese direkt auf der Seite zu finden sind, wo auch der eigentliche Anker gesetzt wurde, und der Link auch lediglich den Anker und sonst nichts beinhaltet. Abbildung 3 veranschaulicht noch einmal die verschiedenen Konstellationen, wann Google einen Ankerlink für die Anzeige in den SERPs heranzieht und wann nicht.

Anker-Indexierung verhindern!?

Ein Anker mit dem Hash-Zeichen ist streng genommen in einer URL ein Fragment. Der sogenannte Fragment Identifier ist im RFC 2396 (https://tools.ietf.org/html/rfc2396) Abschnitt 4.1 näher erläutert. Der Fragment Identifier wird nicht bei einer Anfrage an den Server übertragen, sondern wird lediglich lokal vom Browser zur Adressierung innerhalb des Dokuments genutzt.

Würden Fragmente von Google wie Parameter behandelt werden, könnte man mit solchen Ankerlinks viel Duplicate Content erzeugen. Tatsächlich ignoriert der Googlebot im Normalfall Fragmente (Quelle: John Müller von Google: einfach.st/johnmu32). So musste man beispielsweise in der Vergangenheit bei Ajax-basierten Seiten nach dem Hash-Zeichen auch immer noch ein Ausrufezeichen in die URL aufnehmen (sogenannte Hash-Bang-URLS), um sicherzustellen, dass Google diese URL auch richtig crawlen kann (Quelle: einfach.st/ajaxcrawl).

Man sollte demnach meinen, dass URLs mit einem Anker-Fragment nicht von Google indexiert werden und man sich über Duplicate Content und Ähnliches keine Gedanken machen muss. Tatsächlich konnte man aber vereinzelt immer mal wieder URLs mit einem Anker in den SERPs finden. Auch Webmaster-Trend-Analyst Johannes Müller bestätigte dies in einem Google Hangout (http://einfach.st/johnmu33). Da in solch einem Fall Backlinks auf die Hash-URL auch wirklich nur der Hash-URL zugutekommen und nicht der eigentlichen Original-URL, besteht hier Handlungsbedarf. Ein probates Mittel wären beispielsweise selbstreferenzierende Canonicals auf Seiten, die Anker besitzen. Auf nofollow sollte man die Hash-URLs hingegen nicht setzen, wie Johannes Müller in einem Reddit-Post klarstellte (http://einfach.st/reddit4). Ebenfalls keine gute Idee ist, das Crawlen der Hash-URLs per robots.txt zu verhindern. Dies ist nämlich laut John schlichtweg nicht möglich (http://einfach.st/johnmu34).

Anker-Auswertung

Da man nie ganz sicher sein kann, wann, und vor allem, bei welchen Suchanfragen Google den Ankerlink in den Suchergebnissen anzeigt, ist eine Auswertung umso wichtiger. Generell hat man zwei Möglichkeiten, um gezielt herauszufinden, ob Google die Ankerlinks anzeigt oder nicht.

Die erste Möglichkeit ist leider gleichzeitig auch die umständlichste. Mit einer Site-Abfrage der gewünschten Unterseite und der Variation von Keywords kann mit Trial-and-Error versucht werden, Google dazu zu bringen, dass die Site-Abfrage ein Snippet mit dem Ankerlink anzeigt. Im Normalfall wird dieser Ankerlink auch bei einer normalen Suchanfrage angezeigt, sofern die eigene Seite denn überhaupt rankt. Leider bringt diese Methode einige Unschärfen mit, da Google teilweise auch bei echten Abfragen bei einem Keyword einen Ankerlink ausgibt, wogegen dieser bei der Site-Abfrage nicht angezeigt wird.

Ein deutlich einfacherer Weg ist die Nutzung der Google Search Console. Hier kann man unter dem Menüpunkt „Suchanfragen à Suchanalyse“ gezielt auf die Suche nach angezeigten Ankerlinks bei schon rankenden Seiten gehen. Wer alle angezeigten Ankerlinks je Seite angezeigt haben möchte, der klickt bei „Seiten“ auf „Nach Seiten filtern“ und gibt bei „URLs mit“ einfach ein Hash-Zeichen ein, wie in Abbildung 4 veranschaulicht.

Schon sieht man alle Suchanfragen, die einen Ankerlink innerhalb der SERPs anzeigen, und man sieht auch gleich, wie oft dieser Ankerlink gezeigt und geklickt wird. Gleiches kann man auf bestimmte Unterseiten eingrenzen, wenn man vor dem Hash-Zeichen noch den Pfad/Namen der Unterseite einträgt.

Fazit

Immer längere Texte erfordern auch eine immer bessere Strukturierung. Inhaltsverzeichnisse sind hierbei ein gutes Mittel, dem Leser einen ersten Überblick über den gesamten Inhalt zu geben. Zudem unterstützen sie die Benutzerführung, indem sie eine direkte Navigation zu bestimmten Abschnitten des Dokuments ermöglichen. Im Web-Kontext stehen zur technischen Umsetzung dieser Navigationshilfen Anker und Ankerlinks bereit, die auch Google innerhalb der eigenen Suchergebnisse als Navigationshilfe für Suchende anzeigt. Hält man sich bei der Implementierung an ein paar Spielregeln, kann man mit nur wenigen Handgriffen die Usability der eigenen Seite deutlich verbessern.

Egal ob du mit einem schnittigen Segelboot, einem flotten Motorboot oder doch mit einem brachialen Dampfer in den Weiten des World Wide Web unterwegs bist - einen Anker sollte jeder haben, um den nächsten Google-Sturm gut zu überstehen.