jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-Tools

Kostenlose HTML-Link-Rel-Generator

Erzeuge Link-Tags für preload, preconnect, dns-prefetch, canonical und alternate URLs.

Tool wird geladen...

Was ist HTML-Link-Rel-Generator?

Ein HTML-Link-Tag verbindet eine Seite mit einer anderen Ressource oder deklariert eine Beziehung im Dokumentenkopf. Entwickler verwenden Link-Tags fur Canonical-URLs, Sprachalternativen, Icons, Preload-Hinweise, Preconnect-Hinweise, Stylesheets und mehr. Dieses Tool hilft, Attribute wie as, type, href und crossorigin an der richtigen Stelle zu halten.

Kurze Antwort

Erstellen Sie gultige HTML-Link-Tags fur Preload, Preconnect, dns-prefetch, Canonical und alternative URLs, ohne die erforderlichen Attribute erraten zu mussen. Jeder rel-Wert hat spezifische Anforderungen wie as, type oder crossorigin.

Last updated: 2026-06-11

Einschränkungen

  • Das as-Attribut ist fur Preload-Links erforderlich. Ohne es kann der Browser die vorab geladene Ressource nicht priorisieren oder die korrekte Content Security Policy anwenden.
  • Zu viele Ressourcen vorzuladen ist kontraproduktiv und kann das Laden wirklich kritischer Inhalte verzogern. Beschranken Sie Preload-Hinweise auf ein bis drei wichtige Ressourcen pro Seite.
  • Das crossorigin-Attribut ist fur das Vorladen von Schriftarten und anderen ursprungsubergreifenden Ressourcen erforderlich. Das Weglassen fuhrt dazu, dass die Vorabladung vom Browser verworfen wird.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wahlen Sie den rel-Wert, der der Beziehung oder dem Browser-Hinweis entspricht, den Sie benotigen.
  2. Geben Sie den href-Pfad oder die URL ein.
  3. Fugen Sie as, type und crossorigin nur hinzu, wenn sie fur den ausgewahlten rel-Wert zutreffen.
  4. Kopieren Sie das generierte Tag in den head-Bereich Ihres HTML.

Wofür du es nutzen kannst

  • Ein Preload-Tag fur eine Schriftart, ein Skript, ein Bild oder ein Stylesheet erstellen.
  • Preconnect oder dns-prefetch fur Drittanbieter-Ursprunge hinzufugen.
  • Link-Tags erstellen, ohne as-, type- oder crossorigin-Attribute zu vergessen.

Anwendungsfalle

Praxisbeispiele

Beispiel

Preload eines wichtigen Stylesheets

Eine kleine Site hat eine kritische CSS-Datei. Das Tool kann ein Preload-Tag mit den korrekten rel-, href-, as- und type-Attributen generieren.

Beispiel

Preconnect zu einem Schriftartanbieter

Eine Seite verwendet einen Drittanbieter-Schriftartanbieter. Ein Preconnect-Tag kann die Browserverbindung vorbereiten, bevor die Schriftartdatei angefordert wird.

Haufige Fehler

  • Zu viele Ressourcen vorzuladen.
  • Preload ohne das korrekte as-Attribut zu verwenden.
  • Preconnect zu Domains hinzuzufugen, die auf der Seite nicht verwendet werden.

Überprüfung

  1. Uberprufen Sie das generierte Link-Tag im Elemente-Panel der Browser-Entwicklertools, um zu bestatigen, dass alle erforderlichen Attribute fur den ausgewahlten rel-Wert vorhanden sind.
  2. Offnen Sie das Netzwerk-Panel und uberprufen Sie, ob vorab geladene Ressourcen mit der korrekten Prioritatskennzeichnung erscheinen und nicht als spätere Anfragen dupliziert werden.

FAQ

Fragen zu HTML-Link-Rel-Generator

Wann sollte ich Preload verwenden?

Verwenden Sie Preload fur eine kleine Anzahl kritischer Ressourcen, die der Browser fruh benotigt. Laden Sie nicht jedes Bild, Skript oder Stylesheet vor.

Was macht das as-Attribut?

Das as-Attribut teilt dem Browser mit, um welche Art von Ressource es sich bei der Vorabladung handelt, wie style, script, font, image oder fetch.

Verbessern Preconnect-Tags jede Seite?

Nein. Preconnect ist fur wichtige Drittanbieter-Ursprunge nutzlich. Zusatzliche Preconnect-Tags konnen Browser-Ressourcen verschwenden.

Wann sollte ich Preload anstelle eines Inline-Skripts oder -Styles verwenden?

Verwenden Sie Preload, wenn eine Ressource kritisch ist, aber nicht inline eingebunden werden kann, wie eine grobe Schriftartdatei oder ein Hero-Bild. Inline-Skripte und -Styles sind besser fur kleinen, kritischen Code, da sie eine zusatzliche Netzwerkanfrage eliminieren.

Verwandte Tools

Weitere html-tools

Auch ausprobieren

Auch ausprobieren