Custom AV installer websites built with the same calibration discipline as a Dolby Atmos room.

Zebra runs two offices, Hardwick Lodge near Little Aston in the UK and the Lakhouse on Dunlop Street East in Ontario, and the brief was to make a luxury installer's website carry the same structural depth as a mass-market AV company without the brand looking like a chain. The old site was six static pages on WordPress with no H1 on the homepage (the kind of critical SEO failure most agencies miss), no meta descriptions, no schema, no Open Graph tags, no sitemap, no AI-bot allowlist, no blog. The page count was the whole problem and the absence of structure on top of it was the rest. We rebuilt on React 18, TypeScript, Vite, Tailwind, and shadcn/ui with GSAP carrying the animation work and Sharp handling image optimization at build time. Satori does the quiet heavy lifting, generating a 1200x630 Open Graph card for every page at build, which lands at roughly 190 auto-generated images across the build. The site went from 6 pages to 26 static plus 96 blog posts, 46 news posts, and 22 service-area city pages, a 32x lift in surface area. Five schema types ship layered across the content (Article, FAQPage, VideoObject, Person, Organization), Lighthouse mobile sits at 95-plus, and the brand is now citable for queries about home cinema, Steinway systems, and calibration philosophy across the regions Zebra operates in. We were figuring out the OG-image pipeline as we went, in fairness. Satori at 190 generations is a different problem than Satori at 10, and the second iteration of the build script is meaningfully faster than the first. The full portfolio is here, and the Zebra case in detail walks through every schema decision and every part of the per-city build.