Los enlaces en HTML5 y el SEO

El otro día os comentaba cómo hacer que Internet Explorer 8 detecte el HTML5 y ahora os traigo un poco de información y lucidez sobre el peso de los enlaces en HTML5 y las relaciones entre contenidos, lo que algunos llaman el «linkbuilding» y el «linkjuice».

Existe un elemento que desde hace un tiempo se ha ido creando de forma autónoma que son los «rel=». Seguro que a los SEO les suena el «rel=nofollow» como un gran clásico, pero existen algunos más y HTML5 los ha incorporado de serie.

Para los CSS

Un gran clásico es que los CSS sean algo como:

<link rel="stylesheet" href="estilo.css" type="text/css" />

pero, ahora, directamente en HTML5 tan sólo será necesario indicar:

<link rel="stylesheet" href="style-original.css" />

Para los fav-iconos

Otro gran clásico de los códigos en rel=»icon» que suele ir acompañado del «shortcut»:

<link rel="shortcut icon" href="favicon.ico" />

Otros códigos

En alguna ocasión, sobretodo en WordPress, en las cabeceras hemos podido ver una serie de enlaces a las antiguas entradas del blog, al «archivo». Para esto se utilizaba el rel=»archives» que, cuando se une a un tag, indica que la dirección que indica hace referencia a direcciones URL antiguas, con contenidos «no nuevos».

Otro de los elementos que los blogs han llevado al extremo es el rel=»author». En este caso, al igual que el anterior, cuando se une a una dirección URL, indica que la página de destino hace referencia al usuario que a creado ese texto o entrada (o lo que sea).

Uno de los que cada vez han tenido más popularidad y se ha convertido en estándar es el rel=»external». Como su nombre indica hace referencia a un contenido «externo», que no tiene relación alguna con el contenido actual que se está referenciando. Esto, depende de como lo traten los motores de búsqueda podría significar que ese enlace tenga «algo menos de valor» (o todo lo contrario, que tenga más al haberse referenciado así… a saber).

Otros de los habituales en los sistemas de blogs son rel=»start», rel=»prev» y rel=»next» que indican el contenido de inicio, el anterior y el siguiente. Gracias a esto se podría crear un sistema por el cuál los buscadores podrían crear un mapa y un orden a la hora de indexar los documentos. En HTML5 se han incluido rel=»first» (que podría ser un alias del start), rel=»last» (ya puestos, si se indica el primero, porqué no indicar el último) y finalmente rel=»up». Este en concreto tiene muy buena pinta, ya que, si creamos un árbol de navegación, podría indicar claramente la dependencia de contenidos.

También para indicar un determinado tipo de enlaces se creó rel=»license». Los enlaces a los que se apunte suelen ser las páginas donde se encuentra la licencia de los copyrights o copylefts del sitio (normalmente se suele enlazar al sitio de Creative Commons)…

Uno de los quizá más curiosos sea rel=»noreferrer». Este enlace indica que el navegador no ha de enviar ningún tipo de información de «referencia» cuando vaya a la página de destino. Otro de los ya clásicos (sobretodo en blogs) es el rel=»pingback» que indica la dirección URL que acepta el protocolo de pingbacks. Además, nos encontramos con el otro ya clásico rel=»tag» que indica que tanto la página de destino como el propio contenidod el enlace hacen referencia a una etiqueta a la que va asociada el contenido al que pertenece.

Uno de los más curioso y qe puede afectar muy positivamente al SEO es el rel=»prefetch». Gracias a este sistema, cuando el navegador entre en la página, automáticamente «visitará» la página que esté enlazada con esta referencia para tenerla en caché de antemano y así hacer que el usuario, cuando pulse, navegue mucho más rápido. Claro está, esto no debe usarse con todos los enlaces, pero si sabemos que un sitio web concentra mucho tráfico en una sección en especial, puede ser interesante indicarlo para que al entrar el usuario vaya rapidísimo. De cara a los buscadores podría ser un indicador de que la página a la que hace referencia es de «las importantes» del sitio. Nota: este sistema debería funcionar actualmente en Firefox.

Otro de los elementos interesantes es el rel=»search». Como su nombre indica está claro que «la página de destino» tiene que ver con las búsquedas. Normalmente indicará que la página de destino ofrece resultados de búsqueda o incluye una interfaz para buscar. En la actualidad se suele usar muy relacionado con los contenidos de OpenSearch que soportan algunos navegadores.

Para acabar tenemos el rel=»sidebar». Aquí cada navegador está haciendo un poco lo que le da la gana. Por ejemplo, Firefox lo que hace es «añadir a Marcadores» el contenido, por lo que se puede poner en uno de los paneles laterales. Opera abre un panel, y el resto de navegadores simplemente lo ignora.

Ahora que sabemos que los enlaces pueden incluir nuevas funciones… ¿estás dispuesto a utilizarlos incluso antes de tener HTML5?