Faded Az

Faded Az is a barbershop at 314 Montague Rd in West End, Brisbane. Most of its customers find it the same way: they search for a barber nearby, check the reviews, and book. The website has two jobs, then. It has to show up in that search, and it has to get people booked in quickly once it does.

You can see it live at fadedaz.com.au.

Starting with one page

The first version, in July 2025, was a single page: a full-screen hero, an About section, a map and a booking button. It was React and Vite with Tailwind, deployed as a static site.

The hero sets the tone. A dark wash over a photo of the shop, with "Breathtaking Beards. Flawless Fades." fading up one line at a time, then the address and a booking button. The photo comes from Cloudinary with a different crop for phones and desktops, because the framing that works on a wide screen cuts the chair in half on a tall one.

Over the next few months it gained reviews, an Instagram section and an FAQ, and lost a light mode that nobody needed.

Built for local search

For a local business, the search result is often the whole first impression. So most of the work went into what Google can see:

• Titles and descriptions written around the searches people actually make ("barber West End", "skin fade Brisbane")
• BarberShop structured data with the address, coordinates, trading hours and services, so Google can show them right in the results
• Review and rating markup on the testimonials
• An FAQ with its own schema, answering the questions people ask before they book
• A sitemap, robots file and web manifest

In April 2026 the single page became five: Home, Services, Book, Find Us and Reviews. Separate pages give Google more to link to directly from a search result, and each one has its own title, description and canonical address.

Auditing my own work

In July 2026 I ran a proper technical audit of the site: a production build, crawled with headless Chromium, and the raw HTML checked before any JavaScript ran.

The biggest finding was one I'd built in myself. Because the site rendered entirely in the browser, every page was served as the same empty <div id="root"> until JavaScript ran. Google copes with that, mostly. Link previews in messages and social apps don't, and every page shared the home page's title before JavaScript ran.

Moving to a framework like Astro would have fixed it, but that was days of work for a five-page site. Instead I added a prerender step to the build. After Vite builds the site, it renders each of the five routes on the server and writes them out as real HTML files, with each page's own title and meta tags in the head. The site still runs as the same React app once it loads; crawlers and preview bots now get the full page first.

The audit turned up smaller things too, and most were fixed the same day:

• A placeholder phone number had made it into the live structured data
• Two different business types were describing the same shop, in three separate schema blocks
• A booking script was loading on every page without being used
• Preload links pointed at files that no longer existed after a rebuild

Booking

Booking is the only thing the site really needs people to do, so every button on every page leads there. When the shop moved from Timely to Square Appointments in August 2026, I tried embedding Square's booking form inline on the Book page. It works there, so it stayed, but for the buttons everywhere else a direct link to Square turned out quicker than an extra page in between.

Keeping it current

A small business website is never really finished. Trading hours change, new reviews come in, the photos get better. Each of those is a small change, and the site is set up so that's all they need to be.