A generic one-page roofing site rebuilt around nine areas and five services
Orpington roofer whose one-page template site became twenty pages, with a page for each of nine areas and five services and structured data on every one.
- Client
- Diamond Roofing Contractors
- Trade
- Roofing contractor
- Based
- Orpington, South East London
- Live since
- 2026
What the business needed
Diamond Roofing Contractors Ltd re-roofs in tile and slate, fits flat roofs in EPDM and GRP, replaces soffits, fascias and guttering and does lead work and moss removal across the BR, DA, SE and TN postcodes from Orpington. The tone is family trade: honest quotes and no pushy follow-ups.
The old site is preserved in the project as a Wayback Machine capture from July 2025. It was one page of template copy, 'Welcome to Your Trusted Roofing Experts!', a bulleted list of five things that were free, and a contact form with first name, last name, email and message. No phone field, on a site for a trade where the phone is how the work arrives.
What was built
Around twenty pages: home, about, contact, gallery, a services index with five service pages and an areas index with nine area pages, all generated from typed content in two data files. The same phone numbers and email address carried over from the old site; everything around them was replaced.
Two forms, a compact hero quote form with name, phone, postcode and message and a full contact form, both posting to Formspark with a honeypot. A desktop announcement bar carries trust badges and the phone number; a mobile-only fixed pill does the same job at the bottom of the screen. The gallery opens in a full-screen lightbox that locks scrolling and closes on Escape.
All the motion, staggered entrances, a scroll cue, hover underlines and the accordion chevron, is CSS. The brand accent was changed from red to blue during the rebuild and the old value is noted next to the new one in the stylesheet so nobody mistakes the change for drift.
Structured data per area and per service
RoofingContractor for the business, a Service node on each service page, a Service node with postcode addressing on each area page, breadcrumbs, and FAQ markup built from the same questions shown on the page.
Analytics on the studio's own subdomain
The tracking script is served from analytics.webvise.co.uk rather than from Google directly, and only after the visitor accepts the banner.
A real rating, stated plainly
The reviews module shows 4.9 from 33 reviews with three quoted, linking out to Google. It is the business's number, not a rounded one.
Static, with everything still working
No server anywhere, yet the forms, the lightbox and consent-gated analytics all run. Premium feel does not require paying for hosting.
Getting it found
The homepage title names the trade and the region: 'Roofers in South East London & Kent'. The nine area pages each cover a named town and its postcodes, cross-linked to the five services, which is the trade-plus-town structure a roofer's searches actually take.
Under the hood
What the site runs on. The same approach is described on the service pages it came from.
- Next.js 16, static export
- React 19 and TypeScript
- Tailwind CSS v4
- Typed area and service content
- Formspark forms with honeypot
- Gallery lightbox, CSS-only motion
- RoofingContractor, Service, FAQ and breadcrumb schema
- Consent-gated self-hosted analytics