JavaScript web pages make SEO, an already tricky field, much more complicated.
SEO is one of the more technical fields within the digital marketing space. It’s like the popular circus act where the juggler spins three plates on poles. Technical SEO is like doing that on a tightrope. JavaScript SEO is lighting the tightrope, the plates, and yourself on fire.
It’s a tricky balancing act. Not only does your website need to be formatted in a way that makes it easy for search engines to process it, but it needs to perform better and load faster than the competition.
However, the nice thing about technical SEO is it’s one of the ranking factors that you have direct control over.
How do you make your JavaScript website easy for Google to read and understand, while giving your visitors a good web experience at the same time?
The answer: Dynamic rendering.
We’ll break down what dynamic rendering is, why it’s important, why it’s beneficial for your website’s SEO health, and how to implement it.
What Happens When Google Visits Your Webpage
Google uses an automated program, known as a bot, to index and catalogue every web page on the Internet.
Google’s stated purpose is to provide the user with the best possible result for a given query. To accomplish this, it seeks to understand what content is on a given web page, and assess its relative importance to other web pages about the same topic.
Most modern web development is done with three main programming languages: HTML, CSS, and JavaScript.
Google processes HTML in two steps: crawl and index. First, Googlebot crawls the HTML on a page. It reads the text and outgoing links on a page, and parses out the keywords that help it determine what the web page is about. Then, Googlebot indexes the page.
Google, and other search engines, prefer content that’s rendered in static HTML.
With JavaScript, this process is more complicated. Rendering JavaScript comes in three stages:
- Crawl
- Render
- Index
Google has to process JavaScript multiple times in order for it to fully understand the content in it. This process is known as rendering. When Google encounters JavaScript on a web page, it puts it into a queue and comes back to it once it has the resources to render it.
The Problem With JavaScript SEO
HTML is standard in web development. Search engines can render HTML-based content easily. By comparison, it’s more difficult for search engines to process Javascript. It’s resource-intensive.
What this means is that web pages based in JavaScript eat up your crawl budget. Google states that its web crawler can process JavaScript. However, this hasn’t yet been proven. It requires more resources from Google to crawl, index, and render your JavaScript pages. Other search engines such as Bing and DuckDuckGo are unable to parse JavaScript at all.
Because search engines have to use more resources to render your JavaScript pages, it’s likely many elements of your page won’t get indexed at all. Google and other search engines could skip over your metadata and canonical tags, for example, which are critical for SEO.
The thing is, Javascript provides a good user experience. It’s the reason why you’re able to make flashy websites that make your users go “Wow, that was so cool!”
How do you make a modern web experience without sacrificing your SEO?
Most developers accomplish this with server-side rendering.
What’s the Difference Between Client-side and Server-side Rendering?
Most JavaScript frameworks such as Angular, Vue, and React default to client-side rendering. They wait to fully load your web page’s content until they can do so within the browser on the user’s end. In other words, they render the content for humans, rather than on the server for search engines to see it.
Client-side rendering is cheaper than other alternatives. It also reduces the strain on your servers without adding more work for your developers.
However, it carries the chance of a poor user experience. For example, it adds seconds of page load time to your web pages, which can lead to a high bounce rate.
Client-side rendering affects bots as well. Googlebot uses a two-wave indexing system. It crawls and indexes the static HTML first, then crawls the JavaScript content once it has the resources to do so. This means your JavaScript content might be missed in the indexing process.
That’s bad. You need Google to see that content if you want to rank higher than your competitors and to be found by your customers.
So what’s the alternative? For most development teams, it’s server-side rendering: configuring your JavaScript so that content is rendered on your website’s own server rather than on the client-side browser.
This renders your JavaScript content in advance, making it readable for bots. SSR has performance benefits as well. Both bots and humans get faster experiences, and there’s no risk of partial indexing or missing content.
So, Why Doesn’t Everyone Just Use Server-Side Rendering?
If server-side rendering were easy, then every website would do it and JavaScript SEO wouldn’t be a problem. But, server-side rendering isn’t easy.
SSR is expensive, time-consuming, and difficult to execute. You need a competent web development team to put it in place.
It also tends not to work with third-party JavaScript. Websites that use server-side rendering often require external JavaScript libraries or plugins that are difficult to configure.
This is the case with Angular, which requires the Angular Universal Library to enable server-side rendering. Enabling SSR with Angular requires a lot of moving parts. If just one piece is out of place, it could confuse web crawlers and lead to a drop in your search results.
React, on the other hand, makes use of the Next.JS library to enable server-side rendering. That means your development team has to maintain an additional server at an extra cost.
So how do you make frameworks like React SEO friendly to please your customers and search engines? The solution is dynamic rendering.
What is Dynamic Rendering?
Dynamic rendering is the process of serving content based on the user agent requesting it, providing static HTML for bots, and dynamic JavaScript for users. It gives bots a machine-readable, stripped down, text-and-link-only version of your web page while offering your human users the fully-rendered, fully-optimized, intended web experience.
Essentially, it’s a hybrid solution that gives the best of both worlds: a simple-to-scan-and-parse version for bots and a more engaging user experience for site visitors.
How Do You Implement Dynamic Rendering?
Implementing dynamic rendering is a three-step process.
First, you install a dynamic renderer (let’s say Prerender), to transform your dynamic content into static HTML.
Second, you choose the user-agents you think should receive static content. In most cases, this includes search engine crawlers like Googlebot and Bingbot. There might be others, such as LinkedInbot, you also wish to include.
If your prerendering service slows down your server or your HTTP requests increase, consider implementing a cache to store content. Next, determine if your user-agents require a desktop or mobile content. You can use dynamic serving to give them the appropriate solution.
Finally, configure your servers to deliver static HTML.
Verifying Your Configuration
Now you need to make sure that dynamic rendering is working properly. Here are a few things to check:
Mobile-Friendly Test: This is a function of Google Search Console’s suite of tools. Google made the switch to mobile-first indexing for all websites in September of 2020. In other words, Google looks at the mobile version of your website before the desktop one. Therefore it’s important your website is optimized for a mobile-first experience.
URL Inspection Tool: You need to make sure your website is properly crawled and indexed. The URL Inspection Tool will do just that.
Fetch as Google: This is what you will use to determine the effectiveness of your dynamic renderer. It allows you to make sure that individual URLs are properly submitted for indexing.
Structured Data Testing Tool: If you’re using schema markup on your website, then you’ll want to use this tool. It ensures your dynamic renderer isn’t interfering with schema markup.
When Should You Use Dynamic Rendering?
Dynamic rendering is an ideal way to fix your JavaScript SEO problems. Really, one of the biggest benefits of dynamic rendering is that it eliminates any issues related to your crawl budget while being cost-effective. And it doesn’t require advanced technical knowledge to implement.
So when should you use dynamic rendering?
Dynamic rendering is a good solution if you have a large website with lots of content that changes frequently (e.g. an e-commerce store with revolving inventory). If that’s the case, then your website requires quick and frequent indexing. Dynamic rendering will make sure that all of your pages get indexed and displayed properly in the SERPs.
It’s also beneficial for websites that rely on social media sharing, such as those with embeddable social media walls or widgets.
Is Dynamic Rendering Cloaking?
Cloaking is the practice of serving markedly different content to search engine bots and humans. This is considered a black hat SEO tactic. While the short-term benefits of cloaking may be tempting, the potential risks are not worth it.
Dynamic rendering is not cloaking, as long as it serves the same end content to both crawlers and human users. It’s only cloaking if you serve completely different content to each.
Wrapping Up
JavaScript SEO is challenging. But there are things you can do to make it easier, and reduce the burden on your web development team and your budget.
If you want a dynamic renderer that solves all of your JavaScript SEO problems, look no further than Prerender. All you have to do is install our middleware. The rest takes care of itself. Get Google to finally work with you rather than against you.
