A la hora de desarrollar un sitio web, o de hacer un análisis para recomendar cambios, no basta con fijarse en lo bonito que tiene que quedar al final. La apariencia no lo es todo y precisamente qué es la web semántica y la estructura del código son dos tópicos a tener muy en cuenta si quieres que tu web esté a la altura.
La intención es hacer una serie de artículos acerca del esquema semántico HTML5 para crear tus páginas web. En esta serie de artículos voy a tocar desde qué es (este mismo), hasta la estructura correcta que debe tener una página “perfecta” después de mucha investigación y pruebas.
Como siempre, si tienes alguna información que crees que me he dejado o que no es correcta puedes dejar un comentario (o ponerme verde si es necesario).
¿Qué es estructura semántica HTML5?
Bien, aquí voy a entender que conoces las bases del código html, o por lo menos que son etiquetas (tags), y cómo maquetar una web sencilla (aunque sea con bootstrap). Partiendo de esta base, podemos empezar. Sino puedes echar un ojo al artículo con los tags básicos para hacer una web.
La web semántica HTML5 o esquemas semánticos HTML5 son como se conoce a la forma de maquetar el código de tu página según el tipo de contenido que es. Esto se refiere directamente a que se siguen ciertos patrones definidos, que sean fáciles de entender para las máquinas.
Sí, las máquinas, ya que el usuario final cuando vé la página no está analizando el código fuente, sino que ve una representación visual de este código que lleva a cabo el navegador.
La semántica web está destinada a que los bots y otros crawlers que acceden a tu página para descubrir e indexar el contenido, tengan una idea más precisa de cómo debe estar asociado todo este, así como darle más importancia a ciertas partes del mismo.
¿Cómo ve un buscador mi página cuando la escanea?
Esto es precisamente porque por ejemplo un bot de google, yahoo, o bing, cuando entre en tu web encontrará una sección llamada body, otra llamada div, que dentro tiene más divs.
Esto es de por sí un problema, ya que puedes poner identificadores y clases para tú saber que uno es la cabecera, y que otro es una barra lateral, pero el buscador solo ve los mismos tags (aunque con los algoritmos que manejan pueden entender mucha parte de las clases e ids insertados).
Por eso mismo, la semántica web inserta ciertos patrones, como definir el contenido general, una zona de artículo, y diversas secciones dentro de éste. De esta forma el buscador es capaz de determinar qué tipo de contenido está encerrado entre las etiquetas, y darle la importancia necesaria.
¿Por qué debes usar una estructura semántica en tus web?
Si no se ha contestado ya, la respuesta obvia es porque es mejor para que los bots o buscadores entiendan tu contenido, y por tanto mejore tu posicionamiento.
Es una respuesta que parece demasiado simple, pero no tiene más misterio. Si le quieres enseñar una cosa a alguien, cuanto mejor se la expliques mejor la va a entender.
Por compararlo de alguna manera, es como si cojes a un niño, y le dices que recoja los cacharros en el cacharro ese y los separe por cacharros.
El niño te va a mirar con cara de ¿Qué me estás contando?
Sin embargo, si le dices, coje todos los dulces, y mételos en esa caja que tiene varios separadores, y los separas por colores, el niño tiene una base, un contenedor, y una estructura que seguir.
Con los bots pasa lo mismo, a pesar de los algoritmos avanzados, básicamente son máquinas que recogen el código y tratan de interpretarlo, y no es lo mismo tener una etiqueta <div> con otro <div> dentro, que tener <article> con varias <section> dentro.
Conclusión
La web semántica básicamente es una forma de decirle a los buscadores cómo deben entender tu contenido.
Al ser a nivel de código no afecta a la parte visual, pero a veces puede ser un poco más lioso hacer que las dos queden bien, por la dificultad de maquetación (nada es imposible).
Si no lo usas, estarás dejando de usar una de las herramientas más potentes que tienes para poder posicionar tu web y ganar algo de SEO.
¿Tienes una web semántica? ¿Hace cuanto que no revisas el código? Comenta y comparte