Get started with dynamic rendering

Currently, it's difficult to process JavaScript and not all search engine crawlers are able to process it successfully or immediately. In the future, we hope that this problem can be fixed, but in the meantime, we recommend dynamic rendering as a workaround solution to this problem. Dynamic rendering means switching between client-side rendered and pre-rendered content for specific user agents.

Sites that should use dynamic rendering

Dynamic rendering is good for indexable, public JavaScript-generated content that changes rapidly, or content that uses JavaScript features that aren't supported by the crawlers you care about. Not all sites need to use dynamic rendering, and it's worth noting that dynamic rendering is a workaround for crawlers.

Understand how dynamic rendering works

Dynamic rendering requires your web server to detect crawlers (for example, by checking the user agent). Requests from crawlers are routed to a renderer, requests from users are served normally. Where needed, the dynamic renderer serves a version of the content that's suitable to the crawler, for example, it may serve a static HTML version. You can choose to enable the dynamic renderer for all pages or on a per-page basis.

A diagram that shows how dynamic rendering works. The diagram shows the server serving
              initial HTML and JavaScript content directly to the browser. In contrast, the diagram
              shows the server serving initial HTML and JavaScript to a renderer, which converts the
              initial HTML and JavaScript to static HTML. Once the content is converted, the
              renderer serves static HTML to the crawler.

Implement dynamic rendering

To setup dynamic rendering for your content, follow our general guidelines. You will need to refer to your specific configuration details, as they vary greatly between implementations.

  1. Install and configure a dynamic renderer to transform your content into static HTML that's easier for crawlers to consume. Some common dynamic renderers are Puppeteer, Rendertron, and prerender.io.
  2. Choose the user agents that you think should receive your static HTML and refer to your specific configuration details on how to update or add user agents. Here's an example of a list of common user agents in the Rendertron middleware:
    export const botUserAgents = [
      'googlebot',
      'google-structured-data-testing-tool',
      'bingbot',
      'linkedinbot',
      'mediapartners-google',
    ];
  3. If pre-rendering slows down your server or you see a high number of pre-rendering requests, consider implementing a cache for pre-rendered content, or verifying that requests are from legitimate crawlers.
  4. Determine if the user agents require desktop or mobile content. Use dynamic serving to provide the appropriate desktop or mobile version. Here's an example of how a configuration could determine if a user agent requires desktop or mobile content:
    isPrerenderedUA = userAgent.matches(botUserAgents)
    isMobileUA = userAgent.matches(['mobile', 'android'])
    
    if (!isPrerenderedUA) { } else { servePreRendered(isMobileUA) }
  5. Configure your server to deliver the static HTML to the crawlers that you selected. There are several ways you can do this depending on your technology; here are a few examples:
    • Proxy requests coming from crawlers to the dynamic renderer.
    • Pre-render as part of your deployment process and make your server serve the static HTML to crawlers.
    • Build dynamic rendering into your custom server code.
    • Serve static content from a pre-rendering service to crawlers.
    • Use a middleware for your server (for example, the rendertron middleware).

Verify your configuration

After you finish implementing dynamic rendering, verify that everything works as expected by checking a URL with the following tests:

  1. Test your mobile content with the Mobile-Friendly Test to make sure Google can see your content.

    done Success: Your mobile content matches what you expect a user to see.

    error Try again: If the content you see does not match what you expect, see the troubleshooting section.

  2. Test your desktop content with Fetch as Google to make sure that the desktop content is also visible on the rendered page (the rendered page is how Googlebot sees your page).

    done Success: The desktop content matches what you expect a user to see.

    error Try again: If the content you see doesn't match what you expect, see the troubleshooting section.

  3. If you use structured data, test that your structured data renders properly with the Structured Data Testing Tool.

    done Success: The structured data appears as you expect it to.

    error Try again: If the structured data doesn't appear as you expect it to, see the troubleshooting section.

Troubleshooting

If your content is showing errors in the Mobile-Friendly Test or if it isn't appearing in Google Search results, try to resolve the most common issues listed below. If you're still experiencing issues, post a new topic in the Webmaster Forum.

Content is incomplete or looks different

error What caused the issue: Your renderer might be misconfigured or your web application might be incompatible with your rendering solution. Sometimes timeouts can also cause content to not be rendered correctly.

done Fix the issue: Refer to the documentation for your specific rendering solution to debug your dynamic rendering setup.

High response times

error What caused the issue: Using a headless browser to render pages on demand often causes high response times, which can cause crawlers to cancel the request and not index your content. High response times can also result in crawlers reducing their crawl-rate when crawling and indexing your content.

done Fix the issue

  1. Set up a cache for the pre-rendered HTML or create a static HTML version of your content as part of your build process.
  2. Make sure to enable the cache in your configuration (for example, by pointing crawlers to your cache).
  3. Check that crawlers get your content quickly by using testing tools such as the Mobile-Friendly Test or webpagetest (with a custom user agent string from the list of Google Crawler user agents). Your requests should not time out.

Structured data is missing

error What caused the issue: Missing the structured data user agent, or not including JSON-LD script tags in the output can cause structured data errors.

done Fix the issue

  1. Use the Structured Data Testing Tool to make sure the structured data is present on the page. Then configure the user agent for the Structured Data Testing Tool to test the pre-rendered content.
  2. Make sure JSON-LD script tags are included in the dynamically rendered HTML of your content. Consult the documentation of your rendering solution for more information.

Gửi phản hồi về...