H1 Only in Rendered HTML

  • December 7, 2025
No Comments

Quick Reference

Element Code: ON-009

Issue: H1 tag appears only after JavaScript renders the page, not in raw HTML source

Impact: Potential indexing delays, reliance on JavaScript rendering for SEO

Fix: Implement server-side rendering (SSR) or ensure critical H1 is in initial HTML

Detection: Compare raw HTML source vs. rendered DOM, Screaming Frog JavaScript rendering

What Is This Issue?

When an H1 tag only exists in the rendered HTML (after JavaScript executes) but not in the raw HTML source, search engines must rely on their JavaScript rendering capabilities to see your primary heading. While Google can render JavaScript, this adds complexity and potential delay to the indexing process.

Why This Matters for Your Website

Search Engine Impact

Google uses a two-phase indexing process: first indexing raw HTML, then rendering JavaScript later. Critical content like H1 tags that only exist after JavaScript execution may not be indexed immediately, potentially affecting how quickly and accurately Google understands your page.

Rendering Reliability

JavaScript rendering can fail for various reasons: blocked resources, timeouts, errors. If your H1 depends on JavaScript that fails to execute, Google may never see your primary heading.

Technical Background

Modern JavaScript frameworks (React, Vue, Angular) often render content client-side by default. Without server-side rendering (SSR) or static generation, the initial HTML document contains only a shell, with actual content injected by JavaScript.

How to Check

  1. View Page Source: Right-click, View Source, search for your H1 text
  2. Inspect Element: DevTools shows rendered DOM, compare to source
  3. Screaming Frog: Compare HTML vs. JavaScript-rendered versions
  4. Google Search Console: Use URL Inspection to see what Google sees

How to Fix This Issue

  1. Server-Side Rendering: Use Next.js, Nuxt.js, or similar frameworks that support SSR
  2. Static Generation: Pre-render pages at build time
  3. Hybrid Approach: Ensure critical elements like H1 are in initial HTML
  4. Progressive Enhancement: Start with basic HTML, enhance with JavaScript

AI Search and GEO Considerations

AI crawlers have varying JavaScript rendering capabilities. Ensuring your H1 is in the initial HTML guarantees all search systems can access your primary heading, improving your visibility across traditional and AI-powered search engines.

TL;DR (The Simple Version)

Your H1 only shows up after JavaScript runs, not in the original HTML. Google can usually handle this, but it's not ideal. Critical content like your main heading should be in the HTML that gets delivered to the browser, not injected by JavaScript later. Consider server-side rendering if you're using a JavaScript framework.

About SEO ProCheck

Technical SEO consulting and GEO strategy with 20 years of enterprise experience. Case studies, resources, and tools for search and AI visibility.

Work With Me

Technical SEO audits, GEO strategy, site migrations, and international SEO. Hourly consulting for teams who need hands-on support, not just reports.

Subscribe to our newsletter!

More from our blog