SEO should avoid these typical JavaScript mistakes

Note: We have used commission links in this article and marked them with “*”. If an order is placed via these links, t3n.de receives a commission.

It hardly works without JavaScript. Our guest author explains how Google handles JavaScript, what the typical JavaScript errors are when it comes to SEO, and how to use tools to check them.

Almost every website uses some form of JavaScript to improve user experience. After all, JavaScript is a great programming language for making websites more interactive. However, JavaScript can also negatively impact SEO performance if implemented incorrectly.
But no matter how beautiful your website looks, if Google cannot read or index it properly due to JavaScript errors, you will miss a lot of potential new visitors.

To understand how JavaScript affects SEO, we need to understand what exactly happens when the Google bot crawls a website with JavaScript content: First, the Google bot searches the URL page by page. The crawler sends a GET request to the server and the server then sends the HTML document back. This is mostly done using a mobile user agent. Google then decides what resources it will take to render the main content of the page. Usually this means that only the static HTML code is crawled.

And what about JavaScript? JavaScript code can often take longer to run and render due to various factors. JavaScript content is not even guaranteed to appear in search results. At least not immediately after the content is published.

Also interesting: JavaScript: Node.js 16 now supports Apple’s M1 chips

Google now knows about 130 trillion documents that are available on the web. Rendering JavaScript on such a scale can be very expensive. The computing power required to download, parse, and run JavaScript in bulk is enormous. The websites that contain a lot of JavaScript present Google with greater challenges than websites with pure HTML. Before the JavaScript content is indexed, Google executes the JavaScript. This is where the renderer comes in.
Sometimes content is indexed before it is rendered. In such cases, Google first includes the content initially supplied by the server in the index and updates it when sufficient capacity is available for rendering. One also speaks of the second wave of indexing:

However, there can be a few days or weeks between the first and second visit. Therefore, content that depends on JavaScript for rendering can experience delays in crawling and indexing by Google.

If the Google bot can now technically run JavaScript, why are many still concerned about indexing issues? The short answer is “crawl budget”. Google cannot search every URL of a website because the world’s largest search engine does not have unlimited resources. The crawl budget is the maximum number of pages that a website can crawl.

Also interesting: you should definitely learn these programming languages ​​in 2021

We already know that Google is delaying JavaScript later to save on the crawl budget. Although the delay between crawling and rendering has been reduced, there is no guarantee that Google is actually executing the JavaScript code queued by the web rendering services.

Most problems with JavaScript and search engine optimization arise from incorrect implementations.
Typical JavaScript errors are …

• Broken links: a href and img src – so that the Google bot can find and index further pages, it needs internal and external links that it can follow. These links should have the href or src attribute. Links via JavaScript are not recommended if they are structured as in the following examples.
• How you shouldn’t include links on the website:
  • a onclick = ”goTo (‘page’)”> (The href attribute is missing here.)
  • (The link is completely missing here.)
  • (The link is also missing here.)
  • (This is a wrong HTML element.)
• Create access for all bots: There are search engines that are not as advanced in JavaScript SEO as Google. So that all bots can handle your JavaScript content, it is advisable to include titles and meta information in the HTML code.
• Do not block JS via robots.txt: Make sure that your JavaScript content can also be crawled by the Google bot. For this purpose, the content must not be excluded in the robots.txt. The easiest way to allow the Google bot to crawl the content is to add the following command to your robots.txt.

User agent: Googlebot
Allow: .js
Allow: .css

• Indexable URL: Every website needs a unique and distinguishable URL in order for the pages to be indexed at all. However, a pushState, as it is executed in JavaScript, does not yet generate a URL. This is why your JavaScript page also needs its own web document that can output a status code 200 as a server response to a client or bot request. Every product displayed with JavaScript or every category implemented with JavaScript on your website must therefore be equipped with a server-side URL so that your page can be indexed.
• Double content: With JavaScript, there can be multiple URLs for the same content, which creates duplicate content problems. This can be caused by capitalization, ID, parameters with ID and the like. So these URLs can all exist:

domain.com/Abc
domain.com/abc
domain.com/123
domain.com/?id=123

The solution is simple: choose a version to be indexed and set canonical tags.

A useful tool for JavaScript SEO is the Google Search Console’s URL checking tool. Here, a screenshot of the rendered page is created in a live test. So you can see how the Google bot would display the JavaScript content on your website.

You should look at this screenshot with regard to the following questions:

• Is my main content visible?
• Can Google access areas like “Similar Articles” or other internal links?
• Can Google see other important elements of the website?

This useful extension is available for all Chrome users. The tool shows you how the browser renders a page and not just what the server is sending. Here you can see the difference between the source code and the rendered HTML code. It gives you an overview of what JavaScript changes on your page:

(Screenshot: t3n / Florian Beqiri)

Another online tool is the JavaScript rendering check by Searchviu. The JavaScript debugging tool is very easy to use as you don’t have to check the code yourself. It checks the most important elements in the source code of the page for you and compares them to the same elements in the rendered HTML – here you should make sure to check the mobile version.

JavaScript is a tool that should be used wisely, but not something website owners should fear. Anyone who understands how JavaScript can affect websites and how to better deal with JavaScript SEO can use the programming language without problems or loss of ranking on websites.

Florian Beqiri

Florian Beqiri is the founder and owner of the agency Proactive Media for search engine optimization and web development. He helps service providers and e-commerce brands to appear more professional on the Internet and to be found more easily on Google.

You might be interested in that too