For a long time JavaScript and SEO were not compatible. This is because search engines could not crawl JavaScript. In 2015 however, Google said that they can crawl and render JavaScript websites. However, it advised website owners to be cautious while implementing JavaScript. This blog talks about the best practices to follow for JavaScript and SEO.
When it comes to rendering JavaScript websites, three factors: crawlability, renderability and crawl budget affect the ability of Google to render a JS website. This means that if you want Googlebot to crawl your JS based website, the website should have proper structure, the JS shouldn’t be too complex or arcane, and it should load fast.
Read our blog on WHAT IS HTTP2: IMPACT ON SEO AND HOW TO IMPLEMENT IT that tells you to how to use this protocol to reduce page load times if you have a JS based website.
Javascript and SEO: Crawling of JS based website and rendering
When using JavaScript for design and functionality, it always involves risk as the crawler might not interpret the content correctly and generate the results you want. Google can read JS quite well but when talking about JavaScript and SEO, you have to be cautious!
It is difficult to crawl and render JS for search engines due to its complexity. In the case of traditional HTML, the Googlebot downloads HTML file, extract the links from source codes, downloads CSS files, and sends the downloaded resources to the indexer which then indexes the page.
However, when it comes to a JS based website, the whole process becomes more complex. Google firstly downloads HTML, CSS and JS files, and then uses Google web rendering service to parse and execute a JS code. After that, the web rendering service fetches data from APIs and database after which the indexer can index the webpage.
Crawling and rendering of JS files is time consuming. The page cannot be indexed until all steps are done. This slows down the loading speed. So, it is necessary to optimise javascript for higher search rankings. You may also like to visit & check our blog on LOG FILE ANALYSIS FOR BETTER SEARCH ENGINE OPTIMIZATION to see how it helps you to check incorrect crawling and code errors.
Javascript and SEO: Behaviour of JavaScript
Since JavaScript is a bit more complex than HTML, it is important for website owners to understand the behaviour of a JS based website so that they can know how to optimise javascript for higher search rankings.
- Initially the browser and googlebot executes a GET request for HTML code and other assets of a website.
- The JS script delivers a document object model to the browser. This shows the connection between elements of the website. The browser then renders information and makes it visible for the user.
- While the site is being processed, first the HTML is loaded after which the browser can implement JavaScript elements.
- After all of this, the website loads fully.
JS events that affect SEO
- Load event: When a website is completely loaded, this event is fired by the browser. Search engines don’t consider to crawl those elements that are loaded after the load event. Therefore, search engines do not index them. So, it’s important to not load the critical content after the load event.
- User event: The user triggers these events via JavaScript. These events include restriction of content or interactive navigation. User events take place after the load event, so search engines do not index them.
Javascript and SEO: Errors to be avoided
You need to consider certain factors while working with a javascript based website. Mentioned below are best practices for JS based sites:
- Blocked resources: There are some internal and external resources which a website owner requires for rendering the webpage. Make sure that those pages are not blocked. Check your robots.txt to make sure no critical resources are being blocked for the Googlebot. Checking robots.text is one of the 8 STEPS TO A BETTER TECHNICAL SEO AUDIT that improves SEO.
- Hashes in URL: It is crucial to ensure that the URLs do not contain hashes. Sometimes JavaScript frameworks generate URL with a hash. This is quite risky as these URLs may not be crawled at all. It’s a common mistake to avoid while doing URL optimization.
- Canonical tags via JS: Make sure to place all canonical tags in plain HTML tags. The reason is that Canonical tags in HTML are more reliable than those in JavaScript.
In conclusion, JavaScript can expand functionality and drastically improve user experience. Though an individual needs to consider certain important factors, so that search engines render JavaScript. JavaScript and SEO go hand in hand. It is important to note that before doing JavaScript SEO, you need to have a good foundation for traditional SEO.
