La etiqueta HTML <link>

Establecer relaciones con otros documentos


Uno de los pilares de un documento HTML es poder establecer una relación con otros documentos. Si ya sabemos algo de HTML y pensamos de esa forma, lo más común es que nos venga a la cabeza los enlaces <a>, es decir, las etiquetas que nos permiten que el usuario haga clic y acceda a otra página diferente. Si no las conoces, no te preocupes, las veremos más adelante.

Sin embargo, antes de profundizar en los enlaces, existen otras formas de establecer relaciones entre documentos, como por ejemplo, cuando relacionamos un documento HTML con un archivo .css para que aplique los estilos CSS en nuestro documento. Este tipo de relaciones se hacen con la etiqueta <link>.

La etiqueta <link> sirve para establecer relaciones con otros documentos, enlaces o archivos. De esta forma, el navegador o cualquier sistema capaz de leer código HTML puede saber que un documento está relacionado con otro (independientemente del formato que tenga) y así pueden establecerse ciertas relaciones.

Veamos un fragmento de código con algún ejemplo:

<head>
  <link rel="stylesheet" href="index.css">
  <link rel="icon" href="favicon.png">
</head>

Como se puede ver, el atributo rel generalmente establece el tipo de relación que estamos determinando. Por otro lado, mediante el atributo href establecemos la dirección del documento en cuestión relacionado.

Existen muchos tipos de relaciones, veamos las más conocidas:

Atributo relDescripciónMás info
Información visual
stylesheetEstablece una relación con un documento .css para aplicar sus estilos.Ver stylesheet
alternate stylesheetEstablece una relación con un diseño alternativo en otra hoja de estilos .css
iconIndica un icono para utilizar a modo de favicon (icono de pestaña).Ver favicons
Documento / SEO
alternateIndica una versión alternativa del documento actual.
canonicalEstablece el enlace real (canónico) para evitar URL duplicadas.
prevIndica si existe una URL anterior al documento actual.
nextIndica si existe una URL siguiente al documento actual.
pingbackUtiliza un sistema llamado pingback para avisar de referencias (obsoleto).
Información o datos
authorEnlace con más información sobre el autor del documento actual.
helpEnlace con información de ayuda.
searchEnlace donde se puede encontrar un buscador del sitio actual.
licenseEnlace con la información de licencia de la página actual.
privacy-policyEnlace con la política de privacidad del sitio actual.
terms-of-serviceEnlace con los términos de servicio del sitio actual.
manifestEnlace con una URL con un manifiesto (archivo .json para PWA).
Resource HintsPrecargas anticipadas de documentos o archivos.Ver precarga

Vamos a profundizar en ellas para aprender un poco más.

Versiones alternativas

Con la etiqueta <link rel="alternate"> podemos indicar que el documento actual tiene versiones alternativas en otros formatos o idiomas. El siguiente ejemplo se indica que el documento HTML que estamos leyendo tiene una versión en PDF, y además, una versión HTML en inglés:

<head>
  <link rel="alternate" href="document.pdf" type="application/pdf">
  <link rel="alternate" href="document-en.html" hreflang="en">
</head>

Observa que en la primera etiqueta, indicamos el atributo type="application/pdf", donde el valor application/pdf es el denominado MIME para identificar los archivos PDF. Un valor MIME es simplemente una cadena de texto que identifica un tipo de formato de fichero.

Por otro lado, en la segunda etiqueta, indicamos el atributo hreflang, mediante el cuál indicamos el idioma en el que se encuentra el documento referenciado por el atributo href. En este caso, indicamos el valor en, que se refiere a que se encuentra en idioma inglés.

Posicionamiento SEO (Google)

La etiqueta <link> también nos permite indicar algunos datos interesantes de cara al buscador para evitar ser marcado como contenido duplicado. De esta forma le indicamos al buscador exactamente las URLs que debe tener en cuenta, algo muy interesante de cara al posicionamiento SEO en buscadores.

Para ello, podemos utilizar los siguientes atributos:

Atributo relAtributo hrefSignificado
canonicalDirección URLURL exacta que indica a Google la URL real del documento. Cualquier variación será descartada.
prevDirección URLSi el documento actual tiene varias partes, indica la URL de la página anterior.
nextDirección URLSi el documento actual tiene varias partes, indica la URL de la página siguiente.

Veamos esto en un ejemplo de código. Imaginemos que estamos en la página https://manz.dev/posts/el-lenguaje-html-parte-2.html. De trata de un artículo en 3 partes y nos encontramos en la parte 2. El fragmento de código en cuestión sería el siguiente:

<head>
  <link rel="canonical" href="https://manz.dev/posts/el-lenguaje-html-parte-2.html">
  <link rel="prev" href="https://manz.dev/posts/el-lenguaje-html-parte-1.html">
  <link rel="next" href="https://manz.dev/posts/el-lenguaje-html-parte-3.html">
</head>

Mientras que las etiquetas con rel prev y next indican el enlace a dichas partes, la etiqueta <link rel="canonical"> establece la URL canónica, es decir, aunque tuvieramos varias formas de acceder a esta página (y las 3 carguen la página correctamente):

  • https://manz.dev/posts/el-lenguaje-html-parte-2.html
  • https://manz.dev/posts/el-lenguaje-html-parte-2/
  • https://manz.dev/posts/el-lenguaje-html-parte-2

En la etiqueta anterior hemos definido que la URL canónica es la que termina en .html, por lo que Google entenderá que las demás son formas alternativas pero que debe utilizar la primera.

Referencias mediante pingback

Aunque no es muy utilizado hoy en día debido a que fue un sistema altamente sensible al spam, los pingbacks son un mecanismo mediante el cuál, cuando un usuario escribe un artículo en una web y menciona o hace referencia a otro documento, puede «avisar a su autor» de que ha hecho mención de su artículo.

En nuestro documento HTML existiría algo así:

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

Esto significa que en la URL https://dominio.com/pingback/ existe un servidor de pingbacks que van a estar continuamente leyendo las peticiones, para que, si se realiza alguna, se lea la información asociada y se registre que alguien ha hecho una mención del artículo. Sistemas como Wordpress u otros CMS famosos, tienen plugins o sistemas para soportarlo.

Información adicional o datos

Existen varios tipos de etiquetas <link> donde podemos hacer referencia a información o datos relevantes sobre nuestro documento. Mediante el atributo rel podemos indicar valores como author, help, search o license para indicar información que puede ser útil para el navegador, buscador o usuario.

A continuación indicamos una referencia al autor del documento, a la zona de ayuda, la zona de búsqueda y la licencia que cubre el contenido de la página:

<head>
  <link rel="author" href="https://twitter.com/Manz">
  <link rel="help" href="https://lenguajehtml.com/ayuda/">
  <link rel="search" href="https://lenguajehtml.com/search/">
  <link rel="license" href="https://lenguajehtml.com/license/">
</head>

Observa que en cada uno de los casos hemos hecho referencia a detalles e información relacionada:

  • URL del autor de la página
  • URL de ayuda o más información
  • URL donde puedes encontrar un buscador de la página
  • URL donde puedes encontrar la licencia de los contenidos de la página

Manifiesto de aplicación

En algunos casos, también podemos encontrar lo que se denomina un manifiesto de aplicación. Suele ser más frecuente encontrarlo en aplicaciones web que en páginas web, pero no es más que una etiqueta que hace referencia a un archivo .json donde se encuentran varios datos sobre la página.

Para indicarlos, sólo se tiene que hacer referencia a la etiqueta <link rel="manifest">:

<head>
  <title>La web de Warren Sánchez</title>
  <link rel="manifest" href="manifest.webmanifest">
</head>

En el documento manifest.webmanifest referenciado, que no es más que un archivo JSON, podemos encontrar algunos de los datos de nuestra aplicación web:

{
  "lang": "es",
  "dir": "ltr",
  "name": "La web de Warren Sánchez",
  "short_name": "WarrenWeb",
  "icons": [
    { "src": "icon-64x64.webp", "sizes": "64x64", "type": "image/webp" },
    { "src": "icon-128x128.png", "sizes": "128x128" }
  ],
  "id": "warrenweb",
  "start_url": "/index.html",
  "display": "fullscreen",
  "orientation": "landscape",
  "background_color": "indigo",
  "theme_color": "hotpink"
}

No obstante, insistir en que los manifiestos suelen ser elementos incluidos en una aplicación web, en lugar de incluirlo en un documento de una página web.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev