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 Pick Up Links Swapped Out With JavaScript After the Page Has Loaded
Google can pick up links that are swapped out with JavaScript after the page has loaded, but not after a specific action like when a user hovers over the link.
Google Will Render Pages Immediately if Important For Search
The time it takes for Google to render a page can vary depending on where the page was found, when it was found and what else is happening around that page. If Google sees a page as being very important in search, they will render that page almost immediately.
URL Inspection Tool Could Change to Include Desktop Rendered Screenshot
John cannot confirm that the URL Inspection tool will be changing to include a screenshot of the desktop rendered version of pages. However, John admitted that this is something that is missing and that he will put it on the Search Console team’s radar.
Google Waits Some Time Before Timing Out During Rendering, But no Hard Cut Off
Googlebot waits for quite a while for rendering content to be served before timing out, but it isn’t possible to say a precise time. Martin recommends considering serving content as quickly as possible with server side or dynamic rendering or by using caching.
Googlebot May Not be Able to Properly Crawl Server-side Rendered Pages Where Only the Content is Rendered
Google is able to crawl server-side rendered pages if all functionality is available in the static HTML. However, if only the content is rendered and the links and structured data aren’t then Google won’t be able to crawl it as well.
Build Server-side Rendered Pages so Content Isn’t Removed if JavaScript Breaks
With server-side rendered pages that have additional JavaScript, make sure they’re built so that if the JavaScript breaks it doesn’t remove the content.
Structured Data Added via JavaScript Will Take Longer to Process
Google will pick up structured data markup added via JavaScript, such as Google Tag manager, but there may be a delay before Google renders the page with JavaScript. It can be more difficult to diagnose technical problems, so John recommends including it directly in the page.
Google Cache Shows Static HTML, Not JavaScript Rendered HTML
Google cache shows the static HTML version of a page, so if the whole page is built using JavaScript, it may not be shown in the cache.
Crawl Budget Limitations May Delay JavaScript Rendering
Sometimes the delay in Google’s JavaScript rendering is caused by crawl budget limitations. Google is actively working on reducing the gap between crawling pages, and rendering them with JavaScript, but it will take some time, so they recommend dynamic, hybrid or server-side rendering content for sites with a lot of content.
Use Mobile-friendly Test & Googlebot User Agent in Browser to Check For Rendering Issues
Use the mobile-friendly test to see how Googlebot is fetching the mobile version of a page and to check for JavaScript errors. Additionally, you can change the user-agent to Googlebot in your browser to double check what your server is returning.