# Qué es headless commerce y qué cambia para el SEO

> Qué es el headless commerce, qué separa entre backend y frontend y qué debe hacer una tienda headless para que buscadores e IA lean sus datos.

URL: https://clione.ai/es/glosario/headless-commerce/
Lang: es

_Headless_ significa «sin cabeza», y la cabeza es la parte que ve el comprador: la web, con su diseño y sus páginas. En una tienda _headless_ esa parte se construye aparte, a medida, y la plataforma de comercio se queda con lo de dentro. No hay que confundirlo con un navegador _headless_, el que se usa sin ventana para hacer pruebas o rastrear páginas. Te importa por una razón que no suele salir en la propuesta: **todo lo que la plantilla de la plataforma hacía en cada página pasa a ser responsabilidad de quien construye el frontend**, y eso incluye lo que leen los buscadores y los asistentes de IA.

## Cómo funciona

Una tienda _headless_ tiene dos piezas que se hablan por API.

**El backend de comercio** guarda el catálogo y hace el trabajo de tienda: el carrito, el checkout, los pagos y los pedidos. BigCommerce lo explica con su propio esquema: el _storefront_ es la capa donde quien compra interactúa con los productos, y puede ser un CMS, una app móvil, un quiosco o un sitio estático; una aplicación hace llamadas a las API de BigCommerce, y **BigCommerce crea el pedido y procesa el pago**, así que esa infraestructura no hay que construirla.[^bigcommerce-headless]

**El frontend** es la aplicación que pide los datos y pinta las páginas. Shopify resume la idea como toda la potencia de Shopify por debajo y control completo sobre el frontend, y ofrece dos caminos: Hydrogen, su _framework_ oficial para comercio _headless_, con alojamiento en Oxygen, o cualquier otro lenguaje y _framework_ conectado a sus API con el canal Headless.[^shopify-headless] La pieza central es la Storefront API, que permite ver productos y colecciones, añadirlos al carrito y pagar desde cualquier plataforma: la web, una app o un juego.[^shopify-storefront-api] BigCommerce ofrece sus propias API y SDK para el mismo fin.[^bigcommerce-headless]

La diferencia con una tienda normal está en quién genera el HTML. En una tienda con plantilla, la plataforma lo genera con su sistema de temas, [Liquid](/es/glosario/liquid/) en Shopify o [Stencil](/es/glosario/stencil/) en BigCommerce, y lo que una aplicación añade a esa plantilla aparece en todas las fichas. En una tienda _headless_, esa plantilla no se usa: **lo que una aplicación inyectaba en el tema no llega a un frontend que no carga el tema**.

## Lo que cambia para buscadores y asistentes

**El renderizado.** Google procesa JavaScript en tres fases, rastreo, renderizado e [indexación](/es/glosario/indexacion/), y renderiza las páginas con una versión actual de Chromium. Aun así recomienda el [renderizado del lado del servidor](/es/glosario/ssr/) o el prerenderizado, porque **hace la web más rápida para usuarios y rastreadores, y no todos los bots pueden ejecutar JavaScript**.[^google-js-seo] Un frontend que pinta la ficha en el navegador le enseña a un [rastreador](/es/glosario/rastreador/) que no ejecuta JavaScript una página casi vacía. Hydrogen, por ejemplo, se apoya en React Router con renderizado en el servidor.[^shopify-headless]

**Las etiquetas de la página.** El título, la [meta description](/es/glosario/meta-description/) y la etiqueta [canonical](/es/glosario/canonical/) se pueden poner con JavaScript, aunque para la canonical Google prefiere el HTML y pide que JavaScript nunca la cambie a un valor distinto del que trae el HTML original.[^google-js-seo] Pero alguien tiene que escribir ese código: la plataforma guarda los campos de SEO de cada producto, y es el frontend el que decide si los lee y los pone en la página.

**Los archivos del sitio.** El [`robots.txt`](/es/glosario/robots-txt/) y el [sitemap XML](/es/glosario/sitemap-xml/) también pasan al frontend. La plantilla de inicio de Hydrogen, por ejemplo, crea rutas propias para `/robots.txt` y `/sitemap.xml`.[^hydrogen-start]

**Los canales de IA.** [Shopify Catalog](/es/glosario/shopify-catalog/), la base de datos con la que Shopify reparte productos entre los canales de IA, acepta productos publicados en la tienda online o en los canales Hydrogen o Headless; si usas Hydrogen o Headless, **las rutas tienen que seguir el formato correcto** para que el producto entre, y tiene que publicarse con una URL de producto identificable.[^shopify-catalog-req]

## En una tienda

**Ejemplo ficticio.** Quién hace cada cosa en la misma [ficha de producto](/es/glosario/ficha-de-producto/), con plantilla y en _headless_:

| Responsabilidad                                                                              | Tienda con plantilla                            | Tienda _headless_               |
| -------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------------------------------- |
| Datos del producto: catálogo, precio, existencias                                            | La plataforma                                   | La plataforma, servidos por API |
| HTML de la ficha de producto                                                                 | El tema de la plataforma                        | El frontend a medida            |
| Título y meta description                                                                    | El tema, con los campos de SEO de la plataforma | El frontend, si lee esos campos |
| [Datos estructurados](/es/glosario/datos-estructurados/) en [JSON-LD](/es/glosario/json-ld/) | El tema o una aplicación instalada en él        | El frontend                     |
| `robots.txt` y sitemap                                                                       | La plataforma                                   | El frontend                     |
| Carrito, checkout y pago                                                                     | La plataforma                                   | La plataforma                   |

La última fila no cambia y las del medio cambian todas de dueño. Por eso un proyecto _headless_ necesita una lista de lo que el tema hacía antes de apagarlo. Clione, por ejemplo, funciona en Hydrogen: el frontend pinta en el servidor el grafo de datos estructurados, las meta etiquetas y las preguntas frecuentes a partir de los [metafields](/es/glosario/metafields/) del producto.


Que _headless_ es, por sí mismo, más rápido y mejor para el SEO. La arquitectura no decide eso: lo decide cómo se construye el frontend. Uno que renderiza en el servidor entrega la página completa; uno que la pinta en el navegador depende de que cada bot ejecute JavaScript, y **Google recuerda que no todos pueden**.[^google-js-seo] Pasar a _headless_ sin rehacer el título, el marcado y el sitemap deja la tienda con menos SEO que antes, no con más.


## Cómo comprobarlo

1. **Mira el código fuente de una ficha**, no el inspector del navegador: el título, el precio y el JSON-LD tienen que estar en el HTML que llega del servidor.[^google-js-seo]
2. **Inspecciona la misma URL en [Search Console](/es/glosario/search-console/)** y compara el HTML renderizado con el código fuente. Lo que solo aparece después de renderizar depende de que el bot ejecute JavaScript.
3. **Abre `/robots.txt` y `/sitemap.xml` en el dominio de la tienda** y comprueba que existen y que listan las URL del frontend.[^hydrogen-start]
4. **Revisa la canonical de una ficha en el código fuente y en el HTML renderizado**: si JavaScript la cambia a un valor distinto del original, incumple lo que pide Google.[^google-js-seo]
5. **Si la tienda está en Shopify, confirma que los productos están publicados en el canal Hydrogen o Headless** y que sus rutas siguen el formato que pide Shopify Catalog.[^shopify-catalog-req]

## Concepto cercano: renderizado del lado del servidor

_Headless_ habla de arquitectura: quién guarda los datos y quién los presenta. El renderizado del lado del servidor habla de técnica: dónde se genera el HTML de cada página. Una tienda con plantilla ya se renderiza en el servidor; una tienda _headless_ puede hacerlo, como Hydrogen, o no hacerlo, si su frontend pinta las páginas en el navegador.[^shopify-headless] **La pregunta útil ante un proyecto _headless_ no es si es _headless_, sino dónde se genera el HTML**, y para eso está el término de [renderizado de JavaScript](/es/glosario/renderizado-javascript/).

Para seguir, la [ruta de lectura de publicación por plataforma](/es/aprender/publicacion-por-plataforma/) ordena el resto de términos, de Liquid y los [widgets de BigCommerce](/es/glosario/widget-bigcommerce/) a la [API de catálogo](/es/glosario/api-de-catalogo/).