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’s Cache Isn’t an Accurate View of Googlebot Rendering
The Fetch & Render tool in GSC and the Mobile-friendly Test tool show a more accurate view of how Googlebot is able to render a page than Google’s cache view, as this can easily be broken.
There are Several Options For Different Country Versions of Product Pages
There are several options for dealing with product pages with different country versions. Separate landing pages with hreflang mean that the value of the page is diluted. Using IP redirects and having all versions on the same page will result in Googlebot only crawling the US version. Serving country-dependent elements in JavaScript and blocking them from being crawled is a further option.
Google Doesn’t Have Separate Way of Prioritising Pages For Rendering
Google doesn’t have a separate way of prioritising the order of pages to be rendered in the second wave of indexing that differs to the way sites are prioritised for regular crawling and indexing.
Google’s Indexing Systems Are More Patient With Rendering Than Live Testing Tools
When using Google’s testing tools for JavaScript rendering issues, you won’t get a truly accurate view of how Googlebot is rendering and indexing as the tools have a much stricter timeout limit to give webmasters quick results.
The Signals You Provide Via JavaScript Shouldn’t Conflict with the Ones in HTML
The signals you give Google via JavaScript shouldn’t contradict the ones you’ve provided in the HTML. For example, if you add a follow link in the HTML but use JavaScript to inject a nofollow tag, it will be too late as the signals will be passed through this link with the first wave of indexing.
Google Cache Uses Non-Rendered HTML
If you use JavaScript to serve a mega menu, be aware that it might not show correctly in the cached version of a page because this uses the HTML rather than the rendered version. This doesn’t mean Google isn’t indexing the JavaScript-powered content.
Ensure Google is Shown the Same Title When the Page is Fetched & Rendered
If Google is switching the titles between individual URLs, then something with the back-end of the website may be wrong. Google should be able to get the same title when it initially fetches the page as when it is rendered.
Load Scripts After Rendering to Improve Page Speed
Consider embedding scripts so that they load after the page has rendered to improve load time, especially if it is only required for functionality.
Blocking Scripts For Googlebot Can Impact its Ability to Render Pages
Blocking scripts just for Google could impact its ability to render and understand the layout of pages. If Google can’t see the full layout then it won’t know if the page is mobile-friendly and would the forego mobile-friendly boost in mobile search results.
Use Pre-rendering for Mobile to Avoid Issues with Google’s Speed Update
Google’s mobile ‘Speed Update’ will try to get a full picture of your site’s performance and will use a variety of different metrics. JavaScript shouldn’t be an issue if you are using pre-rendering on mobile.