JavaScript Rendering & SEO
Search engines treat JavaScript content on a website differently from typical HTML content and will render it separately. As the use of JavaScript on the web increases due to the number of features it makes possible, it is important to understand how search engines view this content and optimize for this. Check out our “Hamburger Analogy” an introduction to client-side vs. server-side JavaScript rendering.
Our SEO Office Hours notes and video clips compiled here cover JavaScript-related SEO best practices from Google, along with notes on the latest advancements to their rendering engine.
Asynchronously/Lazy-loading Content & Links Will Delay Processing & Indexing
When lazy-loading or asynchronously loading content or links, make sure that Googlebot is able to render them. There would be a delay in rendering and indexing this content and processing any links, as JavaScript indexing is deferred.
Use Pre-rendering for Mobile to Avoid Issues with Google’s Speed Update
Google’s mobile ‘Speed Update’ will try to get a full picture of your site’s performance and will use a variety of different metrics. JavaScript shouldn’t be an issue if you are using pre-rendering on mobile.
Google Judges Speed in the Same Way for Pages With & Without JavaScript
For JavaScript rendering, Google judges speed in the same way as it does for any web page. Sites being slowed down by JavaScript are only a problem when they are really slow, a matter of seconds doesn’t matter.
Content Served Via an Escaped Fragment May Not Get Picked Up
If you’re using pre-rendering tools for client-side rendering, make sure they don’t use hashbang with an escaped fragment URL to serve the pre-rendered content as this may not get picked up by Google.
Googlebot Doesn’t Have a Set Time For Rendering
There isn’t a set time for Googlebot to render a page because caching is utilised, meaning content doesn’t need to be fetched every time. Googlebot rendering time is very different to that of the browser.
Include Static A Href Links When Using JavaScript Push Array for Catching Clicks
You need to have a static a href link as a fallback when utilising JavaScript push array to catch clicks.
Ensure Scripts in Head Don’t Close it Prematurely
John has seen instances of scripts inserting non-head elements into the head of a page, like iframes or divs, which could result in Googlebot missing hreflang links because it assumes the head has closed. This can be checked with Google’s Rich Results tool using ‘View Code’.
Google’s Web Rendering Service is Still Currently Using Chrome 41
Google’s Web Rendering Service is still using Chrome 41 even with mobile-first indexing starting to roll out, but it will be updated to a newer version of Chrome in the future.
Test JavaScript Frameworks With the Rich Results Feature in GSC
Use the rich results feature in Google Search Console to test JavaScript frameworks as you are able to see the rendered HTML and check that all the elements have been pulled in.
Googlebot Will Likely See US Version of Localised Text Using JS
Localising text on a page based on IP address using JavaScript will mean that Googlebot will likely see the US version of that text if it is rendered. You may decide to disallow this JavaScript if you don’t want the text to be crawled by search engines, but you need to make sure this is only a small part of the page else it might be considered to be cloaking.