SEO on a headless Shopify storefront

This is the part of going headless that gets underestimated. With a Liquid theme, Shopify handles rendering, canonicals, sitemaps, redirects and hreflang. Go headless and every one of those becomes your responsibility — including the ones nobody thinks about until traffic drops.

Server-side rendering is not optional

The foundational point. A storefront that renders client-side only sends crawlers an empty shell and real users a blank screen while JavaScript loads.

Both Hydrogen and Next.js render on the server by default. Verify it. View source on a product page — you should see the product title, description and price in the HTML, not a <div id="root">.

This is also most of your LCP story, which is why badly built headless storefronts are slower than the theme they replaced.

Metadata, per page

Every page needs a title, a meta description, and Open Graph tags. In a theme these come from the product's SEO fields automatically.

Headless, you query them and render them yourself:

• Pull the SEO title and description from the Storefront API, with a sensible fallback to the product title and truncated description.
• Render Open Graph and Twitter tags for sharing.
• One <h1> per page.

The failure mode is a storefront where every page has the same title because nobody wired it up per route.

Canonicals

Shopify's themes canonicalise products reached through collections, variant parameters and pagination. You now do this.

At minimum:

• Product pages canonical to /products/handle, regardless of how they were reached.
• Filtered collection views canonical to the unfiltered collection.
• Paginated pages canonical to themselves, not page one.

Get this wrong and you generate the duplicate content problem Shopify was preventing for you — duplicate content.

Structured data

Themes ship Product, Breadcrumb and Organization markup. Headless, you generate it from the API data.

Do it, and validate it — it's a click-through advantage on listings you already have, and it's cheap. Structured data.

Sitemaps

Shopify generates and maintains sitemap.xml for a theme storefront. Your headless front end serves different URLs, so you generate your own — covering products, collections, pages and articles, updated as the catalogue changes.

A stale sitemap on a large catalogue means new products aren't discovered for weeks.

Redirects

You also generate your own sitemap — Shopify's describes the theme storefront, not your front end.

Shopify's URL redirect tool applies to the theme storefront. Your headless app has to read those redirects — the Storefront API exposes them — and honour them, or every redirect a merchant creates in the admin quietly stops working.

This is one of the most commonly missed items in a headless build, and it surfaces months later as 404s on URLs that used to work. URL redirects.

Hreflang and multi-market

If you sell in several markets, you generate the hreflang tags. Shopify does this for you with Markets on a theme; headless, it's yours.

Broken hreflang means your language versions compete with each other, and it's the most common technical SEO failure on multi-market stores — localisation.

The 404 and the robots file

• A real 404 with the correct status code. A soft 404 returning 200 with "not found" text is worse than useless.
• robots.txt served from your app, not Shopify's.

Performance is now yours too

Shopify's CDN and infrastructure carried a lot of the load. Headless, you own caching strategy, image optimisation, bundle size and edge configuration.

Get it right and you beat the theme. Get it wrong — client-side rendering, unoptimised images, a large bundle — and you're slower with more work. Core Web Vitals.

The launch checklist

Before switching DNS to a headless storefront:

1. View source on product, collection and article pages — content in the HTML.
2. Titles and meta descriptions unique and correct per page.
3. Canonicals correct on products, filtered collections and pagination.
4. Structured data validating.
5. Sitemap generated, complete, submitted.
6. Redirects from the Shopify admin honoured by the app.
7. Hreflang correct, if multi-market.
8. 404 returning 404.
9. Core Web Vitals measured on mobile.
10. Every old URL 301ing correctly — redirect mapping.

The honest summary

None of this is difficult. All of it is work that was previously free, and skipping any single item can cost more traffic than headless gains in performance.

Budget for it explicitly. "SEO parity with the theme" is a deliverable, not an assumption — and it belongs in the scope before the project starts, not in a technical audit three months after launch.

The performance ceiling is why people go headless. The SEO floor is what they forget to build, and it's the thing that costs traffic while the site scores well in Lighthouse.