Abriss Meier by Herkenrath Bau
Merk, design en website voor een sloopbedrijf in de Harz: 14 locatiepagina's met eigen tekst, zes dienstenpagina's en een aanvraagtraject dat een sloopproject voorkwalificeert voordat iemand naar de bezichtiging rijdt.
Terug naar referenties29
Pagina's in één deploy
14
Locatiepagina's
121 KB
JavaScript en CSS
0
Trackingscripts
Projectoverzicht
Abriss Meier sloopt huizen, stript gebouwen tot op het casco en verwerkt bouwpuin direct op de bouwplaats. Het werkgebied loopt van Göttingen tot Magdeburg, dwars door de Harz en de aangrenzende regio's van Niedersachsen, Sachsen-Anhalt en Thüringen. Naar zo'n dienst wordt bijna altijd lokaal gezocht: Hausabriss Wernigerode, Abriss Goslar, Entkernung Halberstadt.
De tweede horde zit in de offerte. Wat een sloop kost, hangt af van het type gebouw, de oppervlakte, het aantal verdiepingen, de kelder, het vermoeden van schadelijke stoffen en de vraag of een zware graafmachine überhaupt op het perceel kan komen. Pas na een bezichtiging valt er een serieuze prijs te noemen, en zo'n bezichtiging kost een dag. De website moest dus voorsorteren.
Abriss Meier begon zonder website en zonder merkidentiteit. Het bedrijf moest zichtbaar worden in 13 steden en in de regio Harz, verdeeld over drie deelstaten, elk met een eigen zoekopdracht. Daar komt een vakgebied bij waarin vergunningen, asbest en afvalwetgeving elke onnauwkeurige zin tot een aansprakelijkheidsrisico maken.
Wij hebben logo, kleurenpalet, design en website volledig opgebouwd. De pagina-architectuur scheidt zes dienstenpagina's van 14 locatiepagina's, elk met eigen tekst over de bouwkundige staat, de wijken en de toegang tot het terrein. Daarbij kwam een aanvraagtraject met 14 velden en foto-upload, uitgeleverd als statisch voorgerenderde Next.js-frontend op Vercel.
29 pagina's gingen in één deploy live, allemaal voorgerenderd en aan de edge gecachet, elk met een eigen titel, een eigen omschrijving, één hoofdkop en de bijbehorende machineleesbare gegevens over bedrijf, dienst, locatie en vragen. De homepage laadt daarbij niets van externe servers.
Lokale zichtbaarheid
Locatiepagina's werken pas als ze meer zijn dan een vervangen plaatsnaam. De pagina over Wernigerode gaat over Hasserode, Nöschenrode, Silstedt en Schierke, en over wat smalle toegangswegen in de oude binnenstad betekenen voor de keuze van de machines. Goslar draait om de Rammelsberg, de wijk Baßgeige en de monumentenzorg in de historische kern. Bij Magdeburg komen de Gründerzeit-wijken Stadtfeld en Buckau ter sprake, de prefab betonflats en de Bauordnung des Landes Sachsen-Anhalt (de bouwverordening van de deelstaat).
De pagina-architectuur
13 steden van Göttingen tot Magdeburg plus een pagina voor de regio Harz, allemaal op hetzelfde URL-patroon. De tekst eronder is per plaats opnieuw geschreven, inclusief een eigen regionale FAQ.
Hausabriss (huissloop), Teilabriss (gedeeltelijke sloop), Entkernung (strippen tot op het casco), Schadstoffgutachten (onderzoek naar schadelijke stoffen), Bauschutt-Recycling vor Ort (puinrecycling op de bouwplaats) en Bauschutt-Entsorgung (afvoer van bouwpuin). Een overzichtspagina bundelt alle acht aangeboden diensten.
Vanaf de homepage is elk van de 29 pagina's met één klik bereikbaar. De footer van iedere pagina leidt naar het complete locatiecluster, kruisverwijzingen staan in de lopende tekst en dragen de titel van de doelpagina als ankertekst.
Elke pagina vertelt zoekmachines in machineleesbare vorm wie het bedrijf is, waar het werkt en wat het kan: adres, telefoonnummer, 17 plaatsen en regio's als werkgebied, zeven dienstthema's. Locatie- en dienstenpagina's vullen dat aan met de betreffende dienst, en 17 van de 29 pagina's leveren hun vragen en antwoorden meteen mee.
Elke pagina heeft een eigen titel, een eigen omschrijving voor de zoekresultaten, een verwijzing naar zichzelf als oorspronkelijk adres en precies één hoofdkop. Ook de prioriteiten in de sitemap zijn met de hand toegekend, van 1.0 op de homepage tot 0.2 in het colofon.
Voor de vergunning verwijst de tekst naar de bevoegde Bauaufsichtsbehörde (het bouwtoezicht), voor de prijs naar de bezichtiging, voor hergebruik van materiaal naar de Ersatzbaustoffverordnung (de Duitse regels voor secundaire bouwstoffen). Elke bewering waar een deskundige zijn handtekening onder zou moeten zetten, is navenant voorzichtig geformuleerd.
Aanvraagtraject
Het aanvraagformulier staat op de homepage en op elke dienstenpagina. Het vraagt precies de gegevens uit waaruit een calculatie ontstaat. Zes van de 14 velden zijn verplicht, de rest helpt. Wie het invult, levert in één keer het beeld waarvoor anders twee telefoongesprekken nodig zijn.
Eengezinswoning, meergezinswoning, garage, schuur, bijgebouw, bedrijfspand, hal, aanbouw of overig.
Eén tot vier verdiepingen, met kelder of onduidelijk. De kelder bepaalt of de fundering eruit moet en of er aangevuld wordt.
Globale grondoppervlakte als vertrekpunt voor de raming van de hoeveelheden.
Bekend, vermoed of onbekend. Daarvan hangt af of er vóór de sloop een onderzoek wordt georganiseerd.
Vrij, beperkt of onduidelijk. Deze opgave bepaalt de grootte van de machines en of een rupsgraafmachine überhaupt op het perceel kan komen.
Gewenst tijdvenster voor de uitvoering, basis voor de planning.
JPG, PNG, WebP, HEIC of PDF, tot 10 MB per bestand. Eén foto van de toegangsweg beantwoordt vragen die geen formulierveld kan stellen.
Naam, bedrijf, telefoon, e-mail en het adres van het te slopen object.
Verzenden loopt via een Server Action, waardoor het formulier ook zonder JavaScript aankomt. Tegen geautomatiseerde inzendingen werken een verborgen veld, een tijdstempel bij het openen van het formulier en Cloudflare Turnstile, in de privacyverklaring benoemd en onderbouwd.
Techniek
Een website van een bouwbedrijf wordt vaak onderweg geopend, op het perceel, met één streepje bereik. Daarom ligt elk van de 29 pagina's kant-en-klaar gerenderd in de cache. Bij het opvragen wordt er niets meer berekend.
Technische keuzes
De frontend is gebouwd met de Next.js App Router en wordt op Vercel volledig voorgerenderd. Alle 29 URL's komen als kant-en-klare HTML uit de Edge-Cache, zonder databasequery in het requestpad. Ook de 404-pagina is voorgerenderd, en doorverwijzingen vanaf http, vanaf het apex-domein en vanaf URL's zonder afsluitende slash lopen netjes via 308.
Voor moderne browsers laadt de homepage ongeveer 121 KB aan JavaScript en CSS, brotli-gecomprimeerd. De typografie draait op de system-font-stack: geen webfontbestand, geen font-download, geen tekst die verspringt tijdens het laden. Het kleurensysteem ligt als Tailwind-token op het merkrood #ED1C24.
Afbeeldingen komen als WebP in de breedte die het apparaat nodig heeft: negen maatvarianten, waaruit de browser de passende kiest. De hoofdafbeelding van elke pagina wordt met hoge prioriteit vooraf geladen, al het overige pas bij het scrollen.
Bij het laden van een pagina gaat er geen enkel verzoek naar een externe server. Geen analytics, geen tag manager, geen ingesloten kaartdienst, dus ook geen cookiebanner. De enige externe verbinding ontstaat bij het formulier via Cloudflare Turnstile, na het renderen en toegelicht in de privacyverklaring.
Tech Stack
Omvang
14 velden leggen type gebouw, oppervlakte, verdiepingen, kelder, vermoeden van schadelijke stoffen, toegang en gewenste datum vast. Zes daarvan zijn verplicht. Een aanvraag wordt daarmee meteen een calculatiebasis.
Het verzenden loopt via een Server Action als klassieke POST. Wordt een script geblokkeerd of gaat het onderweg verloren, dan komt de aanvraag alsnog binnen.
Tot tien bestanden per aanvraag, JPG, PNG, WebP, HEIC of PDF, elk tot 10 MB. Een foto van de toegangsweg scheelt in twijfelgevallen de eerste gang naar het terrein.
Wie liever belt, laat naam, telefoonnummer en een tijdvenster achter. Meer vraagt de dialoog niet, de gegevens over het pand komen in het gesprek aan bod.
14 pagina's met eigen tekst over wijken, bouwkundige staat en toegangswegen, elk met de bijbehorende diensten, een regionale FAQ en een eigen contactroute.
Zes detailpagina's van Hausabriss tot Bauschutt-Entsorgung, plus een overzicht van alle acht diensten inclusief Gebäudeabriss (gebouwsloop) en Baustellenräumung (bouwplaats ontruimen).
Op de telefoon staan onder aan het scherm permanent de knoppen om te bellen en een offerte aan te vragen. De weg naar contact is nooit meer dan één aanraking lang.
Skiplink naar de hoofdinhoud, vijf benoemde navigatiegebieden, één hoofdkop per pagina, beschrijvende alternatieve teksten bij alle afbeeldingen, een label bij elk formulierveld en 67 decoratieve symbolen die schermlezers overslaan.
Zonder trackingdiensten heeft de site geen toestemming nodig en schuift er bij niemand een banner voor de inhoud. De privacyverklaring noemt Turnstile als enige externe dienst, inclusief rechtsgrondslag.
Opleveringen
Beslissingen achter de website van Abriss Meier
Omdat er lokaal gezocht wordt. Wie in Goslar een huis wil laten slopen, zoekt op Hausabriss Goslar en niet op Abrissunternehmen Harz. Eén pagina per plaats kan die zoekopdracht beantwoorden, in de taal van de plaats en met de wijken die daar iedereen kent. Een gezamenlijke pagina met 14 stadsnamen in een lijst doet dat niet.
Elke pagina heeft eigen tekst. Wernigerode gaat over de dicht bebouwde binnenstad, over Hasserode en Nöschenrode en over smalle toegangswegen. Goslar noemt de Rammelsberg en de monumentenzorg, Magdeburg de Gründerzeit-wijken Stadtfeld en Buckau en de Bauordnung des Landes Sachsen-Anhalt. Ook de FAQ verschilt per plaats. Gelijk blijven alleen de dienstenblokken en de contactroutes.
Omdat de site daardoor niets te doen heeft op het moment dat iemand hem opent. Alle 29 pagina's worden bij het deployment gerenderd en liggen daarna als kant-en-klare HTML in de Edge-Cache. Geen server die bij elke oproep rekent, geen database in het requestpad, geen beveiligingsupdates die iemand moet installeren.
Allebei kosten ze laadtijd en brengen ze verplichtingen mee. Zonder analyticsdienst vervalt de toestemming en daarmee de banner die anders voor de inhoud staat. Zonder webfont verschijnt de tekst meteen in het juiste lettertype. Voor moderne browsers blijft er ongeveer 121 KB aan JavaScript en CSS over, en bij het openen van een pagina gaat er geen verzoek naar een externe server.
Het haalt de vervolgvragen naar voren. Type gebouw, oppervlakte, verdiepingen, kelder, vermoeden van schadelijke stoffen en toegang bepalen precies wat er in een offerte komt. Komen die gegevens met de aanvraag mee, plus maximaal tien foto's, dan is de inventarisatie bij het eerste terugbelmoment al gedaan en gaat het gesprek over de afstemming. Verplicht zijn desondanks maar zes velden, zodat niemand op de lengte afhaakt.
Aan gestructureerde data. Elke pagina legt machineleesbaar vast wie het bedrijf is, waar het werkt en wat het kan: adres en telefoonnummer, 17 plaatsen en regio's als werkgebied, zeven dienstthema's. Locatie- en dienstenpagina's dragen daarnaast de betreffende dienst als eigen vermelding, plus een kruimelpad van de homepage via het werkgebied tot aan de plaats. Op 17 van de 29 pagina's zijn ook de vragen met hun antwoorden zo vastgelegd.
Je werkt regionaal en wilt in elke plaats van je werkgebied gevonden worden? Bij Abriss Meier hebben we het hele traject zelf gelopen, van het merk tot de laatste locatiepagina. Vertel ons over jouw gebied, dan krijg je een eerlijke inschatting.