HTML5, SEO y el curioso caso de la h1

por | Noviembre 15, 2013

Html5 y SEO ¿Cómo aplicar <h1> en páginas construidas con HTML5?

Si aplicamos los encabezados HTML en las páginas que ya utilizan HTML5 y cuál es la influencia de estas marcas para SEO. Aquí vamos a ver cómo se comportan las páginas múltiples con <h1> y sus efectos en las páginas de resultados de búsqueda.

Marcas en el nuevo HTML 5

En esta “nueva era” de HTML que vemos es que la web semántica se vuelve extremadamente importante y tiende a producir una limpieza de las fuentes de fácil interpretación.

A continuación simulamos una pantalla creada con HTML y destrincharemos sus marcas para ver cómo ellos pueden influir en SEO:

Estructura de HTML5

<header>: No se debe confundir con el código <head>. Servirá como las famosas “portadas” de los periódicos, donde se crea una introducción o extracto del tema discutido en la página. Es conocido por todos los que trabajan con SEO que cuánto más al principio del código el contenido esta, cuanto mayor la importancia dada a este. Como los motores de búsqueda evolucionan, tienden a relacionar la búsqueda al contenido insertado en esta etiqueta.

<nav>: Adiós SPAM basado en la construcción de enlaces! Ahora con la etiqueta <nav> las páginas tendrán un área donde incluyen menús, enlaces de navegación etc. Cualquier serie de enlaces (internos o externos) que están fuera de esta etiqueta, probablemente se verá como técnicas Black Hat (sombrero negro).

<article>: En traducción literal, será un espacio donde se crea el contenido de la página. Reemplaza algunos <div> creados por el contenido y facilita la interpretación del código fuente.

<section>: Es otra traducción literal y tiende a sustituir algunas páginas <div>. Páginas que utilizan el famoso paralaje de HTML5 deben usar la etiqueta <section>para facilitar la identificación de temas discutidos en la página.

<aside>: Se debe llenar con el contenido que se considera a “separar” el contenido de la página. Por ejemplo: una página que tienen contenido cruzado con una página móvil. El contenido relacionado con el dirigido a móviles debe insertarse dentro de la etiqueta <aside>.

<footer>: Puede utilizarse dentro de la etiqueta <section>, estableciendo el “final” de cada tema. Para SEO no es muy útil, ya que terminaría “abaratamiento” lo que no es relevante para el contenido.

La pregunta a la <h1>múltiples de HTML5 y el SEO.

El sitio <section>puede contener un <h1>propio, aunque en SEO, aprendemos a aplicar sólo uno por página, ya que Google considera sólo el primero encontrado en el código fuente.

Google no ha “revelado” ninguna regla clara sobre el uso de <h1> en HTML5, informa sólo la sensatez en el tiempo para aplicarlos. En otras palabras, todavía no adaptó su algoritmo para leer el HTML5 y continúa dar relevancia a la primera <h1>encontrada en las páginas.

Notas para un futuro algoritmo de Google: sin duda en algún punto Google leerá todos los <h1> que encuentre en la misma página. Cuando empieza a rodar es bueno tomar en consideración que el <h1> más relevante será la sección “más grande” de la página. Por ejemplo: el <h1><article>etiqueta será considerado más relevante que la etiqueta de <h1><section>. Esto es sólo una idea, pero tiene mucho sentido si seguimos el razonamiento de semántica HTML5.

SEO COMBO: En HTML5 todavía encontrado otras características que ayudan a SEO para hacer una página más “indexable” como por ejemplo: etiquetas < video > y <author>que facilitan la identificación de contenido. La velocidad de carga de páginas tiende a disminuir con el uso de Flash y otros programas “pesados”. La identificación del tema de la página de esta manera es más clara, facilitar la vida de herramientas de búsqueda y haciendo los resultados más exactos todavía!

Geek Honduras / Tu dosis de Tecnologia Nerd