650+ Pages. 21 Cities. 5 Provinces. One Intelligent Platform.

Some clients make the work meaningful. Greenfoot Energy Solutions is one of those clients. From the very first conversation, it was clear this wasn't just another website project. Greenfoot is a company that genuinely cares about their communities, their customers, and doing the right thing. Partnering with them has been one of the most rewarding experiences in our agency's history.

More Than a Client: A Company That Gives Back

Before we talk about the website, we need to talk about the people behind it. Greenfoot Energy Solutions is a Canadian home energy company operating across Nova Scotia, New Brunswick, Prince Edward Island, Newfoundland & Labrador, and British Columbia. They specialize in mini-split and ducted heat pump installation, air conditioning, residential and commercial solar, spray foam and general insulation, indoor air quality and ventilation, geothermal systems, water heaters, and commercial HVAC.

But what makes Greenfoot special isn't just what they do. It's how they do it.

Greenfoot has consistently shown up for the communities they serve. They've supported families during difficult times, contributed to local hospitals, sponsored community events, and gone above and beyond for customers who needed help. Their team doesn't just install heat pumps. They show up as neighbours. When you see a company's leadership visiting families in hospitals and organizing community support initiatives, you know their values aren't just marketing copy.

Chapter One: The Webflow Build

Our relationship with Greenfoot started with their previous website, a comprehensive Webflow build. The scope was significant from the start. Greenfoot needed a fully bilingual website covering both English and Canadian French, with dedicated pages for every service, every location, and every brand they carry.

By the time we finished, the Webflow site had grown to over 300 pages. That's 300 individual pages, each with unique content, proper SEO metadata, bilingual translations, and structured navigation. Service pages, location pages, brand pages, blog posts, landing pages, promotional pages. It was a serious build.

The Webflow site served Greenfoot well. It established their online presence, drove leads, and helped them grow. But as Greenfoot expanded into new provinces and added more locations, the limitations of a traditional page builder started to show.

Why We Moved Beyond Webflow

Greenfoot's growth created challenges that Webflow wasn't designed to solve. With 21 cities across 5 provinces, 15 physical office locations, over 18 distinct service types, and each city having unique local data, the content management burden was becoming unsustainable. Every time a new city was added, it meant manually creating and maintaining dozens of pages with city-specific information, in two languages.

The math was brutal: adding one new city meant creating at least 20 new pages (1 city hub + 9 service pages, times 2 languages), each needing unique climate data, local FAQs, office information, Google reviews, and proper internal linking. Then multiply that across every brand page, every blog cross-reference, every sitemap update.

We needed a solution that could:

The answer was a ground-up custom build. And we more than doubled the page count.

The Scale: 650+ Pages and Counting

The new Greenfoot website isn't a brochure. It's a content platform with over 650 pages, each one purpose-built, SEO-optimized, and served in both English and Canadian French. Here's the full breakdown:

Every single one of these pages has unique meta titles, meta descriptions, Open Graph tags, Twitter Card tags, canonical URLs, hreflang alternate links, and JSON-LD structured data. Nothing is templated lazily. Every page is optimized for its specific keyword targets.

The Architecture: Astro 5 + React Islands

We chose a modern tech stack specifically designed for performance, SEO, and scalability at this page volume:

The site uses Astro 5 as its core framework, which produces static HTML at build time with selective "React islands" for interactive components. This is the key architectural decision: the vast majority of the 650+ pages ship as pure HTML and CSS with zero JavaScript overhead. Pages load instantly. Search engines see fully-rendered content.

Interactive elements like the site navigation, Google Reviews carousels, brand card grids, nearby location finders, and the city services grid hydrate as React components only when the user scrolls to them. We use Astro's client:visible directive for below-fold components and client:idle for the navigation, meaning JavaScript loads only when needed, not before.

The result is a 650+ page site that feels modern and dynamic while being as fast and crawlable as a hand-coded static website.

21 Cities, 9 Service Verticals Per City

The crown jewel of the new build is the city-service page system. Each of Greenfoot's 21 cities gets a dedicated hub page, plus 9 individual service-specific sub-pages. In both languages. That's 378 city-service pages, each one content-rich and locally optimized.

The 9 Service Verticals

The URL Structure

Every city-service page follows a clean, SEO-friendly nested URL structure:

Note the French province slugs: nouveau-brunswick, nouvelle-ecosse, ile-du-prince-edouard, terre-neuve, colombie-britannique. These aren't machine translations. They're proper French-Canadian geographic names used in natural URL structures.

What Each City-Service Page Contains

Every one of the 378 city-service pages is a comprehensive, locally-optimized landing page featuring:

15 Physical Locations Across 5 Provinces

Greenfoot operates 15 physical office locations across Canada. Each location has its own Google Business Profile with verified address, phone number, business hours, and customer reviews. The website maps to all 22:

8 Heat Pump Brand Partner Pages

Greenfoot is factory-certified for 8 major heat pump brands, and each brand gets its own dedicated page in both languages:

• Gridless — Greenfoot's exclusive cold-climate brand
• Mitsubishi Electric — Industry-leading hyper-heating technology
• Daikin — Premium inverter-driven systems
• LG — Smart, energy-efficient heat pumps
• Samsung — Advanced wind-free cooling technology
• Panasonic — Reliable residential heat pump systems
• Kerr — Canadian-designed heat pump solutions
• General Electric — Trusted home comfort systems

Each brand page features product highlights, the brand's green-glow product image treatment (a signature Greenfoot design element), and links back into the service and location page networks.

37 Landing Pages for Campaigns

Beyond the core site structure, we built 37 dedicated landing pages (19 English, 18 French) for specific marketing campaigns and rebate programs:

• Provincial insulation rebate pages for all 5 provinces
• Oil-to-heat-pump rebate pages ($15K and $22K programs)
• BC Solar and provincial solar campaign pages
• Commercial solar landing pages
• Refurbished heat pump program
• $2/day financing campaign
• New home $15K rebate
• PIEER program information
• Cozy subscription service

Each landing page is built with conversion-focused design, UTM tracking persistence, and Facebook Conversions API integration for server-side lead attribution.

The Internal Linking Architecture

With 650+ pages, internal linking isn't optional. It's structural engineering. We built three interconnected linking systems:

1. Deep Knowledge Network (Topic Clusters)

A topic cluster system maps relationships between service pillar pages, brand pages, blog posts, and city pages. The RelatedContent component appears on every relevant page, surfacing contextually related content to build topical authority. Each cluster connects a pillar page (like "Mini-Split Heat Pumps") to its supporting pages (brand comparisons, installation guides, city-specific content), creating a web of semantic relevance that search engines reward.

2. Service-to-City Grid

Every city page features a CityServicesGrid linking to all 9 service verticals available in that city. Every service page features a NearbyLocations component linking to the same service in neighbouring cities. The result is a two-dimensional link mesh: users can navigate by city or by service, and search engines can crawl the entire structure efficiently.

3. Parent Service Links

Every city-service page includes upward navigation linking back to three parent contexts: the province hub page, the city hub page, and the national service pillar page. This creates clear hierarchical signals for search engines while giving users intuitive wayfinding.

Bilingual by Design, Not by Afterthought

Canada's bilingual reality isn't optional. It's essential. Every page on the Greenfoot site exists in both English and Canadian French, with proper linguistic conventions throughout.

This isn't simple translation. French-Canadian URL slugs follow natural language patterns:

Every page carries hreflang tags linking its English version to its French counterpart and vice versa, plus an x-default tag. The system handles this automatically through a URL translation map, so adding a new page in one language automatically generates the correct hreflang for both.

The breadcrumbs, the trust badges, the CTAs, the FAQ sections, the office information cards, the service descriptions. Every piece of content across all 650+ pages is fully translated and culturally appropriate for Canadian French.

SEO Architecture: Built for Search Engines and AI

For Greenfoot, online visibility directly translates to business growth. We didn't just add meta tags. We built a comprehensive SEO, AEO, and GEO architecture designed to compete at every level:

Structured Data on Every Page

Every page carries JSON-LD schema markup, server-rendered in Astro templates (not injected via JavaScript). The schemas include:

• LocalBusiness / HVACBusiness with full NAP data, service areas, and opening hours
• FAQPage with city-specific questions and detailed answers
• BreadcrumbList reflecting the exact page hierarchy
• Service schemas for each service type with provider information
• Product schemas for brand pages with manufacturer details

Question-Based Headings (AEO/GEO)

All H2 headings use question format: "Why Choose Greenfoot for Mini-Split Installation in Moncton?" instead of "Mini-Split Installation." This aligns with voice search queries, AI-generated answer snippets, and Google's featured snippet selection patterns.

Meta Tag Standards

Every one of the 650+ pages has hand-crafted (not auto-generated) meta tags:

• Title tags under 60 characters with brand name and location
• Meta descriptions under 160 characters, often starting with a question
• Open Graph title, description, type, URL, and image
• Twitter Card with summary_large_image format
• Canonical URLs with trailing slashes
• Keyword meta tags targeting question phrases

The SEO Tracking System

We maintain a comprehensive Google Sheet audit covering all 650+ pages across 14 categorized tabs (Core Pages, Service Pages, Heat Pump Experts, Ducted Heat Pumps, Air Conditioning, Solar Experts, Commercial Solar, Spray Foam Insulation, Geothermal, City & Province Pages, Brand Pages, Blog Posts, Landing Pages, Promotions). Each page is tracked across 23 data points including indexation status, sitemap presence, hreflang status, and all meta properties.

Performance and Deployment

The site deploys to Cloudflare Pages, distributing static HTML across Cloudflare's global edge network. Pages load almost instantly from anywhere in Canada. There's no server rendering at request time, no database queries, no loading spinners.

Key performance optimizations include:

• Hero background images preloaded via <link rel="preload">
• All product and hero images with explicit width/height attributes to prevent layout shifts
• Below-fold React islands using client:visible to defer JavaScript until scrolled into view
• Montserrat font preloaded as WOFF2 for instant text rendering
• Google Maps iframes lazy-loaded with loading="lazy"
• Header logo preloaded for immediate branding visibility

The architecture also includes UTM tracking persistence (30-day cookie + localStorage fallback), Facebook Conversions API for server-side lead attribution, and ServiceTitan scheduler integration for appointment booking.

The Data Layer: One Source of Truth

Behind the 650+ pages is a centralized data layer that makes the whole system work. City data, climate statistics, FAQ content, office locations, brand information, and blog posts are stored as TypeScript data files, exported from a PostgreSQL database via an admin dashboard.

Key data files include:

• city-data.ts (180KB) — All 21 cities' hero content, climate facts, taglines, FAQs, monthly daylight hours, and service configurations in both languages
• gbp-reviews.ts — Google Business Profile data for all 15 office locations including addresses, phone numbers, coordinates, and place IDs
• topic-clusters.ts — Deep Knowledge Network definitions mapping content relationships for the internal linking system
• locations.ts — Province and city routing data with slug mappings for both languages

This architecture means content updates flow from the admin dashboard to the data layer to the static build, keeping every page consistent and up to date.

Why Greenfoot Is the Kind of Client Every Agency Hopes For

We've worked with a lot of businesses. Greenfoot stands apart. Their team is responsive, decisive, and trusts the process. They understand that a great website isn't just about looking good. It's about serving their customers, supporting their sales team, and representing who they are as a company.

When your client spends their weekends visiting families in hospitals and organizing community support, the work takes on a different weight. You're not just building pages. You're helping good people reach more people who need their help. Heat pumps might not sound glamorous, but for a family in Moncton trying to cut their heating bill in half, or a homeowner in Kelowna who needs AC after a heat dome, Greenfoot is the company that shows up.

That's why we build with care. That's why we obsess over the details. Because the people behind the website deserve it.

What's Next

The platform is built for growth. The architecture supports:

• Adding new cities with a single data file update (20+ pages auto-generated per city)
• New service verticals that automatically generate city-level pages across all 21 markets
• Additional provinces with proper French-Canadian translations
• Expanded blog content with automatic topic cluster integration
• New brand partnerships with dedicated brand pages in both languages

Greenfoot is already one of Canada's largest home energy companies, with 75,000+ installations and 5,000+ Google reviews. The website we've built matches that ambition. And we're just getting started.