Case study

Van Umbraco naar een SEO-first Next.js-site

Hoe moderniseer je een verouderde Umbraco-website zonder opgebouwde zoekposities, content en URL's kwijt te raken? De klant had zelf al een prachtige nieuwe site gemaakt met Lovable. Wij maakten die technisch productierijp en migreerden de bestaande content rechtstreeks vanuit de Umbraco-database.

Van prachtige Lovable-site naar productieplatform

De klant had in Lovable zelf al een prachtige, moderne website neergezet. Het ontwerp en de gewenste gebruikerservaring stonden daardoor helder vast. Onze rol was om die sterke basis te vertalen naar een betrouwbaar productieplatform, met behoud van alle bestaande content en SEO-waarde. Daarbij waren de volgende punten doorslaggevend:

Pagina’s moesten als volledige HTML beschikbaar zijn voor zoekmachines.
Bestaande URL’s moesten exact behouden blijven.
Metadata en structured data moesten per pagina worden gegenereerd.
Alle pagina’s moesten tijdens de build als afzonderlijke bestanden worden uitgevoerd.
De bestaande content moest gecontroleerd uit de Umbraco-database worden gemigreerd.

Daarom brachten we de door de klant gemaakte Lovable-site over naar Next.js en kozen we voor een statische export. Zo bleef het ontwerp van de klant intact, terwijl iedere pagina als volledige HTML wordt gegenereerd.

De sitemap als bron van waarheid

Bij veel migraties wordt eerst de nieuwe sitestructuur gebouwd en pas aan het einde gecontroleerd welke oude URL's ontbreken. Wij draaiden dit proces om: de bestaande sitemap bepaalde vanaf het begin welke routes de nieuwe website moest opleveren.

Bestaat de route in Next.js?
Is de juiste content aan de route gekoppeld?
Worden titel, beschrijving en canonical URL correct gegenereerd?
Werken interne links naar deze pagina nog?
Komt de pagina als zelfstandig HTML-bestand uit de statische build?

Als content nog niet beschikbaar was, maakten we tijdelijk een placeholder. Zo bleef de URL-structuur compleet en kon de inhoud gefaseerd worden gemigreerd.

De Umbraco-database als inhoudelijke bron

De bestaande Umbraco-database bevatte de opgebouwde inhoud van de website. Die database vormde daarom het vertrekpunt voor de migratie. We lazen de gepubliceerde content uit, brachten de verschillende paginatypen en velden in kaart en zetten deze gecontroleerd over naar de nieuwe website.

Gepubliceerde pagina's en artikelen komen rechtstreeks uit de Umbraco-database.
SEO-velden, publicatiedatums en interne relaties zijn daarbij behouden.
De sitemap bepaalt welke bestaande URL's in de nieuwe website beschikbaar moeten blijven.
De gemigreerde databasecontent wordt tijdens de build omgezet naar statische pagina's.

De oorspronkelijke Umbraco-content behouden

Een contentmigratie is meer dan tekst uit een database kopiëren. Umbraco-content bevatte HTML, interne verwijzingen, metadata, publicatiedatums en verschillende paginatypen. Die informatie vertaalden we gecontroleerd naar het nieuwe datamodel.

Alleen gepubliceerde content geselecteerd.
Titels, intro’s, hoofdtekst en SEO-velden afzonderlijk verwerkt.
Interne Umbraco-links omgezet naar geldige URL’s in de nieuwe website.
Verouderde of rommelige HTML opgeschoond.
Nieuws en informatieve artikelen als verschillende contenttypen behandeld.
Oorspronkelijke publicatiegegevens behouden waar die relevant waren.

Rustige, consistente redactionele pagina's

Legacy HTML neemt vaak eigen kleuren, lettergroottes en losse knoppen mee. We brachten informatie- en nieuwspagina's daarom onder in één redactionele opmaak. Koppen, alinea's, lijsten, links en call-to-actions volgen nu de typografie en witruimte van het nieuwe ontwerp.

Ook afbeeldingen kregen een bewuste behandeling. Productafbeeldingen worden lokaal geleverd, zodat de site niet afhankelijk is van een externe afbeeldings-CDN.

SEO zit in de architectuur

SEO was geen controle achteraf, maar onderdeel van de technische opzet. Next.js genereert iedere pagina vooraf, inclusief unieke metadata, canonical URL's, semantische HTML, structured data en interne links.

Naast de openbare sitemap gebruiken we een shadow sitemap als kwaliteitscontrole. Daarmee vergelijken we het verwachte URL-overzicht met de daadwerkelijk gegenereerde pagina's.

Statische export als kwaliteitscontrole

Tijdens iedere productiebuild maakt Next.js voor alle routes zelfstandige bestanden. De website is daardoor snel te serveren, heeft tijdens een bezoek geen database nodig en laat ontbrekende routes of contentfouten al vóór publicatie zien.

De belangrijkste les

Een succesvolle CMS-migratie begint niet met het nieuwe framework, maar met inzicht in wat er al is. Door de sitemap als contract te gebruiken, Umbraco-content gecontroleerd te exporteren en alle pagina's statisch met Next.js op te bouwen, konden we de techniek vervangen zonder de digitale waarde van de bestaande website achter te laten.