A guide to Javascript SEO – Best Practices

 

 

What is Javascript?

Javascript is a lightweight programming, text-based language, often used by developers to create dynamic aspects of web pages. Javascript is also used in programming applications, servers, and games.

Javascript is usually used alongside HTML and CSS; and can be used on both client and server-side. Using Javascript along with other programming languages allows developers to do many things such as adding animation to images or updating content automatically on a page.

Javascript is very popular amongst front-end and back-end developers. This is because it is one of the few programming languages that can be used in all popular browsers. Javascript also has a lot of libraries and ready-to-go code frameworks that can speed up code development, saving money and effort for development teams.

How does Javascript work?

As the web browser goes through the loading process of a web page, the HTML is parsed and the Document Object Model (DOM) is created. The browser then grabs everything linked to the HTML including images and CSS files. Once the HTML and CSS are put together; the browser’s Javascript engine loads Javascript files but does not run the code, while the HTML and CSS finish loading.

Once the HTML and CSS are loaded, the Javascript is executed in the order the code is written. This allows the DOM to be updated by the Javascript and rendered by the browser. If the HTML & CSS are not loaded first, the Javascript would not be able to update the DOM for the interactive elements.

How does Javascript impact SEO performance?

Web pages that heavily rely on Javascript get indexed slowly. As a website loads, each image, CSS and Javascript file is a separate request from the server, potentially slowing down page load speeds.

As mentioned above, Javascript modifies the page in the loading process of a web page. This can add seconds to the time it takes for the page to become interactive for users and is known as client side rendering.

JavaScript rendering can be slow for various reasons, such as for example a lot of content that needs to be pulled in, a lot of additional requests that need to be made, and inefficient code. Many WordPress themes have bloated Javascripts, loading unnecessary libraries, slowing down page load speeds.

To render and crawl Javascript is resource heavy, especially compared to rending HTML. Due to this, search engines do not render every page they come across. Websites have crawl budgets and rendering budgets to allow Google to prioritise the pages they look at on a website based on which ones they expect visitors to search for more often. In turn, heavily reliant Javascript pages index slower than HTML pages as they aren’t always rendered by crawlers. If these pages are not indexed, they can not rank and earn organic traffic.

Google has to fully render Javascript pages before being able to pass the information to the indexing process of their algorithm. HTML pages do not need to be rendered, making their indexing process much quicker and efficient than Javascript pages. If a large website has mainly Javascript pages and has to undergo this longer indexing process for each page, this will negatively affect page speeds and in turn, negatively impact SEO.

Javascript SEO Best Practices:

Include essential content in initial HTML response

Essential content of the web page such as the page title and meta elements, as well as any important body content are included in the initial HTML response. This enables Google to get a good first impression of your page.

(Example of HTML code)

Include navigational elements in your initial HTML response

All navigational elements should be present in the HTML response. Including your main navigation, as well as your sidebar and footer, which contain important contextual links.

Ensure your Javascript does not overwrite your meta robots directive that exists in the HTML

Ensuring the meta robots directive (such as a no index directive) in your HTML matches the directives in your Javascript will make it clear to search engines what is needed to be done on the page. If they do not match, you may have a page you want to hide be indexed and vice versa.

Canonical links

Injecting canonical links through JavaScript leads to the situation where Google only finds out about the canonical links after they’ve crawled and rendered your pages. There could be an instance where Google starts crawling massive amounts of pages with unique URLs because the canonical link is not included in the initial HTML response, but injected through JavaScript. This is a waste of the crawl budget and should be avoided.

rel=”nofollow” link attribute value

The same goes for adding the rel=”nofollow” attribute value to links using JavaScript. Google’s crawler will just extract these links and add them to the Crawl Queue. They get crawled sooner than Google was able to render the page, resulting in the discovery of the rel=”nofollow” in the Javascript. Again, this is a waste of the crawl budget and only leads to confusion.

Remove render-blocking JavaScript

Render-blocking JavaScript is JavaScript code that slows down rendering of your web page. This is bad from a user-experience point of view, but also from an SEO point of view, as you want to make it as quick and painless as possible for Google to render your web pages.

(Example of render blocking resource issue highlighted in Page Speed Insights tool)

Implement image lazy loading with loading attribute

By implementing images via the loading attribute; search engines are able to get the image URLs from the HTML without rendering the page, and browsers know to lazy load the image.

Additional points:

• Let search engines access your JavaScript files – don’t block via robots.txt
• Use server side rendering and dynamic rendering where appropriate

In summary, when it comes to Javascript SEO, as long as the best practices are followed there should not be any negative SEO impact. If implemented correctly, your SEO and UX efforts should work together rather than against each other.

If you need any help with your SEO, or any other digital marketing aspects, contact us to book your free consultation today!