Dynamic Rendering: What You Need to Know

If you’re running a website that uses JavaScript to render content, then you should know about dynamic rendering.

Why? Because without dynamic rendering, your web pages might not get indexed. That means nobody will find them via search engines.

That’s exactly what you don’t want.

In this article, I’ll go over dynamic rendering and explain what you need to know about it.

What Is Dynamic Rendering?

Search engines are pretty good at crawling HTML pages. In geek-speak, those kinds of pages are called “static HTML content.”

However, some website render content dynamically. They use JavaScript to create a user interface that website visitors can navigate.

Search engines aren’t very good at crawling those kinds of sites.

That’s because search engines use bots to navigate around cyberspace. Bots use a browser that has no graphical user interface. Instead, they just parse HTML content on pages.

In other words, bots don’t “see” those pretty paragraphs of text and navigable widgets that you’ll see when visiting a site run by JavaScript. So they can’t index the content.

And if they can’t index the content, nobody will find it in the search results. It doesn’t matter how well that content is optimized for a keyword.

Dynamic rendering solves that problem by serving up static content to search bots. That way, they’ll “see” the content like a normal human visitor and index it.

Unfortunately, it’s a solution that requires additional development work.

One day, dynamic rendering might not be necessary. Today, however, it’s a must for sites that use JavaScript frameworks to display content.

Dynamic Rendering: Getting Started

To get started with dynamic rendering, you’ll need to enlist the aid of a framework. Here are three options:

• Puppeteer
• Rendertron
• Prerender.io

What do those frameworks do? They translate content from your web app into static HTML pages.

Keep in mind: you’ll need to enlist the aid of a development team if you want to dynamically render content. It’s not an easy feat.

Once you’ve added the dynamic rendering framework to your code, you’re still not quite done. You need to “tell” your website to serve static content to search bots.

Here’s how to do that: check the identity of every request that comes in. If it’s coming from a search bot, then you’ll serve the static HTML pages. If it’s coming from a “normal” web browser user, then you’ll render content using JavaScript.

The end result: bots see static content and users see the content they’re expecting. Everybody wins.

Don’t Forget About Mobile Indexing!

As I write this, Google is in the process of moving to a mobile-first index. That means Google will crawl your website with a mobile agent and view content the way a mobile user would view it.

Yes, that matters if you’re using dynamic rendering.

Why? Because you need to make sure that the static HTML that your site serves up looks great on a mobile platform. Otherwise, the Googlebot will view your page as mobile-hostile and give it a poor rank.

Test It

So how can you visit your website and view it as a search bot would see it? There are a couple of different ways to do that.

First, visit Google’s Mobile-Friendly Test. Type in the URL of your website and run the test.

You’ll have to wait for a bit before Google shows you the report. When it’s finished, you’ll see a graphical representation of your site on the right-hand side of the screen.

Check it out. Does it look right?

If not, go back to the drawing board. Tell your development team to make the necessary fixes so that your dynamically rendered pages display correctly.

There’s another option as well. Use Fetch as Google in Search Console. Make sure you click the “FETCH AND RENDER” button or you won’t see what your site looks like. Also, select “Mobile Smartphone” in the dropdown just to the left of the buttons.

Once again, take a look at how Google “sees” your site. Contact your development team if you need to make any changes.

Also, check your markup with Structured Data Testing Tool. If Google can’t find it, view the source of the rendered pages and look for the schema.org markup and supporting code.

The best test is to wait a little while and check for indexing. If Google is indexing your pages, then you know your dynamic renderer is working.

Wrapping Up Dynamic Rendering

JavaScript frameworks offer a convenient way to create dynamic content using single-page apps. Unfortunately, they make it difficult for search engine bots to find and index content.

Dynamic rendering solves that problem by serving static HTML content to search bots. It’s a great way to get the best of both worlds: maximum visibility in the search results and a web application that humans will love.