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.
Google Can Process JavaScript Redirects as Long as it Can Crawl Them
JavaScript redirects don’t usually cause any problems for Google as long as it can crawl them, and they are treated as regular redirects. Make sure these redirects aren’t disallowed, however, as Google won’t be able to process them.
Client-side Rendering Doesn’t Work for Facebook & Twitters’ Crawlers
Be mindful that other crawlers, specifically the ones used by Facebook and Twitter, don’t support client-side rendering. Any Open Graph Tags or Twitter Cards implemented with JavaScript need to be server-side rendered or dynamically rendered.
Large Sites with Frequently Changing Content Should Use Dynamic Rendering Rather Than Client-side
It is recommended for websites with fast-changing content and large websites to implement dynamic rendering rather than client-side rendering. Client-side rendering can cause a delay in indexing and can also UX issues, especially on mobile.
JavaScript Snippets Can Close Head & Cause Elements Below to be Overlooked
Be careful when adding JavaScript snippets to the head of a page, as this might cause the head to close prematurely and cause elements like hreflang links not to be processed, as they are seen as part of the body.
Text That’s Hidden by Default During Rendering is Fine For Google
Some sites will prevent content from being visible until the page has finished rendering to stop elements from jumping around the screen as they are loaded. This is fine for Google as long as the textual content is in the HTML, but check what Google can see with the mobile-friendly testing tool and Fetch & Render in GSC.
Google Can Associate Content Within Iframes & JavaScript With Rest of Page
Google doesn’t have a preference over iframes or JavaScript for providing content, as it can apply content from both to the overall context of a page.
It Will be Difficult For Google to Improve its Rendering Services at Scale
There are plans for Google to improve its rendering services, but this will take a long time as it will be very difficult to make rendering improvements at scale, especially for websites with millions of pages that each require rendering.
Use Pre-rendering For New JavaScript Frameworks so Google Can Index Them
Google uses Chrome 41 for rendering which is an old version, so it may struggle to render new frameworks such as JavaScript ES6. To get around this issue, use pre-rendering.
Ecommerce Websites Should Avoid Serving Product Page Content Via JavaScript
Large ecommerce websites should steer clear of serving product page content via JavaScript as this can delay indexing of new products by weeks, as opposed to minutes when you serve content in the HTML.
Avoid Using Lazy-loading For Crucial Images & Content
If you have images and content that are essential to the website, then avoid using lazy-loading for these elements as Googlebot isn’t always able to process them.