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.
JavaScript Links Take Longer to Detect
John says that JavaScript based links need to be rendered first, and will take a slighlty longer time to pick up, maybe a day or so, but otherwise will be treated equivalent to static HTML links.
URLs in JavaScript May be Crawled
Google won’t see any content which is loaded via an onclick event. But they will find URLs inside JavaScript code itself and try to crawl them. It has to be loaded onto the page be default without an onclick in order for Google to see it.
Don’t Use Escaped Fragment for JavaScript Pages
Google is recommending against using the escaped fragment solution to get JavaScript pages crawled, they should be able to crawl the page on normal clean URLs.
JavaScript Affliliate Links Should be Nofollowed
Any affiliate links which are added using JavaScript should also be nofollowed.
Use Fetch and Render to Test Overlays
If you have some kind of overlay or pop-up on landing pages, you can check what it looks like to Googlebot using the Fetch and Render tool in Search Console, and check the impact on engagement using web analytics.
Google’s JavaScript Rendering is Incomplete
Google’s rendering of JavaScript HTML pages is ‘incomplete’ so you need to test it very carefully with Fetch and Render.
Google Doesn’t See Localised Content Added with JavaScript
If you serve localised content to users via JavaScript, it wouldn’t be considered cloaking, but the content won’t be picked up by Googlebot so you can’t draw any SEO benefit from it.
Use Pre-Rendering to Avoid JavaScript Issues
Google are updating their rendering engine but you need to experiment to understand which JavaScript elements are getting stuck, and they suggest pre-rendering as a solution if you have problems.
Fetch & Render Shows Results for a Googlebot and Browser User Agent
The Fetch and Render tool shows you 2 different renders, one for Googlebot which used the Googlebot user agent, and one for users which used a browser user agent. If JS/CSS is disallowed for Googlebot, it may not be able to render all the content in the same way.
Use Fetch & Render to Test JavaScript Sites
JavaScript based sites should be fine now for SEO and you don’t need to worry about it. However there can be some issues you might have with this approach. Fetch and Render in search console is the best way to check this.