A lot of web platforms rely on JavaScript to render and display content. That's not a bad thing per se, but search engines can have a hard time crawling and indexing that content. In other words, using JavaScript may affect your Search Engine Optimization (SEO) unless you find a workaround.
The best fix for this problem involves using 'dynamic rendering'. With this technique, you can generate static versions of your website that are meant specifically for search engines. Users still get to enjoy your site as usual, and search engines won't have any problems crawling its content.
In this article, we're going to break down how dynamic rendering works, and discuss its pros and cons. Then we'll go over the basics of how to implement dynamic rendering on your website. Let's get to work!
What Dynamic Rendering Is (And Why It's Worth Using)
As you may know, search engines use bots called 'crawlers' to explore and index websites. Usually, they do their job pretty well. However, they can have a hard time crawling more dynamic content.
Let's say you have a website that's built using only HTML and CSS. Its content would be static, which means that crawlers would likely have no trouble understanding it. However, things become more complicated when you add JavaScript into that mix.
Consider this simple snippet of JavaScript code, for example:
<button type="button" onclick="myFunction()">Click this button</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "You won a million dollars!"; } </script>
That short script powers a simple button. When you see it in a browser, it would look something like this:
Crawlers, however, would have trouble making sense of that code. This means they can't interpret the content, which may have an impact on your page's Search Engine Optimization (SEO).
These days, purely static websites are becoming rare. Almost every website you visit probably uses JavaScript or frameworks based on it to some extent. In other words, this particular issue has become almost impossible to avoid.
To resolve it, someone came up with an ingenious solution called 'dynamic rendering'. This tells your server to generate static copies of your pages for search engines, and display the regular versions to human users.
If your website relies on JavaScript, you should probably look into dynamic rendering. Keep in mind, though – the technology is not without its downsides. If you don't implement it properly, it can render faulty versions of your website for search engines, which can compound the initial issue. The following steps should help you avoid that problem.
How to Get Started With Dynamic Rendering (In 3 Steps)
Before we go any further, keep in mind that dynamic rendering usually involves tinkering with your server through the command line. If you're not familiar with that process, it's best to seek the help of someone with server management experience.
Likewise, if you don't have full access to your website's server, then you might need to upgrade your hosting plan before you can move forwards.
Step 1: Choose a Dynamic Processor
The first thing you'll need to do is choose a dynamic processor. This is a framework that makes dynamic rendering possible. For it to work properly, you'll need full command line access to your server.
As for which dynamic processor to choose, there are several excellent options. Two of the best include:
-
Puppeteer. The official dynamic rendering project from Google. It's free to use, and it enables you to generate screenshots, PDFs, and static renders of your pages.
-
Rendertron. This is an open-source project that's a bit harder to set up. However, it's designed to render pages specifically for Google's crawler.
If you're more familiar with server management, then Rendertron is a great choice. However, Puppeteer is easier to set up and get up and running, so that's the one we recommend for most beginners. To get started, you can check out the official documentation page on how to set up Puppeteer.
Step 2: Configure Which User Agents to Use Dynamic Rendering For
Your server identifies every visitor that arrives at your website, and classifies them as different types of 'user agents'. There are many kinds of user agents, including regular people (like us) and search engine bots.
What you need to do now is tell your dynamic processor which types of user agents should see the new, static copies of your site's pages. The process is straightforward, fortunately, because search engine bots are easily identifiable.
Here's an example of the code you'll need to add to your processor:
export const botUserAgents = [ 'googlebot', 'google-structured-data-testing-tool', 'bingbot', ];
Within that code, we added a list of search engine bot names to the botUserAgents list. Now, your dynamic processor will look out for those agents, and when they visit your website, it will serve a static version just for them. You can find the user agent names for most search engine crawlers easily.
Step 3: Test Your Configuration
At this point, it's time to check and see if the search engine bots are crawling your website the way they should be. For that, we'll use Google's Mobile-Friendly Test tool:
What this tool does is crawl your website, and render a version of it that shows how it will look on mobile devices. If your dynamic rendering is working and your website is mobile friendly, it should display a pixel-perfect result:
If you see any issues at this stage, make sure that your site displays well on mobile devices for regular users. Then, you can check back on your rendering to see the results.
Conclusion
JavaScript is one of the most popular programming languages. A large percentage of websites use it to generate dynamic elements, which means it's important to make sure that search engines can crawl that content. Otherwise, it might as well not exist.
Although it requires a bit of technical know-how, adding dynamic rendering to your website is fairly straightforward:
-
Choose a dynamic processor.
-
Configure which user agents to use dynamic rendering for.
-
Test your configuration.
Image credit: Pixabay.
