Como ya sabrás hay varias relaciones de enlace que, según instrucciones de Google, indican al buscador qué tipo de enlaces son, qué relación tienes con ellos. Me refiero a las relaciones de enlace nofollow, sponsored y ugc, de las que ya hablamos en su momento y no voy a volver a explicar para qué sirven.
Lo que quiero compartir contigo hoy es un truco para distinguir estos distintos tipos de enlace, de cada a tus visitantes, mediante CSS, para que tus lectores siempre sepan qué tipo de enlace van a hacer clic.
Esto aportará un plus de transparencia a tu política de enlazado, por ejemplo, y también te ayudará a ti a ver, a simple vista, cuántos enlaces de cada tipo hay en tus páginas y entradas, por si tienes que revisar algunos.
El CSS que te propongo añadir sería algo así:
/* Distinguir los tipos de relación de enlace por colores */
a[rel~=nofollow] {
outline:.14em dotted red !important;
outline-offset:.2em;
background: #d3d3d3;
color: red;
}
a[rel~=sponsored] {
outline:.14em dotted green !important;
outline-offset:.2em;
background: #d3d3d3;
color: green;
}
a[rel~=ugc] {
outline:.14em dotted black !important;
outline-offset:.2em;
background: #000;
color: white;
}Y lo que obtienes, con el CSS del ejemplo, sería algo así:
Lógicamente, en el ejemplo hay cambios muy notables de estilo, es cosa tuya elegir cómo quieres distinguirlos: ?solo con el encuadre punteado?, ¿con un color de fondo?, ¿cambiando el color del texto?, ¿todo a la vez como en el ejemplo? Tú decides.
El código CSS puedes añadir en el personalizador, en la sección de CSS adicional, si usas un tema clásico, o en la paleta de estilos si usas un tema de bloques.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
