Tools
Tools: Helping your SPA get found
2026-02-10
0 views
admin
I Built Something I'm Proud Of. Nobody Could Find It. ## The Problem Every SPA Developer Has ## What I Built to Fix It ## What You Get ## You Can Set This Up With an AI Prompt ## Why I'm Sharing This Building the product was the easy part. I spent months building a developer tool — a real product that solves a real problem. I shipped it. It works. I'm genuinely proud of it. Then I Googled my own site. The homepage showed up — barely. Every other page? Invisible. My docs page, my templates page, my pricing page — Google didn't know they existed. When I shared links on LinkedIn and Twitter, every page showed the same generic preview card. Slack, Discord — same story. We've all heard "build it and they will come." And even though you know in your head that's not how it works, some part of you still expects it. You build something great, you deploy it, and you wait for people to stumble across your genius. They don't. Getting eyeballs on your work is the hardest problem nobody warns you about. And for me, the root cause turned out to be embarrassingly simple. If you built a single-page app — React, Vue, Svelte, whatever — you have this problem right now, whether you know it or not. Your app ships one index.html. One <title>. One <meta description>. Every route on your site — /docs, /pricing, /about, all of them — serves the exact same metadata to search engines and social platforms. You have 10 pages. Google sees one. LinkedIn sees one. Twitter sees one. Slack sees one. And crawlers that don't run JavaScript? They see nothing. An empty div. I opened Google Search Console and saw 21 out of 25 page resources couldn't even load. Fonts from an external CDN that Google's crawler couldn't reach. My site was basically invisible to the systems that help people discover things. I wrote a Cloudflare Worker that sits in front of your SPA like a reverse proxy. Your app doesn't change. Your hosting doesn't change. The worker just intercepts requests and fixes what search engines and social platforms see. Every page gets its own title, description, Open Graph tags, Twitter cards, and canonical URL. Share your /pricing page on Slack and the preview actually says "Pricing" — not your homepage title. When a search engine crawler or social preview bot visits (Googlebot, Bingbot, LinkedIn, Twitter, Slack, Discord, AI bots — 35+ covered), it gets fully rendered HTML with real content instead of a blank div. Normal visitors get your SPA exactly as before. Zero changes to your app. Zero impact on performance. It's one file. It deploys in minutes. And it works for any SPA on any hosting platform. After setting this up on my own site: The whole thing adds about 5ms of latency. For routes that don't need SEO (like your dashboard), the worker proxies straight through with zero overhead. I packaged the entire setup into a single AI prompt. You paste it into Claude Code, Cursor, Windsurf, or whatever AI editor you use. It asks you a few questions — your domain, your routes, what you want each page's title and description to be — and then it builds everything. The worker. The prerender script. The sitemap. The robots.txt. Structured data. Deployment. Search console submission steps. All of it. No need to understand HTMLRewriter or Playwright or JSON-LD. The prompt handles the technical side. You just answer questions about your app. **Here is the ai prompt https://gist.github.com/Fruitloop24/f663a9c80a291035b42d3d2554ce36f7 Because I know there are other devs who built something good and can't figure out why nobody's finding it. The SEO problem with SPAs isn't obvious until you check — and by then you've already lost months of potential traffic. If you built a single-page app, go check Google Search Console right now. See how many of your pages are actually indexed. See what your social previews look like. You might be surprised. Then fix it. It takes minutes, not days. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse - Every page gets its own title, description, Open Graph tags, Twitter cards, and canonical URL. Share your /pricing page on Slack and the preview actually says "Pricing" — not your homepage title.
- When a search engine crawler or social preview bot visits (Googlebot, Bingbot, LinkedIn, Twitter, Slack, Discord, AI bots — 35+ covered), it gets fully rendered HTML with real content instead of a blank div.
- Normal visitors get your SPA exactly as before. Zero changes to your app. Zero impact on performance. - Doesn't require you to change frameworks
- Doesn't require SSR or a build plugin
- Doesn't touch your existing code
- Doesn't care where your app is hosted — Netlify, Vercel, Cloudflare Pages, S3, anywhere - 10 out of 11 pages showing up in Google
- FAQ rich results detected from structured data
- Every page has its own social preview on LinkedIn, Twitter, Slack, and Discord
- External resource failures went from 21 out of 25 down to near-zero
- All pages submitted and crawling on Bing
how-totutorialguidedev.toaimljavascriptgitgithub