HTML y SEO, introducción.

Las publicaciones introductorias a cualquier tema suelen pasarse muy por alto, y más en el mundo de Internet donde se buscan respuestas concretas a la orden del YAAA.

En este artículo vamos a tratar de recuperar el interés por un lenguaje que cada día está mas olvidado, el HTML, salvo para aquellos que les gusta presumir de que su Web está en la última versión de todo “mi Web está en HTML5!!!!”.

Lo primero que tenemos que saber sobre el lenguaje HTML es que es el “esqueleto” de una página Web. Observe el lector que ahora no hablamos de sitio Web, la página Web es como una página de un libro, siendo este libro el sitio Web.

Como podemos imaginar, si un “esqueleto” falla, falla todo lo demás, el edificio se hunde de manera irremediable.

El HTML es también conocido como un lenguaje de hipertexto, de hecho el significado de HTML es: lenguaje de marcación de hipertexto (vamos, que supera lo que seria un supertexto, jeje). Y que es esto ¿de la marcación?. Pues es una chulada, por que si entre unas etiquetas pones una palabra <b>palabra</b>, la palabrita te aparece en negrita. Y esto es muy “chulo”. Y es tan “chulo” que por tener esa etiqueta (marcación) los motores de búsqueda le dan una importancia mayor que a otras palabras que la acompañan. De ahí que el HTML sea tan importante de cara al SEO.

Alguien dirá “eso es maquetado en HTML, es prehistórico”, y sí, vale, hemos puesto solo un ejemplo para indicar que una etiqueta que conoce todo el mundo, tiene una importancia algo más que la visual, gráfica o estética. Y como bien sabemos, en HTML hay más etiquetas que esta, pero aquí no las vamos a analizar, las vamos a contextualizar.

En aquellos tiempos en los que presentábamos los trabajos para la universidad escritos a mano, había unas partes que tenían una forma de escritura y otras tenían otras, las opciones no eran muchas, pero poníamos la letra un poco mas grande o mas pequeña, usábamos las mayúsculas, los colores o el subrayado para que una partes destacasen sobre otras.

Cuando llego la maquina de escribir, no cambiaron mucho las cosas, solo que para nuestros profesores era más fácil la lectura. Y al menos aquí, en España, teníamos dos colores, el rojo y el negro.

Con la llegada de los procesadores de texto como Word, las cosas cambiaron y muchísimo, ya podías no solo usar las mayúsculas o el subrayado, ahora tenias las opciones de cursivas, tipos de grafías diferentes, y te llevaba mas tiempo la elección de opciones que el trabajo que tenias que realizar para la universidad.

Y diréis, ¿a que viene tanto sermón? Pues justo a eso, a que con esas opciones tratábamos de darle más relevancia a unas partes que a otras, queríamos destacar una cierta palabra entre las demás, queríamos que en nuestras tablas se apreciara qué era una cosa y otra de la forma mas clara posible.

Pues bien, el hipertexto hace justamente eso, marcar la importancia de partes de un texto en el conjunto del texto global. Marcando que son los títulos <H>, marcando que es una lista <li>, destacando el valor de una palabra <b> o tratando de diferenciar una palabra de las demás <i>.

Así aparecieron las etiquetas, <apertura>palabra</cierre>, o mas concretamente <i>cursiva</i>, donde las etiquetas “i” determinan que el contenido entre ellas aparecerá escrito en cursiva. O la etiqueta <H1>Título</H1> que tiene distintos niveles, <H2>Subtitulo</H2>, así hasta H6.

Por tanto, aunque el valor de las etiquetas sea el que le ha sido asignado, nada impide que un programador ponga lo que no corresponde dentro de una etiqueta. Por supuesto que puedo presentar un trabajo para la universidad con un título impreso en letra muy pequeña, sin duda, el significado no cambiaria, pero como mínimo nuestro profesor nos daría un “tirón de orejas” para hacernos entender que eso así no esta bien.

Con esto debemos concluir que las etiquetas no es una simple cuestión de estética, es también una cuestión de significado, que ha sido adaptado a una percepción visual optimizada.

Pero cuando la mera percepción visual se convirtió en algo insuficiente, pasamos percepción automatizada, lo primero fueron grandes bases de datos donde se catalogaban los contenidos, y en función de eso, te aparecía un cierto resultado. Cuando se vio que el flujo de contenido informacional era imposible manejarlo de forma manual, pasamos a los sistemas automatizados, los spiders (o arañas).

Con esto, teníamos que hacer que los spiders seguirán unas ciertas instrucciones, estas instrucciones fueron simples: si encuentras una palabra en la etiqueta <H> se asignas un cierto valor, si la encuentras en la etiqueta <b>, le asignas otro valor, y si esta en la etiqueta bla, bla, le asignas otro.

Y esto es la base del SEO u optimización para motores de búsqueda, toda una disciplina muy dinámica que nos dice cómo catalogamos la importancia de los significados en función de donde están situados. ¿Qué es mas importante? ¿zapatilla de deporte blanca, o zapatilla de deporte ergonómica?

Zapatilla de deporte blanca la venderá cualquier vendedor de calzado deportivo, pero sólo vendedores más especializados hablarán de zapatillas de deporte ergonómicas.

Así “zapatilla de deporte blanca” podría ocupar una etiqueta H, de igual manera que la ocuparía una “zapatilla de deporte ergonómica”. En principio posicionar nuestra Web con el término “zapatilla de deporte ergonómica” resultará más sencillo que posicionar “zapatilla de deporte blanca”, aunque la segunda búsqueda es mucho mas frecuente que la primera. El motivo es sencillo, no es lo mismo competir contra 10 páginas (por poner un número) que competir contra 10.000.

Pero ¿qué ocurre si en una Web aparece “zapatilla de deporte ergonómica” fuera de una etiqueta <H>? Sin duda aparecerá en los resultados de búsqueda (si no hay otros factores que lo impidan), pero también es cierto que en las mismas condiciones, aparecerá en una posición más atrasada que si estuviera en esta etiqueta.

Lo que hemos dicho para la etiqueta <H> podríamos decirlo para la etiqueta <li>, que marca los elementos de una lista. Imaginemos una lista de características de un nuevo producto agregado a nuestra tienda online. No es infrecuente ver cada característica entre etiquetas <p>, que como sabemos es una marca de párrafo, de esta forma decimos a los motores de búsqueda que nuestra lista no es una lista, estamos diciendo que es un texto, algo como lo que estas leyendo ahora mismo.

Así era una página Web antes de HTML5, unas pocas etiquetas divididas en dos partes, una visible para los spiders el <head> y otra visible para las personas y los spiders, el <body>, las etiquetas mentadas (y otras mas) se encontraban todas ellas dentro del <body>.

En principio se puede decir que el <head> era exclusivo para los spiders, por lo que el título “<title>” las frases clave “<description>” y las palabras clave “<keywords>” eran todo lo que teníamos pulir para conseguir un buen posicionamiento, pero pronto los motores de búsqueda se dieron cuenta de que solo con esto, no se conseguía un posicionamiento fidedigno en función del merito de una página Web. Por tal motivo empezaron a analizar el contenido del <body>, siendo este el momento en que tomaron relevancia las etiquetas mentadas anteriormente (y otras).

Pero llego el día en que apareció HTML5, ¿qué consecuencias trajo?. En el <head> aparecían partes concretas con una función concreta (title, description y keywords), ahora también aparecerán partes dentro del body conservando las principales etiquetas existentes y creando unas nuevas.

En HTML5 el contenido del <body> (la parte visible de un documento HTML visible para las personas) está estructurado, recogiendo cada parte dentro de unas etiquetas concretas, dentro de las cuales, usaremos otras etiquetas ya conocidas como las <H>, las <p> o las <li>.

HTML5 se inicia con la etiqueta <header> que básicamente hace una presentación de la página, es una forma de decir, “estas en mi Web” (ArtesaniaWeb) y nos dedicamos a “bla, bla y rebla” (programación Web). También hay quien coloca en ella en buscador general del sitio Web.

La siguiente etiqueta contendrá el menú principal de navegación, la etiqueta <nav>, en la que cobrará especial importancia la etiqueta href, o link (enlace) que ayudará a los spiders a entender la estructura de nuestro sitio Web.

Con la etiqueta <section> podemos indicar que tenemos contenidos diferenciados, como “lo mas visto”, “nuevas publicaciones” o “nuestros videos”. Esta etiqueta puede ser muy importante a la hora de organizar los contenidos de la página principal de nuestro sitio Web.

Con la etiqueta <article> le estamos diciendo a los spiders que vamos a publicar un texto sobre un asunto concreto, como es el caso de la página que estas leyendo en este momento. En ella cobrará especial importancia las etiquetas <H> y href.

La etiqueta <aside> es otra novedad, y se usa para contenidos muy diversos, como colocar los enlaces para gestionar la cuenta de usuario, o colocar enlaces sobre temas relacionados con el artículo en cuestión. En esta etiqueta cobra especial importancia las etiquetas <li> y href, sin olvidar la <H3> y posteriores, ya que la <H1> y <H2> se suelen reservar para <section> y <article>. Tengamos en cuenta, que lo ideal es que solo exista una etiqueta <H1>, no mas de 2 etiquetas <H2>, no mas de 3 etiquetas <H3>, y así sucesivamente.

Por último llegamos a la etiqueta <footer>, o pie de página. En esta etiqueta suele existir siempre un enlace a la página principal de nuestro sitio Web, un enlace para el contacto, y la información relativa a los aspectos legales del sitio Web, como identificación de la empresa, política de uso de cookies, derechos de autor…

Con un estándar claramente definido y suficientemente amplio como para adaptarse a prácticamente la totalidad de los contenidos que publicaremos, ahora solo tenemos que tener todo esto en cuenta para crear nuestra página Web perfecta.

Respetando todo esto, la tendrás, pero esto no siempre es fácil logarlo. El motivo es que HTML5 no tiene pretensiones estéticas, lo que pretende HTML5 es que se pueda asignar un valor a lo que se encuentra dentro de cada etiqueta, y si lo que colocamos en una cierta etiqueta no se corresponde con lo que debería haber, su valor, aunque en términos de significado sea perfecto, perderá relevancia.

Todo lo dicho hasta aquí, perfecto ¿verdad? Pues sí y no. Como teoría muy bien, pero ¿que pasa con la estética?, una Web debe ser elegante, debe tener colores, debe contener imágenes y videos, etc.

De eso ya no se ocupa HTML5, eso ya es otra cosa muy diferente, nuestro nuevo gran amigo se llama CSS (hojas de estilos en cascada), y es lo que nos permitirá darle una nuestro “esqueleto HTML5” un aspecto visualmente atractivo.

¿Cuánta importancia SEO tiene CSS? Muchísima, ya que CSS no solo se encarga de que nuestras páginas Web sean “bonitas”, también se encarga de que sean accesibles a tamaños de pantalla tan diferentes como un monitor de 30 pulgadas o a la pantalla de 5 pulgadas de un smartphone.

Uno de los principales enemigos de todo webmaster es la tasa de rebote, que nos indica el número de usuarios que abandonan nuestro sitio Web tras su entrada y visitando una sola página. Pues bien, aunque no es el único factor, se puede decir que CSS esta tras esto: un mal contraste que dificulta la lectura, una incorrecta adecuación al tamaño de la pantalla o una disposición anárquica de elementos, y no digamos, una cantidad abusiva de publicidad, pueden ser los responsables de que un usuario abandone nuestra página tras solo haber abierto la página sin pasar de leer la primera línea.

CSS es otro mundo completamente diferente a HTML, aunque en tiempos las Web se maquetaban con HTML, y estan disponibles a día de hoy las tablas <table> en HTML5, que era el elemento con que se organizaba la estructura de contenido, hoy no se usan para estos fines, ya que con ellas no puedes lograr que una Web se adapte a dispositivos tan diferentes como una pantalla de sobremesa o un smartphone, aparte de otras limitaciones.

Esto no quiere decir que las tablas ya no se usen, se usan, sí, pero para cosas más triviales y limitadas, como presentar conjuntos de datos dentro de una estructura maquetada con CSS. Es más, incluso las tablas <table> html pueden ser maquetadas con CSS.