Most modern websites contain JavaScript, which makes them dynamic and interactive. Although search engine bots are quite smart, they still may not display much of the JavaScript content, which affects page ranking.
The JavaScript content depends a lot on how your website renders the code.
For example, in the server-side representation, the server contains the content of the website. Upon a request, the browser receives the full HTML.
However, in client-side rendering, the JavaScript is rendered by the browser using the DOM.
The third option for rendering is dynamic rendering, where content rendered on the client side goes to the browser, while content rendered on the server side goes to search engines.
Rendering techniques affect the way JS is rendered and therefore page rankings.
To ensure that all JS code on your website is rendered, you must follow proper JavaScript SEO practices. But first, let’s understand what JavaScript SEO is.
What is JavaScript SEO?
JavaScript SEO makes it easy for search engines to crawl and index the JavaScript code (dynamic content) of a website (or web page). Google or any other search engine processes JavaScript in three stages i.e. crawling, rendering and indexing. In order for Google to do all this, the JavaScript content must be SEO friendly, that is, visible and available.
How Google processes JavaScript content on a page
These are the steps that Googlebot follows to process JavaScript:
- Gets a trace queue URL through the HTTP request
- Checks the robots.txt file for URLs that the site does not allow crawling
- Skips ‘disallowed’ URLs, parses the response for other URLs, and adds them to the crawl queue
- Queues pages to render, except those that are marked not to be indexed
- Chromium renders the page, runs JavaScript, and indexes the page
- Parse the rendered HTML again for links
- Queue URLs to crawl
When does Google not index JavaScript content?
Google can index JavaScript when it is 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 prevent those links from being crawled or indexed.
Also, if JavaScript is not embedded directly in the HTML, Google has to download the file for execution. Also, search engines may have a cached version of a web page (for better performance) and the JavaScript on the page may not be in sync with it.
Since every piece of JavaScript code must be read, excessive use of JavaScript can slow down 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:
element on page
Possible SEO problem
Possible SEO solution
rendered content
Search engines (such as Google) cannot display your page if its resources are locked in your site’s robots.txt file. Also, Google cannot index or render JS and CSS files, which are locked or hidden.
Reduce JavaScript in the core content of the page follow alternative approaches to client-side rendering, such as server-side rendering, dynamic rendering, hybrid rendering (mixing 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 those links.
Use anchor links with the href attribute, descriptive anchor texts for the links. Pseudolinks as tags
and they are not tracked
metadata
Unless the site uses Node.js packages like vue-meta, search engines may crawl the same or worse, no metadata for every view or page.
Use Node.js packages like react-helmet, vue-meta, react-meta-tags
Lazy Loaded Images
The search engine crawler does not select any content that is marked for lazy loading. The content cannot be scrolled by the search engine and therefore some of the content may never be displayed.
Use the IntersectionObserver API, which understands the visibility and position of DOM elements once they’re available. You can also use the browser’s native lazy loading feature (Chrome).
Page load times
A page with a lot of JavaScript content can take time to load, which can affect your search ranking.
Add critical JS code inline and postpone non-critical JS code until the main content is rendered, reducing overall JS code.
Best Practices for JavaScript SEO
By following some of the best practices, we can make search engines crawl and display pages better:
Add links and images according to defined web standards
Add all links using ahreftag instead of onclick, #pageurl or window.location.href=’/page-url. Google can easily crawl the links and follow them.
Welcome to Geek world
In the same way, add images using the img src tag and not the img data-src tag:
Prefer server-side rendering
Make sure that the content of your website is available on the server apart from the user’s browser.
Make sure your rendered HTML has all the important content you want to display
The rendered HTML must have the correct title, meta robots, meta descriptions, images, structured data, and canonical tags.
Making Your JavaScript Website SEO Friendly
To test the implementation of JavaScript SEO on your web page, you can follow the steps below:
- Know how much JavaScript your website uses: for this, you can simply disable JavaScript in your browser. If you don’t see much content, it means that your website relies heavily on JavaScript.
- Check if Googlebot gets all relevant content and tags: You can use the or rich results testing tool to check how Googlebot uses raw HTML to render content.
- You can also use Chrome extensions such as to understand how JavaScript changes the page and compare the HTML source and rendering.
- You can check the important tags (title, meta description, etc.) in the rendered HTML using the .
conclusion
In this article, we learned how JavaScript can make managing SEO a bit complex and approaches to solving potential problems caused by adding a lot of JavaScript to your code.
We also looked at 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, and .
You can also check out some of the best ways to decrease website loading time.
Did you like reading the article? How about sharing with the world?
