JavaScript Rendering

Search engines treat JavaScript content on a website different to typical HTML content and will render it separately. As the use of JavaScript on the web increases due to the number of features possible, it is important to understand how search engines view this content and optimize for this. Our Hangout Notes cover best practice recommendations from Google, along with the latest advancements to their rendering engine.

Avoid Providing Google with Conflicting Canonical Tags When Working on JavaScript Sites

January 10, 2020 Source

If you have a JavaScript site, John recommends making sure that the static HTML page you deliver doesn’t have a canonical tag on it. Instead use JavaScript to add it, in order to avoid providing Google with different information. Google is able to pick the canonical up after rendering the page in order to process and use it.


Use Chrome DevTools and Google Testing Tools to Review a Page’s Shadow DOM

December 10, 2019 Source

There are two ways to inspect a page’s shadow DOM in order to compare it to what Googlebot sees. The easiest way is by using the Chrome DevTools, within the inspector you will see # shadow route which you can expand, this will display what the shadow DOM contains. You can also use any of the testing tools and review the rendered DOM, this should contain what was originally in the shadow DOM.


When Changing Frameworks on a Site Ensure You Incrementally Test to Reduce SEO Impact

November 29, 2019 Source

When moving a site from HTML to a JavaScript framework, John recommends setting up test pages and using the Google testing tools to ensure that everything on these pages are indexable. Once you have tested these elements, John then suggests taking certain, high traffic, pages on your site, converting them to the new framework and reviewing the effect from changing these pages. It’s best to do this over a period of around a month to ensure there is time for fluctuations to settle down.


Google Will Not Render JavaScript Content if The Page Returns a Redirect or Error Code

November 12, 2019 Source

If you have a page which contains JavaScript content but it returns a redirect or an error code, Google will not spend time rendering the content. For example, if you use JavaScript on a 404 page to display an error message or links. With redirects, Google does not need to render the content in order to follow the redirect to the new page.


Google Needs to Access JS Files & Server End Points Used For AJAX Requests

October 4, 2019 Source

If AJAX requests that are needed to download JavaScript on page load are being blocked in robots.txt, then Googlebot won’t be able to see or index any of the content that these requests will generate.


JavaScript SEO Will Evolve to be More About Debugging Issues When JS Works by Default

August 23, 2019 Source

Martin sees JavaScript SEO as evolving from working around the pitfalls with today’s technologies to knowing what can go wrong when JavaScript works out of the box and how to debug issues. Google can help by providing troubleshooting tools, but technical understanding will still be required.


JavaScript SEO Will Continue to be Necessary Due to Changing Frameworks, Complex Issues & Poor Implementations

August 23, 2019 Source

John and Martin believe that JavaScript SEO won’t go away as Google’s rendering capabilities improve because of the continual changes to frameworks and new elements in Chrome, poor technical implementations and the complexity of debugging issues.


Google is Rendering More Pages as Cheaper Resource-wise Than Running Rendering Heuristic

August 23, 2019 Source

Googlebot is putting increasingly more pages through the render phase, even if they don’t run JavaScript because it is cheaper resource-wise for Google to render the page than to run a complex heuristic to decide if it should be rendered.


Google Determines if Pages Need to be Rendered by Comparing Content Found in Initial HTML & Rendered DOM

August 23, 2019 Source

Google compares the content of the raw HTML of a page from the initial crawl to the rendered DOM after rendering to see if there is new content and to determine if it needs to be rendered going forward.


Related Topics

AJAX Caching CSS PWA