HTML-tools

Gratis HTML link rel generator

Genereer link-tags voor preload, preconnect, dns-prefetch, canonical en alternate.

Tool laden...

Wat is HTML link rel generator?

Een HTML-link-tag verbindt een pagina met een andere resource of verklaart een relatie in de document-head. Ontwikkelaars gebruiken link-tags voor canonical-URL's, taalalternatieven, iconen, preload-hints, preconnect-hints, stylesheets en meer. Deze tool helpt om attributen zoals as, type, href en crossorigin op de juiste plaats te houden.

Snel antwoord

Maak geldige HTML-link-tags voor preload, preconnect, dns-prefetch, canonical en alternatieve URL's zonder te raden naar de vereiste attributen. Elke rel-waarde heeft specifieke vereisten zoals as, type of crossorigin.

Last updated: 2026-06-11

Beperkingen

  • Het as-attribuut is vereist voor preload-links. Zonder dit kan de browser de vooraf geladen resource niet prioriteren of het juiste Content Security Policy toepassen.
  • Te veel resources vooraf laden is contraproductief en kan het laden van echte kritische inhoud vertragen. Beperk preload-hints tot één tot drie belangrijke resources per pagina.
  • Het crossorigin-attribuut is vereist voor het vooraf laden van lettertypen en andere cross-origin resources. Het weglaten ervan zorgt ervoor dat de preload door de browser wordt genegeerd.

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

Zo gebruik je deze tool

  1. Kies de rel-waarde die overeenkomt met de relatie of browserhint die u nodig heeft.
  2. Voer het href-pad of de URL in.
  3. Voeg as, type en crossorigin alleen toe wanneer ze van toepassing zijn op de geselecteerde rel-waarde.
  4. Kopieer de gegenereerde tag naar de head-sectie van uw HTML.

Waarvoor je het kunt gebruiken

  • Maak een preload-tag voor een lettertype, script, afbeelding of stylesheet.
  • Voeg preconnect of dns-prefetch toe voor domeinen van derden.
  • Bouw link-tags zonder as-, type- of crossorigin-attributen te vergeten.

Gebruik

Praktische voorbeelden

Voorbeeld

Een belangrijk stylesheet vooraf laden

Een kleine site heeft een kritisch CSS-bestand. De tool kan een preload-tag genereren met de juiste rel-, href-, as- en type-attributen.

Voorbeeld

Preconnect naar een lettertype-host

Een pagina gebruikt een lettertypeprovider van derden. Een preconnect-tag kan de browserverbinding voorbereiden voordat het lettertypebestand wordt opgevraagd.

Veelgemaakte fouten

  • Te veel resources vooraf laden.
  • Preload gebruiken zonder het juiste as-attribuut.
  • Preconnect toevoegen aan domeinen die niet op de pagina worden gebruikt.

Verificatie

  1. Inspecteer de gegenereerde link-tag in het deelvenster Elementen van de browser-ontwikkeltools om te bevestigen dat alle vereiste attributen aanwezig zijn voor de geselecteerde rel-waarde.
  2. Open het Netwerk-panel en controleer of vooraf geladen resources verschijnen met de juiste prioriteitsindicator en niet worden gedupliceerd als latere verzoeken.

FAQ

Vragen over HTML link rel generator

Wanneer moet ik preload gebruiken?

Gebruik preload voor een klein aantal kritische resources die de browser vroeg nodig heeft. Laad niet elke afbeelding, script of stylesheet vooraf.

Wat doet het as-attribuut?

Het as-attribuut vertelt de browser welk type resource wordt vooraf geladen, zoals style, script, font, image of fetch.

Verbeteren preconnect-tags elke pagina?

Nee. Preconnect is nuttig voor belangrijke domeinen van derden. Extra preconnect-tags kunnen browserresources verspillen.

Wanneer moet ik preload gebruiken in plaats van een inline script of style?

Gebruik preload wanneer een resource kritisch is maar niet inline kan worden geplaatst, zoals een groot lettertypebestand of een hero-afbeelding. Inline scripts en styles zijn beter voor kleine kritische code omdat ze een extra netwerkverzoek elimineren.

Gerelateerde tools

Meer html-tools

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool

Probeer ook

Probeer ook