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.
Slow JavaScript on Pages May Affect the Google Rendering
If your pages have slow loading JavaScript, this might cause Google an issue with rendering the pages. If Google is not able to render them in a reasonable amount of time, we will just render the HTML version of the page.
Google cached pages are raw unrendered HTML.
Google’s cached page usually picks up raw HTML. For JavaScript based sites, if the JavaScript doesn’t run when it’s on a different hostname then the cached version could look empty. Checks should be made to see if content on these pages is being indexed and ensure only the cached page is affected.
Updating Content with JavaScript Works, But is not Ideal
You can change titles, descriptions, canonical, noindex etc, using JavaScript like Tag Manager, then Google will take this into account when they render the pages, although John says it is no ideal.
Event Based Interstitials are Not OK
Interstitials which appears after JavaScript events, such as scrolling, are still considered unacceptable by Google.
Don’t Prevent Embedded File caching
If you prevent JS, CSS and image caching, such as a nocache header tag, Google will need to keep requesting the files for rendering, which may slow down crawling of the site.
Put Hreflang Tags Higher Up In The Head
John suggests placing your hreflang tags high up in the
section, particularly above any JavaScript which modifies the head.A JavaScript Modified Head can Break Meta Tags
If things like Hreflang tags in headers are not being picked up, it might be due to a problem with the head, perhaps modified by JavaScript. You can use the Inspect Element tool in Chrome to see the rendered page to validate the header section is correct.
Lazy Loaded Images Won’t Be Indexed
Images loaded via lazy load probably won’t get indexed, particularly if they are not showing up in the Fetch and Render tool.
Use JavaScript Redirects for URLs with Fragments
In order to redirect fragment URLs, which can’t work with normal 301 redirects, you need to use JavaScript redirects, or canonical tags on the pages.
JavaScript Navigation May Not Be Crawled
Multiple selection filters can be tricky. JavaScript based navigation which redirects users to a new URL might not be detected by Google. John suggests setting up a small test to confirm the behaviour.