Internet es internet gracias a los enlaces. Pinchas en uno que te lleva a un sitio, donde pinchas en otro que te lleva a otro y así hasta el infinito.
Si los enlaces no existieran, las webs serían meros escaparates.
Con el tiempo, éstos han ido evolucionando para poder incorporar más información en ellos y de esta manera poder especificar cuál es la relación entre el origen del enlace y el destino.
El atributo «rel»
Estas relaciones de las que te estaba hablando se especifican con el atributo «rel» que se incluye dentro de la construcción del enlace.
Aunque existe varios tipos de enlaces (<a>, <area>, <link>), vamos a centrarnos en el más común el enlace <a>.
Cuando tenemos por ejemplo el enlace siguiente:
Esto es un <a href="https://www.juancarlosnieto.com">enlace a mi web</a>
Que se vería como:
«Esto es un enlace a mi web.«
Vemos que es un enlace perfectamente válido en el que tan sólo incluimos el lugar de destino al que iremos si hacemos clic en él.
Si lo que queremos es incluír más información sobre este enlace podemos incluir el parámetro «rel» con el valor que queramos incluir.
Por ejemplo:
Esto es un <a href="https://www.juancarlosnieto.com" rel="author">enlace a mi web</a>
En este caso hemos incluido el valor «author» que especifica que el destino es una página del autor o una forma de contactar con él.
Como vemos, podemos especificar «de que va» el enlace que hemos puesto.
Diferentes atributos para «rel»
Hay diferentes valores que podemos usar con el atributo «rel».
Vamos a ver algunos:
VALOR | DESCRIPCIÓN |
---|---|
alternate | Define una página alternativa para otro medio o formato. |
archives | Define un enlace a un documento que contiene un archivo del enlace de origen. |
author | Enlace a una página de autor o forma de contacto del mismo. |
external | Indica que el enlace lleva a un sitio externo del que está en el usuario. |
help | Indica que el enlace lleva a una sección de ayuda sobre la página en la que estamos. |
index | Indica que la página forma parte de una estructura jerárquica y que el enlace lleva al nivel superior de esa estructura. |
next | Indica que el enlace lleva a la siguiente sección de una secuencia de la que la página forma parte. |
prev | Indica que el enlace lleva a la sección anterior de una secuencia de la que la página forma parte. |
noreferrer | Indica que el atributo «Referer» no enviará al destino ninguna información sobre la página de origen, como el nombre de la página. |
Si quieres, puedes ver un listado más completo de los atributos Rel.
Valores «rel» importantes para el SEO
De todos los valores que admite el atributo «rel» hay 3 que deberíamos tener en cuenta para el SEO, ya que es una sugerencia que nos hace Google.
¿Necesitas ayuda con las tareas web de tu negocio?
No permitas que por tener poco tiempo dejes de atender tus clientes como se merecen.
Valor rel=»sponsored»
Indica que el enlace es un anuncio o enlace de pago.
Ejemplo:
Esto es un <a href="https://ejemplotienda.com" rel="sponsored">enlace de pago</a>
Valor rel=»ugc»
Indica que el enlace pertenece a contenido generado por el usuario, como por ejemplo en los comentarios o foros. De manera que indicamos que el enlace no es «responsabilidad nuestra».
Ejemplo:
Esto es un <a href="https://ejemplocomentario.com" rel="ugc">enlace en un comentario</a>
Valor rel=»nofollow»
Indica que no tenemos una asociación con el sitio de destino y que no queremos que Google lo rastree siguiendo este enlace.
Ejemplo:
Esto es un <a href="https://ejemplonoseguir.com" rel="nofollow">enlace que no quiero que siga Google</a>
Aquí tienes más información de Google sobre el uso SEO del atributo «rel».
Conclusión de los atributos «rel»
Como ves ahora tienes un parámetro más con el que puedes enriquecer la información de los enlaces de tu web.