Introduction
Headless EC — separating a backend like Shopify from a custom frontend built in Next.js — is appealing for its design freedom, isn't it?
But there's a catch: in exchange for that freedom, your SEO can take a sharp hit.
In this article, I'll walk through the big picture of how I recovered the SEO I lost when I made an EC site for motorcycle gear headless. I'll leave the individual implementations to the sub-articles and focus here on why it becomes disadvantageous and which points you need to cover.
Why Headless Hurts SEO
What the Theme Was Quietly Doing for You
When you use an off-the-shelf EC theme, a lot of SEO work is actually handled automatically on the theme side. A proper h1, server-rendered product descriptions, breadcrumbs, sitemap.xml generation — these all "just worked" without you thinking about them.
Once you go headless and build your own frontend, all of that auto-magic disappears at once. Do nothing, and your site looks thin to search engines. This is the first pitfall of going headless.
The Invisibility of Client-Side Rendering
When you write React components in Next.js, it's tempting to render everything on the client. But if product names and descriptions are displayed only by JavaScript in the browser, some crawlers can't reliably read that content.
Content is empty until JS runs. Product info is hard to convey to crawlers
Headings, descriptions, and internal links are in the initial HTML and reliably conveyed
The look may be identical, but how it reaches crawlers is completely different.
The Three Pillars to Reclaim
Making Content Visible with SSR
The first thing I tackled was reliably outputting the information I want crawlers to see via server-side rendering (SSR). The h1, product descriptions, and internal links to related products go into the initial HTML. For things I don't want to show visually, I also use sr-only hidden text to deliver content to crawlers only.
Category pages get a lead paragraph and an internal-link footer rendered via SSR, securing both site navigation and content volume. See "Supplementing Crawler-Visible Content with SSR" for details.
Structured Data (JSON-LD)
The second pillar is structured data that produces rich displays in search results. I output product information and breadcrumb lists (BreadcrumbList) in JSON-LD format, explicitly telling search engines about price, stock, and hierarchy.
h1, descriptions, internal links
Product & breadcrumb JSON-LD
Dynamic generation + caching
SEO you don't lose even when headless
When this works well, breadcrumbs and prices appear in search results, improving click-through rates. I cover this in "Implementing JSON-LD Structured Data."
Dynamic Sitemaps and URL Normalization
The third pillar is a sitemap.xml and robots.txt that automatically track additions and removals of products and categories. With tens of thousands of SKUs, manual updates aren't realistic, so I automated generation while caching the results and exposing a stats API to monitor things like URL counts.
Alongside this, I use Edge middleware to 301-redirect mixed-case product URLs and strip unnecessary tracking parameters, preventing evaluation from being diluted across duplicate URLs.
Steady, Incremental Work Protects Search Traffic
Separating "the Look" from "What You Show Crawlers"
What all these measures share is a mindset: deliberately design what you show users and what you deliver to crawlers as separate things. sr-only text and JSON-LD are essentially invisible to human eyes, yet they're important clues for search engines.
Put as much energy into crawler-facing information as you do into polishing the look. Whether you can hold this dual perspective is what separates success from failure in headless EC SEO.
Each Task Is Modest
To be honest, none of these measures are flashy. Add one h1, add one type of JSON-LD, set up one redirect — each has a small-looking effect on its own.
SEO Compounds
Each piece is small, but when SSR, structured data, sitemaps, and normalization all come together, the "readability" of your site from a search engine's view is raised across the board. Steady accumulation is exactly what protects long-term search traffic.
Conclusion
SEO for headless EC is the work of recovering, one at a time and by hand, everything "the theme used to do automatically." The key is to design the look and crawler-facing information separately, and to stack up unglamorous measures.
The concrete implementations are explored in the three sub-articles below.
- Supplementing Crawler-Visible Content with SSR — server-rendering h1, product descriptions, and internal links, plus using sr-only
- Implementing JSON-LD Structured Data (Products & Breadcrumbs) — schema design that leads to rich results
- Generating and Caching Dynamic Sitemaps and robots.txt — auto-tracking product changes and URL normalization
Gain a free-form frontend while protecting SEO. That balance isn't magic — it's achieved through an accumulation of design decisions.