Een website voor een lokaal bedrijf maken met AI: geoptimaliseerd voor conversie

Iedereen die websites bouwt, heeft het wel eens meegemaakt.

Je praat met een potentiële klant met een lokaal bedrijf — zo eentje waar klanten naar kantoor komen of die binnen een beperkte straal diensten levert — en die zegt: ‘Gewoon een eenvoudig websiteje, zodat mensen me kunnen bellen of een WhatsAppje sturen.’

Een eenvoudig websiteje. Jaja.

Een webwinkel met duizenden producten of een SaaS is uiteraard veel ingewikkelder, maar als een bedrijf via zijn website klanten wil binnenhalen (en meestal weinig tot niets aan advertenties uitgeeft), dan kan ik je vertellen dat zo'n websiteje allesbehalve eenvoudig is.

Want voordat je überhaupt begint, moet je begrijpen wat het bedrijf aanbiedt, uitzoeken hoe klanten daarnaar zoeken, bepalen welke pagina's nodig zijn, teksten schrijven, afbeeldingen kiezen, formulieren maken, leads meten en controleren of alles op een mobiel werkt.

Wil je de site ook in verschillende talen publiceren, dan worden dat alleen maar meer beslissingen.

Ik heb er heel wat gebouwd. En allemaal, allemaal, werkelijk allemaal hebben de doelstellingen overtroffen en meer leads opgeleverd dan oorspronkelijk was afgesproken. Daarom weet ik waar ik het over heb.

Tot nu toe had ik een vaste aanpak, inclusief de onmisbare marketing, die ik vrijwel altijd uitvoerde met WordPress, om voor de hand liggende redenen.

Maar nu is er AI. En daarmee worden dingen mogelijk die vroeger enorm veel tijd kostten, simpelweg niet te doen waren of de moeite niet waard. Nu dus wel. Daarom heb ik mijn nieuwste website, die van vervoersbedrijf Rondabus, zonder CMS gebouwd, met een ontwikkelframework, Astro, dat ik niet kende, maar dat ChatGPT me aanraadde nadat ik had uitgelegd wat ik wilde.

En dat lijkt me een schot in de roos, omdat het aansluit bij iets wat ik altijd al vond: voor zakelijke websites die maandenlang nauwelijks worden aangepast en niet bedoeld zijn om nieuwe content te publiceren, heeft statische HTML drie duidelijke voordelen:

1. Sneller.
2. Veiliger.
3. Geen betaalde hosting nodig.

Bij de bespreking van de technische stack ga ik er dieper op in, voor het geval dat derde voordeel je verbaast.

Want een zakelijke website met alles wat nodig is om leads te genereren (formulier, e-mail, telefoon en WhatsApp), terwijl je alleen de ongeveer € 3 tot € 10 per jaar voor het domein betaalt, klinkt wel erg mooi.

En dat is het ook.

In deze gids leg ik stap voor stap uit hoe je dit zelf kunt aanpakken. Behalve een domein heb je alleen een betaald ChatGPT-account nodig voor analyse, structuur, schrijven, vertalen en controleren, terwijl Codex aan de code werkt..

Natuurlijk kun je andere tools gebruiken. Ik zeg dat vooral als je ook voor Claude betaalt, want de combinatie van ChatGPT als analist en Claude als ontwikkelaar werkt nog beter.

Nu de eisen duidelijk zijn, gaan we stap voor stap aan de slag.

1. Begrijp het project en leg alles vast voordat je begint

Laat de klant eerst uitleggen:

1. Wat het bedrijf precies doet.
2. Welke diensten het aanbiedt.
3. Op wie het zich richt.
4. In welke gebieden het daadwerkelijk actief is.
5. Wie de concurrenten zijn.
6. Wat het bedrijf van hen onderscheidt.
7. Welk bewijs het kan laten zien.
8. Welke acties bezoekers op de website moeten ondernemen. Oftewel: hoe het digitale kanaal het bedrijf klanten en omzet gaat opleveren.

Daarnaast bepaal jij, de klant of jullie samen het volgende:

• De domeinnaam.
• Contactkanalen (telefoon, WhatsApp, e-mail, formulier…)
• De gewenste talen.
• Wie de teksten schrijft.
• Foto's of afbeeldingen.
• Of er regelmatig nieuwe content komt.

Al deze informatie hebben jij en de AI nodig.

We onderscheiden drie soorten beslissingen:

1. De zakelijke beslissingen bepalen wat je verkoopt en aan wie.
2. Die over content en vormgeving bepalen wat je vertelt en hoe je dat presenteert.
3. De technische beslissingen bepalen hoe de website wordt gebouwd, gepubliceerd en onderhouden.

Zodra je dit allemaal hebt vastgesteld, leg je de besluiten vast in een briefing en een product requirements document (PRD) voordat je pagina's gaat bouwen. Als we die documenten aan ChatGPT geven, hoeven we niet in elk gesprek opnieuw uit te leggen welke domeinnaam juist is, welke pagina's zijn goedgekeurd of waar het telefoonnummer en e-mailadres vandaan komen.

De technologie doet er nu nog niet toe. Deze methode werkt met WordPress, Astro of elk ander systeem: zorg voor één duidelijke plek voor beslissingen en een aparte bron voor de bedrijfsgegevens.

Op te leveren

Een korte briefing en een volledig PRD, met goedkeuringen, openstaande besluiten, conversiedoelen, beschikbare materialen en verantwoordelijken.

Als een besluit verandert, werk je zelf het PRD bij of vraag je Codex om dat voor je te doen.

2. Maak mock-ups om het ontwerp te bepalen

Voordat je Codex ook maar iets laat programmeren, kun je beter twee of drie voorstellen voorbereiden om verschillende benaderingen te vergelijken. Het hoeven geen drie complete websites te zijn: meestal is de homepage of een dienstenpagina per voorstel voldoende om een idee te krijgen van de algemene uitstraling.

Laat wel ook de mobiele versie zien, zodat niemand voor verrassingen komt te staan.

Dat is het eerste wat we Codex laten maken.

Als uitgangspunt onderzoeken we drie concepten voor een dienstenpagina. Ze kunnen licht of donker zijn, of verschillen in kleuren en stijlen. Kies wat bij het project past, maar vraag er drie. Twee is weinig en vier of vijf wordt alweer te veel.

Leg de alternatieven naast elkaar en controleer of het ontwerp alle benodigde onderdelen bevat, of de teksten kloppen (door jou geschreven of door ChatGPT gegenereerd), of het telefoonnummer of WhatsApp goed zichtbaar is, of het formulier alleen noodzakelijke gegevens vraagt, of de beelden de dienst goed weergeven enzovoort. Kortom: of het voldoet aan de basisprincipes van CRO..

Nadat je de nodige aanpassingen hebt gedaan, kun je de voorstellen aan de klant laten zien, om zijn mening te vragen en uit te leggen welke van de drie jij het beste vindt. Zorg er wel voor dat wat je laat zien zo dicht mogelijk bij het uiteindelijke ontwerp ligt, in plaats van slechts een ruwe schets te zijn. De klant is niet per se gewend aan hetzelfde abstractieniveau als jij bij het ontwerpen van websites.

Op te leveren

Een mock-up met goedgekeurde visuele richting, desktop- en mobiele versies, een lijst van terugkerende onderdelen (header, footer, pictogrammen, hero met formulier…) en details die bij de implementatie behouden moeten blijven.

3. Doe een snelle, praktische marktanalyse

Je hebt geen onderzoek van honderd pagina's nodig om de eerste structuur van een lokale website vast te stellen. Wel voldoende gegevens om de pagina's niet op gevoel te kiezen. Niet op jouw gevoel, en al helemaal niet op dat van je klant. De analyse bestaat uit twee delen: vraag en concurrentie..

Vraaganalyse: wat, hoeveel en waar zoeken gebruikers?

Je moet eerst uitzoeken of er vraag bestaat naar wat je klant aanbiedt of dat die vraag nog moet worden gecreëerd. Vooral bij lokale bedrijven is de vraag hoe groot die vraag binnen het verzorgingsgebied is..

Hier vind je een compleet, stapsgewijs artikel over vraagonderzoek voor e-commerce, maar hieronder vat ik het samen en pas ik het aan voor een website van een lokaal bedrijf.

Maak een eerste lijst van diensten in de woorden die een klant zelf zou gebruiken. Voeg varianten, behoeften en plaatsnamen toe. Een voorbeeld uit mijn eigen project:

• Busverhuur.
• Busverhuur Ronda.
• Vervoer voor bruiloften.
• Bruiloftsbus Ronda.
• …

Duidelijk, toch?

Controleer daarna welke zoekopdrachten wijzen op de bedoeling om iets af te nemen, welke om informatie draaien en welke diensten combineren die op dezelfde pagina thuishoren. Zo voorzien ‘bus huren voor een bruiloft’, ‘touringcar voor bruiloftsgasten’ en ‘vervoer voor een feest’ in een vergelijkbare behoefte. Je hebt geen drie pagina's nodig omdat er drie formuleringen bestaan. ‘Leerlingenvervoer’ en ‘luchthaventransfer’ richten zich daarentegen op andere doelgroepen, voorwaarden en vragen, en verdienen dus aparte pagina's.

Houd je in deze eerste fase, waarin je de sitestructuur bepaalt, alleen bezig met zoekopdrachten met commerciële intentie. De rest is eventueel materiaal voor de blog, als die er ooit komt.

Gebruik de Google Ads Zoekwoordplanner voor je ramingen en stel het geografische gebied in. Zo krijg je een indruk van het bereikbare verkeer, waarbij je moet beseffen dat een zoekvolumebereik niet gelijkstaat aan het aantal organische bezoeken dat je uiteindelijk ontvangt: dat is maar een deel. Met een geschatte conversieratio kun je vervolgens bepalen hoeveel leads je per maand zou kunnen binnenhalen.

Concurrentie: met wie moet je de strijd aangaan?

Ook hierover heb ik een artikel waarin ik uitgebreid uitleg hoe je een concurrentieanalyse voor e-commerce uitvoert. Het is al wat ouder en sommige dingen zijn veranderd, maar de basis blijft gelijk.

Voor een lokaal bedrijf zoek je zoals een klant zou zoeken vanuit de relevante gebieden en noteer je welke bedrijven in de organische en lokale resultaten verschijnen. Bekijk hun:

• Diensten.
• Teksten, CTA's en content.
• Websitestructuur.
• Geografisch bereik.
• Oproepen tot actie.
• Contactmogelijkheden.
• Online reputatie (scores op platforms als Google Maps of Trustpilot).
• Leadmagnets, als ze die hebben (meestal niet, want ze doen doorgaans geen e-mailmarketing).
• Prijzen.

Het gaat er niet om de eerste in de lijst te kopiëren. De vergelijking moet je helpen onbeantwoorde vragen in je content te vinden, je waardeproposities te verduidelijken en kansen te ontdekken die jouw bedrijf echt kan benutten.

Als je geen toegang hebt tot financiële gegevens van een concurrent, verzin die dan niet. Vraag ChatGPT om hulp, eventueel met Deep research..

Op te leveren

Twee onderdelen:

Een tabel met de zoekwoorden, gegroepeerd per voorlopige bestemmings-URL (meestal homepage en dienstenpagina's), eventueel per geografisch gebied, commerciële prioriteit, zichtbare concurrenten en conclusies. Hiermee neem je beslissingen over de website, de structuur en de content (vooral de koppen) van elke pagina.

Daarnaast voegen we een document met alle goede ideeën van concurrenten toe, voor zover ze toepasbaar zijn op mijn bedrijf en de website.

4. Bepaal de websitestructuur en elke URL vanuit de vraag

Zet de voorlopige zoekwoordgroepen nu om in een concreet paginaoverzicht. Noteer voor elke voorgestelde URL:

• Welke behoefte de pagina vervult, op wie zij zich richt en welke dienst zij vertegenwoordigt.
• Welke actie zij moet opleveren (formulier, klik op het telefoonnummer of WhatsApp, afspraak boeken…).
• Welke content nodig is.
• Of ik echte klantbeoordelingen of ervaringen kan verzamelen.
• Vanaf welke pagina's er interne links naartoe komen.
• Op welk geografisch gebied de pagina zich richt (misschien maar één, maar mogelijk is het nuttig een dienstenpagina te herhalen als ik klanten heb in twee verschillende landen of steden).

Bepaal ook welke pagina's geïndexeerd moeten worden. Of liever andersom: welke juist niet geïndexeerd moeten worden. Bijvoorbeeld juridische pagina's en pagina's met dubbele content (over mij en homepage).

Ook voor de content is het belangrijk dat, als het bedrijf een Google Bedrijfsprofiel heeft, de gegevens daarin (naam, diensten, contactgegevens, openingstijden en werkelijke werkgebieden) precies overeenkomen met de gegevens op de website.

Op te leveren

Een overzicht met:

• URL.
• Zoekwoorden waarop de pagina zich richt.
• Specifieke beslissingen over de inhoud van de pagina.
• Wel of niet indexeren.

5. Leg de vereisten definitief vast en kies de juiste technologie

Voordat je begint met ontwikkelen, moet je alle genomen beslissingen omzetten in een werkdocument: een nieuwe, volledige versie van ons oorspronkelijke PRD. Een ander persoon — of in dit geval AI — moet eruit kunnen afleiden wat er gebouwd moet worden en wanneer het werk klaar is.

Meestal is het handiger om al deze informatie in een ChatGPT-project te bewaren en een eerste versie te laten opstellen. Laat ChatGPT vragen stellen over ontbrekende informatie die het nodig heeft. Daarna hoef je het alleen nog te controleren en bij te werken. Dat gaat veel sneller.

Met al deze informatie kunnen we nu de technologie kiezen. Voor dit type websites raad ik aan twee systemen te vergelijken: het framework Astro (hier lees je over de voor- en nadelen) of WordPress. In dit artikel vind je een directe vergelijking tussen beide, zodat je ziet waarom ik momenteel voor dit soort projecten de voorkeur geef aan Astro.

De winnende combinatie gebruik ik zelf en die volg ik in deze handleiding::

• Astro om de website te genereren.
• GitHub als codeopslagplaats.
• Cloudflare om te publiceren (niet verplicht, maar makkelijker als je daar ook je domein hebt gekocht).
• Zoho Mail voor zakelijke e-mail en een API voor het formulier.

Als het team van een bedrijf vaak veel content via een beheerpaneel moet aanpassen, kan WordPress een betere uitgangspositie zijn.

Naast de technologie moet je ook je bronmateriaal organiseren. Maak daarvoor een map op je pc met verschillende submappen, bijvoorbeeld:

• Origineel materiaal van de klant.
• Eigen materiaal (vraagonderzoek, mock-ups, PSD-bestanden, teksten…).
• Code.
• Definitieve bestanden voor de website (wat naar Cloudflare gaat: vooral HTML, CSS, JS en afbeeldingen).
• Productiegeheimen (wachtwoorden).

Niet al dit materiaal hoort in de repository: alleen wat nodig is om de website opnieuw te bouwen, zonder wachtwoorden of enorme originele documenten die we alleen als werkbron bewaren.

Zodra je deze structuur hebt ingericht, kun je een project in Codex aanmaken, los van het project in ChatGPT. Dat zijn twee verschillende projecten die materiaal zoals het PRD delen. Vanaf nu moet je het zien alsof er twee mensen voor je werken:

1. ChatGPT: de analist, die het systeem op basis van jouw specificaties ontwerpt en oplossingen voorstelt.
2. Codex: de ontwikkelaar, die de website bouwt volgens de instructies van de analist.

Om het project in Codex aan te maken, hoef je alleen maar:

1. Een nieuw project in de app aan te maken.
2. Het een naam te geven.
3. De hoofdmap van het project op je pc te delen.
4. Uit te leggen waar het PRD staat en te vragen alles te beoordelen voordat het begint.

Om deze stap af te ronden, moeten we nog een paar zaken vastleggen voordat we gaan ontwikkelen:

• Hoe wijzigingen vóór publicatie worden gecontroleerd (wil je Codex dat laten doen of liever zelf handmatig?).
• Hoe je publiceert (maakt Codex een commit naar GitHub en wordt die vervolgens via Cloudflare gepubliceerd, of doe je dat zelf?).
• Of de website meertalig wordt en met welke taal we beginnen.

Zodra dat duidelijk is, vraag je Codex om deze beslissingen aan het PRD toe te voegen. Omdat Codex schrijfrechten heeft in de map, kan het de nodige wijzigingen in het document doorvoeren. Vanaf nu werken we volgens deze methode:

1. Jij bedenkt wat er nodig is. Je bent de eigenaar (owner) van het project.
2. Je legt het voor aan ChatGPT en bespreekt samen elk punt en eventuele twijfels.
3. Als alles duidelijk is, vraag je ChatGPT om een prompt voor Codex op te stellen.
4. Je plakt die in Codex, dat de opdracht uitvoert.
5. Je beoordeelt wat Codex heeft gedaan en stuurt zo nodig bij.
6. Je gaat door naar de volgende ontwikkelstap.

Vanaf dit moment is het uitsluitend jouw taak om na te denken, keuzes te maken en zaken vast te leggen. Je analist en je ontwikkelaar bouwen de website.

Op te leveren

• Een goedgekeurd PRD voor de start van de ontwikkeling (dat tijdens het project nog kan wijzigen).
• Een map met de repositorystructuur.
• Een plan voor publicatie en tests.

6. Schrijf de teksten

Als je dat nog niet hebt gedaan, is het nu, met de sitestructuur en het project op orde, tijd om de content voor elke URL te maken.

De homepage moet het algemene aanbod toelichten en bezoekers naar de diensten leiden. Elke dienstenpagina moet beschrijven wat wordt aangeboden, voor wie, in welke situaties, welke vragen klanten meestal hebben en hoe ze contact kunnen opnemen. SEO-teksten vervangen geen teksten die mensen echt helpen: als beide goed zijn opgezet, versterken ze elkaar.

Gebruik AI om eerste versies te schrijven met de juiste context. Vertel over:

• De dienst.
• Je unieke waardepropositie.
• De doelgroep.
• Het geografische gebied.
• De tone of voice.
• Echte veelgestelde vragen.
• Beschikbare klantbeoordelingen. Als er een Google Bedrijfsprofiel bestaat, kunnen we daar misschien goede recensies uit halen.

Blijf het resultaat verbeteren en redigeren totdat je iets hebt wat je kunt publiceren. Bedenk vervolgens hoe je de tekst over verschillende onderdelen verdeelt, of vraag ChatGPT om voorstellen. Sommige onderdelen komen mogelijk overal terug (een formulier, een kaart, algemene voordelen). Maak je daar nu nog niet druk over: dat nemen we in de volgende stap mee.

Hier is een voorbeeldprompt voor een eerste versie van een dienstenpagina:

Schrijf de pagina over [servicio] voor [negocio] in [zona]. Unieke waardepropositie: [propuesta]. Doelgroep: [audiencia]. Belangrijkste intentie: [necesidad]. Ervaringen: [lista]. Veelgestelde vragen: [lista]. CTA: [acción]. Gebruik een [tono] toon. Stel een structuur, teksten, SEO-metagegevens en schema voor. Markeer beweringen waarvoor bewijs nodig is en verzin geen cijfers, recensies, voertuigen of dekkingsgebieden.

Maak de content voor alle pagina's, één voor één.

Op te leveren

Goedgekeurde paginaspecificaties met content: tekst, CTA, metagegevens, bewijs en beeldmateriaal. Je kunt eerst de homepage en één representatieve dienstenpagina bouwen om te testen of de opzet werkt, voordat je de overige diensten- en contactpagina's maakt.

7. Splits herbruikbare componenten af

Bekijk de mock-ups en paginaspecificaties en markeer wat echt terugkomt: header, navigatie, footer, knoppen, formulier, kaarten met voordelen, blokken met afbeeldingen, afsluitende CTA's en meldingen…

Het idee is om daarvoor herbruikbare componenten te gebruiken. Als het telefoonnummer verandert, hoef je het maar één keer in het component aan te passen en staat het meteen goed op alle URL's. Header en footer zijn natuurlijk herbruikbaar, maar er zijn mogelijk meer onderdelen.

Misschien wil je bovendien alle dienstenpagina's dezelfde opzet of structuur geven. Scheid daarom de structuur van de gegevens. Voorbeelden:

• Een sjabloon voor dienstenpagina's kan gedeelde blokken opbouwen zonder elke pagina dezelfde tekst op te leggen.
• Concreter: een component met voordelen kan dezelfde opmaak houden, terwijl titel, uitleg en pictogram veranderen.

Test de aanpak voordat je het patroon overal toepast: vraag ChatGPT om een prompt waarmee Codex de homepage en een dienstenpagina opmaakt, vergelijk die met de mock-ups en pas zowel de afzonderlijke content als de gedeelde componenten aan.

Bekijk de pagina's op desktop en mobiel. Als alles klopt, pas je het systeem op de rest toe.

Op te leveren

Een opgemaakte homepage en één dienstenpagina.

Een inventaris van componenten, de gegevens die ze ontvangen en de pagina's waarop ze worden gebruikt.

8. Maak de afbeeldingen klaar voor productie

Zo, na de teksten zijn de afbeeldingen aan de beurt.

Idealiter heeft de klant je bruikbare foto's gestuurd. In de praktijk is dat zelden zo. Gelukkig geldt, als Photoshop niet je sterkste punt is: ChatGPT is je vriend, en zijn systeem om afbeeldingen te maken en bewerken is ontzettend, ontzettend goed. Dus aan de slag.

Maak het niet ingewikkelder dan nodig: één tot maximaal drie afbeeldingen per URL zou genoeg moeten zijn. En sommige gebruik je waarschijnlijk vaker. Idealiter is de eerste afbeelding, bovenaan de pagina, wel overal anders.

Bewaar de originelen van de klant en sla van elke nieuwe afbeelding een masterbestand van hoge kwaliteit op in mappen die niet naar de repository gaan.

Vraag vervolgens ChatGPT om Codex instructies te geven om elke afbeelding geschikt te maken voor de plek op de website, en daarbij:

• Versies in de juiste afmetingen en formaten te genereren, meestal .webp voor foto's en SVG voor pictogrammen.
• Responsieve afmetingen in te stellen en te voorkomen dat mobiele bezoekers bestanden downloaden die bedoeld zijn voor een groot scherm.
• Ruimte voor de afbeelding te reserveren, zodat de pagina niet verspringt tijdens het laden. De hoofdafbeelding kan voorrang krijgen bij het downloaden; een foto veel verderop kan wachten.
• Een nuttige alternatieve tekst beschrijft de informatie in de afbeelding; als een relevant zoekwoord er natuurlijk in past, is dat mooi meegenomen.

Op te leveren

Definitieve afbeeldingen voor de website.

9. Maak de pictogrammen

Waarschijnlijk het lastigste onderdeel om te optimaliseren op websites met veel pictogrammen (meer dan 20 of 30).

Want voor al die pictogrammen varianten maken in precies dezelfde stijl is lastig, zeker als ze allemaal op één pictogrammenblad staan. Uiteindelijk ga je ze één voor één afwerken, en dat kost tijd.

En daarna wordt het nog lastiger: ze omzetten naar SVG en zorgen dat ze er goed uitzien. Daarom vind ik dat je gerust handmatig uitgesneden PNG's mag gebruiken, of PNG's uit een in Photoshop gemaakt pictogrammenblad. Je haalt dan misschien niet 100% van de mogelijke optimalisatie, maar bespaart ontzettend veel tijd. Ik spreek uit ervaring.

Bij Rondabus probeerde ik bijvoorbeeld verschillende oplossingen, omdat de eerste tekeningen te veel van de voorbeelden afweken: sommige waren te simpel, andere zagen er qua schaal heel anders uit ondanks hetzelfde kader. Ik overwoog uitsneden en PNG's van de goedgekeurde iconensheets, maar in versie 2.0 kozen we uiteindelijk voor de oorspronkelijke SVG's op een groter weergaveformaat..

Zo pak je dat aan:

1. Bepaal eerst waar elk pictogram voorkomt en wat het betekent.
2. Groepeer de pictogrammen die terugkomen.
3. Bewaar één master per tekening of pictogrammenblad.
4. Maak een voorbeeldweergave in de echte context: hero, kaarten met diensten, overzicht met voordelen, contact…
5. Pas de optische grootte aan zonder de vormen te vervormen: twee pictogrammen met dezelfde bestandsbreedte kunnen door de marges in de tekening totaal anders ogen.
6. Controleer eerst een steekproef op een belangrijke pagina (homepage of dienstenpagina) voordat je alle pagina's aanpast. Als het resultaat niet overeenkomt met de stijl van de mock-up, ga dan terug naar het voorbeeld en wijs het af.
7. Pas het daarna toe op de overige pagina's.
8. Het bestandsformaat is een technische implementatiekeuze, terwijl de gebruiker juist de visuele kwaliteit en samenhang beoordeelt. En dát is het belangrijkst.

Op te leveren

Een goedgekeurde set pictogrammen en masterbestanden.

10. Bouw de website stap voor stap

Als de homepage en het patroon voor dienstenpagina's zijn goedgekeurd, bouw je de overige pagina's en controleer je ze afzonderlijk. Eenzelfde sjabloon betekent niet dat alles er automatisch goed uitziet: titels hebben verschillende lengtes, foto's verschillen, het aantal voordelen varieert en ook knopteksten en doelgroepbehoeften lopen uiteen.

Controleer de desktopweergave en meerdere breedtes voor mobiel en tablet. Kijk als een gebruiker, vergelijk elke pagina met de mock-up en controleer dingen die een statisch ontwerp niet kan laten zien:

• Uitklapmenu.
• Links.
• Formuliervalidatie aan de clientzijde.
• Afbeeldingen en pictogrammen die daadwerkelijk laden.
• Lange content.
• Regelafbrekingen in koppen.
• …

Het is verstandig controlepunten in de code op te slaan wanneer je een fase met meerdere wijzigingen goedkeurt. Vraag ChatGPT daarom terwijl je alles bijwerkt.

Op te leveren

Voltooide pagina's in de front-end (het formulier moet, indien aanwezig, nog worden gevalideerd).

Een controlepunt voor een afgeronde front-end, de website in versie V1 (één taal). Vind je dat je website op dit punt klaar is, ga dan naar stap 17 om hem online te publiceren.

11. Maak een formulier en andere contactmogelijkheden

Als je mijn artikelen over Astro hebt gelezen, weet je twee dingen:

1. Je publiceert HTML-bestanden.
2. Op een server zonder servertaal (PHP, Python).

Dat biedt veel voordelen, maar ook één nadeel: je kunt formulieren niet rechtstreeks versturen.

Daarvoor zijn verschillende oplossingen, waaronder:

• Betaalde diensten van Cloudflare gebruiken.
• Een e-mailprovider gebruiken (gratis of betaald) en deze via een API koppelen.

Omdat ik voor dit soort projecten meestal ook het e-mailsysteem inricht en de gratis versie van Zoho Mail gebruik, kies ik ervoor om deze dienst te gebruiken voor berichten uit de formulieren, in plaats van weer een extra leverancier toe te voegen.

Het is een beetje ingewikkeld en vereist verschillende stappen die je zelf handmatig moet uitvoeren, dus vraag ChatGPT om je stap voor stap te begeleiden. En zet vooral nooit je secrets in de GitHub-repository. Cloudflare heeft een plek om ze veilig op te slaan.

Vul het formulier na de inrichting zowel goed als fout in om te controleren of de validatie én het verzenden werken.

Als je dat nog niet hebt gedaan, is dit ook een goed moment om de telefoon- en WhatsApp-link op een echte smartphone te testen, als je die hebt toegevoegd — en dat zou je bijna zeker moeten doen.

Op te leveren

Een volledig getest formulier dat van begin tot eind werkt.

Controlepunt, website versie V1.5 (afgerond met formulier en één taal).

Hiermee zouden we, afgezien van de publicatie (stap 17), alles klaar hebben wat voor een website van een lokaal bedrijf echt noodzakelijk is. Maar de volgende stappen zijn STERK AAN TE RADEN als je daadwerkelijk klanten wilt binnenhalen.

12. Meet contactaanvragen en stel toestemming in

We beginnen de optionele stappen met iets fundamenteels: meten.

Wat willen we meten? De belangrijkste zaken:

• Conversiegebeurtenissen.
• Verkeer.

Waarom?

Om te weten via welke kanalen de verkopen binnenkomen, vooral als we willen adverteren om de eerste klanten te krijgen (en dat zou je zeker moeten overwegen).

De eerste stap is dus een meetplan opstellen met de relevante bedrijfsgebeurtenissen, voordat je iets installeert. Die gebeurtenissen zijn heel duidelijk:

• Telefonisch contact.
• Contact via WhatsApp.
• Via e-mail.
• Via het formulier.
• Afspraken in de agenda boeken.
• Inschrijvingen (eventueel op een nieuwsbrief).
• Een klik om het adres op Google Maps te bekijken.

En waarschijnlijk zijn dit alle gebeurtenissen die je op dit soort website hoeft te meten.

Bepaal welke voor jouw situatie gelden en vraag ChatGPT om:

• De naam van de gebeurtenis volgens de door Google aanbevolen naamgeving, want ik stel voor Google Analytics 4 te gebruiken om dit te meten.
• De voorwaarde waaronder de gebeurtenis wordt geactiveerd.
• Extra parameters (indien nodig).

Zo werkt het systeem:

Een websitebezoeker voert een actie uit > Google Tag Manager registreert deze > GA4 slaat de gebeurtenis op, zodat je de gegevens kunt bekijken.

Meld je met je Google-account aan bij GA4 en GTM en, nu je toch bezig bent, ook bij GSC, dat we later voor SEO gebruiken.

Als je bedrijf in de Europese Unie actief is, hangt de meting ook af van privacykeuzes. Vraag ChatGPT daarom om de geavanceerde Google Consent Mode v2 te implementeren, met een optie om de voorkeuren opnieuw te openen. Je krijgt dan de gebruikelijke cookiebanner.

Als alles is vastgesteld, vraag je ChatGPT om Codex een JSON-bestand te laten maken met de container die je in GTM kunt importeren. De AI vraagt om de ID's van je GA4- en GTM-accounts en levert een bestand met alles wat je nodig hebt, klaar om te importeren.

Daarna hoef je alleen elke gebeurtenis in de voorbeeldweergave van GTM te testen, voordat je de container publiceert en echte gegevens van je website gaat verzamelen.

Op te leveren

Een meetplan en werkende GTM- en GA4-implementatie, met geteste toestemming als dat voor jou van toepassing is.

13. Rond de technische SEO af en publiceer de eerste versie

Als je aan lokale SEO werkt, en dat zou je moeten doen, is het tijd om Screaming Frog te starten en op fouten te controleren. Vraag ChatGPT om ze voor je te laten oplossen.

Koppel de website aan het Google Bedrijfsprofiel dat je hebt. Controleer naam, categorieën, adres of verzorgingsgebied, telefoon, openingstijden, foto's en diensten, zonder locaties te verzinnen.

Upload daarnaast in GSC (Google Search Console) de gegenereerde sitemap . Ken je de URL niet, vraag hem dan rechtstreeks aan Codex. Controleer na enkele dagen of de belangrijkste pagina's gecrawld en geïndexeerd kunnen worden.

Op te leveren

Een website zonder technische SEO-fouten, met geverifieerde URL's en sitemap en het juiste canonieke domein.

Die kunnen we versie V2 noemen..

14. Bepaal of het de moeite waard is de website naar andere talen uit te breiden

We zijn nu bij het laatste deel van het proces aangekomen: de website naar andere talen vertalen.

Controleer voordat je beslist:

• Welke doelgroepen je wilt aantrekken.
• In welke taal je ze te woord zult staan.

Een massageservice aanbieden aan een Noor in Málaga zonder zijn taal te spreken is iets anders dan juridische diensten aanbieden. Je kunt ook Japanners aantrekken die in Ronda een taxi zoeken, mits je duidelijk maakt dat je alleen in het Engels helpt.

Een nieuwe taal betekent bovendien vertaling van content, menu's, formulieren, metagegevens, schema en toekomstige updates. Het gaat om meer dan een knop met een vlaggetje.

Als je samen met ChatGPT hebt vastgesteld welke talen je op de website wilt, leg dan vast:

• De brontaal, de taal die je huidige publieke website al gebruikt.
• De talen waarnaar je vertaalt.
• De pagina's die vertaald kunnen worden; dat zijn ze niet allemaal (zoals de 404-foutpagina of juridische pagina's).
• Het URL-beleid. Bepaal of je slugs vertaalt, hoe equivalente pagina's aan elkaar worden gekoppeld en wat er gebeurt als een vertaling ontbreekt.

De architectuur moet elke pagina identificeren aan de hand van een vaste, taalonafhankelijke code. Zo kan de taalkiezer bezoekers naar de overeenkomstige pagina brengen en kan de website de hreflang -relaties aanmaken zonder te gokken op basis van de zichtbare titel.

Dit regel je allemaal vóór het vertalen.

Op te leveren

Vertaalplan.

15. Scheid exporteren, vertalen en integreren

De werkwijze die voor mij het best werkt, is het werk in delen opsplitsen.

1. Codex inspecteert het project en maakt een tekstpakket met vaste ID's, brontekst, context, doeltaal, plaatsaanduidingen, links en beschermde termen. Meestal levert het een JSON- of XML-pakket.
2. ChatGPT vertaalt deze pakketten, controleert de waarden en levert de vertaalde bestanden terug.
3. Codex integreert de bestanden en controleert de pagina's.

Door deze taakverdeling kun je van vertaler wisselen (zelfs naar een menselijke vertaler) zonder dat die de code hoeft te begrijpen, en hoeft de ontwikkelaar de betekenis van elke zin niet te raden. Een controle door ChatGPT vervangt uiteraard geen taalkundige controle door een beëdigd vertaler.

Prompt voor exporteren:

Inspecteer het project en maak een vertaalbare inventaris voor [idiomas]. Neem zichtbare teksten, navigatie, formulieren, metagegevens en slugs op. Geef voor elke eenheid een vaste ID, brontekst, context, plaatsaanduidingen, links en beschermde termen. Vertaal of wijzig de pagina's nog niet. Meld dubbelzinnige teksten en content waarvoor geen equivalent bestaat.

Prompt voor vertalen:

Vertaal uitsluitend de waarden van het pakket naar [idioma y variante]. Doelgroep: [audiencia]. Toon: [tono]. Woordenlijst: [términos]. Behoud ID's, structuur, volgorde, placeholders, eigennamen, links en code. Vermeld buiten het pakket welke zinnen een zakelijke beslissing of controle door een moedertaalspreker vereisen.

Prompt voor integreren:

Importeer deze goedgekeurde vertalingen in het project. Controleer ID's, plaatsaanduidingen, beschermde termen, slugs en overeenkomstige routes. Publiceer een taal niet als verplichte teksten ontbreken. Voer de vertaalaudit, projectcontroles en build uit; meld verschillen voordat je uitrolt.

Op te leveren

Meertalige website die nog niet is gecontroleerd.

16. Controleer elke taal alsof het een complete website is

Open alle pagina's nadat de vertalingen zijn geïntegreerd: een geldig bestand kan alsnog een uitpuilend menu, een veel te lange CTA of een melding die het formulier bedekt opleveren. Controleer elke URL van elke taal op desktop én mobiel.

Controleer voor SEO (zelf of met ChatGPT):

• <html lang>.
• Titel.
• Beschrijving.
• Gelokaliseerde URL.
• Eigen canonical.
• hreflang-relaties tussen overeenkomstige pagina's.
• Sitemap met indexeerbare URL's.
• De taalkiezer moet bij een taalwisseling op de huidige pagina blijven, als er een equivalent bestaat.
• Controleer ook de links in de footer.
• Formulieren en foutmeldingen.
• Alternatieve teksten van afbeeldingen.
• Gestructureerde gegevens die tekst of URL's bevatten.

Pas aan wat nodig is totdat alles goed is afgewerkt.

Op te leveren

Volledige meertalige website, versie V3.

17. Publiceer een herkenbare versie en controleer de productieomgeving

Of je nu stopt na stap 10 (V1), 11 (V1.5), 13 (V2) of de vorige stap (V3): tot nu toe staat de website in een testomgeving. Hij moet nog naar productie worden gebracht. Dat doen we hier.

Nu vragen we ChatGPT om Codex de build op Cloudflare te laten publiceren.

Daarvoor zal Codex:

1. Inloggen op ons GitHub-account.
2. Vragen om de juiste repository te selecteren of aan te maken.
3. Inloggen op ons Cloudflare-account.
4. Vragen op welk domein we willen publiceren.
5. De nieuwste versie van de website publiceren.

En wij hoeven dan alleen te controleren of alles er hetzelfde uitziet als in de testomgeving.

Dan is de website klaar.

Op te leveren

Gepubliceerde, volledige versie van de website.

18. Maak van het project een herhaalbare werkwijze

Dit is nog vrijblijvender, maar sterk aan te raden als je dezelfde aanpak wilt gebruiken voor een website van een ander bedrijf.

Je hoeft ChatGPT alleen te vragen een Skill te maken van het hele proces dat jullie hebben gevolgd. Zo hoef je bij de volgende website niet elke stap te onthouden of deze handleiding weer op te zoeken. ChatGPT bewaart het netjes en Codex krijgt het van binnen geïnstalleerd.

Zo kun je de volgende website voor een ander lokaal bedrijf veel sneller bouwen.

Mooi toch?