Most modern websites contain JavaScript, making them dynamic and interactive. Although search engine bots are quite intelligent, they still may not render a lot of the JavaScript content, affecting the page ranking.

The JavaScript content depends a lot on how your website renders the code.

For example, in server-side rendering, the server contains the website’s contents. Upon a request, the browser receives the fully-rendered HTML.

However, in client-side rendering, the JavaScript is rendered by the browser using DOM.

The third option for rendering is dynamic rendering, where content rendered at the client-side goes to the browser, whereas the content rendered at the server-side goes to the search engine(s).

The rendering techniques affect how JS is rendered and hence the page rankings.

To ensure all of your website JS code is rendered, you should follow proper JavaScript SEO practices. But first, let us understand what JavaScript SEO is.

What is JavaScript SEO?

JavaScript SEO makes it easy for search engines to crawl and index JavaScript code (dynamic content) of a website (or webpage). Google or any other search engine processes JavaScript in three stages, i.e., crawl, render, and index. For Google to do all of these, the JavaScript content should be SEO friendly, i.e., visible and available.

How Google processes JavaScript content on a page

Here are the steps which Googlebot follows to process JavaScript:

  • Fetches a URL from the crawling queue via the HTTP request
  • Checks the robots.txt file for URLs that the site does not allow for crawling
  • Skips the ‘disallowed’ URLs, parses the response for other URLs, and adds them to the crawl queue
  • Queues the pages for rendering, except those that are marked to be not indexed
  • Chromium renders the page, executes the JavaScript, and indexes the page
  • Parses the rendered HTML again for links
  • Queues the URLs for crawling

When does Google not index JavaScript Content?

google and javascript

Google can index JavaScript when implemented correctly. For example, if some of your JS and CSS files are hidden, Google may not be able to crawl the website correctly. Similarly, if you have links in the raw HTML that are not present in the rendered HTML, Google may skip those links from being crawled or indexed.

Also, if JavaScript is not directly embedded in the HTML, Google has to download the file for execution. Further, search engines might have a cached version of a web page (for better performance), and the JavaScript on the page might not be in sync with it.

Since every bit of JavaScript code should be read, overusing JavaScript may slow the page speed or cause timeout errors.

Why is JavaScript SEO important?

JavaScript SEO is important because it affects many on-page elements and ranking factors that Google (or search engines) scan for SEO:

On-page element Potential SEO issue Possible SEO solution
Rendered content Search engines (like Google) cannot render your page if its resources are blocked in your site’s robots.txt file. Also, Google cannot index or render JS and CSS files, which are blocked or hidden. Reduce JavaScript on the core content of the page follow alternate approaches to client-side rendering, like server-side rendering, dynamic rendering, hybrid rendering (combination of client-side and server-side)
Links  If some links are internal or JavaScript generates the links to a URL when the user clicks on it, Google cannot discover such links. Use anchor links with the href attribute, descriptive anchor texts for the links. Pseudo links like <div> and <span> tags are not crawled
Metadata Unless the site uses Node.js packages like vue-meta, search engines may be crawling the same or, worse, no metadata for each view or page. Use Node.js packages like react-helmet, vue-meta, react-meta-tags
Lazy-loaded images  Search engine crawler does not pick any content that’s marked for lazy-loading. The search engine cannot scroll for content, and hence some content may never be rendered. Use the IntersectionObserver API, which understands the visibility and position of DOM elements once they are available. You can also use the native lazy-loading feature of the browser (Chrome).
Page load times  A page with a lot of JavaScript content may be slow in loading, which can affect its search ranking. Add critical JS code inline and defer non-critical JS code till the main content is rendered, reducing the overall JS code.

Best practices for JavaScript SEO

By following some of the best practices, we can get search engines to crawl and render the pages better:

Add links and images as per defined web standards

Add all the links using the ahreftag rather than onclick#pageurl, or window.location.href='/page-url. Google can easily crawl the links and follow them.

<a href=”http://geekflare.com”>Welcome to Geek world</a>

Same way, add images using the img src tag and not the img data-src tag:

<img src=”myimg.png” />

Prefer server-side rendering

Make sure your website content is available on the server apart from the user browser.

Ensure your rendered HTML has all the important content you want to show

The rendered HTML should have the correct title, meta robots, meta descriptions, images, structured data, and canonical tags.

Making your JavaScript website SEO friendly

javascript code

To test the implementation of JavaScript SEO on your web page, you can follow the below steps:

  • Know how much JavaScript your website uses: For this, you can simply disable JavaScript on your browser. If you don’t see much content, it means your website largely relies on JavaScript.
  • Check if Googlebot gets all the important content and tags: You can use the Google mobile-friendly test tool or the rich results test tool to check how Googlebot uses the raw HTML to render content.
  • You can also use chrome extensions like View Rendered Source to understand how JavaScript changes the page and compares the source HTML and the rendered one.
  • You can check for the important tags (title, meta description, etc.) on the rendered HTML using the SEO Pro Chrome extension.

Conclusion

In this article, we learned about how JavaScript can make SEO handling a bit complex and the approaches to solve the potential issues caused by adding a lot of JavaScript to your code.

We also saw some best practices and tools to make your JavaScript website SEO friendly. Other great tools that help Google recognize and crawl your dynamic content are Prerender, AngularJS, and Huckabuy.

You may also check some of the best ways to decrease website loading time.