Niet Google-indexeerbare Lovable site laten indexeren in Google

Wat we wilden bereiken

• Blijven bouwen in Lovable: dezelfde workflow, componenten en projectstructuur.
• Per route indexeerbare HTML voor Google.
• Interactiviteit behouden via hydration (forms, toggles, calculators, chat flows).

Waarom geen next.js gebruiken?

Na de migratie van nextjs kan het een uitdaging zijn om de Lovable manier van werken en itereren te behouden. Je zou veel bestaande componenten moeten herschrijven, en de ontwikkelworkflow verandert drastisch. Met een dunne static export-laag erbovenop kunnen we de bestaande app behouden en toch server-rendered HTML leveren.

Architectuur (simpel uitgelegd)

We hebben een dunne SSG/export-laag toegevoegd bovenop de bestaande app:

• Client entry voor hydration (bijv. src/entry-client.tsx).
• Server entry voor prerender per route (bijv. src/entry-server.tsx).
• Gedeelde routes + metadata (bijv. src/routes.tsx).
• Exportscript dat routes naar statische HTML schrijft (bijv. scripts/export-static.mjs).

Resultaat: Next.js-achtig gedrag (pre-render + hydration), zonder een complete migratie van je Lovable flow.

Hoe de export werkt

De static exporter doet in de basis vier dingen:

1. Laadt server bundle + client manifest.
2. Rendert routes zoals /, /faq, /disclaimer en /over-ons naar HTML-bestanden.
3. Schrijft index.html per route plus 404.html.

SEO-impact in Google Search Console

In de praktijk zie je meestal:

• Meer URL's met status Geïndexeerd.
• Minder meldingen “Crawled - currently not indexed” op contentroutes.
• Betere detectie van route-specifieke titles en descriptions.
• Snellere en stabielere rendering voor crawlers.

Voorbeeldprompt voor Lovable / AI-dev flow

Voeg een static export-laag toe aan mijn bestaande Lovable/Vite React app zonder migratie naar Next.js.
Eisen:
- behoud huidige projectstructuur en bestaande pagina-componenten;
- maak client hydration met fallback naar createRoot;
- maak server render-entry die per route HTML + metadata teruggeeft;
- maak een exportscript dat routes pre-rendert naar dist/{route}/index.html + 404.html;
- centraliseer routes en SEO metadata (title/description/FAQ structured data);
- voeg npm scripts toe voor build:ssg en export:static;
- zorg dat bestaande Lovable ontwikkelworkflow bruikbaar blijft.
Lever ook een korte uitleg op hoe dit helpt voor Google indexatie en Search Console.

Praktische livegang-checklist

• npm run export:static draait in CI/CD.
• Je host serveert /route/index.html correct.
• sitemap.xml en robots.txt aanwezig.
• Search Console property geverifieerd.
• URL inspecteren op kernroutes (/, /faq, /disclaimer, /over-ons).
• Bijwerken werkt hier na nog in lovable development, maar de static site kan worden gehost op bijvoorbeeld Netlify, Vercel, of een traditionele webserver.