Dos sitios pueden verse exactamente iguales en pantalla y ser completamente distintos por dentro. Uno le entrega a Google un documento ordenado, con capítulos y títulos. El otro le entrega una pila de cajas sin etiquetar.
El usuario no ve la diferencia. El buscador no ve otra cosa.
Qué significa semántico
HTML tiene etiquetas que describen lo que contienen. Un <nav> contiene navegación. Un <article> contiene un contenido autónomo. Un <button> es algo que se presiona.
También existe el <div>, que no significa nada. Es una caja genérica. Se puede construir un sitio entero usando solo div, y va a verse perfecto. Simplemente no le va a decir nada a nadie que no tenga ojos.
Escribir HTML semántico es elegir la etiqueta que corresponde al contenido real.
Por qué le importa a Google
El rastreador de Google no ve tu diseño. Lee la estructura y trata de entender de qué trata cada parte de la página. Las etiquetas semánticas le responden preguntas que de otra forma tendría que adivinar:
- ¿Cuál es el tema principal de esta página? Lo dice el
h1. - ¿Cuáles son los subtemas? Los
h2yh3. - ¿Qué es contenido y qué es menú repetido en todas las páginas?
- ¿Esto es un artículo publicado o un widget de la barra lateral?
Cuanta menos ambigüedad le dejes, mejor entiende de qué hablás, y con más confianza te muestra para las búsquedas correctas.
Los errores que encontramos una y otra vez
Varios h1 en la misma página
El h1 es el título del documento. Uno solo. Cuando hay tres, Google tiene que elegir, y elige mal. Suele pasar cuando el logo del encabezado está marcado como h1 en todas las páginas.
Encabezados usados por su tamaño
Alguien necesita un texto grande y usa un h2. Después necesita uno chico y usa un h4, salteándose el h3. La jerarquía queda rota. Los encabezados definen estructura, no tamaño: para el tamaño está el CSS.
Divs que deberían ser botones o enlaces
Un div con un evento de clic funciona con el mouse y falla con el teclado. No aparece en la navegación por tabulación, no se anuncia en un lector de pantalla y, si debía ser un enlace, Google nunca lo sigue.
Imágenes sin texto alternativo
El atributo alt es la única forma que tiene un buscador, o una persona ciega, de saber qué hay en esa imagen. Dejarlo vacío en una imagen informativa es tirar contenido a la basura.
Formularios sin etiquetas asociadas
Un campo con el nombre escrito al lado, en un span, no está etiquetado. Necesita un <label> vinculado al campo. Sin eso, un lector de pantalla anuncia campo de texto y nada más.
La accesibilidad es el mismo trabajo
Acá está lo interesante: todo lo que hacés para que Google entienda tu sitio es lo mismo que hacés para que lo entienda un lector de pantalla. Google navega tu sitio de forma muy parecida a como lo hace una persona ciega.
No son dos tareas. Es una. Un sitio accesible está bien posicionado casi por consecuencia, y además cumple con los requisitos legales de accesibilidad que cada vez más países exigen.
Por qué las plantillas fallan acá
Un tema genérico tiene que servir para un blog de cocina y para el sitio de un estudio jurídico. Como no sabe qué vas a poner adentro, envuelve todo en div anidados. Es la decisión segura para el que fabrica el tema, y la peor para el que lo usa.
Ningún plugin de SEO puede arreglarlo, porque el problema no está en los metadatos: está en el esqueleto. Lo desarrollamos en desarrollo a medida contra WordPress.
Cómo revisar tu sitio hoy
- Abrí tu página y presioná Ctrl+U para ver el código fuente.
- Buscá
<h1. Debería aparecer exactamente una vez. - Buscá
<nav,<main,<footer. Si no están, tu sitio es una pila de cajas. - Buscá
alt=""en imágenes que sí comunican algo. - Navegá tu sitio usando solo la tecla Tab. Si te perdés, tus usuarios también.
El resumen
La estructura semántica no se ve, no se vende en una presentación y no impresiona a nadie en una reunión. Es, exactamente por eso, donde casi todos aflojan. Y es la base del SEO on-code.
En Driva Dev, que un sitio esté semánticamente perfecto no es una opción del presupuesto: es un requisito de todo lo que entregamos. Escribinos si querés que revisemos el tuyo.
