How to Fix SEO in Headless Commerce (Hydrogen, Composable)
Headless commerce stores (Shopify Hydrogen, BigCommerce headless, commercetools, Saleor) give you full control over rendering, schema, and metadata — and full responsibility for them. Where standard Shopify outputs Product schema for free, headless gives you a blank slate. This guide covers headless ecommerce SEO. Pair with ecommerce audit guide.
Step-by-step: How to fix SEO in headless commerce
- Verify SSR/SSG for product pages. Product pages must render real HTML server-side. View-source on a product URL — should see product name, description, price, image, schema. Headless without SSR = invisible to Google and AI agents.
- Implement Product schema explicitly. Headless platforms typically don't auto-generate Product schema (unlike standard Shopify). Build it in your frontend code: fetch product data from commerce API, serialise to JSON-LD Product, render in <script type='application/ld+json'>. Include name, image, description, sku, brand, offers, aggregateRating.
- Manage category/collection SEO. Category pages need: descriptive title, meta description, intro content above products, BreadcrumbList schema, ItemList of products. All require custom implementation in headless. Build category SEO templates as you would product templates.
- Handle URL structure. Hydrogen defaults to /products/SLUG (Shopify-like). Custom builds: design clean URLs (/products/SLUG or /shop/category/product). Avoid: parameter-heavy URLs (?id=12345), deep nesting (/store/category/sub/sub/product).
- Configure sitemaps. Headless = manual sitemap. Generate from commerce API: fetch all products, categories, content pages → build sitemap.xml at build time (SSG) or runtime (SSR). Submit to Search Console.
- Implement Organization schema site-wide. Layout-level: Organization schema with name, logo (600x60 min), sameAs links, contactPoint. Critical for brand entity recognition by Google and AI agents.
- Monitor and iterate. Headless gives flexibility — also gives ways to break things. Re-validate every key schema after deployments. Search Console enhancements report catches regressions.
Frequently Asked Questions
Is Shopify Hydrogen better than standard Shopify for SEO?
Trade-offs. Standard Shopify: schema, sitemaps, basic SEO are automatic. Hydrogen: you control everything but must implement everything. Hydrogen wins for: custom URL structure, performance optimisation, integration with non-Shopify data, distinctive design. Standard Shopify wins for: teams without dedicated developers, faster time-to-launch, less maintenance overhead.
Best headless commerce platforms in 2026?
Shopify Hydrogen (React + Shopify backend). BigCommerce + Next.js. commercetools (enterprise, more complex). Saleor (open-source). Medusa (open-source, Node.js). For mid-market, Hydrogen and BigCommerce headless dominate. Enterprise leans commercetools.
How do I add Product schema in Hydrogen?
Fetch product data via Storefront API → build JSON-LD object in loader function → render in component as <script type='application/ld+json' dangerouslySetInnerHTML={{__html: JSON.stringify(productLD)}} />. Hydrogen provides product data; schema construction is on you. Many Hydrogen starter templates include this — verify it matches schema.org Product spec.
Why are headless ecommerce stores often slower than standard Shopify?
Counterintuitively yes for some implementations. Reasons: more API calls (fetch product, fetch related, fetch reviews — each adds latency), heavier client JS bundles, complex hydration. Mitigations: aggressive caching, edge functions, GraphQL query consolidation. Well-built headless can be faster than standard Shopify; poorly-built is slower.
How do I handle hreflang in headless ecommerce?
Same as any SSR site: generate hreflang link tags server-side per locale. Most commerce platforms have locale APIs (Hydrogen uses Shopify Markets; commercetools has Channels). Map locale → URL pattern → output hreflang tags. Verify via Search Console International Targeting.