Etiquetas HTML5 que favorecen el SEO

En este blog de diseño web hemos hablado ya  de la importancia que tiene el flujo del Html sobre el posicionamiento de la web, así como la importancia que da Google a la velocidad de carga de una página para mejorar su posicionamiento.

El HTML5 facilita la clasificación de los motores de búsqueda así como la descripción de tu sitio a los usuarios. Además permite realizar una navegación mucho más rápida a través de tu web. Vamos a ver cómo…

La semántica del HTML5 facilita a los robots interpretar el contenido de las páginas sin necesidad de utilizar plug-in para ello. Además las etiquetas consiguen expresar mejor el contenido de su mensaje tanto a motores como a usuarios.

El HTML5 también permite que el contenido de los vídeos sea indexado con facilidad.

HTML5 utiliza JavaScript para almacenar datos y el acceso. Eliminando el uso de cookies, HTML5 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,… 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 vuestra web, hará que el sitio sea más accesible a los motores de búsqueda, dispositivos móviles y usuarios con problemas con lectores de pantalla.

TRUCOS EN HTML5 PARA AYUDAR A GOOGLE

Es de sobra sabido que Google penaliza las «trampas», sin embargo desde hace tiempo estoy observando en cantidad de webs bien posicionadas alguna práctica que no parece disgustar al buscador.

Como sabemos, muchas veces los diseñadores vemos necesario colocar una imagen en lugar de texto para representar algo, lo que sea. Pues bien, he visto en numerosas ocasiones que 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 site.

En la cabecera de este blog, el menú está hecho con CSS, de tal modo que al hacer rollover, muevo la imagen y muestro otro estado, pero además, cada una de las opciones lleva el mismo contenido que la imagen en una capa que no se muestra pero que el motor lee.

<li class="highlight"><a href="https://www.gloobs.com/blog" class="dos-on" title="P&aacute;ginas Web"><span>Blog de Dise&ntilde;o Web</span></a></li>

Como podéis ver a simple vista no parece que sean imágenes lo que se está mostrando, sin embargo a través de la CSS lo que estoy haciendo es montar esa imagen sobre el enlace de texto.

LOS ENLACES EN HTML5 Y EL SEO

Desde hace tiempo se viene usando al etiqueta «rel» para hacer que un enlace no sea seguido por los motores de búsqueda. La forma es «rel=nofollow», 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.
• Para indicar que el contenido al que estamos linkando es externo a nuestro site, 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 pinche la página estará precargada y la navegación será mucho más rápida. Obviamente hemos de 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á.

Existen muchas más etiquetas, algunas de ellas todavía están en prueba y otras son interpretadas de manera distinta por uno u otro navegador.