For search engines to quickly and reliably understand your page’s summary, the meta description must be present in the initial HTML source code. A meta description that is only in the rendered HTML is one that has been inserted into the page by client-side JavaScript. While Google can and does render JavaScript, this process is not instant and can lead to significant SEO issues, including indexing delays and inconsistent search snippets.

Think of it as a two-wave indexing process. In the first wave, Googlebot crawls the raw HTML. In the second wave, which can happen hours, days, or even weeks later, it renders the page to execute JavaScript. If your meta description is only available in the second wave, you are making it much harder for Google to process this critical information. For a broader look at this topic, see our guide on the on-page SEO category.

An illustration of a hidden meta description that only appears after a JavaScript rendering process.

Why Client-Side Meta Descriptions Are a Problem

Relying on JavaScript to inject your meta descriptions is a poor practice for SEO. As Ahrefs’ guide to JavaScript SEO makes clear, server-side rendering is the recommended solution for a reason.

  • Indexing Delays: Google may index the page based on the raw HTML first, without seeing your intended meta description. This can lead to a poorly generated snippet in the search results until the page is fully rendered and re-processed.
  • Risk of Rendering Errors: If the JavaScript fails to execute correctly, your meta description may never be seen by Google at all.

A Step-by-Step Guide to Fixing the Issue

The goal is to ensure that your meta description is always included in the initial HTML response from the server. For a deep dive into this topic, this guide from Moz on JavaScript SEO is an excellent resource.

Example: Moving the Meta Description to the Initial HTML

<!-- Before: Meta description is added by app.js --> <head> <title>My Page</title> <script src="app.js"></script> </head> <!-- After: Meta description is in the initial HTML --> <head> <title>My Page</title> <meta name="description" content="This is the correct description."> <script src="app.js"></script> </head>

For more on this topic, see our guide on meta description setup.

Frequently Asked Questions

What is the difference between raw and rendered HTML?

The raw HTML is the initial source code sent by the server. The rendered HTML is the final version of the page after the browser has executed JavaScript to modify the content and layout. Important SEO metadata, like meta descriptions, should always be present in the raw HTML.

Does this issue apply to other meta tags?

Yes. Any critical metadata, including the title tag, canonical tag, and meta robots tag, should be present in the initial HTML source. Relying on JavaScript to inject any of these can lead to significant indexing and ranking problems.

How can I check if my meta description is in the raw or rendered HTML?

In your browser, right-click on the page and select ‘View Page Source.’ This shows you the raw HTML. Search this source code for your meta description. If it’s not there, but you can see it when you use the ‘Inspect’ tool (which shows the rendered HTML), then it is being added by JavaScript.

Are your meta descriptions hiding from search engines? Start your Creeper audit today to find and fix client-side rendering issues.