# What Is Headless Commerce and What Changes for SEO

> What headless commerce is, what it separates between backend and frontend and what a headless store must do so search engines and AI can read its data.

URL: https://clione.ai/glossary/headless-commerce/
Lang: en

_Headless_ means "without a head", and the head is the part the shopper sees: the website, with its design and pages. In a headless store that part is built separately, custom, and the commerce platform keeps what is inside. Do not confuse it with a headless browser, the kind used without a window for testing or crawling pages. It matters for a reason that does not usually come up in the proposal: **everything the platform's template did on each page becomes the responsibility of whoever builds the frontend**, and that includes what search engines and AI assistants read.

## How it works

A headless store has two pieces that talk to each other through APIs.

**The commerce backend** holds the catalog and does the store's work: the cart, checkout, payments and orders. BigCommerce explains it with its own diagram: the storefront is the layer where shoppers interact with products, and it can be a CMS, a mobile app, a kiosk or a static site; an application makes calls to the BigCommerce APIs, and **BigCommerce creates the order and processes the payment**, so that infrastructure does not have to be built.[^bigcommerce-headless]

**The frontend** is the application that requests the data and renders the pages. Shopify sums up the idea as all of Shopify's power underneath and full control over the frontend, and offers two routes: Hydrogen, its official framework for headless commerce, hosted on Oxygen, or any other language and framework connected to its APIs through the Headless channel.[^shopify-headless] The central piece is the Storefront API, which lets you view products and collections, add them to the cart and check out from any platform: a website, an app or a game.[^shopify-storefront-api] BigCommerce offers its own APIs and SDKs for the same purpose.[^bigcommerce-headless]

The difference from a regular store is in who generates the HTML. In a templated store, the platform generates it with its theme system, [Liquid](/glossary/shopify-liquid/) on Shopify or [Stencil](/glossary/bigcommerce-stencil/) on BigCommerce, and what an app adds to that template shows up on every [product page](/glossary/product-page/). In a headless store, that template is not used: **what an app injected into the theme does not reach a frontend that does not load the theme**.

## What changes for search engines and assistants

**Rendering.** Google processes JavaScript in three phases, crawling, rendering and [indexing](/glossary/indexing/), and renders pages with a current version of Chromium. Even so it recommends [server-side rendering](/glossary/server-side-rendering/) or prerendering, because it **makes the website faster for users and crawlers, and not all bots can run JavaScript**.[^google-js-seo] A frontend that paints the product page in the browser shows a [crawler](/glossary/web-crawler/) that does not run JavaScript an almost empty page. Hydrogen, for example, relies on React Router with server-side rendering.[^shopify-headless]

**Page tags.** The title, the [meta description](/glossary/meta-description/) and the [canonical](/glossary/canonical-url/) tag can be set with JavaScript, although for the canonical Google prefers the HTML and asks that JavaScript never change it to a value different from the one in the original HTML.[^google-js-seo] But someone has to write that code: the platform stores each product's SEO fields, and it is the frontend that decides whether to read them and put them on the page.

**The site's files.** [`robots.txt`](/glossary/robots-txt/) and the [XML sitemap](/glossary/xml-sitemap/) also move to the frontend. Hydrogen's starter template, for example, creates its own routes for `/robots.txt` and `/sitemap.xml`.[^hydrogen-start]

**AI channels.** [Shopify Catalog](/glossary/shopify-catalog/), the database Shopify uses to distribute products across AI channels, accepts products published on the online store or on the Hydrogen or Headless channels; if you use Hydrogen or Headless, **routes have to follow the right format** for the product to get in, and it has to be published with an identifiable product URL.[^shopify-catalog-req]

## In a store

**Fictional example.** Who does what on the same [product page](/glossary/product-page/), templated and headless:

| Responsibility                                                                 | Templated store                           | Headless store                         |
| ------------------------------------------------------------------------------ | ----------------------------------------- | -------------------------------------- |
| Product data: catalog, price, stock                                            | The platform                              | The platform, served through APIs      |
| Product page HTML                                                              | The platform's theme                      | The custom frontend                    |
| Title and meta description                                                     | The theme, with the platform's SEO fields | The frontend, if it reads those fields |
| [Structured data](/glossary/structured-data/) in [JSON-LD](/glossary/json-ld/) | The theme or an app installed in it       | The frontend                           |
| `robots.txt` and sitemap                                                       | The platform                              | The frontend                           |
| Cart, checkout and payment                                                     | The platform                              | The platform                           |

The last row does not change and the middle ones all change owner. That is why a headless project needs a list of what the theme did before switching it off. Clione, for example, runs on Hydrogen: the frontend renders the structured data graph, the meta tags and the FAQs on the server from the product's [metafields](/glossary/shopify-metafields/).


That headless is, by itself, faster and better for SEO. The architecture does not decide that: how the frontend is built does. One that renders on the server delivers the complete page; one that paints it in the browser depends on every bot running JavaScript, and **Google reminds you that not all can**.[^google-js-seo] Moving to headless without redoing the title, the markup and the sitemap leaves the store with less SEO than before, not more.


## How to check it

1. **Look at a product page's source code**, not the browser inspector: the title, the price and the JSON-LD have to be in the HTML that comes from the server.[^google-js-seo]
2. **Inspect the same URL in [Search Console](/glossary/google-search-console/)** and compare the rendered HTML with the source code. What only appears after rendering depends on the bot running JavaScript.
3. **Open `/robots.txt` and `/sitemap.xml` on the store's domain** and check that they exist and list the frontend's URLs.[^hydrogen-start]
4. **Check a product page's canonical in the source code and in the rendered HTML**: if JavaScript changes it to a value different from the original, it breaks what Google asks for.[^google-js-seo]
5. **If the store is on Shopify, confirm the products are published on the Hydrogen or Headless channel** and that their routes follow the format Shopify Catalog asks for.[^shopify-catalog-req]

## Related concept: server-side rendering

Headless is about architecture: who stores the data and who presents it. Server-side rendering is about technique: where each page's HTML is generated. A templated store already renders on the server; a headless store can do so, as Hydrogen does, or not, if its frontend paints the pages in the browser.[^shopify-headless] **The useful question about a headless project is not whether it is headless, but where the HTML is generated**, and that is what the [JavaScript rendering](/glossary/javascript-rendering/) term is for.

To go further, the [publishing by platform reading path](/learn/publishing-by-platform/) orders the rest of the terms, from Liquid and [BigCommerce widgets](/glossary/bigcommerce-widget/) to the [catalog API](/glossary/catalog-api/).