La etiqueta link en HTML

🔗 La etiqueta <link>: Conectando tu documento con otros recursos

Uno de los aspectos clave en HTML es la capacidad de relacionar un documento con otros archivos o recursos. Aunque solemos pensar primero en los enlaces <a> —que permiten al usuario navegar a otras páginas—, existe otro tipo de relación más técnica que se establece en la cabecera del documento mediante la etiqueta <link>.

Esta etiqueta no genera contenido visual en la página, pero informa al navegador sobre conexiones con hojas de estilo, iconos, versiones alternativas del documento, o incluso manifiestos para aplicaciones web.

🧩 ¿Qué es <link> y cómo funciona?

La etiqueta <link> se coloca en la sección <head> y define una relación entre el documento actual y un recurso externo. Utiliza principalmente los atributos rel (tipo de relación) y href (dirección del recurso).

Ejemplo básico:

htmlCopiarEditar<head>
  <link rel="stylesheet" href="estilos.css">
  <link rel="icon" href="favicon.ico">
</head>
  • rel="stylesheet" indica que se trata de una hoja de estilos CSS.
  • rel="icon" establece el icono de la pestaña del navegador.

🧾 Tipos comunes de relaciones con <link>

Atributo relPropósito
stylesheetAplica estilos CSS desde un archivo externo.
alternate stylesheetPermite usar una hoja de estilos alternativa.
iconDefine el favicon del sitio.
canonicalEstablece la URL principal del documento (SEO).
alternateIndica una versión alternativa del contenido.
prev / nextConecta con la página anterior o siguiente (en artículos, por ejemplo).
author / helpEnlaces a información sobre el autor o ayuda del sitio.
search / licenseEnlaces al buscador o términos legales.
manifestReferencia a un manifiesto para aplicaciones web (PWA).

🌍 Versiones alternativas de un documento

La relación alternate se usa cuando una página tiene otras versiones en diferentes formatos o idiomas.

Ejemplo:

htmlCopiarEditar<head>
  <link rel="alternate" href="documento.pdf" type="application/pdf">
  <link rel="alternate" href="pagina-en.html" hreflang="en">
</head>
  • type="application/pdf" especifica el formato MIME.
  • hreflang="en" indica que la versión está en inglés.

Esto es útil para que los motores de búsqueda o navegadores identifiquen que existen variantes del contenido, y se utilicen según el contexto del usuario.

📈 Mejorando el SEO con <link>

Cuando tienes una página accesible desde varias URLs (por ejemplo, con y sin “/”), los buscadores podrían penalizarte por contenido duplicado. Para evitar esto, se utiliza rel="canonical".

Ejemplo para una serie de artículos:

htmlCopiarEditar<head>
  <link rel="canonical" href="https://miweb.com/articulo-parte-2.html">
  <link rel="prev" href="https://miweb.com/articulo-parte-1.html">
  <link rel="next" href="https://miweb.com/articulo-parte-3.html">
</head>

Esto indica a los motores de búsqueda:

  • Cuál es la URL principal del contenido.
  • Cómo está organizado el contenido en una secuencia.

📣 ¿Qué es pingback y por qué ya casi no se usa?

El atributo rel="pingback" permite indicar una URL a la que se notificará automáticamente si otro sitio enlaza nuestro contenido. Aunque este sistema permitía recibir alertas cuando alguien citaba tu sitio, cayó en desuso por problemas con el spam.

Ejemplo:

htmlCopiarEditar<head>
  <link rel="pingback" href="https://miweb.com/pingback/">
</head>

Plataformas como WordPress ofrecían compatibilidad con esta función a través de plugins.

📚 Referencias a información adicional

La etiqueta <link> también puede emplearse para vincular recursos útiles sobre el autor, búsqueda interna, licencia o términos del servicio.

Ejemplo de uso:

htmlCopiarEditar<head>
  <link rel="author" href="https://twitter.com/miusuario">
  <link rel="help" href="https://miweb.com/ayuda/">
  <link rel="search" href="https://miweb.com/busqueda/">
  <link rel="license" href="https://miweb.com/licencia/">
</head>

Esto le permite al navegador o sistemas externos (como motores de búsqueda) acceder fácilmente a esta información estructurada.

⚙️ Aplicaciones web y el atributo manifest

En aplicaciones web progresivas (PWA), se utiliza la etiqueta <link rel="manifest"> para conectar con un archivo .webmanifest en formato JSON, que contiene detalles como nombre de la app, colores, iconos, idioma, etc.

Ejemplo:

htmlCopiarEditar<head>
  <title>Mi Aplicación</title>
  <link rel="manifest" href="manifest.webmanifest">
</head>

Ejemplo de contenido manifest.webmanifest:

jsonCopiarEditar{
  "lang": "es",
  "dir": "ltr",
  "name": "Mi Aplicación Web",
  "short_name": "MiApp",
  "icons": [
    { "src": "icon-64x64.png", "sizes": "64x64", "type": "image/png" },
    { "src": "icon-128x128.png", "sizes": "128x128" }
  ],
  "start_url": "/inicio.html",
  "display": "standalone",
  "theme_color": "#ff6600",
  "background_color": "#ffffff"
}

✅ Resumen

  • La etiqueta <link> permite relacionar tu documento HTML con otros recursos clave: estilos, iconos, versiones alternativas o información adicional.
  • Su uso mejora la estructura del documento, facilita la navegación, ayuda al SEO y contribuye a una mejor experiencia de usuario.
  • Algunas de sus funciones solo aplican a ciertos navegadores o casos avanzados, como aplicaciones web.