English
HTML, Mobile & Barrierefreiheit

Crawlbare Links (a href)

Auch genannt: a href, crawlbarer Link

Crawlbare Links sind Verweise, denen ein Crawler zuverlässig folgen kann. Bei Google sind das <a>-Elemente mit einem href-Attribut, das eine auflösbare URL enthält. Reine Klick-Handler ohne Ziel-URL findet Google nicht zuverlässig.

Was bedeutet das für SEO?

Google entdeckt neue URLs vor allem über Links, und laut Dokumentation nur über <a>-Elemente mit href. Eine Navigation, die per JavaScript auf Klick die Seite wechselt, ohne dass im HTML ein solches Element mit Ziel steht, zeigt dem Crawler keine Wege zu den Zielseiten.

Ein onclick an einem <a href="/schuhe"> ist unproblematisch, solange das href ein echtes Ziel enthält. Bei Single-Page-Apps rät Google, Ansichten über die History API zu wechseln und keine URL-Fragmente (#/produkte) zu verwenden. Bei Bildern als Link dient das alt-Attribut als Ankertext.

Roh-HTML und gerendertes HTML im VergleichLinks das Roh-HTML, wie der Server es schickt: leerer Title und ein leeres div mit der ID app. Rechts dasselbe Dokument nach dem Rendering: JavaScript hat Title, H1 und zwei Links eingefügt. Erst im gerenderten HTML sieht Google diese Inhalte und Links.ROH-HTMLAntwort des ServersGERENDERTES HTMLDOM nach JavaScriptJavaScript<head><title></title>leer</head><body><div id="app"></div>leer<script src="app.js"></body><head>+<title>Laufschuhe</title></head><body><div id="app">+<h1>Laufschuhe</h1>+<a href="/damen/">Damen</a>+<a href="/herren/">Herren</a></div><script src="app.js"></body>Schematisches Beispiel. Was erst JavaScript einfügt, steht nur im gerenderten HTML.
Im Roh-HTML einer JavaScript-Seite fehlen Title, Überschrift und Links. Google indexiert das gerenderte HTML und sucht dort erneut nach Links. Quelle: Google Search Central: Grundlagen von JavaScript-SEO.

Beispiel

HTML
<!-- crawlbar -->
<a href="/produkte/schuhe">Schuhe</a>
<a href="/produkte/schuhe" onclick="track()">Schuhe</a>

<!-- nicht zuverlässig crawlbar -->
<span href="/produkte/schuhe">Schuhe</span>
<a onclick="goto('/produkte/schuhe')">Schuhe</a>
<a href="javascript:goTo('schuhe')">Schuhe</a>

Die Varianten stammen aus der Link-Dokumentation von Google. Bei Frameworks zeigt das gerenderte HTML, ob am Ende ein <a href> steht.

Häufige Fehler

  • Buttons oder div-Elemente als Navigation, die nur per Klick-Handler navigieren
  • href="#" oder javascript:void(0) als Platzhalter für echte Seiten
  • Hash-Routing statt History API

Häufige Fragen

Reicht eine XML-Sitemap? Sie hilft beim Entdecken, ersetzt aber keine interne Verlinkung. Google empfiehlt, jede relevante Seite von mindestens einer anderen Seite zu verlinken.

Quellen

  1. SEO-Link-Best-Practices für Google – Google Search Centraldevelopers.google.com
  2. JavaScript-SEO-Grundlagen – Google Search Centraldevelopers.google.com

Stand: