For consistent and reliable indexing, the meta description in your initial HTML source code should match the one in the final, rendered HTML. A meta description that is updated by JavaScript is one where the content of the description tag is changed on the client-side after the initial page load. This is a technical SEO issue because it sends a conflicting signal to search engines, which can lead to unpredictable search snippets and indexing behavior.

Think of it as sending a formal invitation (the raw HTML) and then having a friend call the guest later with different details (the rendered HTML). The guest (Google) will be confused about which information is correct. This is different from a meta description that is only in the rendered HTML, but it is still a poor practice. For a broader look at this topic, see our guide on the on-page SEO category.

An illustration showing a meta description tag being changed by a JavaScript process.

Why a Consistent Meta Description is Crucial

Google’s indexing process has two waves. It first crawls the raw HTML, and then, at a later time, it renders the page to execute JavaScript. If the meta description changes between these two waves, it can cause problems. For a deep dive into this topic, this guide from Ahrefs on JavaScript SEO is an excellent resource.

  • Inconsistent Search Snippets: Google may initially index the server-side description and then update it after rendering, causing your snippet in the search results to change unexpectedly.
  • Confusing Signals: A mismatch between the raw and rendered description is a confusing signal that can cause Google to distrust both and generate its own snippet instead.

A Step-by-Step Guide to Ensuring Consistency

The goal is to have a single, definitive meta description that is present in the server-side HTML and remains unchanged by client-side scripts. For Google’s perspective on this, their guide on JavaScript SEO basics is a must-read.

Example: Removing a JS Update

<!-- Before: JS changes the description --> <head> <meta name="description" content="Initial description."> <script> document.querySelector('meta[name="description"]').setAttribute("content", "New description."); </script> </head> <!-- After: The final description is in the initial HTML --> <head> <meta name="description" content="The one, correct description."> </head>

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

Frequently Asked Questions

Which meta description will Google use if they are different?

Google will typically index the initial, server-side meta description first. After rendering, it may update its index with the new, client-side description. This can lead to your search snippet changing over time, which can be a confusing experience for users. It’s always best to have a single, consistent description.

Does this issue apply to other meta tags?

Yes. Any critical metadata, including the title tag, canonical tag, and meta robots tag, should be consistent between the raw and rendered HTML. Changing any of these with JavaScript can lead to significant indexing and ranking problems.

How can I compare the raw and rendered meta descriptions for my pages?

The most effective way is to use a website crawler like Creeper that is capable of rendering JavaScript. It will report both the meta description found in the initial HTML and the one found after rendering, allowing you to easily identify any pages where they do not match.

Is your site sending mixed signals? Start your Creeper audit today to find and fix inconsistent meta descriptions.