Propiedad rel para los enlaces en el Html5

La nueva versión de Html5 a mantenido, modificado y creado algunos valores para la propiedad rel que nos interesa conocer. Con ellos ayudamos a los navegadores a conocer qué tipo de enlaces estamos incluyendo realmente en nuestras páginas web. Será interesante especialmente en dispositivos móviles, y también en las nuevas versiones de los navegadores habituales. Veamos los más destacados.

Dónde se coloca la propiedad Rel de los enlaces?

Las propiedades rel que vamos a ver se colocan dentro de la etiqueta de apertura del enlace o vínculo. Puedes colocar varias, una o ninguna. Veamos un ejemplo de un enlace con dos propiedades rel:

<a href="tema/pagina.html" title="bla bla bla bla" rel="next" rel="prefetch">Anchor Text</a>

Propiedad rel="archives" del nuevo Html5

Cuando a la propiedad rel le colocamos el valor archives estamos indicando al navegador que la página a la que se está enlazando esta archivada, que ha dejado de tratar un tema de actualidad, o que ha podido quedar incluso obsoleto. No se ha eliminado la página por contener aún información interesante, pero se avisa que se desea mantener en estado de archivo. Podría ser el caso de noticias ya pasadas, páginas con contenidos algo pasados de moda o sustituidos por versiones más actuales pero que no eliminamos para no perder el posicionamiento que nos puedan estar generando.

Propiedad rel="author" para especificar el autor

Se utilizan sobretodo en blogs y páginas de contenido de autor. Se coloca a aquellos enlaces que se dirigen hacia la web personal del autor del artículo, o a aquellas en las que se habla de ellos.

Propiedad rel="prev", rel="start" y rel="next" para indicar incicio, siguiente y página anterior

Son idoneas para informar a los navegadores de cuál es la página inicial de una sección, cuál es la siguiente y cuál la anterior respecto de la página donde se encuentra el visitante. Son geniales para colocar en las típicas flechitas de adelante y atrás y logran que los navegadores se puedan hacer una idea del orden de las páginas de una web, si es que están ordenadas, claro.

Propiedad rel="first", rel="last" y rel="up" indicando la primera y última página

Muy similares a las anteriores, salvo que en estos casos se informa al nvegador que la página enlazada es la primera o la última en el orden de la sección a la que pertenece. Además, tenemos el valor up para indicar que la página vinculada pertenece a un nivel jerárquico superior al de la página actual..

Propiedad rel="prefetch", cargando la página siguiente antes de que el usuario haga clic

Esta es de las que más me gustan! Con el valor prefetch se está ordenando al navegador que vaya leyendo y memorizando una página distinta, la que presumimos que será la siguiente que va a leer el visitante. De ese modo, cuando así sea y el visitante pulse ese enlace, el navegador la tendrá en su caché preparada para mostrarla en cuanto el enlace sea pulsado, pues ha estado cargando la información mientra el lector permanecía leyendo en la página anterior. Lo idoneo sería saber cuáles son las páginas hacia donde se dirigen las visitas, claro. En caso de que éstas se decidan por visitar otra distinta, no ocurrirá nada malo, pero si acertamos la velocidad sera mucho mayor, claro. Tampoco es cuestión de colocar ese valor a todos los enlaces de tus páginas, que te veo venir! je je je.

Otros valores para la propiedad rel

Existen un montón de valores posibles que yo considero menos importantes, pero que quiero citar por si a alguien le interesa utilizar, como el típico nofollow que indica que el destino no tiene naa que ver con la temática de la web, sidebar que no está aún muy definido, search para páginas que muestran resultados de búsquedas, noreferer para que el navegador haga caso omiso de las posibles variables de referencia añadidas a la url, el típico pingback de los blogs y alguno que otro más.

Advertencia

No todos los navegadores saben interpretar aún todos estos valores. De hecho algunos no son reconocidos por ningún navegador todavía, pero la especificación Html5 existe, de modo que no tardarán mucho en aplicarlos. En cualquier caso en caso de no ser interpretados, tampoco ocasionan errores, por lo que quizás decidas usarlos desde ya y no esperar a que los navegadores aprendan esta lección, verdad?

Comparte este artículo en tu red Twitter Comparte este artículo en tu red Facebook Comparte este artículo en tu red Google Enviar '' a Meneame.net