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 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:
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. Same way, add images using the img src tag and not the img data-src tag:
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
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.
