Entendiendo el SEO en VTEX IO

¿Qué es el SEO?

El SEO (Search Engine Optimization) es un conjunto de estrategias diseñadas para mejorar el rendimiento y visibilidad de sitios web, blogs y páginas web en los resultados de búsqueda orgánica. El objetivo principal es alcanzar mejores posiciones en los resultados de búsqueda, aumentar el tráfico y fortalecer la autoridad del sitio.

Importancia en E-commerce

En el contexto del comercio electrónico, una estrategia SEO bien implementada:

Aumenta la visibilidad de tu tienda
Atrae tráfico orgánico cualificado
Mejora la experiencia del usuario
Reduce costos de adquisición de clientes
Proporciona resultados sostenibles a largo plazo

VTEX ofrece un conjunto completo de herramientas y configuraciones que te permiten optimizar tu tienda para los motores de búsqueda, haciendo que tus productos sean más fáciles de descubrir y mejorando el rendimiento general del sitio.

Elementos Fundamentales del SEO en VTEX IO

URLs y Estructura

En VTEX IO, la gestión correcta de URLs es crucial para el SEO. Aquí están los aspectos más importantes:

URLs Canónicas

VTEX IO gestiona automáticamente las URLs canónicas para: - Productos - Categorías - Subcategorías - Marcas - Páginas personalizadas

Sitemap Automático

VTEX IO mantiene automáticamente un Sitemap que incluye:

Todas las URLs canónicas
URLs de búsqueda más visitadas
Nuevas páginas indexables

📁 Estructura típica de URLs
├── /categoria
│ └── /subcategoria
│ └── /producto
├── /marca
└── /busqueda

Meta Tags y Contenido

VTEX IO proporciona varias formas de gestionar meta tags:

Store Framework
Legacy CMS

1
{
2
  "store.custom": {
3
    "blocks": ["rich-text"],
4
    "props": {
5
      "title": "Título SEO",
6
      "metaDescription": "Descripción para SEO"
7
    }
8
  }
9
}

Prácticas Recomendadas

Títulos:
- Longitud óptima: 50-60 caracteres
- Palabras clave al principio
- Únicos para cada página
Meta Descriptions:
- Longitud óptima: 140-160 caracteres
- Incluir call-to-action
- Describir claramente el contenido
Contenido:
- Evitar duplicados
- Usar estructura jerárquica de headings (H1, H2, H3)
- Incluir contenido rico en palabras clave relevantes

Indexación y Control de Rastreo

Robots.txt

VTEX IO permite personalizar el archivo robots.txt:

User-agent: *
Allow: /
Disallow: /api/
Disallow: /checkout/
Disallow: /admin/

Para tiendas cross-border, se debe crear un archivo robots.txt por cada binding:

store-theme-robots - sitemap - robots - binding-id-1.txt - binding-id-2.txt - …

URLs de Búsqueda Más Visitadas

VTEX IO rastrea y optimiza automáticamente las URLs de búsqueda basándose en:

Frecuencia de acceso
Relevancia para usuarios
Patrón de comportamiento

Puedes controlar el número máximo de URLs de búsqueda indexadas a través del Store Indexer:

1
{
2
  "maxSearchUrls": 1000,
3
  "excludePatterns": ["/example?map=specificationFilter_X"]
4
}

Optimización de Imágenes

VTEX IO proporciona herramientas integradas para la optimización de imágenes:

Compresión Automática:

<img src="/arquivos/image.jpg?quality=85" alt="Descripción optimizada" />

Lazy Loading: Implementa lazy loading para imágenes utilizando el atributo loading="lazy" nativo:
```
<img
  src="/arquivos/image.jpg"
  alt="Descripción del producto"
  loading="lazy"
/>
```

Monitoreo y Análisis

Google Analytics Integration

VTEX IO facilita la integración con Google Analytics para rastreo de búsquedas:

Configurar parámetros de búsqueda:
- Query parameter: _q,rest
- Category parameter: _c

Implementar seguimiento de eventos:

1
vtexjs.analytics.sendEvent("search", "query", {
2
  query: searchTerm,
3
  results: resultCount,
4
});

Schema Markup

VTEX IO genera automáticamente Schema Markup para:

Productos
Breadcrumbs
Organización
Búsqueda local

Ejemplo de Schema Markup para producto:

1
{
2
  "@context": "https://schema.org/",
3
  "@type": "Product",
4
  "name": "Nombre del Producto",
5
  "image": ["url-imagen-1", "url-imagen-2"],
6
  "description": "Descripción del producto",
7
  "offers": {
8
    "@type": "Offer",
9
    "price": "99.99",
10
    "priceCurrency": "USD"
11
  }
12
}

Mejores Prácticas para Desarrolladores

1. Rendimiento

El rendimiento es un factor crucial para SEO. En VTEX IO:

Utiliza lazy loading para imágenes y componentes
Implementa cache efectivamente
Minimiza el JavaScript y CSS
Optimiza las rutas críticas de renderizado

2. URLs Amigables

Implementa URLs limpias y descriptivas:

// Ejemplo de configuración de rutas
{
  "store.custom#category": {
    "path": "/:category/productos"
  }
}

3. Gestión de Errores

Implementa páginas de error personalizadas y redirecciones:

1
{
2
  "store.custom#404": {
3
    "blocks": ["rich-text#404"],
4
    "props": {
5
      "title": "Página no encontrada",
6
      "statusCode": 404
7
    }
8
  }
9
}

Herramientas y Recursos

Herramientas de Diagnóstico

Google Search Console
- Monitoreo de indexación
- Errores de rastreo
- Rendimiento en búsquedas
Google Analytics
- Tráfico orgánico
- Comportamiento del usuario
- Conversiones
PageSpeed Insights
- Velocidad de carga
- Optimizaciones recomendadas
- Métricas Core Web Vitals

APIs Útiles

// Ejemplo de uso de API para meta tags dinámicos
const MetaTags = () => {
  const { product } = useProduct();

  return (
    <Helmet>
      <title>{product.titleTag}</title>
      <meta name="description" content={product.metaDescription} />
      <link rel="canonical" href={product.canonicalUrl} />
    </Helmet>
  );
};

Consideraciones para Cross-Border

Para tiendas internacionales:

Configuración de Hreflang:

<link rel="alternate" hreflang="es" href="https://tienda.com/es/" />
<link rel="alternate" hreflang="en" href="https://tienda.com/en/" />

URLs por Mercado:

{
 "store.custom#market": {
   "path": "/:locale/:category",
   "context": "ProductContext"
 }
}

Contenido Localizado:
- Traducciones específicas por mercado
- Precios y monedas locales
- Contenido cultural relevante

Checklist SEO

✅ Técnico

✅ Contenido

✅ Monitoreo