DEV Community

Cover image for A Guide To Javascript SEO
NAD14
NAD14

Posted on

A Guide To Javascript SEO

As digital service professionals, we’ve all gotten well and truly used to our whole world changing in the blink of an eye. 

Whether it’s adapting your website’s SEO in light of a new Google Algorithm update, or having to learn a new programming language every year! 

But the truth is, that’s why we’re all in this profession. Because we absolutely hate it when things are easy and run smoothly… right?! Well, most of the time we like a challenge don’t we.

If you’re a web dev, SEO can often be challenging. Likewise, if you’re an SEO professional, development and programming can often seem overwhelming. But don’t worry, implementing javascript SEO isn’t about having to learn a completely new skill. 

It’s become pretty common practice for websites to use javascript on websites to improve user experience and add certain levels of interactivity. Some websites use js for pulling product data, content, menus etc. - the list goes on.

As Google’s John Mueller states:

"The web has moved from plain HTML - as an SEO you can embrace that. Learn from JS devs & share SEO knowledge with them. JS's not going away."

So virtually every modern web developer will use javascript at some stage in a project. 

So, what’s javascript SEO all about then?

What Is Javascript SEO?

The process of SEO for javascript is a division of technical SEO, and it’s about ensuring that websites which are javascript-heavy can easily be crawled and indexed by search engines. In most cases, this is about load times and the overarching effect on SEO.

Does this mean that javascript is bad for SEO? Absolutely not!

Just remember that it isn’t perfect, certainly from the eyes of an SEO pro - It can’t be parsed progressively, unlike HTML and CSS, and it can be heavy on page load and therefore performance. In many cases, you may be trading performance for functionality…

How Google Crawls Javascript On Websites

The truth is that it can never be guaranteed for Google to index your javascript. (It’s also worth noting that no one can guarantee google will index html for that matter either… but, one thing at a time!)

However, Google can index javascript on some websites a lot better than others. So what’s the difference? How can you ensure that your website stays ahead of your competitors?

The reason that Google can find indexing javascript a little harder than say HTML / CSS is that Googlebot has to use the Google Web Rendering Service to parse, compile and execute JavaScript. The web rendering service then has to fetch data from external APIs. 

It’s a little like arriving at the supermarket, seeing the chocolate bar you want on the shelf, but before you can take it to the tills - a shop assistant has to go and fetch the barcode from their warehouse which is the other side of town… It’s just a long-winded process!

Of course, with slower loading times you risk high bounce rates and damaging user experience. This leads to bad news for your website and business, whether you have a small local business website or you're focussing on eCommerce SEO as an online retailer!

Checking Your Javascript SEO

There are 3 main factors to focus on with javascript SEO:

Crawlability - Allowing Google to crawl your website using a logical structure to find all of your focus information.

Renderability - Google should be able to render your website
Crawl budget - How much time it will take for Google to crawl and render your website.

Rendering JavaScript can affect your crawl budget and delay Google’s indexing of your pages.  So it’s important to follow these steps:

Check If Google Can Render Your Site

It’s just not enough to open a browser and see if your website loads… 

Use Google’s URL Inspection Tool, which is available through Search Console. It allows you to see a screenshot of how exactly Googlebot would render the JavaScript content on your page. So it’s incredibly useful.

When you view the screenshot, you’ll need to decide whether Google can see the crucial elements on your page, and if the main content is loaded prominently.

If you want to dive deeper, you can also take a look at the HTML tab within the generated report to see the DOM rendered code.

Check if Your Content is Indexed

The two best ways to check if your website is being indexed by Google are; using the ‘site:examplewebsite.com’ search command, and checking Google Search Console.

Unfortunately, a lot of the time, javascript SEO problems are self-induced - which is why it’s important to check on your website from the outset! If your website struggles with a problem you should find out why.

There’s multiple reasons why your site could be facing javascript SEO issues:

Timeouts - How long is Googlebot and your users waiting for your content to fully load?
Accessibility - Is your content accessible via your sitemap file?

Rendering - Can Google definitely render your scripts? Use the URL Inspection Tool previously mentioned.

Arrange A Technical SEO Audit

Whether you’re new to SEO or a seasoned vet - it can always help to get a second pair of eyes to look over your website from a technical SEO standpoint.

Nigel Adams is an experienced SEO freelancer based in the UK. Nigel runs a results-driven Bedford SEO Agency, with a small team. If you’re interested in a Technical SEO Audit for your website, he’s your go to guy!

Top comments (0)