Introduction
When you build a headless EC site in Next.js, it's tempting to lean into React's ergonomics and render everything on the client.
Overdo it, though, and your pages start to look "thin" to search engines.
In this article, I'll explain how, on an EC site for motorcycle gear, I supplemented the information I want crawlers to see using server-side rendering (SSR). The goal: raise how well content reaches crawlers without changing the look at all. Let's dig into the specifics.
What Happens with Client-Side Rendering Alone
The Risk of Relying on JavaScript
If you assemble and display product names and descriptions with JavaScript in the browser, the HTML the server returns first is essentially empty. Human users see it fine once JS runs, but some crawlers don't wait for that execution — they see the empty HTML and move on.
In other words, you can end up in a state where content "is on screen but effectively doesn't exist to search engines." This invisible gap is the first thing to watch out for when going headless.
Putting Content in the Initial HTML with SSR
So, information you want crawlers to read goes into the initial HTML. Using Next.js server components and SSR, you fetch product data on the server and return HTML with the h1 and description already embedded.
Initial HTML is empty. Crawlers may not read the content
h1 and description are present from the start and reliably read
What to Output via SSR
h1 and Product Description
The essentials are the h1 that names the page's subject and the product description. The h1 is the single most important heading telling crawlers "what this page is," so it's always server-rendered. The product description — the same body text you show users — is included in the HTML so crawlers can read it too.
Neglect this and, no matter how good the design is, search engines may judge that they "can't tell what the page is." It's unglamorous, but it's the top priority.
Internal Links to Related Products
The other thing I emphasized is internal links to related products. Internal links are the paths crawlers use to traverse a site, and they also convey the relationships between pages. Server-rendering a related-products block makes it easier for crawlers to move between product pages.
The server receives a request for a product page
Product info and related products are fetched from Shopify on the server
Generate HTML containing the h1, description, and internal links
Both crawlers and users receive HTML with content in it
Category Page Lead Text and Link Footer
On category pages, I placed a lead paragraph describing the category and an internal-link footer connecting to related categories and key products, all via SSR. Category pages are navigation hubs, so richer content and links directly improve crawlability.
Delivering Content Without Breaking the Look
The sr-only Hidden Text Technique
Some information you want to convey to crawlers but not display visually. For that, there's the sr-only (screen-reader-only) technique. CSS hides it visually while keeping it present in the HTML, so it reaches crawlers and screen readers.
Don't Overuse It
sr-only is only a supplement. Hiding large amounts of text that diverges significantly from what you show users can be treated as a deceptive practice by search engines. Keeping it to "a supplement to what's displayed" is the safe approach.
Think of the Look and Crawlers Separately
The important thing here is a stance of deliberately designing "what you show users" and "what you deliver to crawlers" as separate things. Even on the same page, the elements each perspective needs differ subtly. Put as much care into crawler-facing information design as into perfecting the look. This dual lens is the foundation of headless SEO.
Conclusion
Making content visible via SSR is the first measure to tackle in headless EC SEO. Put the h1, product description, and internal links in the initial HTML, supplement with sr-only where needed, and give category pages a lead paragraph and link footer that serve as navigation starting points.
The strength of this approach is that you improve how content reaches crawlers without changing the look. Next, take a look at "Implementing JSON-LD Structured Data," which adds meaning to the content you output, and "Generating and Caching Dynamic Sitemaps and robots.txt," which tells search engines where your pages are.