Before-After Photo Schema Markup for Home Services Rankings

Home services businesses like plumbing, electrical, remodeling, and painting live or die by visual proof. But uploading before-and-afters to your website and Google Business Profile isn't enough. Search engines need to understand what they're looking at: the problem, the solution, the outcome. That's where schema markup comes in. Without it, Google sees images. With it, Google sees credibility signals that can improve your local ranking and click-through rate.

Why Google Needs Schema for Before-and-Afters

Google's local algorithm weighs several factors: citations, reviews, on-page authority, and relevance signals from content. Before-and-after photos are relevance signals; they show you do the work your potential customer is searching for. But the image file alone tells Google nothing. The alt text helps slightly. Schema markup tells Google the semantic meaning: this is a before state, this is an after state, here's the service category, here's when it happened.

Answer Engine Optimization (AEO) also benefits. When someone asks 'How does a water damage restoration work?' or 'What does a kitchen remodel look like?', AI search products can pull your before-and-after pair and cite it directly if schema is present. Without schema, your images stay invisible to that layer of search.

The Markup Pattern: CreativeWork + ImageObject

The schema type you need is CreativeWork (or more specifically, ImageObject nested in a collection). Here's the structure:

• Use CreativeWork schema with type 'before and after' or reference it in description
• Include two ImageObject properties: 'image' for the before, 'associatedMedia' or a second 'image' for the after
• Add 'name' (the service, e.g., 'Master Bathroom Remodel')
• Add 'datePublished' (when the work was completed)
• Add 'author' with your business schema reference
• Include 'description' that names the transformation briefly

In JSON-LD (the easiest format to implement), it looks like this: {"@context": "https://schema.org", "@type": "CreativeWork", "name": "Kitchen Renovation", "description": "Full kitchen remodel with new cabinetry, countertops, and appliances", "image": [{"@type": "ImageObject", "url": "https://example.com/kitchen-before.jpg", "description": "Before"}, {"@type": "ImageObject", "url": "https://example.com/kitchen-after.jpg", "description": "After"}], "datePublished": "2026-08-15", "author": {"@type": "LocalBusiness", "name": "Your Business Name"}}

Where to Implement It

Add the schema to your before-and-after gallery page, not your homepage. Create a dedicated page or pages that group before-and-afters by service type, such as one page for roofing jobs and another for bathroom renovations. This gives each schema block context and makes crawling easier for Google.

If you're using a portfolio or gallery plugin (Elementor, Divi, Squarespace), check if it auto-generates schema. Most don't for before-and-afters specifically. You'll likely need to hand-write the JSON-LD and place it in a custom HTML block on that page, or use Google's Schema Markup Helper to validate before publishing.

Validation and Testing

• Use Google's Rich Results Test (search.google.com/test/rich-results) to validate your markup before launch
• Check the structured data report in Google Search Console 6–8 weeks after publishing to confirm indexing
• Monitor your GBP insights to see if before-and-after impressions increase over time
• Test on mobile, most of your local searchers will view on phone.

Schema markup tells Google the semantic meaning of your before-and-after photos: it represents the transformation they show, not just their existence. That distinction matters for both ranking and answer engine visibility.

Before-and-afters are your strongest proof point. Make sure Google reads them.

← Back to all articles