Javascript SEO: Here’s What We Know

a picture of Tom Donohoe
Written by: Tom Donohoe
Last updated: August 5, 2018

The term JavaScript SEO is hot right now in the technical SEO world. It’s due to the rise in usage of modern JavaScript frameworks.

Many developers ask “can Google crawl and index JavaScript?” The answer is yes but at the detriment, of your SEO performance unless treated correctly.

And here’s the thing: Javascript is here to stay, at the time of writing this JavaScript is used by 94.9% of all the websites. So, JavaScript SEO is a significant topic.

In this guide, I’ll try to cover everything you need to know about JavaScript and SEO.





What is JavaScript SEO?

You might be wondering what JavaScript SEO is? It’s SEO on websites built on modern JavaScript framework rather than static HTML.

Javascript-heavy websites present exciting new challenges for SEO professionals that need to be diagnosed and dealt with for sites to succeed.

However, with JavaScript SEO the fundamentals of SEO don’t change. It’s all about making sure your website can be crawled, indexed and ranked by search engines.





Can Google Crawl JavaScript?

Back in 2015, Google announced that they could understand web pages using JavaScript:

Today, as long as you’re not blocking Googlebot from crawling your JavaScript or CSS files, we are generally able to render and understand your web pages like modern browsers.

The critical takeaway from Google’s statement is the word ‘generally’, which implies that it’s not perfect.

So, Can Google Crawl Javascript? The answer is yes, but it’s possible that it will get it wrong. If you want the best SEO performance, it’s best to avoid heavy use of javascript.




How Google crawls JavaScript websites

At the Google I/O conference, Google shed more light on the state of JavaScript SEO. Where they mentioned JavaScript is processed in two waves and can take a couple of days to more than a week to properly index Javascript.

This is new information that I will now explore in more depth.





Two wave indexing of JavaScript explained

Two wave indexing of JavaScript from Google IO

The above diagram shows the process Google goes through to crawl JavaScript-heavy websites.

To break it down, Googlebot crawls a page fetching the server-side rendered content. Then runs some initial indexing on that document.

Rendering JavaScript powered websites takes a lot of computational power. Moreover, Google doesn’t have infinite resources. So, if a page does have JavaScript the rendering is deferred until Google has the resources to render the client-side content.

Once they have the resources, Google will index the JavaScript content (wave 2). This second wave can be several days later. When that final render does arrive, Google performs another wave of indexing on the client side rendered content.

Because Googlebot runs two waves of indexing, it’s possible that some details might be missed. For example, if you’re not server-side rendering important metadata, Google might miss it on the second wave. Missing metadata can have obvious implications for your visibility.

Googlebot uses Chrome 41

Googlebot uses Chrome 41

At Google I/O, we discovered Googlebot uses Chrome 41 to render websites, which was released in 2015.

You might be wondering:

“Why does this matter?” Well, some newer JavaScript releases aren’t supported by Googlebot. Also, APIs released after Chrome 41 may not work either.

You should use caniuse.com to debug any code that may not be supported by Chrome 41.

Diagnosis rendering problems for Google Search

Google gave some tips on how to check if your website is being rendered and indexed correctly.

  1. Use Fetch as Google to check server response code and pre-rendered HTML
  2. Check how the page is rendered in Google’s mobile-friendly test.
  3. View the source HTML after rendering in Google’s mobile-friendly test
  4. Use the Rich results test to check the desktop version of your website.

If your website appears as expected in these tools, then your content should be indexed correctly.




Solutions for JavaScript SEO

Until Google can crawl and index JavaScript websites like static HTML, we need solutions to improve SEO performance.

Thankfully, there are solutions, and you need to convince developers to put fixes in place.

I will now share some tips to help improve your JavaScript websites.





Server-side rendering

The most effective solution is to server-side render important metadata and content that you want Google to crawl and index.

Server-side rendering leaves no room for Google to make errors. Moreover, your website will be crawled and indexed in one wave rather than two.

If the pages on your website need client-side JavaScript, then hybrid rendering might be for you.

Hybrid Rendering

Hybrid rendering is Google’s recommended solution for JavaScript powered websites long-term. You serve a pre-rendered (server-side rendering) version of the pages important metadata and content to the browser (client).

Then when the users interact with the page, you can use JavaScript on the client-side to customise the page.

a diagram of hybrid rendering from Google IO

Let’s dive deeper into “important meta data and content”.

What important metadata and content must be server-side rendered?

For strong SEO performance on a JavaScript-powered website, there are a few things you must server-side render.

Let’s cover them.

Clean, unique indexable URLs

Google needs to be able to discover URLs to index them. With a JavaScript-powered website, you must still provide clean traditional URLs. For example: /traditional-url/.

Avoid fragment identifiers and hashbangs, which Google will not index.

Internal links in tags

All internal links on your website must be ahref tags and have anchor text for Google to crawl.

Avoid onclick events for internal links because Google will not crawl them.

Traditional SEO best practices

The following SEO best practices should be server-side rendered in HTML source:

  • Title tags & meta descriptions
  • Page headings h1s, h2s, etc
  • Important content.
  • FB Open Graph/ Twitter Cards
  • Schema markup/ structured data markup
  • Correct robots meta tags & canonical tags
  • image source tags & image alt tags on important images



Over to you

JavaScript SEO is a tricky subject. And it will become more critical as modern JavaScript frameworks continue to grow in popularity.

Follow the steps and warnings in this guide to make sure your website is being found on Google Search.

Drop any questions in the comments below.