5 JavaScript SEO lessons from top ecommerce sites
Implement server‑rendered critical content and structured data in the initial HTML, and keep navigation links as standard anchors to ensure crawlability.
Adopt server‑rendered critical content and structured data in the initial HTML, keep navigation links as standard anchors, and hydrate interactive elements only after load.
Summary
JavaScript SEO remains a challenge for e‑commerce sites, even as modern frameworks promise fast, dynamic experiences.
Chewy, built on Next.js, demonstrates how server‑side rendering can place critical product information—title, description, price, reviews, breadcrumbs—in the initial HTML, allowing Googlebot to index content without waiting for JavaScript. The site also uses client‑side JavaScript only for non‑essential UI features like a “Compare Similar Items” carousel, striking a balance between crawlability and interactivity. Myprotein, powered by Astro’s islands architecture, ships navigation links as standard <a> elements in the first HTML payload, ensuring crawlers can discover and follow internal links before any JavaScript hydration occurs.
Harrods, a Nuxt‑based luxury retailer, embeds full Product schema JSON‑LD directly in the initial HTML, enabling Google to parse structured data on the first crawl pass and avoiding the pitfalls of client‑side generated markup. When structured data is added only after rendering, Google must render the page, which can reduce the frequency and reliability of Shopping crawls—critical for price‑sensitive e‑commerce sites. The article stresses that placing essential content and structured data in the server‑rendered HTML, using standard anchors for navigation, and hydrating interactive elements only after load are best practices for maintaining SEO health on JavaScript‑heavy sites.
Key changes
- Chewy uses Next.js server‑side rendering to embed product title, description, price, reviews, and breadcrumbs in the initial HTML, ensuring Googlebot can index content without JavaScript.
- Myprotein’s Astro islands architecture ships navigation links as standard <a> elements in the first HTML payload, allowing crawlers to discover internal links before JavaScript hydration.
- Harrods embeds full Product schema JSON‑LD directly in the initial HTML, enabling Google to parse structured data on the first crawl pass.
- Avoid client‑side only navigation; use standard anchors instead of JavaScript click handlers to ensure links are crawlable.
- Hydrate interactive UI components (e.g., carousels) only after the page loads, keeping essential content server‑rendered for SEO.