GUÍA SEO · EQUIPO DE DESARROLLO
Quick Filters
de Categoría
Estándares de implementación HTML para que los filtros de subcategoría sean correctamente rastreados, indexados y rankeados por Google.
HTML SEMÁNTICO CORE WEB VITALS DUPLICATE CONTENT
Gerencia de Growth · SEO · 202601 / 09
CONTEXTO¿Qué son y por qué importan para SEO?
El problema que nadie ve
Qué son
Filtros de subcategoría con imagen + etiqueta
Permiten navegar entre grupos de productos desde una categoría principal. Aparecen arriba del grid de productos.
Su rol SEO
Son enlaces internos que Google sigue
Cada quick filter pasa PageRank a la subcategoría destino. Un enlace mal construido corta ese flujo de relevancia.
El riesgo
Implementación incorrecta = subcategorías sin rankear
Si usan <div>, <button> o parámetros en la URL, las subcategorías pueden quedar invisibles para Google.
Gerencia de Growth · SEO · 202602 / 09
IMPLEMENTACIÓNHTML CORRECTOEstructura base requerida
La estructura
mínima requerida
<a href="/categoria/subcategoria/"> <img src="nombre-categoria.webp" alt="Nombre de Categoría" width="200" height="200" loading="lazy" decoding="async" /> <span>Nombre de Categoría</span> </a>
Por qué cada parte
a
<a href> — siempre, sin excepción
Google sigue <a>. No sigue <div>, <button> ni onclick.
alt
alt — actúa como anchor text
Señal de relevancia para Google Images y para el enlace mismo.
w/h
width + height — evitan CLS
Sin ellos, la página "salta" al cargar. Penaliza Core Web Vitals.
span
<span> — texto visible indexable
Refuerza el anchor text. Debe ser idéntico al alt.
Gerencia de Growth · SEO · 202603 / 09
PRINCIPIO CLAVELA REGLA DE ORO
Coherencia semántica
Atributo imagen
alt="…"
=
Texto visible
<span>…</span>
=
Título página destino
<h1>…</h1>
En el quick filter
alt="Camas 1.5 plazas"
<span>Camas 1.5 plazas</span>
deben coincidir
En la página destino
<h1>Camas 1.5 plazas</h1>
Si los tres dicen cosas distintas, Google recibe señales contradictorias y la subcategoría pierde relevancia de ranking.
Gerencia de Growth · SEO · 202604 / 09
REGLASPARA EL EQUIPO8 reglas de implementación
1
El atributo alt debe ser idéntico al texto del <span>
Si dicen cosas distintas, Google recibe señales contradictorias y la subcategoría pierde relevancia.
2
Nunca headings dentro de <a>
<h1>–<h6> dentro de un enlace es HTML inválido semánticamente. Siempre <span>.
3
Nunca <div>, <button> ni onclick
Google no rastrea eventos JS. Siempre <a href> con URL real.
4
alt sin nombre del sitio
Escribir "en hites.com" en el alt es ruido innecesario. Google ya sabe el dominio.
5
alt nunca vacío ni genérico
alt="" o alt="img_01" no aportan señal. Usar siempre el nombre real de la categoría.
6
Siempre width y height definidos
Reservan el espacio antes de cargar la imagen. Evitan CLS (Core Web Vitals).
7
Imágenes en formato .webp
Hasta 30% más ligero que JPG. Mejora LCP y FCP. Next.js lo convierte automático.
8
URLs sin parámetros de tracking
icn=, ici=, utm_source= en el href generan duplicate content. El tracking va en la capa de analytics.
Gerencia de Growth · SEO · 202605 / 09
ERRORESIMPACTO SEOLo que más daña el rastreo e indexación
Errores comunes y su impacto
Error Impacto SEO Corrección
<h2> u otro heading dentro de <a> ALTO Reemplazar con <span>
alt duplicado en la misma imagen ALTO Solo un atributo alt por imagen; el navegador toma el último
Usar <button> o <div onclick> en lugar de <a href> ALTO Siempre <a href="URL limpia">
URL con parámetros de tracking ?icn=&ici= ALTO URL limpia en href; tracking por capa de analytics
alt diferente al texto del <span> MEDIO Sincronizar ambos con el mismo nombre de categoría
Imagen en .jpg en lugar de .webp MEDIO Convertir a WebP antes de subir al servidor
Nombre del sitio dentro del alt ("en hites.com") BAJO Eliminar; es ruido innecesario para Google
Gerencia de Growth · SEO · 202606 / 09
EJEMPLO REALCódigo incorrecto detectado vs. versión corregida
✕ Incorrecto
<a href="/dormitorio/camas/
?icn=cabeceras&ici=dorm" ⚠ tracking en URL class="img-fluid"> <img src="img.jpg" ⚠ no es webp alt="Especial dorm | 1.5 plazas en hites.com" ⚠ nombre del sitio alt="1.5 plazas"> ⚠ alt duplicado <h2>1.5 plazas</h2> ⚠ heading en <a> </a>
ALTOURL con parámetros de tracking
ALTOalt duplicado
ALTO<h2> dentro del enlace
MEDIOImagen en .jpg, no .webp
✓ Correcto
<a href="/dormitorio/camas/camas-1-5-plazas/"> <img src="camas-1-5-plazas.webp" alt="Camas 1.5 plazas" width="200" height="200" loading="lazy" decoding="async" /> <span>Camas 1.5 plazas</span> </a>
✓URL limpia sin parámetros
✓Un solo alt, descriptivo y consistente
✓<span> en lugar de heading
✓Imagen .webp + lazy + decoding
Gerencia de Growth · SEO · 202607 / 09
REFERENCIAATRIBUTOS HTMLQué hace cada atributo y por qué importa para SEO
Atributos explicados
Atributo Para qué sirve
href URL limpia sin parámetros de tracking. Define el destino del enlace que Google rastreará.
alt Descripción de la imagen. Actúa como anchor text. Debe coincidir con el <span> visible del quick filter.
width / height Obligatorios para reservar el espacio en pantalla y evitar CLS (Cumulative Layout Shift, Core Web Vitals).
loading="lazy" Carga la imagen solo cuando entra en el viewport. Mejora el tiempo de carga inicial y el LCP de imágenes below the fold.
decoding="async" Decodifica la imagen en paralelo sin bloquear el render del resto de la página. Mejora FCP.
src (.webp) Formato de imagen moderno. Hasta 30 % más ligero que JPG con la misma calidad visual. Impacta directamente LCP y FCP.
En sitios con Next.js <Image>, la conversión a WebP y el decoding="async" son automáticos — el equipo solo controla alt, href y el texto del <span>.
Gerencia de Growth · SEO · 202608 / 09
QACHECKLISTValidar antes de publicar cualquier quick filter
Enlace e imagen
☐ El enlace usa <a href> con URL limpia
☐ La URL no contiene parámetros (icn, ici, utm…)
☐ La imagen tiene un único atributo alt descriptivo
☐ El alt no incluye el nombre del sitio web
☐ La imagen está en formato .webp
Coherencia semántica
☐ El alt coincide exactamente con el texto del <span>
☐ El <span> coincide con el <h1> de la página destino
☐ No hay headings (<h1>–<h6>) dentro del <a>
☐ width y height definidos en píxeles
☐ loading="lazy" y decoding="async" presentes
Dudas sobre implementación SEO → consultar con el equipo de SEO antes de publicar en producción.
Gerencia de Growth · SEO · 202609 / 09