Fix: High Ghost Ratio

What this means

A high ghost ratio means a large portion of your content is rendered by JavaScript in the browser and doesn't appear in the raw HTML response. AI crawlers like GPTBot, ClaudeBot, and CCBot don't execute JavaScript — they see the empty shell.

Why it matters for AI visibility

Ghost ratio feeds directly into the Rendering Score via a non-linear curve: RenderingScore = 100 × (1 − GhostRatio^1.5). A ghost ratio of 0.80 gives you a Rendering Score of only 28/100, dragging down the overall AI Readiness Score (Rendering has a 25% weight).

How SEODiff detects it

SEODiff estimates ghost ratio using framework detection and text density in the raw HTML — without a headless browser. It classifies your rendering as SSR (<0.10), Hybrid (0.10–0.40), or CSR (≥0.40).

Common causes

• React / Angular / Vue SPA without server-side rendering
• Next.js with excessive 'use client' directives on content components
• Hydration errors leaving the server response empty
• Content loaded via API calls after page mount
• Hash-based routing in single-page applications

How to fix it (framework-specific)

Next.js

• Use React Server Components (RSC) for content — keep 'use client' only for interactive elements
• Use generateStaticParams() for static generation of known pages
• Move data fetching to server components or getServerSideProps
• Avoid wrapping entire page layouts in 'use client'

React SPA (Create React App)

• Migrate to Next.js, Remix, or Astro for automatic SSR
• Alternatively, use a pre-rendering service (Prerender.io, Rendertron)
• For static content, consider pre-rendering at build time with react-snap

Angular

• Enable Angular Universal for server-side rendering
• Use Angular's built-in TransferState to avoid duplicate API calls on hydration

Vue / Nuxt

• Use Nuxt.js (built-in SSR) instead of plain Vue CLI
• Set ssr: true in Nuxt config (default since Nuxt 3)
• Use useAsyncData() for data fetching to ensure server-side execution

WordPress

WordPress is server-rendered by default (ghost ratio ≈ 0). If you see high ghost ratio, check for heavy JavaScript-based themes or page builders that render content client-side.

How to validate the fix

1. View your page source (Ctrl+U) — the main content should be visible in the raw HTML.
2. Use curl https://yourdomain.com — the response should contain your content text.
3. Re-run your SEODiff scan — the Rendering Score should improve.