The Invisible Tax on Every Vibe-Coded App
You shipped the app. The landing page looks good. The product works. Nobody finds it.
This is the failure mode of vibe coding. You prompt an AI to build your whole React app in an afternoon. It generates clean components, handles routing, and sets up a decent UI. It skips discoverability every time, unless you ask for it.
The app ships with no meta tags and no sitemap. It carries no semantic HTML structure, no OpenGraph cards, and no JSON-LD schema. Images carry no alt text. Pages carry no canonical URLs. The app runs, and search engines cannot see it.
Search engines see a blank shell. Social platforms render a generic link preview. AI crawlers find nothing worth indexing. You built a storefront and left the sign off the door.
Why This Happens
AI code generators optimize for function, not findability. You ask Claude or GPT to build a portfolio site or a SaaS landing page. The model focuses on what the user sees in the browser. Title tags, meta descriptions and structured data stay invisible to the user, so the model deprioritizes them.
I see the same pattern again and again. Founders vibe-code an MVP, ship it, and run ads. Then they ask why organic traffic sits at zero. The app has no SEO foundation at all.
This is a large oversight. Organic search is the highest-ROI acquisition channel for most software products. Paid ads stop the moment you stop paying. SEO compounds instead. An optimized page generates traffic for years, and only if the technical foundations exist.
The Cost of Doing Nothing
Here is what happens when you skip SEO on a vibe-coded app.
What These Prompts Actually Do
I built two prompts that fix the whole problem. Drop each prompt into your AI coding agent and point it at your React codebase. Claude, Cursor and Copilot all work. The first prompt audits and fixes. The second prompt documents every change.
The audit prompt follows a strict four-phase model. It crawls your project structure and identifies every public-facing route. It then builds a full SEO plan before it edits one file. That order matters. An AI that injects meta tags before it reads your site architecture makes a mess.
The order is the point, so treat it as a sequence rather than a checklist:
Map. The agent finds every public-facing route and proposes a strategy against it.
Build the infrastructure. The agent creates robots.txt, the sitemap and the dependencies before it touches a page.
Optimize each page. The agent adds unique meta tags, OpenGraph cards, semantic HTML and clean URLs.
Tune performance. The agent adds lazy loading, dynamic meta tags for parameterized routes, and JSON-LD schema for AI crawlers.
The prompt also includes a safety constraint. It writes a plan file first. It then waits for your approval before it edits any application code. You stay in control.
Prompt 1 - The SEO Audit and Fix
Drop this prompt into your AI coding agent with your React project loaded. The agent analyzes your codebase, generates an SEO plan, then fixes every route.
Role: You are an Expert Senior Full-Stack Engineer and SEO Specialist.
Task: Perform a comprehensive SEO overhaul of this React workspace. You must follow a strict "Plan-First" execution model.
Phase 1: Analysis & Documentation
Crawl the Project: Scan the /src folder, especially routes (e.g., App.js, routes.tsx, or react-router configs) to identify every public-facing page.
Sitemap Audit: Locate or create a strategy for a dynamic sitemap.xml.
Deliverable: Create a file named SEO_PLAN.md documenting:
A list of all identified routes.
The proposed robots.txt configuration.
A plan for implementing react-helmet-async for head management.
A strategy for OpenGraph (OG) tags and structured data (JSON-LD).
Phase 2: Technical Infrastructure
Robots & Sitemap: Generate a robots.txt in the /public folder. Create a script (or a manual sitemap.xml) that includes all routes found in Phase 1.
Dependency Setup: Install react-helmet-async.
Global Provider: Wrap the application in the HelmetProvider at the root level.
Phase 3: Page-Level Optimization
For every page component identified:
Meta Tags: Add unique <title> and <meta name="description"> tags.
Social Graph: Implement OpenGraph (og:title, og:description, og:image) and Twitter Card tags.
Semantic HTML: Review the JSX. Ensure the page uses a logical heading hierarchy (<h1> for main titles, <h2> for sections) and semantic tags (<main>, <article>, <nav>).
Clean URLs: Ensure all Link components use human-readable slugs.
Phase 4: Performance & Programmatic SEO
Image Optimization: Identify <img> tags and suggest/implement loading="lazy" and descriptive alt text.
Dynamic Routes: If the app uses dynamic parameters (e.g., /products/:id), create a pattern to generate unique meta tags based on the data being fetched.
Optimize all page Title Tags to fall between 50–60 characters and implement a site-wide JSON-LD 'Organization' and 'WebPage' Schema to clarify brand identity for LLMs and search engines. . Ensure all critical brand and service information is 'crawl-ready' without requiring JavaScript execution to prevent data loss during AI indexing.
Constraints:
Do not break existing CSS or functional logic.
Use react-helmet-async instead of the legacy react-helmet.
Prioritize "Human-Readable" code and SEO-friendly URL structures.
Wait for my approval on SEO_PLAN.md before modifying any application files.Why the Plan-First Approach Matters
Most people tell an AI to add SEO to the app and stop there. That is a mistake. With no plan phase, the AI guesses at your site structure. It duplicates meta descriptions across pages and misses routes.
The plan-first constraint forces analysis before implementation. You get a document you can review. You catch a missing route or a wrong keyword before any code changes. That review is the difference between a professional SEO pass and a careless one.
Prompt 2 - The SEO Report Generator
Run this second prompt after the audit prompt finishes. It compares the before state and the after state of your codebase. It then writes a professional report. The report names every change, the reason for it, and its effect on search performance.
The report does real work. Build for a client and the report becomes a deliverable. Build for yourself and it becomes a reference. Six months from now you will ask why one meta description won, or which schema type a page uses.
The report covers five areas:
**Role:** You are a Senior Technical SEO Auditor.
**Task:** Conduct a post-implementation review of the SEO overhaul performed on this React workspace. You must generate a professional, comprehensive report named `SEO_REPORT.md`.
**Scope of Analysis:**
1. Compare the current state of the `/src` and `/public` folders against standard React SEO best practices.
2. Identify every component where `react-helmet-async` or SEO meta tags were added.
3. Identify all new files created (e.g., `sitemap.xml`, `robots.txt`, `SEO_PLAN.md`).
**Report Structure Requirements:**
### 1. Executive Summary
- Provide a high-level overview of the SEO health of the application before vs. after implementation.
### 2. Technical Infrastructure Changes
For every **New File** created (e.g., `robots.txt`, `sitemap.xml`):
- **File Path:** [Path to file]
- **Purpose:** Why was this specific file created?
- **Impact:** How does this file affect search engine crawlers (indexing, crawl budget, etc.)?
### 3. Page-by-Page Breakdown
Create a section for **every page/route** modified. For each page, document:
- **Component Name & Path:**
- **Elements Added:** List specific Tags (Title, Meta Description, OG Tags, Schema.json).
- **Technical Decisions:** Why was this specific keyword or description chosen for this route?
- **Semantic Improvements:** Note if tags like `<div>` were changed to `<main>`, `<article>`, or if `<h1>`-`<h6>` hierarchy was corrected.
- **SEO Impact:** Explain how these specific changes improve the "Relevancy Score" for that page.
### 4. Dependency & Architecture Log
- **Library Choice:** Document the use of `react-helmet-async`.
- **Decision Logic:** Why did we use an asynchronous head manager instead of standard React state? (Mention thread safety and SSR compatibility).
- **Global Configuration:** Detail the `HelmetProvider` implementation at the root level.
### 5. Performance & Accessibility (A11y)
- List improvements made to `<img>` alt tags and `loading="lazy"` attributes.
- Explain how these changes impact Core Web Vitals (LCP, CLS).
**Tone:** Professional, technical, and data-driven. Use tables where appropriate to compare "Before" and "After" states for meta-titles and descriptions.
**Final Output:** Save all of this into `SEO_REPORT.md` in the root directory.
How to Use These Together
The workflow is simple. Open your vibe-coded React project in your AI coding environment. Paste the first prompt. Let the agent generate the SEO plan. Review the plan, adjust it if needed, then approve it. The agent implements all the fixes.
Paste the second prompt next. It scans the changes and generates a full audit trail. You now have an SEO-optimized app and a report that names every change and its reason.
The whole process takes about thirty minutes. An SEO consultant who audits a React app by hand costs thousands and takes weeks. These prompts give you 80% of that output at close to zero cost.
Beyond React
These prompts target React with react-helmet-async, and the principles apply to any framework. On Next.js, swap the helmet references for the built-in Head component. On Astro or SvelteKit, adapt the meta tag strategy to their native patterns. The four-phase structure works on any stack: analyze, build infrastructure, optimize pages, tune performance.
The real insight sits above React and any one framework. Vibe-coded apps share a systematic blind spot around discoverability. Every AI-generated codebase needs an SEO pass after generation. These prompts make that pass repeatable and thorough.
Ship fast, then make the app findable. That is the order of operations.
Related Reading
