Give crawlers a real static shell instead of an empty <div id="root">

crawlerx.co is a client-rendered SPA with no SSR, so a crawler or any
viewer that doesn't execute JS only ever saw an empty page with just a
title and meta description. Added a real <h1>, a description sentence,
and links to every main page inside #root — real visitors never see it
since React replaces it the instant it mounts, but it gives crawlers,
screen readers without JS, and slow connections actual content instead
of nothing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
metatroncubeswdev 2026-10-22 10:52:05 -04:00
parent f00d438d66
commit 46361cf34d

View File

@ -11,7 +11,27 @@
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<div id="root">
<!-- Static fallback: this is a client-rendered SPA with no SSR, so a
crawler or viewer that doesn't execute JS only ever sees this
markup. React replaces it the instant it mounts, so real visitors
never see it. -->
<main style="max-width:720px;margin:0 auto;padding:64px 24px;font-family:'IBM Plex Sans',system-ui,sans-serif;background:#0b0f12;color:#eef2f1">
<h1 style="font-size:32px;line-height:1.2;margin:0 0 16px">Find it. Fix it. Prove it.</h1>
<p style="font-size:16px;line-height:1.6;color:#8fa0a8;margin:0 0 24px">
CrawlerX connects deep technical site audits with CMS-ready AI fixes and automated client proof —
built for agencies, priced for agencies: 10 client sites for ₹2,499/mo ($29/mo).
</p>
<nav aria-label="Primary">
<a href="/features" style="color:#3fb6ae;margin-right:16px">Features</a>
<a href="/pricing" style="color:#3fb6ae;margin-right:16px">Pricing</a>
<a href="/agencies" style="color:#3fb6ae;margin-right:16px">For agencies</a>
<a href="/compare" style="color:#3fb6ae;margin-right:16px">Compare</a>
<a href="/blog" style="color:#3fb6ae;margin-right:16px">Blog</a>
<a href="/contact" style="color:#3fb6ae">Contact</a>
</nav>
</main>
</div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>