High Performing Company - AI-gedreven webontwikkeling
Terug naar alle berichten
Jurriën Kerstholt

Hoe laat je Lovable goed ranken met SEO en GEO?

Je bouwt een prachtige site met Lovable in een week. Twee maanden later zoek je je eigen bedrijf in Google. Niets. ChatGPT noemt je nergens. Dit overkwam ons bij High Performing Company. Onze eigen site, gebouwd met dezelfde tools die we onze klanten adviseren, was voor zoekmachines en AI-assistenten praktisch onzichtbaar. Hieronder leg ik uit waarom dat gebeurt met standaard Lovable-projecten en welke vier stappen we hebben doorlopen om het op te lossen.

Waarom standaard Lovable apps niet goed scoren

Lovable bouwt React applicaties die client-side renderen. Voor een normale bezoeker werkt dat prima — je laadt de pagina, JavaScript draait, content verschijnt. Maar voor zoekmachine-crawlers en AI-assistenten is dit problematisch.

Wanneer de Googlebot, ChatGPT's GPTBot, of Perplexity's crawler je site bezoekt, downloaden ze de initiële HTML. In een standaard Lovable app bevat die HTML weinig meer dan:

Standaard Lovable HTML output toont alleen een lege <div id='root'></div> voor crawlers
Voorbeeld van een "lege" pagina

De echte content — je teksten, headings, meta-tags, alles dat zoekmachines waarderen — verschijnt pas nadat JavaScript heeft gedraaid. Google's bot kan tegenwoordig JavaScript uitvoeren, maar doet dat in een tweede pass die vertraagd en onbetrouwbaar is. AI-crawlers zoals GPTBot en ClaudeBot voeren vaak helemaal geen JavaScript uit.

Het resultaat: crawlers zien een lege pagina. Voor SEO betekent dit slechte rankings. Voor GEO (Generative Engine Optimization, de vindbaarheid in AI-antwoorden) betekent het dat je niet bestaat in de wereld van ChatGPT, Claude en Perplexity.

Stap 1: zet Lovable's pre-rendering aan

De eerste oplossing zit al in Lovable zelf. Pre-rendering converteert je dynamische React app tijdens de build naar statische HTML-bestanden — één per pagina. Crawlers krijgen dan direct de volledige content te zien zonder JavaScript uit te voeren.

In Lovable activeer je dit via een prompt: "Enable static prerendering for all routes in this project. Generate full HTML output during build, so crawlers see complete page content without executing JavaScript."

Lovable past je vite.config.ts aan met een prerender plugin. Tijdens elke build wordt voor elke route een aparte index.html gegenereerd met alle content, meta-tags en structured data al in de HTML.

Dit is een grote stap, maar nog niet voldoende. We liepen al snel tegen het volgende probleem aan.

Stap 2: het canonical-probleem

Een canonical tag vertelt zoekmachines welke URL de "officiële" versie van een pagina is. Het is cruciaal voor SEO — zonder correcte canonicals consolideert Google verkeerd, en sub-pagina's krijgen de ranking-waarde van je homepage in plaats van hun eigen rankings.

In onze pre-rendered Lovable site bleek elke pagina een canonical te hebben die naar de homepage wees. Onze /tools/claude pagina vertelde Google: "ik ben eigenlijk de homepage." Idem voor /wat-we-doen/ai-strategie-awareness-workshop, voor /over-ons, voor alles.

Het effect: Google de-indexeerde onze sub-pagina's en consolideerde alle ranking-signalen naar één URL. We verloren elke long-tail ranking voor pagina-specifieke termen.

We hebben Lovable expliciet gevraagd om dynamische canonicals te implementeren. Na meerdere iteraties bleek dit niet op te lossen binnen Lovable's eigen hosting. De canonicals werden wel correct gegenereerd in de build-output, maar Lovable's hosting-laag serveerde ze niet correct per route.

Stap 3: migreer naar Vercel hosting

De oplossing bleek niet in de code te zitten, maar in de hosting. Vercel (en Netlify, of Cloudflare Pages) serveert statische bestanden strikt hiërarchisch: een request naar /tools/claude zoekt eerst het bestand dist/tools/claude/index.html — dat al correct werd gegenereerd door Lovable's prerender plugin — en valt pas terug op de root index.html als dat bestand niet bestaat.

Dit lost in één keer drie problemen op:

  • Crawlers krijgen per URL de juiste pagina-HTML met correcte title, headings en structured data
  • Canonicals wijzen naar de juiste pagina, niet langer naar de homepage
  • Sitemap-URL's geven echte unieke content terug in plaats van duplicates

De migratie zelf vergt geen codewijzigingen — de prerender pipeline werkt al. Stappen:

  • Push naar GitHub. In Lovable klik je op de GitHub-knop en synchroniseer je je code naar een nieuwe repository.
  • Importeer in Vercel. Ga naar vercel.com, klik "Add New Project", kies je GitHub repo. Vercel detecteert automatisch dat het een Vite-project is.
  • Deploy. Eerste deploy duurt 2-3 minuten. Je krijgt een *.vercel.app URL waar je kan testen.
  • Verhuis DNS. Voeg je eigen domein toe in Vercel project settings → Domains. Update je DNS-records bij je domeinprovider (een A-record voor de root, CNAME voor www).
  • SSL wordt automatisch geregeld. Vercel zet binnen minuten een Let's Encrypt certificaat op je domein.
Importeren in Vercel
Eenvoudig de GitHub code importeren in Vercel

Belangrijk: zorg dat je email-records (MX, SPF, DKIM) ongewijzigd blijven bij je oude DNS-provider. Alleen de records die naar webserver-IP's wijzen veranderen. Verstoor de mailflow niet.

Na deze migratie was onze site technisch in orde. Maar SEO-fundamenten zijn slechts de helft van het verhaal. De andere helft is content die door AI-assistenten geciteerd wordt.

Stap 4: GEO — gevonden worden door AI-assistenten

GEO staat voor Generative Engine Optimization: zorgen dat je content wordt opgepikt door ChatGPT, Claude, Perplexity en Google's AI Overviews. Het verschilt fundamenteel van klassieke SEO. SEO mikt op kliks naar je website. GEO mikt op citaties binnen AI-antwoorden zelf.

Vier dingen hebben in onze ervaring direct effect gehad:

  • Schema markup uitgebreid implementeren. Wij hebben Organization, LocalBusiness (per locatie), WebSite, BreadcrumbList, SoftwareApplication (voor tool-pagina's), FAQPage en BlogPosting schema toegevoegd. Dit zijn gestructureerde JSON-LD blocks in de HTML head die LLM's helpen je content te begrijpen en te citeren. Google's Rich Results Test toont direct of je markup correct wordt gedetecteerd.
  • Hreflang tags voor meertalige versies. Onze site bestaat in Nederlands, Engels en Spaans. Zonder hreflang tags concurreren die versies met elkaar in Google. We hebben per pagina vier <link rel="alternate"> tags toegevoegd (nl, en, es, x-default) plus aparte sitemaps per taal die we via een sitemap_index.xml hebben gekoppeld.
  • FAQ-content in zichtbare HTML. Veel sites zetten FAQ's in client-side accordion-componenten waarbij de antwoorden alleen na een klik verschijnen. LLM's pakken zulke content niet op. Wij hebben onze FAQ's geïmplementeerd in native <details> HTML elements, plus FAQPage schema markup eromheen. De antwoorden staan dubbel: één keer in JSON-LD voor Google rich results, één keer als leesbare HTML voor AI-crawlers.
  • Diepe, citeerbare content schrijven. LLM's citeren content die concrete antwoorden geeft op specifieke vragen. Generieke marketingteksten worden genegeerd. Wij hebben onze tool-pagina's en service-pagina's verdiept met specifieke cijfers, voorbeelden en eerlijke kaders. Schrijven wat je écht weet in plaats van wat goed klinkt.
Screenshot van Google Rich Test Results
Test met Google Rich Results Test toont aan dat de site goed wordt gevonden

Het meten: GSC en de LLM-test

Twee tools om te checken of het werkt.

  • Google Search Console geeft je indexering-data en zoektermen waarop je vertoond wordt. Voor nieuwe sites duurt het 2-4 weken voor pagina's geïndexeerd zijn. Bing Webmaster Tools is voor GEO minstens zo belangrijk, want ChatGPT search loopt deels via Bing.
  • De LLM-test is sneller en eerlijker. Open een verse chat in ChatGPT, Claude of Perplexity en vraag: "wat doet [jouw bedrijfsnaam]? wat zijn hun diensten?" In de eerste weken na publicatie kennen ze je nog niet. Maar binnen 4-8 weken zou je je eigen content moeten terugzien in hun antwoorden, mits je technische basis klopt en je content concreet genoeg is om te citeren.

Wat dit jou kost en oplevert

Tooling: Lovable Pro $25/maand, Vercel gratis tier voldoende voor MKB-sites, Google Search Console gratis. Tijd: één dag voor de Vercel-migratie, één dag voor schema markup en hreflang implementatie, plus doorlopende content-uren. Geen developer nodig — alles via Lovable's eigen prompts en Vercel's web interface.

Wat het oplevert: een site die wel verschijnt in Google zoekresultaten, wel geciteerd wordt door AI-assistenten, en die over zes maanden organisch verkeer genereert in plaats van een verzonken kostenpost te zijn.

Tot slot

Lovable is een uitstekend gereedschap om snel te bouwen. Maar standaard-setup levert een site die voor zoekmachines en AI-assistenten praktisch onzichtbaar is. Met pre-rendering, Vercel-hosting, en doordachte schema-markup transformeer je dat in een paar dagen tot een vindbare, citeerbare web-aanwezigheid. Wij zijn dat traject zelf doorgelopen voor onze eigen site — het is geen theorie maar praktijk.

Heb je een Lovable-project dat slecht scoort op Google of niet voorkomt in ChatGPT-antwoorden? Vaak gaat het mis op één van deze vier stappen. Plan een vrijblijvend gesprek — in een halfuur kijken we naar één concrete situatie en weet je welke aanpassing de meeste impact heeft.