Link

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

In der Praxis haben die meisten rel-Link-Typen keine Auswirkungen, wenn sie mit dem HTTP-Header verwendet werden. Zum Beispiel funktioniert die icon-Relation nur im HTML, und stylesheet funktioniert nicht zuverlässig in allen Browsern (nur in Firefox). Die einzigen Relationen, die zuverlässig funktionieren, sind preconnect und preload, die mit 103 Early Hints kombiniert werden können.

Header-Typ Response-Header, Request-Header
Verbotener Anforderungsheader Nein
CORS-erlaubter Response-Header Nein

Syntax

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

Die URI-Referenz muss in < und > eingeschlossen und prozentcodiert sein.

Parameter

Der Link-Header enthält Parameter, die mit ; getrennt sind und den Attributen des <link>-Elements entsprechen. Werte können sowohl mit Anführungszeichen versehen als auch ohne diese sein, basierend auf den Regeln für Feldwertkomponenten, sodass x=y gleichbedeutend mit x="y" ist.

Beispiele

URLs in spitze Klammern einschließen

Die URI (absolut oder relativ) muss in < und > eingeschlossen werden:

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

URLs kodieren

Die URI (absolut oder relativ) muss Zeichen mit Codes größer als 255 prozentcodieren:

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 Informationen zur Paginierung bereitstellen, was häufig verwendet wird, um Ressourcen programmatisch zu erreichen:

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" Link-Relationen für vorherige und nächste Seiten, und es gibt die Parameter rel="last" und rel="first", die erste und letzte Seiten der Suchergebnisse bereitstellen.

Priorität des Ladens steuern

Selbst bei Verwendung von preload, um eine Ressource so früh wie möglich abzurufen, wird unterschiedliche Art von Inhalten basierend auf der internen Priorisierung des Browsers früher oder später abgerufen. Das fetchpriority-Attribut 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 derselben Art.

Zum Beispiel könnte der nachstehende Header verwendet werden, um style.css mit höherer Priorität als andere Stylesheets vorzuladen:

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

Beachten Sie, dass sowohl die interne Priorisierung zum Abrufen von Ressourcen als auch die Wirkung der fetchpriority-Direktive vom Browser abhängen. Die fetchpriority-Direktive sollte sparsam verwendet werden und nur in Fällen, in denen ein Browser nicht erkennen kann, dass eine bestimmte Ressource mit einer anderen Priorität behandelt werden sollte.

Spezifikationen

Specification
Web Linking
# header

Browser-Kompatibilität

Siehe auch