Link

Der HTTP-Header Link bietet eine Möglichkeit, einen oder mehrere Links in HTTP-Headern zu serialisieren. Damit kann der Server einem Client auf eine andere Ressource verweisen, die Metadaten über die angeforderte Ressource enthält. Dieser Header hat die gleichen Semantiken wie das HTML-<link>-Element. Ein Vorteil der Verwendung des Link-Headers ist, dass der Browser mit dem Präverbinden oder Vorladen von Ressourcen beginnen kann, bevor das HTML selbst abgerufen und verarbeitet wird.

In der Praxis haben die meisten rel Link-Typen keine Wirkung, wenn sie mit dem HTTP-Header verwendet werden. Zum Beispiel funktioniert die icon-Beziehung nur in HTML und stylesheet funktioniert nicht zuverlässig über alle Browser hinweg (nur in Firefox). Die einzigen Beziehungen, die zuverlässig funktionieren, sind preconnect und preload, die mit 103 Early Hints kombiniert werden können.

Header-Typ Response-Header, Request-Header
Verbotener Header-Name Nein
CORS-sicher gelisteter Response-Header Nein

Syntax

http
Link: <uri-reference>; param1=value1; param2="value2"
<uri-reference>

Die URI-Referenz muss zwischen < und > eingeschlossen sein und percent-encoded (prozentkodiert) werden.

Parameter

Der Link-Header enthält Parameter, die mit ; getrennt sind und den Attributen des <link>-Elements entsprechen. Werte können sowohl in Anführungszeichen als auch ohne angegeben werden, basierend auf den Regeln für Komponentenwerte. So ist x=y gleichwertig mit x="y".

Beispiele

URLs in spitze Klammern einschließen

Die URI (absolut oder relativ) muss zwischen < und > eingeschlossen sein:

http
Link: <https://example.com>; rel="preconnect"
http
Link: https://bad.example; rel="preconnect"

Kodierung von URLs

Die URI (absolut oder relativ) muss Zeichen mit Codewerten größer als 255 percent-encode:

http
Link: <https://example.com/%E8%8B%97%E6%9D%A1>; rel="preconnect"
http
Link: <https://example.com/苗条>; rel="preconnect"

Sie können mehrere Links angeben, die durch Kommas getrennt sind, zum Beispiel:

http
Link: <https://one.example.com>; rel="preconnect", <https://two.example.com>; rel="preconnect", <https://three.example.com>; rel="preconnect"

Der Link-Header kann einem Client Seitenumbruchs-Informationen bereitstellen, die häufig verwendet werden, um Ressourcen programmatisch zuzugreifen:

http
Link: <https://api.example.com/issues?page=2>; rel="prev", <https://api.example.com/issues?page=4>; rel="next", <https://api.example.com/issues?page=10>; rel="last", <https://api.example.com/issues?page=1>; rel="first"

In diesem Fall zeigen rel="prev" und rel="next" Verbindungen zu vorherigen und nächsten Seiten an, und es gibt rel="last" und rel="first" Parameter, die die erste und letzte Seite der Suchergebnisse bereitstellen.

Steuerung der Abrufpriorität

Auch wenn preload verwendet wird, um eine Ressource so früh wie möglich zu laden, wird je nach interner Browser-Priorisierung verschiedener Inhaltstypen früher oder später abgerufen. Das Attribut fetchpriority kann verwendet werden, um dem Browser einen Hinweis darauf zu geben, dass eine bestimmte Ressource einen größeren oder geringeren relativen Einfluss auf die Benutzererfahrung haben wird als andere Ressourcen desselben Typs.

Zum Beispiel könnte der untenstehende Header verwendet werden, um style.css mit einer höheren Priorität als andere Stylesheets vorzuladend:

http
Link: </style.css>; rel=preload; as=style; fetchpriority="high"

Beachten Sie, dass sowohl die interne Priorisierung für das Abrufen von Ressourcen als auch der Effekt der fetchpriority-Direktive browserabhängig sind. Die fetchpriority-Direktive sollte sparsam verwendet werden und nur in Fällen, in denen ein Browser nicht ableiten kann, dass eine bestimmte Ressource mit anderer Priorität behandelt werden sollte.

Spezifikationen

Specification
Web Linking
# header

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Link
blocking
Experimental
rel=expect
Experimental
fetchpriority

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch