Alles wat je moet weten om de site te beheren en live te krijgen, zonder dat je programmeur hoeft te zijn. Technische details staan in README.md.
In deze volgorde. De eerste twee leveren het meeste op.
Alle prijzen staan op één plek: lib/packages.ts.
Je vult daar de prijs exclusief btw in — precies zoals in je eigen prijslijst. De site rekent zelf de prijs inclusief btw uit en toont die aan particulieren. Je hoeft dus nooit twee bedragen bij te houden.
{
id: "interieur-compleet",
slug: "interieur-compleet",
name: "Interieur compleet",
group: "los",
priceExcl: 90, // ← alleen dit getal aanpassen
duration: "1–2 uur",
summary: "...",
includes: [ "..." ],
}
Het uurtarief staat er direct onder als hourlyRateExcl.
Waarom incl. btw op de site staat Voor particulieren ben je in Nederland verplicht de prijs inclusief btw te tonen. Je oorspronkelijke prijslijst was exclusief btw; dat mag wel op de zakelijke pagina, want die richt zich op ondernemers. De site doet dat nu automatisch: particuliere pagina’s tonen incl. btw met het excl.-bedrag klein eronder, de zakelijke pagina precies andersom.
Kopieer een bestaand blok en pas het aan. Let op:
id en slug moeten uniek zijn. De slug wordt de link
(/offerte?pakket=jouw-slug).group bepaalt onder welk kopje het pakket op de prijzenpagina komt:
los, combi, correctie, coating of zakelijk.zakelijk verschijnen niet op de particuliere
prijzenpagina, alleen op /zakelijk.Het pakket verschijnt daarna vanzelf in het offerteformulier, in de structured data en in de tellingen (“alle 15 pakketten”).
Elke lege plek op de site is een Photo-component met een omschrijving van de
foto die er hoort. Zo vul je er één in:
public/assets/photos/ — bijvoorbeeld hero-golf.jpg.components/sections/hero.tsx).src en alt toe:<Photo
src="/assets/photos/hero-golf.jpg"
alt="Zwarte Volkswagen Golf na volledige lakcorrectie"
shot="Hero: driekwart vooraanzicht van een net afgewerkte auto…"
ratio="4 / 3"
priority
/>
De shot-tekst mag blijven staan; die wordt genegeerd zodra er een src is.
alt is voor mensen die de foto niet kunnen zien — beschrijf wat er te zien
is, niet “foto van auto”.
Voor/na-paren werken hetzelfde, in components/sections/gallery.tsx:
<BeforeAfter
beforeSrc="/assets/photos/golf-voor.jpg"
afterSrc="/assets/photos/golf-na.jpg"
shot="motorkap in de zon…"
caption="2-staps lakcorrectie op donkere lak."
/>
Formaat: maak foto’s minstens 1600px breed en sla ze op als JPG. Next.js comprimeert ze automatisch naar moderne formaten.
In lib/areas.ts. Kopieer een blok en schrijf een eigen intro van
twee tot drie zinnen.
Dat laatste is belangrijk. Twaalf pagina’s die alleen in de plaatsnaam verschillen, ziet Google als dunne inhoud en die ranken niet. Schrijf iets dat alleen voor die plaats geldt: hoe de parkeersituatie is, hoe ver het rijden is, of auto’s er meer met zout of stof te maken hebben.
{
slug: "zundert",
name: "Zundert",
region: "breda", // "breda" of "goes"
province: "Noord-Brabant",
distanceKm: 18,
intro: "Schrijf hier iets dat alleen over Zundert gaat.",
nearby: ["Etten-Leur", "Breda", "Rijsbergen"],
}
De pagina, het menu, de footer, de sitemap en de structured data volgen automatisch.
Dit zijn alle foto’s die de site verwacht, in volgorde van belang.
| Wat | Verhouding |
|---|---|
| Driekwart vooraanzicht van een afgewerkte auto, buiten, reflecties strak | 4:3 |
| Close-up: waterparels op een gecoate motorkap | 1:1 |
| Close-up: polijstmachine op een paneel, halve kant gecorrigeerd | 1:1 |
Die derde is je sterkste beeld: één paneel half gedaan, met de scheidingslijn in beeld. Dat verkoopt lakcorrectie beter dan welke tekst dan ook.
| Voor | Na |
|---|---|
| Motorkap met zichtbare swirls in de reflectie | Zelfde motorkap, strak spiegelbeeld |
| Stoffen bestuurdersstoel met vlekken | Zelfde stoel, egaal |
| Velg met ingebrand remstof | Schoon tot in de spaken |
| Middenconsole en dashboard met aanslag | Mat en schoon, niet vet glimmend |
Per dienst één representatieve foto en één procesfoto (halverwege het werk, handen in beeld). De vier diensten: interieurreiniging, handwas & exterieur, lakcorrectie & polijsten, keramische coating.
| Wat | Verhouding |
|---|---|
| Jij aan het werk bij een auto — gezicht herkenbaar | 3:4 staand |
| De bus met de deuren open, apparatuur zichtbaar | 1:1 |
| Werkbank of productenplank, merken leesbaar | 1:1 |
Die eerste is geen ijdelheid: bij een eenmanszaak die bij mensen thuis komt, is “wie laat ik op mijn oprit” een echte vraag. Een gezicht beantwoordt die.
Je vroeg wat ik voorstel. Dit is het, inclusief de lastige kant.
Je werkt vanuit Breda én Goes, en het is verleidelijk om voor allebei een profiel aan te maken. Doe dat niet. Google staat één profiel per bedrijf toe tenzij het echt aparte, bemande vestigingen zijn. Een tweede listing voor dezelfde eenmanszaak wordt aangemerkt als spam, en de sanctie treft doorgaans allebei de profielen — dan ben je slechter af dan toen je begon.
Bij het aanmaken vraagt Google om een adres. Kies de optie dat je naar klanten toe gaat en zet je adres op verborgen. Je krijgt dan geen speld op de kaart maar een werkgebied, en dat klopt met wat je doet. Vul als werkgebied zowel de Bredase als de Zeeuwse plaatsen in (Google staat er tot ongeveer 20 toe).
Een profiel rangschikt rond het adres waarop je verifieert. Breda en Goes liggen ongeveer 70 km uit elkaar. Dat betekent in de praktijk: je gaat goed scoren rond je verificatieadres en matig in de andere regio. Daar is met één profiel niets aan te doen — het is een eigenschap van hoe Google lokaal werkt, geen instelling die je kunt aanzetten.
Wat je er wél tegen doet:
/werkgebied/goes, /werkgebied/middelburg, …). Die zijn er precies
hiervoor.Voor mobiele bedrijven verifieert Google tegenwoordig meestal met video. Je moet in één ononderbroken opname laten zien: de omgeving waar je werkt, je bus met apparatuur, en bewijs dat het bedrijf van jou is (KvK-uittreksel, verzekeringspapier, factuur op naam). Zorg dat je die documenten klaar hebt liggen — een mislukte poging kost je weken.
Let op je telefoonnummer. Je hebt een Belgisch nummer (+32) bij een Nederlands bedrijf met een Nederlands werkgebied. Google kan daarover struikelen bij de verificatie, en Nederlandse klanten aarzelen bij een buitenlands nummer omdat ze bang zijn voor belkosten. Een Nederlands 06-nummer erbij nemen is waarschijnlijk de goedkoopste conversieverbetering die je kunt doen.
De site is gemaakt voor Vercel (gratis voor dit gebruik):
.env.example.Belangrijk: zet NEXT_PUBLIC_SITE_URL op je echte domein (bijvoorbeeld
https://www.michieldetailing.nl). Doe je dat niet, dan vertelt de site aan
Google dat de officiële adressen op *.vercel.app staan.
Het offerteformulier verstuurt via Resend:
RESEND_API_KEY in Vercel.CONTACT_FROM_EMAIL op een adres op je eigen domein, bijvoorbeeld
Michiel Detailing <offerte@michieldetailing.nl>. Dit moet je eigen,
geverifieerde domein zijn — mailen namens het adres van de klant faalt op
SPF.CONTACT_TO_EMAIL is waar aanvragen binnenkomen; standaard je Outlook-adres.Test daarna één keer een echte aanvraag via het formulier en kijk of je beide mails krijgt: de aanvraag én de bevestiging.
Claim je domein op search.google.com/search-console, kies de HTML-tag-methode,
en zet de code als GOOGLE_SITE_VERIFICATION in Vercel. Dien daarna
https://jouwdomein.nl/sitemap.xml in.
Zodat je niet denkt dat er iets vergeten is.
Geen garantietermijn op coating. Je gaf aan geen garantie te geven. Ik heb dat níet als disclaimer op de site gezet, om twee redenen. Ten eerste kun je de wettelijke rechten van een consument niet met een zinnetje wegnemen, dus zo’n disclaimer is niet houdbaar. Ten tweede leest “geen garantie” bij een klus van €1.500 als een waarschuwing. In plaats daarvan legt de site uit waar de levensduur van afhangt en dat je bewust geen termijn belooft — dat is eerlijker en het verkoopt beter.
Geen foto-upload in het formulier. Uploaden vanaf een telefoon is traag en mislukt vaak, en mailbijlagen lopen tegen limieten aan. De bevestigingsmail vraagt in plaats daarvan om foto’s via WhatsApp, met een klaarstaande link. Dat werkt in de praktijk beter en je hebt het gesprek meteen open staan.
Geen kaartje van het werkgebied. Een kaart vraagt een externe kaartdienst, en dat kost laadtijd, privacy-gedoe en een gat in de securityinstellingen. Een lijst met plaatsen die allemaal naar hun eigen pagina linken is voor Google bovendien nuttiger dan een plaatje.
Geen donkere modus. Je koos “licht & fris”; de site committeert daaraan.
Geen cookies, geen analytics, geen trackers. Daarom hoeft er ook geen cookiebanner op. Wil je later toch bezoekcijfers, kies dan iets zonder cookies (Plausible, Vercel Analytics) — dan blijft dat zo. Wie er wel een gewone Google Analytics op zet, moet én een banner plaatsen én de privacyverklaring aanpassen.
De privacyverklaring beschrijft precies wat de site nu doet. Verandert er iets aan het formulier of komt er een analysetool bij, dan moet die tekst mee veranderen.
| Wat wil je wijzigen | Bestand |
|---|---|
| Telefoon, e-mail, KvK, btw, merken | lib/site.ts |
| Prijzen, pakketten, uurtarief | lib/packages.ts |
| Teksten van de vier diensten | lib/services.ts |
| Plaatsen en hun teksten | lib/areas.ts |
| Veelgestelde vragen | lib/faq.ts |
| Menu-items | lib/nav-links.ts |
| Homepage-secties en volgorde | app/page.tsx |
| Zakelijke pagina | app/zakelijk/page.tsx |
| Kleuren en typografie | app/globals.css |
| Privacyverklaring | app/privacy/page.tsx |