{"id":15428,"date":"2022-09-16T12:50:22","date_gmt":"2022-09-16T12:50:22","guid":{"rendered":"https:\/\/www.searchenginejournal.com\/basics-of-javascript-seo-for-ecommerce\/463663\/"},"modified":"2022-09-16T12:50:22","modified_gmt":"2022-09-16T12:50:22","slug":"basics-of-javascript-seo-for-ecommerce-what-you-need-to-know-via-sejournal-sergebezborodov","status":"publish","type":"post","link":"https:\/\/marketingnewsbox.com\/?p=15428","title":{"rendered":"Basics Of JavaScript SEO For Ecommerce: What You Need To Know via @sejournal, @sergebezborodov"},"content":{"rendered":"

JavaScript (JS) is extremely popular in the ecommerce world because it helps create a seamless and user-friendly experience for shoppers.<\/p>\n

Take, for instance, loading items on category pages<\/a>, or dynamically updating products on the site using JS.<\/p>\n

While this is great news for ecommerce sites, JavaScript poses several challenges for SEO pros.<\/p>\n

Google is consistently working on improving its search engine, and a big part of its effort is dedicated to making sure its crawlers can access JavaScript content.<\/p>\n

But, ensuring that Google seamlessly crawls JS sites isn\u2019t easy.<\/p>\n

In this post, I\u2019ll share everything you need to know about JS SEO for ecommerce and how you can improve your organic performance.<\/p>\n

Let\u2019s begin!<\/p>\n

How JavaScript Works For Ecommerce Sites<\/h2>\n

When building an ecommerce site, developers use HTML for content and organization, CSS for design, and JavaScript for interaction with backend servers.<\/p>\n

JavaScript plays three prominent roles within ecommerce websites.<\/p>\n

1. Adding Interactivity To A Web Page<\/h3>\n

The objective of adding interactivity is to allow users to see changes based on their actions, like scrolling or filling out forms.<\/p>\n

For instance: a product image changes when the shopper hovers the mouse over it. Or hovering the mouse makes the image rotate 360 degrees, allowing the shopper to get a better view of the product.<\/p>\n

All of this enhances user experience (UX) and helps buyers decide on their purchases.<\/p>\n

JavaScript adds such interactivity to sites, allowing marketers to engage visitors and drive sales.<\/p>\n

2. Connecting To Backend Servers<\/h3>\n

JavaScript allows better backend integration using Asynchronous JavaScript (AJAX) and Extensible Markup Language (XML).<\/p>\n

It allows web applications to send and retrieve data from the server asynchronously while upholding UX.<\/p>\n

In other words, the process doesn\u2019t interfere with the display or behavior of the page.<\/p>\n

Otherwise, if visitors wanted to load another page, they would have to wait for the server to respond with a new page. This is annoying and can cause shoppers to leave the site.<\/p>\n

So, JavaScript allows dynamic, backend-supported interactions \u2013 like updating an item and seeing it updated in the cart \u2013 right away.<\/p>\n

Similarly, it powers the ability to drag and drop elements on a web page.<\/p>\n

3. Web Tracking And Analytics<\/h3>\n

JavaScript offers real-time tracking of page views and heatmaps that tell you how far down people are reading your content.<\/p>\n

For instance, it can tell you where their mouse is or what they clicked (click tracking).<\/p>\n

This is how JS powers tracking user behavior and interaction on webpages.<\/p>\n

How Do Search Bots Process JS?<\/h2>\n

Google processes JS in three stages<\/a>, namely: crawling, rendering, and indexing.<\/p>\n

\"URLImage from Google Search Central, September 2022<\/em><\/span>\"URL<\/div>\n

As you can see in this image, Google\u2019s bots put the pages in the queue for crawling and rendering. During this phase, the bots scan the pages to assess new content.<\/p>\n

When a URL is retrieved from the crawl queue by sending an HTTP request, it first accesses your robots.txt file to check if you\u2019ve permitted Google to crawl the page.<\/p>\n

If it\u2019s disallowed, the bots will ignore it and not send an HTTP request.<\/p>\n

In the second stage, rendering, the HTML, CSS, and JavaScript files are processed and transformed into a format that can be easily indexed by Google.<\/p>\n

In the final stage, indexing, the rendered content is added to Google\u2019s index, allowing it to appear in the SERPs.<\/p>\n

Common JavaScript SEO Challenges With Ecommerce Sites<\/h2>\n

JavaScript crawling is a lot more complex than traditional HTML sites.<\/p>\n

The process is quicker in the case of the latter.<\/p>\n

Check out this quick comparison.<\/p>\n

\n\n\n\n\n\n\n\n\n\n\n
<\/td>\nTraditional HTML Site Crawling<\/td>\n<\/td>\nJavaScript Crawling<\/td>\n<\/tr>\n
1<\/td>\nBots download the HTML file<\/td>\n1<\/td>\nBots download the HTML file<\/td>\n<\/tr>\n
2<\/td>\nThey extract the links to add them to their crawl queue<\/td>\n2<\/td>\nThey find no link in the source code because they are only injected after JS execution<\/td>\n<\/tr>\n
3<\/td>\nThey download the CSS files<\/td>\n3<\/td>\nBots download CSS and JS files<\/td>\n<\/tr>\n
4<\/td>\nThey send the downloaded resources to Caffeine, Google\u2019s indexer<\/td>\n4<\/td>\nBots use the Google Web Rendering Service (WRS) to parse and execute JS<\/td>\n<\/tr>\n
5<\/td>\nVoila! The pages are indexed<\/td>\n5<\/td>\nWRS fetches data from the database and external APIs<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n6<\/td>\nContent is indexed<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n7<\/td>\nBots can finally discover new links and add them to the crawl queue<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

Thus, with JS-rich ecommerce sites, Google finds it tough to index content or discover links before the page is rendered.<\/p>\n

In fact, in a webinar on how to migrate a website to JavaScript<\/a>, Sofiia Vatulyak, a renowned JS SEO expert, shared,<\/p>\n

\n

\u201cThough JavaScript offers several useful features and saves resources for the web server, not all search engines can process it. Google needs time to render and index JS pages. Thus, implementing JS while upholding SEO is challenging.\u201d<\/p>\n<\/blockquote>\n

Here are the top JS SEO challenges ecommerce marketers should be aware of.<\/p>\n

Limited Crawl Budget<\/h3>\n

Ecommerce websites often have a massive (and growing!) volume of pages that are poorly organized.<\/p>\n

These sites have extensive crawl budget requirements, and in the case of JS websites, the crawling process is lengthy.<\/p>\n

Also, outdated content, such as orphan<\/a> and zombie pages, can cause a huge wastage of the crawl budget<\/a>.<\/p>\n

Limited Render Budget<\/h3>\n

As mentioned earlier, to be able to see the content loaded by JS in the browser, search bots have to render it. But rendering at scale demands time and computational resources.<\/p>\n

In other words, like a crawl budget, each website has a render budget. If that budget is spent, the bot will leave, delaying the discovery of content and consuming extra resources.<\/p>\n

Google renders JS content in the second round of indexing.<\/p>\n

It\u2019s important to show your content within HTML, allowing Google to access it.<\/p>\n

\"firstImage from Google Search Central, September 2022<\/em><\/span>\"first<\/div>\n

Go to the Inspect element<\/em> on your page and search for some of the content. If you cannot find it there, search engines will have trouble accessing it.<\/p>\n

Troubleshooting Issues For JavaScript Websites Is Tough<\/h3>\n

Most JS websites face crawlability and obtainability issues.<\/p>\n

For instance, JS content limits a bot\u2019s ability to navigate pages. This affects its indexability.<\/p>\n

Similarly, bots cannot figure out the context of the content on a JS page, thus limiting their ability to rank the page for specific keywords.<\/p>\n

Such issues make it tough for ecommerce marketers to determine the rendering status of their web pages.<\/p>\n

In such a case, using an advanced crawler or log analyzer can help.<\/p>\n

Tools like Semrush Log File Analyzer<\/a>, Google Search Console Crawl Stats<\/a>, and JetOctopus<\/a>, among others, offer a full-suite log management solution, allowing webmasters to better understand how search bots interact with web pages.<\/p>\n

JetOctopus, for instance, has JS rendering functionality.<\/p>\n

Check out this GIF that shows how the tool views JS pages as a Google bot.<\/p>\n

\"HowScreenshot from JetOctopus, September 2022<\/em><\/span>\"How<\/div>\n

Similarly, Google Search Console Crawl Stats<\/a> shares a useful overview of your site\u2019s crawl performance.<\/p>\n

\"googleScreenshot from Google Search Console Crawl Stats, September 2022<\/em><\/span>\"google<\/div>\n

The crawl stats are sorted into:<\/p>\n