To ensure search engine success, its imperative you know how to identify any issues with your site, know whether your site is being indexed and rendered and, of course, how to make it SEO friendly!
- How does the Google crawl bot work?
- Different rendering types?
JS sits on the same shelf as HTML and CSS, and enables website to experience a greater level of interactivity, through animated graphics, sliders, buttons, loaders, maps, and many other features.
How does the Google crawl bot work?
Heres a diagram courtesy of Google to show the process.
Different types of rendering
If getting your content indexed fast is a priority, you’ll need to ensure your render type is suitable to your needs.
There are a few different types of rendering:
- Server Side Rendering (SSR)
- Client Side Rendering (CSR)
- Dynamic Rendering
Server Side Rendering (SSR)
This type of rendering is preferred for SEO, as it takes little time to fully parse the HTML markup, as it doesn’t have to go through the rendering stage, meaning content can be indexed faster.
However, SSR can be complicated, and adds extra difficulty for developers, but there are tools for different JS frameworks that are available to help implement this rendering method, such as Next.JS (React), Angular Universal (Angular) and Nuxt.JS (Vue.JS).
Client Side Rendering (CSR)
There are benefits to CSR. Although it generates HTML on demand, it won’t re-render or refresh the whole page, as otherwise seen with regular HTML pages, which saves a lot of computing power. Moreover, with Client Side Rendering, UI components can be used across multiple pages, without having to send requests each and every time, which improves on-page performance. Overall, means CSR can perform better than SSR.
There are still the issues with Client Side Rendering, namely the 2 wave indexing which persist within, and caching issues that occur as HTML is not part of the initial render, meaning browsers cannot cache the HTML structure of the page.
In a very simplified example, the difference between these 2 render types is similar to purchasing a new office chair, you can either purchase a prebuilt one from the store, which an inconvenience if anything for the staff (Server Side Rendering), or you can buy an IKEA chair and do it yourself, which is more time consuming and resource intensive (Client Side Rendering).
Dynamic rendering is a hybrid technique where the rendering switches between Client Side and Server Side, depending on the user agent.
It’s extremely useful for resource heavy websites who don’t want to compromise the performance of the site. By being able to deliver a proper Client side rendering experience to users with all the benefits, and delivering the static HTML content for crawlers, getting as much content across fast as possible, you have the best of both worlds.
heres a another diagram to portray what happens behind the scenes.
But is that not cloaking? Well no, if the content processed is all the same, then it’s not cloaking. If the content served was vastly different, then it would be cloaking. The only differences in the content would be in the level of interactivity, as the crawler will get a static HTML document, where as client browser gets the whole shebang.
when facing a JS site as an SEO, its not unheard of to encounter issues, here are a few that we’ve personally encountered in the past.
1. Infinite scroll issues
the infinite scroll not only looks cool but does have some advantages over traditional pagination, the issue is that crawlers cant access all the content as they cant interact with pages, and, well, scroll.
To resolve this, some parallel pagination with static links will need to be implemented, to ensure all content can be indexed.
2. Tool crawling issues
firstly, open up the spider and hit the configuration tab.
The hit spider, and switch to the rendering tab.
Note: you can also bypass robots.txt files in the settings too if you are still having trouble crawling the pages
3. Robot.txt file blocking resources
sometimes your robots file can block the crawling of important resources, so we must ensure that it allows for JS, here is a standard input into the file to ensure no resources are blocked.
(Would also do the same for CSS)
4. Client Side Rendering issues
5. Pages not being indexed
Static URL’s should be used otherwise your pages may not be indexed.
here are some more blogs on the topic which will provide some more insight into the matter!