Eine relative URL nennt nur den Teil einer Webadresse, der sich vom aktuellen Dokument aus ergibt, zum Beispiel /kontakt/ oder ../bilder/logo.svg. Schema und Host ergänzt der Browser aus der Seite, auf der der Link steht. Dieselbe relative URL kann deshalb an verschiedenen Stellen einer Website auf verschiedene Ziele zeigen.
- Relative URL
Adresse ohne Schema und Host, die der Browser anhand der Basis-URL des Dokuments vervollständigt, in dem der Link steht.
Beispiel: „Setz den Verweis als relative URL, dann funktioniert er auch auf der Staging-Domain.“Wurzelrelative URL: beginnt mit einem Schrägstrich und wird ab dem Wurzelverzeichnis des Hosts gelesen, etwa /kontakt/. Vom Verzeichnis der aktuellen Seite unabhängig.
Dokumentrelative URL: beginnt ohne Schrägstrich und wird ab dem Verzeichnis der aktuellen Seite gelesen, etwa bilder/logo.svg oder ../kontakt/.
Gegenbegriff: Die absolute URL enthält Schema, Host und Pfad und bezeichnet die Ressource unabhängig davon, wo der Link steht.
Wie der Browser eine relative URL auflöst
Maßgeblich ist die Basis-URL, also die Adresse des Dokuments, in dem der Link steht. Von der Seite https://www.homepage-helden.de/glossar/absolute-url/ aus ergeben dieselben Schreibweisen sehr unterschiedliche Ziele.
Schreibweise im Link | Ergibt aufgelöst |
|---|---|
/kontakt/ | https://www.homepage-helden.de/kontakt/ |
relative-url/ | https://www.homepage-helden.de/glossar/absolute-url/relative-url/ |
../relative-url/ | https://www.homepage-helden.de/glossar/relative-url/ |
#aufbau | https://www.homepage-helden.de/glossar/absolute-url/#aufbau |
Ohne führenden Schrägstrich hängt der Browser die Angabe an das Verzeichnis der aktuellen Seite an. Weil Seiten-URLs auf einen Schrägstrich enden, landet ein dokumentrelativer Link damit schnell eine Ebene zu tief. Die wurzelrelative Schreibweise mit führendem Schrägstrich ist deshalb die verlässlichere Wahl.
Verschieben lässt sich der Bezugspunkt mit dem base-Element im Head. Es setzt für alle relativen Adressen einer Seite eine eigene Basis und wirkt damit auch auf Links, die weit unten im Dokument stehen. In der Praxis kommt es selten vor, weil die Wirkung auf einen Blick schwer nachvollziehbar ist, und wenn, dann in E-Mail-Vorlagen und Single-Page-Anwendungen.
Wo relative URLs die bessere Wahl sind
Für die Verlinkung innerhalb einer Website spricht viel für die relative Form. Die Seite lässt sich auf einer Staging-Domain testen und später umziehen, ohne dass die Links angefasst werden müssen, und Redakteure können eine Adresse nicht versehentlich mit der falschen Domain hinterlegen. Für Google macht es keinen Unterschied, solange der Link sich auflösen lässt.
Der zweite Vorteil ist die Übertragbarkeit einer Entwicklungsumgebung. Ein Projekt, das lokal unter einer Testdomain und live unter der echten Domain läuft, braucht keine Konfigurationsschalter für Links, wenn die Adressen relativ gesetzt sind. Das spart einen ganzen Fehlerbereich, der sonst erst beim Livegang auffällt.
Wo die absolute Form nötig bleibt
Außerhalb des eigenen Dokuments hört das auf zu funktionieren. Canonical-Tag, sitemap.xml, Open-Graph-Angaben sowie Links in Newslettern und RSS-Feeds brauchen die absolute Form, weil ihnen die Basis-URL fehlt, an der sich eine relative Angabe ausrichten könnte. Ein Sonderfall ist die protokollrelative Form //example.com/datei.js, die nur das Schema offen lässt. Sie stammt aus der Zeit gemischter HTTP- und HTTPS-Auslieferung und wird heute nicht mehr empfohlen.
Wir empfehlen deshalb, interne Links über die Link-Funktion des CMS zu setzen. TYPO3 und Statamic legen dann eine interne Referenz ab, die beim Rendern aufgelöst wird. Welche der beiden Formen am Ende im HTML steht, entscheidet das Template, und die Redaktion muss die Unterscheidung gar nicht treffen.