JavaScript SEO seems like it should be a cinch by now, doesn’t it? Yet, here we are with persistent challenges that e-commerce sites continuously face. After five years of grappling with issues like crawling, rendering, and indexing, coupled with the complexities of headless builds and AI-powered recommendations, it’s clear we still have a ways to go. However, some top-tier ecommerce sites have cracked the code. Their innovative approaches offer invaluable lessons in maintaining organic visibility while shipping fast, modern JavaScript experiences. Let me share these five insights with you.
Chewy is a giant in the U.S. pet food and supplies online retail space. They’ve harnessed the power of Next.js, a React framework, to seamlessly integrate server rendering, static generation, and full-stack development into their operations. Imagine visiting a product page like the Benebone Wishbone Chew Toy. Here, everything you need—product title, description, pricing, reviews, Q&A, and breadcrumb navigation—is already embedded in the initial HTML. This means Googlebot can access this information right away, without having to wait for JavaScript to render. This approach reduces the risk of rendering issues, especially significant with the rise of AI chatbots that still don’t handle JavaScript efficiently. While not all content needs to be on the initial load, like the ‘Compare Similar Items’ carousel meant for user engagement, Chewy perfectly balances what’s essential for indexing with user experience enhancements.
Switching gears to Myprotein, this brand masters the art of making navigation easily crawlable. Using Astro, a content-first framework, their site ships zero JavaScript by default and includes components that support React, Vue, or Svelte, making their SEO strategy a prime example to study. By ensuring all navigation links are present in the initial HTML response, Myprotein leverages Astro’s island architecture to hydrate these elements with JavaScript interactively. Crawlers like Googlebot can thus easily discover and process these links since they use proper anchor elements with href attributes. This proactive strategy prevents navigation from being invisible or empty during searches, thereby preserving efficient crawlability.
Harrods, renowned for luxury goods, ensures their structured data delivers in the HTML’s initial response. By embedding structured data using the Product schema within the HTML directly, Harrods guarantees that Google can parse this data right from the first crawl, without waiting for page rendering. This foresight prevents client-side dependencies and ensures Google has immediate access to important data like pricing and availability, which is critical due to frequent updates in product details.
Over at Under Armour, the elegance of their faceted navigation shines. Built on Next.js like Chewy, Under Armour ensures filters on category pages are fast, interactive, and SEO-friendly. When shoppers apply filters, the product grid seamlessly updates without a full reload, leveraging client-side updates while maintaining clean, readable URLs that Google can index effectively. By avoiding hash fragments and bracketed query strings, these URLs become shareable and bookmark-friendly, thus enhancing both user experience and SEO performance.
Finally, Manors Golf demonstrates SEO prowess by efficiently managing third-party scripts on their site. Utilizing Shopify’s Hydrogen framework, they cleverly defer scripts using async attributes, ensuring they don’t block the initial rendering process. This tactic not only protects the Largest Contentful Paint (LCP) metric but also eases Google’s rendering workload, contributing to a robust SEO strategy.
The secret isn’t in using JavaScript itself but in how it’s used. When JavaScript serves to enhance rather than deliver the core functionality and content, it paves the way for an excellent user experience while preserving SEO integrity. These lessons from major e-commerce players are testament to the delicate balance between interactivity and search engine crawlability.
Inspired by this post on Search Engine Land.
Leave a Reply