Under the Hood

SEO Foundations

Search engine optimisation starts long before anyone writes a blog post or picks a keyword. The real foundation is structural: meta tags, sitemaps, robots directives, canonical URLs, and structured data. These tell Google exactly what your site is, what each page covers, and how to present it in search results.

Most template sites generate basic title tags and call it done. The rest of the infrastructure, the stuff that actually moves the needle, is either misconfigured or missing entirely.

Meta tags control how your site appears in Google results. Title, description, Open Graph tags for social sharing. Get these wrong and your listing looks like a broken link. Get them right and you control the first impression.

Sitemaps and robots.txt tell search engines which pages to crawl and which to skip. A sitemap is a roadmap of your entire site. Robots.txt sets the boundaries. Together they make sure Google indexes your important pages and ignores the rest.

Canonical URLs prevent duplicate content penalties. If the same page is accessible at three different URLs (with and without www, with trailing slashes, with query parameters), Google sees three competing pages instead of one strong one. A canonical tag points to the single authoritative version.

Structured data (JSON-LD) is the biggest missed opportunity for local businesses. It feeds Google machine-readable information about your business: name, address, phone number, opening hours, service area. This is what powers those rich search results with star ratings, business hours, and contact details right on the results page.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Your Business Name",
  "url": "https://yourbusiness.com.au",
  "telephone": "+61 2 1234 5678",
  "email": "hello@yourbusiness.com.au",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main Street",
    "addressLocality": "Canberra",
    "addressRegion": "ACT",
    "postalCode": "2600",
    "addressCountry": "AU"
  },
  "openingHours": "Mo-Fr 09:00-17:00",
  "priceRange": "$$",
  "sameAs": [
    "https://facebook.com/yourbusiness",
    "https://instagram.com/yourbusiness"
  ]
}
</script>

Performance

Speed is the first thing a visitor experiences, even if they never think about it consciously. A page that loads in under two seconds feels instant. A page that takes four or five seconds feels broken. Most people leave before it finishes.

What makes a site fast? Fewer requests, smaller files, smarter loading. A hand-built site controls all three. A template site controls almost none of them.

Image optimisation is the lowest-hanging fruit. Modern formats like WebP and AVIF are 30-50% smaller than JPEG at the same quality. Responsive images serve a phone-sized file to phones and a desktop-sized file to desktops, instead of forcing everyone to download the largest version.

Code splitting and lazy loading mean the browser only downloads what it needs for the current page. The code for your contact form stays on the server until someone navigates to it. Images below the fold load as the visitor scrolls, keeping the initial page render fast.

You can test your own site's performance at PageSpeed Insights. It scores your site 0-100 and tells you exactly what is slowing it down.

Accessibility

Accessibility means your website works for everyone, including people using screen readers, keyboard navigation, or assistive technology. In Australia, this is covered by the Disability Discrimination Act 1992. A website that locks out users with disabilities is a legal liability and a missed audience.

Good accessibility is largely invisible when done well. It means:

• Every image has descriptive alt text so screen readers can convey the content
• All interactive elements are reachable and usable with a keyboard alone
• Colour contrast ratios meet WCAG AA standards (4.5:1 for body text)
• Form fields have proper labels, error messages are clear and specific
• ARIA attributes provide context where native HTML falls short
• Focus indicators are visible so keyboard users always know where they are

Most template sites fail on multiple counts. Images with empty alt tags. Buttons with no accessible labels. Contrast ratios that fall below minimum standards. Navigation that breaks entirely without a mouse.

Every Flow-Through build is tested against WCAG 2.1 AA guidelines. Accessible markup, proper heading hierarchy, keyboard navigation, screen reader support. All baked in from the start, because retrofitting accessibility is always harder than building it right the first time.

Mobile Responsiveness

Responsive design means more than shrinking the desktop layout until it fits a phone screen. That is what most templates do, and it is why tapping a button on your phone feels like a game of precision surgery.

Proper mobile design means touch targets are large enough to hit with a thumb (at least 44x44 pixels). Text is readable without pinching to zoom. Navigation adapts to the screen rather than hiding behind three layers of hamburger menus. Forms are spaced so you can actually fill them in.

Google also factors mobile usability into search rankings. Since 2019, Google has used mobile-first indexing, meaning it evaluates the mobile version of your site before the desktop version. If your mobile experience is poor, your search rankings take the hit regardless of how good the desktop version looks.

A hand-built responsive layout starts from the smallest screen and scales up. Every breakpoint is intentional. Every element has been tested on real devices, with real fingers.

The Stuff in Your <head>

The <head> section of your HTML is invisible to visitors but critical for everything else. It controls how your site appears when shared on social media, what icon shows in browser tabs, how the page scales on mobile, and what information search engines extract.

Open Graph tags determine what people see when your link is shared on Facebook, LinkedIn, or iMessage. Without them, the platform guesses, and it usually guesses badly. A properly configured set of OG tags means your link shows up with the right title, description, and image every time.

<head>
  <!-- Basic meta -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Your Business | Tagline</title>
  <meta name="description" content="A clear, compelling
    summary of what your business does. 150-160 characters." />
  <link rel="canonical" href="https://yourbusiness.com.au/" />

  <!-- Open Graph (social sharing) -->
  <meta property="og:title" content="Your Business | Tagline" />
  <meta property="og:description" content="The same compelling
    summary, tailored for social feeds." />
  <meta property="og:image" content="https://yourbusiness.com.au/og-image.jpg" />
  <meta property="og:url" content="https://yourbusiness.com.au/" />
  <meta property="og:type" content="website" />

  <!-- Favicons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32" />
  <link rel="icon" href="/icon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

  <!-- Theme colour (browser chrome on mobile) -->
  <meta name="theme-color" content="#0a0a0c" />
</head>

Favicons seem like a small detail, but they are the visual anchor in a browser tab full of open sites. A missing favicon (that generic globe or blank page icon) signals a site that was built in a hurry. Apple touch icons control what appears when someone saves your site to their home screen.

The viewport meta tag is a single line of code. Without it, your site renders at desktop width on a phone and the visitor has to pinch and scroll to read anything. It is remarkable how many sites still get this wrong.

Clean Code

Under every website is HTML. The question is whether that HTML is meaningful or just a pile of <div> tags stacked on top of each other. This matters more than most people realise.

Semantic HTML uses elements that describe their content: <nav> for navigation, <main> for primary content, <article> for standalone pieces, <header> and <footer> for page structure. These carry meaning. A screen reader knows that <nav> contains navigation links. Google knows that <main> holds the primary content of the page.

Template builders and page editors tend to generate deeply nested div structures with auto-generated class names. The HTML works in the sense that it renders, but it communicates nothing about the content it contains. Search engines have to guess. Screen readers have to guess. And the developer who eventually needs to update the site has to reverse-engineer what everything means.

The Invisible Standard

Everything on this page is invisible to the person visiting your site. They will never see your JSON-LD markup or your heading hierarchy or your image compression settings. But they feel the result. A site that loads instantly. A Google listing with the right business details. A link that looks sharp when shared in a group chat.

These details separate a website that works from one that just exists. Every Flow-Through build includes all of it, because the invisible work is where the real value lives.

If you are curious about what is running (or missing) under the hood of your current site, get in touch. Happy to take a look.

References

• Google — Think with Google, Mobile Page Speed Benchmarks
• Google — Search Central, Structured Data Documentation
• Web Content Accessibility Guidelines (WCAG) 2.1, W3C Recommendation
• Australian Bureau of Statistics — Survey of Disability, Ageing and Carers (2022)
• Disability Discrimination Act 1992 (Cth), Australian Government
• Statcounter — Australian Internet Usage and Device Statistics
• Google — Mobile-First Indexing Best Practices, Search Central (2023)
• Mozilla Developer Network — HTML Elements Reference