HTML5 facilita la clasificación de los motores de búsqueda y la descripción de éste a los usuarios. Además permite realizar una navegación mucho más rápida.
La semántica del HTML5 facilita a los robots interpretar el contenido de las páginas sin necesidad de utilizar plug-in para ello. Las etiquetas consiguen expresar mejor el contenido de su mensaje tanto a motores como a usuarios. HTML5 también permite que el contenido de los vídeos sea indexado con facilidad utilizando JavaScript para almacenar datos y el acceso. Eliminando el uso de cookies, sólo utiliza los datos cuando se realiza una solicitud.
Si hablamos de dispositivos móviles, también comprobamos que, tanto el posicionamiento como la funcionalidad ha sido un avance muy significativo.
La estructura y organización de un sitio web es fundamental para facilitar la labor de los motores de búsqueda. Cada página web se compone de un título, encabezado y contenido, que puede incluir texto, imágenes, gráficos, etc. Todos estos componentes están especificados con cada una de sus correspondientes etiquetas, de este modo nos permite manipular mejor la web estéticamente y a los motores localizar cada componente.
El título es un aspecto importantísimo en la estructura SEO de la página. Esta etiqueta además de establecer el tema principal del sitio, nos ayuda a enfocar las keywords para los motores de búsqueda.
En definitiva, incorporar HTML 5 en nuestra web, hará que el sitio sea más accesible a los motores de búsqueda, dispositivos móviles y usuarios con problemas utilizando lectores de pantalla.
Trucos en HTML5 para ayudar a Goole
Es de sobra sabido que Google penaliza las “trampas”, sin embargo desde hace tiempo se ha observado en cantidad de webs bien posicionadas alguna práctica que no parece disgustar al buscador.
M muchas veces los diseñadores ven necesario colocar una imagen en lugar de texto para representar algo, lo que sea. Pues bien, en ocasiones a través de CSS se oculta una capa con el contenido de la imagen (con el contenido de la etiqueta ALT), de este modo además de potenciar el SEO ayudamos a los motores de búsqueda y a los usuarios con problemas de visualización a navegar por nuestro web.
Si en la cabecera de nuestro blog, agregamos un menú hecho con CSS, de tal modo que al hacer rollover, se muestre la imagen y estado, además, cada una de las opciones lleva el mismo contenido. La imagen la ponemos en una capa que no se muestra pero que el motor puede leer.
<li><a href="http://www.nuestroblog.com/blog"class="dos-on" title="P&aacute;ginas Web"><span>Blog de Dise&ntilde;o Web</span></a></li>
A simple vista no parecerán imágenes lo que se está mostrando, sin embargo a través de la CSS lo que se hace es montar la imagen sobre el enlace de texto.
Los enlaces en HTML5 Y el SEO
Desde hace tiempo se viene usando la etiqueta “rel” para hacer que un enlace no sea seguido por los motores de búsqueda. La forma es “rel=onfollow”, es una práctica muy usada en los comentarios de los blogs para que los comentarios no se conviertan en una barra libre que pueda llegar incluso a perjudicarnos.
HTML5 además ha incorporado un sistema de etiquetas que indica al buscador de qué forma proseguir la navegación a través de la web. Estas etiquetas ya las venía usando wordpress en sus blogs.
Para indicar que el link enlaza con antiguas entradas del blog, se usa la etiqueta rel=”archives”, otra etiqueta utilizada es rel=”author” que indica que la página referencia esta también creada por el mismo autor, si queremos indicar que el contenido al que estamos ligando es externo a nuestro sitio, se utiliza rel=”external”.
Para indicar si la navegación es hacia el inicio, anterior, siguiente, se utilizan las etiquetas rel=”star”, rel=”prev”, rel=”last” y rel=”up”, rel=”bookmark” hace referencia a un enlace permanente, rel=”help” indica que enlazamos con un documento que es una ayuda al documento actual, rel=”search” nos dice que nos dirigimos hacia una página resultado de búsqueda, rel=”noreferrer” indica que el navegador no envía ningún tipo de “referencia” cuando vaya a la página destino, rel=”prefetch” es un gran avance del HTML5.
Cuando el navegador entra en nuestra página y encuentra un enlace de este tipo, lo que hace es comenzar a cargar en caché la página destino, de este modo cuando el usuario seleccione la página estará precargada y la navegación será mucho más rápida. Cabe mencionar que debemos ser cuidadosos al utilizar esta etiqueta. Google al ver este enlace, entenderá que se trata de una página muy importante dentro de nuestra web y como tal la tratará.
También está lo de schema.org, un sistema para formatear contenido y así google y principales motores de búsqueda lo muestran de otra forma en los resultados de búsqueda.
Esto lo hace utilizando los nuevo atributos "data-". El sitio es schema.org
Saludos!