The `<h1>` tag is one of the most important on-page SEO signals, as it tells search engines the primary topic of your page. An H1 only in rendered HTML is a heading that is not present in the initial HTML source code but is instead injected into the page using client-side JavaScript. While Google is capable of rendering JavaScript, this practice is risky and can lead to your most important heading being seen too late, or not at all.

Think of your website as a library. The H1 is the title on the cover of a book. A client-side H1 is like a book with an invisible title that only appears after you’ve already opened it. It’s better to have the title clearly visible from the start. For a deeper dive into the world of on-page SEO, see our article on on-page SEO.

An illustration of a hidden book, symbolizing the importance of fixing H1s only in rendered HTML.

The Risks of a JavaScript-Injected `<h1>`

Relying on JavaScript to inject your H1 tag is a dangerous game. As detailed in this guide to JavaScript SEO from Moz, anything that is not in the initial HTML source is harder for search engines to process.

  • Delayed Discovery: The H1 is a primary signal of a page’s topic. If it’s not in the initial HTML, search engines may misinterpret the page’s topic during the first wave of indexing.
  • Rendering Errors: If your JavaScript fails to execute for any reason (e.g., a script error, a blocked resource), the H1 tag will never be added to the page, and search engines will never see it.

How to Ensure Your `<h1>` is Visible

The fix for this issue is to move the H1 tag from your client-side script into the initial HTML document. This ensures that search engines see this critical signal immediately upon crawling the page. For Google’s official guidance, see their documentation on JavaScript SEO.

<!-- Before: H1 is missing from initial HTML --> <head> <title>My Page</title> <script src="app.js"></script> <!-- app.js adds the H1 tag --> </head> <body> <main> <div id="page-title"></div> </main> </body> <!-- After: H1 is present in the initial HTML --> <head> <title>My Page</title> <script src="app.js"></script> </head> <body> <main> <h1 id="page-title">My Page Title</h1> </main> </body>

For more on the proper use of H1 tags, see our guide on H1 setup.

An illustration of a checklist, symbolizing the importance of making sure your website is free of H1s only in rendered HTML.

Frequently Asked Questions

What does ‘rendered HTML’ mean?

Rendered HTML is the final HTML of a page after a browser has executed all the JavaScript. This can be different from the initial HTML source code that the server sends. This issue occurs when the H1 tag is only present in the rendered HTML, not the initial source.

How can I check the rendered HTML of a page?

You can use the URL Inspection Tool in Google Search Console to see how Googlebot renders a page. For a quick check in your own browser, you can use the ‘Inspect’ tool (right-click on the page) to view the live DOM, which is the rendered HTML.

Why is a client-side H1 a problem?

A client-side H1 is a problem because it’s a less reliable signal. Search engines may crawl and index the initial HTML before they render the page, which means they might misinterpret the page’s topic or miss the H1 altogether if the script fails. It’s always best to include the H1 tag in the initial server response.

Ready to unhide your headlines? Start your Creeper audit today and see how you can improve your website’s JavaScript SEO.