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.
PWAs Are Treated Like Other JavaScript-Based Sites by Google
Google doesn’t have a special set of requirements for PWAs, they are treated the same as any other JavaScript-based site.
Google Can’t Process Hard to Render Pages
Having pages that are hard to render, such as JavaScript pages with hundreds of include files, will mean that Google won’t be able to process all of your pages.
Empty Cached Pages Can Appear For JavaScript Sites
Google’s cached page usually reflects the raw HTML. For JavaScript based sites, if the JavaScript doesn’t run when it’s shown on the caching URL, then the cached version could appear empty.
May Take Time to Index Content for Single Page App Setup While Google Picks up JS Rendered Version
Google indexes the HTML version of a page first then the rendered version. John says that in future these two things will be done more or less at the same time. An example where this difference might be more noticeable is with a single page app setup where one HTML file is served to all pages which has no content and then the content is only later picked up through JavaScript rendering.
Check JavaScript Sites Render Correctly
John advises that any sites built with Angular JS or any other JS frameworks, should be checked to see if they render well, using Fetch and Render. There are a number of pages in Google’s developer documentation around debugging around JavaScript-based frameworks and Google have set up a JavaScript working group to ask questions about specific URLs.
Prevent InfiniteScroll Content Being Indexed by Blocking Onscroll Script with Robots.txt
If you need to prevent onscroll loaded content from being indexed, as with pages using infinitescroll, put the script that’s executed with the onscroll behind a robots.txt block.
Pre-Rendering JavaScript Pages May Be More Effective
Google is improving its JavaScript rendering, but it’s not handled exactly the same as normal pages so pre-rendering may be more effective.
Google Can Struggle Showing Cached Version of Pages With JavaScript
For cached pages if a site is using JavaScript, Google will link to those JavaScript files from the cached HTML page. However, because of cross-origin browser protections JavaScript won’t work in the same way if fetching it from a URL as opposed to directly from a website. So with some types of JavaScript if it can’t run for security reasons within the browser on a different domain, then it won’t work for a cached page.
JS Content Indexed Depending If Visible to Googlebot On Page Load
JavaScript content that is known by Google when the page is loaded is indexable (e.g. tabbed content). If JavaScript is used to load content on the page, Googlebot would likely miss this content.
Structured Data Shouldn’t Differ Between HTML and JavaScript
Google first crawls and indexes raw html and then the rendered HTML. If structured data differs between two could be confusing for Google.