Photos&ProofthatBuildTrustforTradesinCochrane

01Who This Guide Is For

You run a service company in Cochrane, AB — plumbing, HVAC, electrical, roofing, landscaping, or snow removal — and you want your website to look as trustworthy as you actually are.

This guide gives you a clear, step-by-step system for using photos and proof to win more jobs. Here's what you'll walk away with:

• The six photo types that make Cochrane homeowners trust you on sight
• How to build a case-quote wall — compact job cards with real photos and short client quotes — that feeds your services pages
• Captions, alt text, and file names that help your rankings without keyword stuffing
• Fast gallery rules so your images don't slow down phones
• A policy-safe review playbook you can start using today
• A shoot-to-publish workflow your crew can actually follow
• What to measure so you know it's working

"

The short version: Show before/after shots, close-ups, safety and permit proof, your team at work, neighbourhood context, and a final beauty shot — each with a one-line caption. Publish them as compact case cards with a short client quote. Keep galleries fast. Ask every customer for a review (no incentives) and reply to all of them.

Want this wired into your site for you? Explore Cochrane trade website services.

02The Six Photo Types That Win Trust

Homeowners decide fast. If your site covers these six angles, you'll feel "bookable" within seconds.

Before and After (Wide Shot)

• Before: Show the problem clearly.
• After: Same angle, clean work area.
• Caption example: Roof leak over garage — Fireside. Re-flashed valley, no leak after last storm.

Close-Ups of Workmanship

• Tight shots of sealant beads, crimps, solder joints, panel labeling, cable staples, or shingle lines.
• Caption: Panel labeling tidy — Riversong basement suite.

Safety and Permit Proof

• Permit sticker, manometer reading, combustion test slip, lock-out tag, GFCI (ground-fault circuit interrupter — the safety outlet that cuts power if it detects a problem) test — whatever proves you follow the rules.
• Caption: Permit & inspection passed — Sunset Ridge, panel upgrade.

Team at Work (One Candid)

• Your crew with PPE (personal protective equipment — hard hats, gloves, safety glasses), proper ladder footing, drop sheets — this signals competence and care.
• Caption: Two-tech lift for unit swap — GlenEagles.

Neighbourhood Context

• A wide shot that quietly shows a recognizable street or roofline from Heartland, Bow Meadows, West Terrace, or another Cochrane neighbourhood.
• Caption: Steep-pitch repair — Heartland back-lane access.

Final Beauty Shot and Cleanup

• The "after" you'd put in a brochure: swept driveway, coiled hoses, magnets run over the yard.
• Caption: Final clean & magnet sweep — Bow Meadows re-roof.

How many photos per job? Aim for 4–8 images plus a two-line client quote. That's enough to prove quality without slowing down phones.

Now that you know what to shoot, let's talk about where to put those photos.

03Build a Case-Quote Wall That Converts

Instead of hiding your best work in a giant gallery no one scrolls through, build a 2–3-column wall of compact "job cards." Each card links to a small case page (150–250 words) and your main service page.

What Goes on Each Card

• Job type + neighbourhood (e.g., Leak repair — Fireside)
• 1–2 photos (before/after or close-up + after)
• A two-line client quote (problem → result, no promo language)
• A "See details" link → mini case page
• Micro-CTA: Start My Project

Code You Can Hand Your Web Person

<div class="case-card">
  <img src="/images/roof-leak-repair-fireside-2025-768.avif"
       width="768" height="512" alt="Roof valley repair, Fireside">
  <h3>Roof Leak Repair — Fireside</h3>
  <p class="quote">"They found the valley leak fast and the attic is dry after two rains." — K.L.</p>
  <a href="/cochrane/cases/roof-leak-fireside">See details</a>
</div>

Place your case-quote wall right after your services or pricing block and above the FAQ — so shoppers see proof before they see questions.

Once your wall is in place, you'll want every image properly labeled. That's next.

04Captions, Alt Text, and File Names Done Right

You don't need keyword soup. One service term, one neighbourhood cue, and one concrete detail per image is all it takes.

File Names

Use this pattern: trade-job-neighbourhood-YYYY.avif

• Examples: drain-cleaning-riversong-2025.avif, panel-upgrade-fireside-2025.avif

Alt Text (12–16 Words)

Write what a screen reader would say out loud:

• "After photo, new valley flashing installed, Fireside garage — no water staining visible."

Captions (One Line)

Service + neighbourhood + outcome or proof:

• "No-heat call — Riversong. Draft issue corrected; CO test passed."

Link Back to Your Services

When you link from a case card back to a service page, use descriptive anchor text. Here's what the anchor text and destination page look like for each trade:

• "Emergency drain cleaning" → /cochrane/plumbing
• "No-heat furnace repair" → /cochrane/hvac
• "Panel upgrades & EV chargers" → /cochrane/electrical
• "Re-roof & storm repair" → /cochrane/roofing
• "Seasonal snow & ice control" → /cochrane/landscaping-snow

Good captions and file names do double duty — they help real people understand your work and help search engines find it. Now let's make sure all those images load fast.

05Keep Your Galleries Fast on Phones

Pictures sell the job — but they can also sink your page speed if you're careless. Here are the rules:

• Use AVIF or WebP for your photos. Keep original JPGs as source files.
  • In plain English: these are modern image formats — smaller file sizes than JPG, same visual quality.
• Set width and height on every <img> tag so the layout doesn't jump around while loading.
  • In plain English: this keeps CLS (Cumulative Layout Shift) low — meaning the page won't shift around as images load.
• Add srcset with 768, 1280, and 1920 widths plus a matching sizes attribute.
  • In plain English: srcset tells the browser "here are different sizes of this image — pick the best one for this screen."
• Don't lazy-load the hero — that's the first large image visitors see above the fold. Instead, add fetchpriority="high" so it appears instantly.
  • In plain English: fetchpriority is a tag that tells the browser "load this image first."
• Lazy-load everything below the fold (case cards, review wall).
• Avoid auto-playing sliders in the hero. One decisive image converts better and keeps INP responsive.
  • In plain English: INP (Interaction to Next Paint) measures how fast the page responds when someone taps or clicks.

Code Snippet to Hand Your Web Person

<picture>
  <source type="image/avif" srcset="/images/valley-repair-768.avif 768w,
                                    /images/valley-repair-1280.avif 1280w,
                                    /images/valley-repair-1920.avif 1920w">
  <img src="/images/valley-repair-1280.jpg"
       alt="Valley flashing repair, Fireside garage"
       width="1280" height="853" loading="lazy" decoding="async">
</picture>

(Remove loading="lazy" on your hero image.)

Your images are fast. Your proof looks great. Now let's make sure your reviews are working for you too.

06Reviews That Are Policy-Safe and Still Persuasive

Four rules keep your reviews effective and policy-compliant:

• Ask everyone after the job. Don't gate — meaning don't pre-screen so only happy customers get asked.
• No incentives. No discounts, gifts, or contests in exchange for public reviews.
• Reply to all reviews — thank politely, solve issues in 1–2 lines, and avoid sharing personal data.
• Where to show stars: on your Google Business Profile, not as "self-serving" stars in your own site's LocalBusiness markup. On your site, use short quotes next to CTAs — they convert without risking search penalties.

Two Review Snippets You Can Paste on Your Page

• "Burst pipe in Fireside — they arrived in 30 minutes and cleaned up perfectly." — M.M.
• "Panel upgrade done same day in Bow Meadows; labeled and inspected." — M.M.

Reply Template (Owner Voice)

"

Thanks for trusting us with your Sunset Ridge leak, Tara. We're glad the valley fix held through last week's rain. If you need anything, we're here.

Reviews build trust off your site. Case pages build trust on it. Here's how to set those up.

07Your Mini Case Page Template

Each case card can link to a small case page. Keep it structured, short (150–250 words), and fast-loading.

Case Page Outline

• H1: Service + neighbourhood ("Roof valley repair — Fireside")
• Context (2–3 lines): What was wrong + any safety notes
• Proof: 3–5 photos (before/after, close-up, permit) with captions
• Result (1–2 lines): What improved (e.g., attic dry after two rains)
• Micro-FAQ (2–3 bullets): Why do valleys leak? How long did it take?
• CTA: Start My Project + See Our Work
• Internal links: "Roof leak repairs" → /cochrane/roofing, "Emergency after hours" → /cochrane/emergency-services-website

CaseStudy JSON-LD (Hand This to Your Web Person for Case Pages)

{
  "@context":"https://schema.org",
  "@type":"CaseStudy",
  "name":"Roof Valley Repair — Fireside",
  "about":{"@type":"Service","name":"Roof leak repair"},
  "provider":{"@type":"Organization","name":"VeePo Client — Roofing Cochrane"},
  "locationCreated":{"@type":"Place","name":"Fireside, Cochrane, AB"},
  "image":[
    {"@type":"ImageObject","contentUrl":"https://veepo.ca/cochrane/images/fireside-valley-before.avif",
     "caption":"Before — valley leak over garage, water staining visible."},
    {"@type":"ImageObject","contentUrl":"https://veepo.ca/cochrane/images/fireside-valley-after.avif",
     "caption":"After — re-flashed valley, no leak after two rains."}
  ],
  "result":"Leak resolved; attic dry after rainfall; site cleaned and magnet sweep performed.",
  "review":{
    "@type":"Review",
    "reviewBody":"They found the valley leak fast and the attic is dry after two rains.",
    "author":{"@type":"Person","name":"K.L."}
  }
}

On your blog and service pages, stick with Article or WebPage schema. Use CaseStudy only on individual job write-ups.

Now let's make this whole process repeatable so your crew can handle it every week.

08The Shoot-to-Publish Workflow

Here's a simple five-step process your crew can follow every week.

Step 1: Shoot (On Site)

• Take a before wide shot, then close-ups, team-at-work, permit/safety, neighbourhood context, and a final wide.
• Clean the frame first — move buckets, close panel doors, coil hoses.

Step 2: Select (In Your Camera Roll)

• Pick 4–8 photos that tell the story. Delete duplicates.

Step 3: Export (Desktop or Phone App)

• Resize to 1920px on the long edge. Export as AVIF or WebP. Keep originals stored elsewhere.
• Name files using the pattern: service-neighbourhood-YYYY.avif

Step 4: Publish (Weekly Routine)

• Add photos to your case-quote wall and create a mini case page (150–250 words).
• Link the case page back to your service hub using a descriptive anchor.
• Add one review quote near your CTAs.

Step 5: Share (Optional)

• Post the case to your Google Business Profile and Facebook with a short caption and a link. Add a UTM tag (a small code you attach to any URL so Google Analytics can tell you which post or platform sent each click) so you can track which posts drive traffic.

09How to Measure What's Working

Track these simple events on your proof pages:

• case_card_click — taps on a case card
• gallery_click — clicks to enlarge photos
• call_click — tap-to-call
• form_submit — quote form finished
• LCP, INP, CLS — monthly speed snapshot on mobile (LCP is Largest Contentful Paint — how fast your main content appears)

Your Monthly Scoreboard

• Top case cards — Which 3 case cards get the most clicks?
• Proof vs. no-proof pages — Compare call and form submit rates on pages with proof against pages without.
• Lead response speed — How fast are you replying to leads that viewed proof? Aim for under 15 minutes during business hours.

If a popular case card gets clicks but no leads, move a Start My Project button higher on the page and add a review quote beside it.

10Common Mistakes (and What to Do Instead)

• Dumping 100 photos in a slow gallery → Curate 4–8 per job and use case cards instead.
• Keyword stuffing captions → Write like a human: service + neighbourhood + one detail.
• Lazy-loading the hero image → Don't. Serve the hero eagerly with a defined size.
• Self-serving review stars in your markup → Don't expect Google to show stars for your own LocalBusiness reviews. Show quotes on your page and focus star ratings in your Google Business Profile.
• No proof near your CTAs → Add a two-line quote within sight of every button.