Herramientas HTML

Gratis Generador HTML link rel

Genera etiquetas link para preload, preconnect, dns-prefetch, canonical y alternate.

Cargando herramienta...

Qué es Generador HTML link rel?

Una etiqueta de enlace HTML conecta una página con otro recurso o declara una relación en la cabecera del documento. Los desarrolladores usan etiquetas de enlace para URL canónicas, alternativas de idioma, iconos, sugerencias de precarga, preconexión, hojas de estilo y más. Esta herramienta ayuda a mantener los atributos como as, type, href y crossorigin en el lugar correcto.

Respuesta rápida

Cree etiquetas de enlace HTML válidas para precarga, preconexión, dns-prefetch, canonical y URL alternativas. Cada valor rel tiene requisitos específicos como as, type o crossorigin.

Last updated: 2026-06-11

Limitaciones

  • El atributo as es requerido para enlaces preload. Sin él, el navegador no puede priorizar ni aplicar la CSP correcta.
  • Precargar demasiados recursos es contraproducente. Limite las sugerencias a uno o tres recursos importantes por página.
  • El atributo crossorigin es requerido para precargar fuentes y recursos de origen cruzado.

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

Cómo usar esta herramienta

  1. Elija el valor rel que coincida con la relación o sugerencia del navegador que necesite.
  2. Ingrese la ruta href o URL.
  3. Agregue as, type y crossorigin solo cuando correspondan al valor rel seleccionado.
  4. Copie la etiqueta generada en la sección head de su HTML.

Para qué puedes usarla

  • Crear una etiqueta de precarga para una fuente, script, imagen u hoja de estilo.
  • Agregar preconexión o dns-prefetch para orígenes de terceros.
  • Construir etiquetas de enlace sin olvidar los atributos as, type o crossorigin.

Casos de uso

Ejemplos prácticos

Ejemplo

Precargar una hoja de estilo clave

Un sitio pequeño tiene un archivo CSS crítico. La herramienta genera una etiqueta de precarga con los atributos correctos rel, href, as y type.

Ejemplo

Preconexión a un host de fuentes

Una página usa un proveedor de fuentes de terceros. Una etiqueta de preconexión prepara la conexión del navegador antes de que se solicite el archivo de fuente.

Errores comunes

  • Precargar demasiados recursos.
  • Usar preload sin el atributo as correcto.
  • Agregar preconnect a dominios que no se usan en la página.

Verificación

  1. Inspeccione la etiqueta generada en el panel Elements para confirmar que todos los atributos requeridos estén presentes.
  2. Abra el panel Network y verifique que los recursos precargados aparezcan con la prioridad correcta.

FAQ

Preguntas sobre Generador HTML link rel

¿Cuándo debo usar preload?

Use preload para un número pequeño de recursos críticos que el navegador necesita temprano. No precargue cada imagen, script u hoja de estilo.

¿Qué hace el atributo as?

El atributo as indica al navegador qué tipo de recurso se está precargando: style, script, font, image o fetch.

¿Las etiquetas preconnect mejoran todas las páginas?

No. Preconnect es útil para orígenes de terceros importantes. Etiquetas adicionales pueden desperdiciar recursos del navegador.

¿Cuándo usar preload en lugar de un script o estilo en línea?

Use preload cuando un recurso sea crítico pero no pueda estar en línea. Los scripts y estilos en línea son mejores para código pequeño porque eliminan una solicitud de red.

Herramientas relacionadas

Más herramientas html

Prueba también

Prueba también