{"id":726184,"date":"2026-05-08T07:30:26","date_gmt":"2026-05-08T04:30:26","guid":{"rendered":"https:\/\/buradabiliyorum.com\/en\/5-javascript-seo-lessons-from-top-ecommerce-sites\/"},"modified":"2026-05-08T07:30:26","modified_gmt":"2026-05-08T04:30:26","slug":"5-javascript-seo-lessons-from-top-ecommerce-sites","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/5-javascript-seo-lessons-from-top-ecommerce-sites\/","title":{"rendered":"5 JavaScript SEO lessons from top ecommerce sites"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2d921e32ba2\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2d921e32ba2\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/5-javascript-seo-lessons-from-top-ecommerce-sites\/#See_how_Chewy_Harrods_Under_Armour_and_more_brands_handle_rendering_navigation_structured_data_and_scripts_without_hurting_SEO\" >See how Chewy, Harrods, Under Armour, and more brands handle rendering, navigation, structured data, and scripts without hurting SEO.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/5-javascript-seo-lessons-from-top-ecommerce-sites\/#1_Chewy_uses_JavaScript_for_UX\" >1. Chewy uses JavaScript for UX<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/5-javascript-seo-lessons-from-top-ecommerce-sites\/#2_Myprotein_makes_navigation_crawlable\" >2. Myprotein makes navigation crawlable<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/5-javascript-seo-lessons-from-top-ecommerce-sites\/#3_Harrods_embeds_structured_data_in_the_HTML\" >3. Harrods embeds structured data in the HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/5-javascript-seo-lessons-from-top-ecommerce-sites\/#4_Under_Armour_handles_faceted_navigation_with_JavaScript\" >4. Under Armour handles faceted navigation with JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/5-javascript-seo-lessons-from-top-ecommerce-sites\/#5_Manors_Golf_loads_third-party_scripts\" >5. Manors Golf loads third-party scripts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/5-javascript-seo-lessons-from-top-ecommerce-sites\/#The_balance_between_interactivity_and_crawlability\" >The balance between interactivity and crawlability<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/5-javascript-seo-lessons-from-top-ecommerce-sites\/#Topics_on_this_page\" >Topics on this page<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"subhead\" itemprop=\"alternativeHeadline\"><span class=\"ez-toc-section\" id=\"See_how_Chewy_Harrods_Under_Armour_and_more_brands_handle_rendering_navigation_structured_data_and_scripts_without_hurting_SEO\"><\/span>See how Chewy, Harrods, Under Armour, and more brands handle rendering, navigation, structured data, and scripts without hurting SEO.<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><\/p>\n<div class=\"bialty-container\">\n<p>Java<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Script<\/a> SEO should be a solved problem by now. It isn\u2019t.<\/p>\n<p>Ecommerce sites keep hitting the same crawling, rendering, and indexing issues they were five years ago, now stacked on top of headless builds, AI-powered recommendations, and frameworks that can hide critical content from Google.<\/p>\n<p>These top ecommerce players have figured out how to ship fast, modern JavaScript without sacrificing organic visibility. Here are five lessons worth stealing.<\/p>\n<h2 id=\"chewy-uses-javascript-for-ux\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Chewy_uses_JavaScript_for_UX\"><\/span>1. Chewy uses JavaScript for UX<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Chewy is one of the largest online retailers of pet food and supplies in the U.S. They use Next.js, a React framework for building websites with built-in support for server rendering, static generation, and full-stack development features.<\/p>\n<p>That means you can put important content in the initial HTML response without relying on client-side JavaScript.<\/p>\n<p>Let\u2019s look at a product page like the Benebone Wishbone Chew Toy.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"2048\" height=\"1175\" http: alt=\"Chewy product page\" class=\"wp-image-476728\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-product-page-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-product-page-768x440.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-product-page-1536x881.png 1536w\" data-lazy-sizes=\"(max-width: 2048px) 100vw, 2048px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-product-page-scaled.png.webp\"><img fetchpriority=\"high\" decoding=\"async\" width=\"2048\" height=\"1175\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-product-page-scaled.png.webp\" alt=\"Chewy product page\" class=\"wp-image-476728\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-product-page-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-product-page-768x440.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-product-page-1536x881.png 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\"><\/figure>\n<\/div>\n<p>Navigate to <em>View Page Source<\/em> and you\u2019ll see the product title, description, pricing, reviews, Q&amp;A, and breadcrumb navigation all present in the initial HTML. Googlebot can access it on the first pass, <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/developers.google.com\/search\/docs\/crawling-indexing\/javascript\/javascript-seo-basics#how-googlebot-processes-javascript\" target=\"_blank\" rel=\"noopener\">without waiting for rendering<\/a>.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"197\" http: alt=\"Chewy page source\" class=\"wp-image-476730\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-page-source-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-page-source-768x74.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-page-source-1536x148.png 1536w\" data-lazy-sizes=\"(max-width: 2048px) 100vw, 2048px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-page-source-scaled.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"197\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-page-source-scaled.png.webp\" alt=\"Chewy page source\" class=\"wp-image-476730\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-page-source-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-page-source-768x74.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-page-source-1536x148.png 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\"><\/figure>\n<\/div>\n<p>That\u2019s important because if a web crawler like Googlebot encounters issues rendering your page, the important content can still be parsed on the first crawl. With the rise of AI chatbots, some of which still <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/vercel.com\/i\/how-ai-is-changing-seo\" target=\"_blank\" rel=\"noopener\">don\u2019t render JavaScript<\/a>, this has become even more important.<\/p>\n<p>Not everything needs to be in the initial HTML, though. Without client-side JavaScript, the page would feel static and clunky.<\/p>\n<p>Take the \u201cCompare Similar Items\u201d carousel. It\u2019s loaded client-side, primarily there for shoppers. The internal links could offer some SEO benefit, but they\u2019re not critical for indexing this page the way the title, description, and pricing are. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1092\" http: alt=\"Chewy similar items carousel\" class=\"wp-image-476731\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-similar-items-carousel-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-similar-items-carousel-768x410.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-similar-items-carousel-1536x819.png 1536w\" data-lazy-sizes=\"(max-width: 2048px) 100vw, 2048px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-similar-items-carousel-scaled.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1092\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-similar-items-carousel-scaled.png.webp\" alt=\"Chewy similar items carousel\" class=\"wp-image-476731\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-similar-items-carousel-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-similar-items-carousel-768x410.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Chewy-similar-items-carousel-1536x819.png 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\"><\/figure>\n<\/div>\n<p>Chewy gets this balance right. The content that matters most for indexing is available on initial load. Client-side JavaScript enhances the experience rather than delivering the content that needs to be indexed.<\/p>\n<div style=\"background: radial-gradient(circle at 30% 40%, rgba(184, 111, 255, 0.15), rgba(0, 169, 255, 0.15) 40%, #CDE8FD 70%); padding: 30px; width: 100%; max-width: 802px; color: #000000 !important; font-family: Arial, sans-serif; margin: 25px 0 30px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: relative; box-sizing: border-box;\">\n<div style=\"width: 100%; max-width: 100%; margin-bottom: 20px; text-align: left; padding-right: 20px; box-sizing: border-box;\">\n<div id=\"semrush-one-headline\" class=\"headline-responsive\" style=\"font-family: Oswald, sans-serif; font-size: 30px; font-weight: normal; margin: 0; color: #000000 !important; line-height: 1.2;\">\n        Your customers search everywhere. Make sure your brand <span style=\"background: linear-gradient(90deg, #D56EFE 0%, #068EF8 51%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\">shows up<\/span>.\n      <\/div>\n<p id=\"semrush-one-subhead\" style=\"font-family: Roboto, sans-serif; font-size: 18px; font-weight: 300; line-height: 25px; margin: 12px 0 0 0; color: #000000 !important;\">\n        The SEO toolkit you know, plus the AI visibility data you need.\n      <\/p>\n<\/p><\/div>\n<div style=\"margin-bottom: 15px;\">\n      <span id=\"semrush-one-cta\" style=\"display: inline-block; background-color: #FF642D; color: white; height: 44px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; padding: 0 24px; font-weight: bold; white-space: nowrap; box-sizing: border-box; text-decoration: none; line-height: 44px;\">Start Free Trial<\/span>\n    <\/div>\n<div style=\"font-size: 12px;\">\n<div style=\"font-family: Roboto, sans-serif; font-weight: 300; color: #000000; margin-bottom: 4px;\">Get started with<\/div>\n<p>      <img loading=\"lazy\" width=\"400\" height=\"52\" decoding=\"async\" http: alt=\"Semrush One Logo\" style=\"height: 16px; width: auto; display: block;\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2025\/11\/semrush-one.webp\"><img loading=\"lazy\" width=\"400\" height=\"52\" decoding=\"async\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2025\/11\/semrush-one.webp\" alt=\"Semrush One Logo\" style=\"height: 16px; width: auto; display: block;\">\n    <\/div>\n<\/p><\/div>\n<style>\n  @media (max-width: 768px) {\n    .headline-responsive {\n      font-size: 30px !important;\n      line-height: 1.3 !important;\n    }\n  }\n<\/style>\n<\/p>\n<h2 id=\"myprotein-makes-navigation-crawlable\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Myprotein_makes_navigation_crawlable\"><\/span>2. Myprotein makes navigation crawlable<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Myprotein sells supplements, nutrition products, and some fitness apparel.<\/p>\n<p>Their site is built on Astro, a content-first framework using Islands Architecture to ship zero JavaScript by default while supporting components from React, Vue, or Svelte.<\/p>\n<p>Myprotein\u2019s navigation is the part worth studying. It\u2019s an important SEO area for ecommerce sites, and they get it right.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"321\" http: alt=\"Myprotein navigation\" class=\"wp-image-476732\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-768x120.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-1536x241.png 1536w\" data-lazy-sizes=\"(max-width: 2048px) 100vw, 2048px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-scaled.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"321\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-scaled.png.webp\" alt=\"Myprotein navigation\" class=\"wp-image-476732\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-768x120.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-1536x241.png 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\"><\/figure>\n<\/div>\n<p>View the source on any Myprotein page and the navigation links (categories, dropdown items, and footer links) are all in the initial HTML response. Astro makes this possible through its <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/docs.astro.build\/en\/concepts\/islands\/\" target=\"_blank\" rel=\"noopener\">island architecture<\/a>.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"194\" http: alt=\"Myprotein source code\" class=\"wp-image-476733\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-html-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-html-768x73.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-html-1536x146.png 1536w\" data-lazy-sizes=\"(max-width: 2048px) 100vw, 2048px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-html-scaled.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"194\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-html-scaled.png.webp\" alt=\"Myprotein source code\" class=\"wp-image-476733\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-html-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-html-768x73.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Myprotein-nav-html-1536x146.png 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\"><\/figure>\n<\/div>\n<p>The navigation ships as an interactive island, meaning Astro will hydrate it with JavaScript as soon as the browser is ready. But JavaScript makes the flyout menus interactive. It doesn\u2019t create them.<\/p>\n<p>These links are also proper <code>&lt;a&gt;<\/code> elements with href attributes, which is what crawlers like Googlebot need to <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/developers.google.com\/search\/docs\/crawling-indexing\/links-crawlable\" target=\"_blank\" rel=\"noopener\">discover and follow links<\/a>. Avoid using JavaScript click handlers to simulate navigation, such as:<\/p>\n<p><code>&lt;div onclick=\"navigate(item.slug)\"&gt;Clear Protein Drinks&lt;\/div&gt;<\/code><\/p>\n<p>A crawler won\u2019t follow that. Use a standard anchor element instead:<\/p>\n<p><code>&lt;a href=\"https:\/\/us.myprotein.com\/c\/nutrition\/protein\/clear-protein-drinks\/\"&gt;Clear Protein Drinks&lt;\/a&gt;<\/code><\/p>\n<p>Not every site gets this right. When navigation depends entirely on client-side rendering, there\u2019s a window where it\u2019s invisible or empty.<\/p>\n<p>Googlebot <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/developers.google.com\/search\/docs\/crawling-indexing\/javascript\/javascript-seo-basics#how-googlebot-processes-javascript\">processes JavaScript<\/a> in a separate rendering pass that can lag behind the initial crawl, which can mean delayed discovery of internal links critical for crawl efficiency and link equity distribution.<\/p>\n<h2 id=\"harrods-embeds-structured-data-in-the-html\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Harrods_embeds_structured_data_in_the_HTML\"><\/span>3. Harrods embeds structured data in the HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Harrods is a luxury department store selling fashion, beauty, and homeware.<\/p>\n<p>Their site is built on Nuxt, a Vue framework for building websites with built-in routing, server rendering, and static generation, plus an opinionated project structure.<\/p>\n<p>Their structured data is delivered in the initial HTML response. View the source on any product page and you\u2019ll find structured data inside a <code>&lt;script type=\"application\/ld+json\"&gt;<\/code> element. The Product schema includes the product name, images, description, brand, and an Offer with price, currency, availability, and seller.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"324\" http: alt=\"Harrods page source\" class=\"wp-image-476734\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Harrods-Product-schema-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Harrods-Product-schema-768x121.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Harrods-Product-schema-1536x243.png 1536w\" data-lazy-sizes=\"(max-width: 2048px) 100vw, 2048px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Harrods-Product-schema-scaled.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"324\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Harrods-Product-schema-scaled.png.webp\" alt=\"Harrods page source\" class=\"wp-image-476734\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Harrods-Product-schema-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Harrods-Product-schema-768x121.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Harrods-Product-schema-1536x243.png 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\"><\/figure>\n<\/div>\n<p>JSON-LD is the <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/structured-data\/intro-structured-data#supported-formats\" target=\"_blank\" rel=\"noopener\">format Google recommends<\/a> for structured data, and because it\u2019s in the HTML response, Google can parse it on the first crawl pass without needing to render the page.<\/p>\n<p>On JavaScript-powered sites, structured data can easily become a client-side dependency. If a framework fetches product data in the browser and generates JSON-LD from the response, that structured data only exists after JavaScript executes. The same is true for structured data injected <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">through <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/structured-data\/generate-structured-data-with-javascript#use-google-tag-manager\" target=\"_blank\">Google<\/a><\/span><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/structured-data\/generate-structured-data-with-javascript#use-google-tag-manager\" target=\"_blank\" rel=\"noopener\"> Tag Manager<\/a>.<\/p>\n<p>If markup is only added after the page loads, Google has to render the page to find it. <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/structured-data\/generate-structured-data-with-javascript\">Google has noted<\/a> that dynamically generated Product markup can make Shopping crawls less frequent and less reliable, which matters when prices and availability change often.<\/p>\n<p>By serving that structured data in the HTML directly, Harrods avoids this risk entirely.<\/p>\n<p><!-- START INLINE FORM --><\/p>\n<p><!-- END INLINE FORM --><\/p>\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background\">\n<h2 id=\"under-armour-handles-faceted-navigation-with-javascript\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Under_Armour_handles_faceted_navigation_with_JavaScript\"><\/span>4. Under Armour handles faceted navigation with JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Under Armour is a global sportswear brand selling athletic apparel, footwear, and accessories. Their site is built on Next.js, the same React framework Chewy uses.<\/p>\n<p>A good place to see their JavaScript SEO in action is on category pages, where filters need to feel fast and interactive for shoppers, and be crawler-friendly.<\/p>\n<p>Let\u2019s look at the men\u2019s shoes category page. When you apply a filter, say, selecting size 10, the product grid updates instantly without a full page reload. That\u2019s client-side JavaScript updating the grid.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1708\" http: alt=\"Under Armour porduct page\" class=\"wp-image-476735\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Under-Armour-faceted-navigation-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Under-Armour-faceted-navigation-768x640.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Under-Armour-faceted-navigation-1536x1281.png 1536w\" data-lazy-sizes=\"(max-width: 2048px) 100vw, 2048px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Under-Armour-faceted-navigation-scaled.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1708\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Under-Armour-faceted-navigation-scaled.png.webp\" alt=\"Under Armour porduct page\" class=\"wp-image-476735\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Under-Armour-faceted-navigation-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Under-Armour-faceted-navigation-768x640.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Under-Armour-faceted-navigation-1536x1281.png 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\"><\/figure>\n<\/div>\n<p>But the URL updates too. After selecting the filter, the URL becomes:<\/p>\n<ul class=\"wp-block-list\">\n<li><code>https:\/\/www.underarmour.com\/en-us\/c\/mens\/shoes\/?prefn1=size&amp;prefv1=10<\/code><\/li>\n<\/ul>\n<p>A shopper can copy that URL, send it to a friend, or bookmark it, and land right back on the same filtered view.<\/p>\n<p>Notice what the URL isn\u2019t:<\/p>\n<ul class=\"wp-block-list\">\n<li>Not a hash fragment (#size=10), which doesn\u2019t get sent to the server and is ignored by Google.<\/li>\n<li>Not a mess of bracketed query strings (?filters[0][size]=10).<\/li>\n<li>Not a dynamic route artifact like \/shoes\/SEO\/ leaking into the live URL.<\/li>\n<\/ul>\n<p>It\u2019s a clean, readable query string with named parameters.<\/p>\n<p>Under Armour is using the Next.js router to update the URL as filters change. Under the hood, it wraps the browser\u2019s <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/History_API\" target=\"_blank\" rel=\"noopener\">History API<\/a> and uses the <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/History\/pushState\" target=\"_blank\" rel=\"noopener\">pushState() method<\/a> to update the address bar without a reload.<\/p>\n<p>When someone visits that same URL directly, the page loads with the filter already applied.<\/p>\n<h2 id=\"manors-golf-loads-thirdparty-scripts\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Manors_Golf_loads_third-party_scripts\"><\/span>5. Manors Golf loads third-party scripts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Manors Golf sells golf apparel. Their site runs on Hydrogen, Shopify\u2019s React-based framework for headless storefronts.<\/p>\n<p>Hydrogen defers its own application scripts automatically since they load as ES modules. However, third-party scripts are the developer\u2019s responsibility. On an ecommerce site, that can be a long list: reviews, chat, personalization, pixels, recommendations, payment scripts.<\/p>\n<p>That matters for SEO in two ways. Render-blocking scripts hurt Core Web Vitals, most directly Largest Contentful Paint (LCP). They also give Googlebot more work to render the page, so it may get processed less reliably.<\/p>\n<p>An external script (<code>&lt;script src=\"https:\/\/searchengineland.com\/...\"&gt;<\/code>) without async or defer <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/shopify.dev\/docs\/storefronts\/themes\/tools\/theme-check\/checks\/parser-blocking-javascript\" target=\"_blank\" rel=\"noopener\">blocks HTML parsing<\/a>. <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/script\" target=\"_blank\" rel=\"noopener\">Async<\/a> fetches in the background and runs when ready. Defer waits until parsing finishes.<\/p>\n<p>Manors loads external scripts from 12 third-party domains, including Klaviyo, TikTok, Microsoft Clarity, and Gorgias.<\/p>\n<p>A look at the <em>Elements<\/em> panel shows them all loading with async:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"175\" http: alt=\"Manors async attribute\" class=\"wp-image-476736\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Manors-async-attribute-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Manors-async-attribute-768x66.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Manors-async-attribute-1536x131.png 1536w\" data-lazy-sizes=\"(max-width: 2048px) 100vw, 2048px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Manors-async-attribute-scaled.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"175\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Manors-async-attribute-scaled.png.webp\" alt=\"Manors async attribute\" class=\"wp-image-476736\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Manors-async-attribute-scaled.png.webp 2048w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Manors-async-attribute-768x66.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/Manors-async-attribute-1536x131.png 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\"><\/figure>\n<\/div>\n<p>By loading third-party scripts with async, Manors keeps them from blocking the initial render. That protects LCP and reduces the work Google\u2019s Web Rendering Service (WRS) has to do.<\/p>\n<div style=\"background: radial-gradient(circle at 30% 40%, rgba(184, 111, 255, 0.15), rgba(0, 169, 255, 0.15) 40%, #CDE8FD 70%); padding: 30px; width: 100%; max-width: 802px; color: #000000 !important; font-family: Arial, sans-serif; margin: 25px 0 30px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: relative; box-sizing: border-box;\">\n<div style=\"width: 100%; max-width: 100%; margin-bottom: 20px; text-align: left; padding-right: 20px; box-sizing: border-box;\">\n<div id=\"semrush-one-headline-bottom\" class=\"headline-responsive\" style=\"font-family: Oswald, sans-serif; font-size: 30px; font-weight: normal; margin: 0; color: #000000 !important; line-height: 1.2;\">\n        See the <span style=\"background: linear-gradient(90deg, #D56EFE 0%, #068EF8 51%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\">complete picture<\/span> of your search visibility.\n      <\/div>\n<p id=\"semrush-one-subhead-bottom\" style=\"font-family: Roboto, sans-serif; font-size: 18px; font-weight: 300; line-height: 25px; margin: 12px 0 0 0; color: #000000 !important;\">\n        Track, optimize, and win in Google and AI search from one platform.\n      <\/p>\n<\/p><\/div>\n<div style=\"margin-bottom: 15px;\">\n      <span id=\"semrush-one-cta-bottom\" style=\"display: inline-block; background-color: #FF642D; color: white; height: 44px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; padding: 0 24px; font-weight: bold; white-space: nowrap; box-sizing: border-box; text-decoration: none; line-height: 44px;\">Start Free Trial<\/span>\n    <\/div>\n<div style=\"font-size: 12px;\">\n<div style=\"font-family: Roboto, sans-serif; font-weight: 300; color: #000000; margin-bottom: 4px;\">Get started with<\/div>\n<p>      <img loading=\"lazy\" width=\"400\" height=\"52\" decoding=\"async\" http: alt=\"Semrush One Logo\" style=\"height: 16px; width: auto; display: block;\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2025\/11\/semrush-one.webp\"><img loading=\"lazy\" width=\"400\" height=\"52\" decoding=\"async\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2025\/11\/semrush-one.webp\" alt=\"Semrush One Logo\" style=\"height: 16px; width: auto; display: block;\">\n    <\/div>\n<\/p><\/div>\n<style>\n  @media (max-width: 768px) {\n    .headline-responsive {\n      font-size: 30px !important;\n      line-height: 1.3 !important;\n    }\n  }\n<\/style>\n<\/p>\n<h2 id=\"the-balance-between-interactivity-and-crawlability\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_balance_between_interactivity_and_crawlability\"><\/span>The balance between interactivity and crawlability<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The issue isn\u2019t that you\u2019re using JavaScript. It\u2019s what you\u2019re using it for. <\/p>\n<p>Googlebot can process JavaScript, but it\u2019s slower and less reliable than reading HTML. The more your core content, structure, and navigation depend on JavaScript, the more room there is for things to go wrong.<\/p>\n<p>The sites in this article all use JavaScript to enhance the experience rather than deliver it. Do that, and you won\u2019t have to choose between a good user experience and good SEO.<\/p>\n<\/p>\n<div class=\"ttd-topics-display\">\n<div class=\"ttd-topics-content\">\n<h5><span class=\"ez-toc-section\" id=\"Topics_on_this_page\"><\/span>Topics on this page<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<div class=\"ttd-topics-links\">Search engine optimizationJavaScriptHTMLGoogleGooglebotJSON-LDReactShopifyCore Web VitalsArtificial intelligenceRuger LCPMicrosoft ClarityKlaviyoE-commerceStructured dataUnder ArmourWeb developmentWeb performance<\/div>\n<\/div>\n<div class=\"ttd-topics-show-extra-button\">+13 more<\/div>\n<\/div>\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMN63nwsw68G3Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/buradabiliyorum.com\/en\/category\/technology\/\" target=\"_blank\" >Technology<\/a><\/span> category.<\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/searchengineland.com\/5-javascript-seo-lessons-from-top-ecommerce-sites-476666\" target=\"_blank\" >Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>See how Chewy, Harrods, Under Armour, and more brands handle rendering, navigation, structured data, and scripts without hurting SEO. JavaScript SEO should be a solved problem by now. It isn\u2019t. Ecommerce sites keep hitting the same crawling, rendering, and indexing issues they were five years ago, now stacked on top of headless builds, AI-powered recommendations,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":726185,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/searchengineland.com\/wp-content\/seloads\/2026\/05\/5-JavaScript-SEO-lessons-from-top-ecommerce-sites.png","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-726184","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/726184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=726184"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/726184\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/726185"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=726184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=726184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=726184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}