# Project Page SOP — My Window Washing
### Standard Operating Procedure for Building `/projects/` Pages

---

## 1. URL Structure

**Pattern:** `mywindowwashing.com/projects/[service]-[location]-il`

**Rules:**
- Service first, location second: `window-cleaning-northbrook-il`
- Use hyphens only — no underscores, no slashes within the slug
- Always end with `-il` to distinguish from other states
- Keep slugs short — 4–6 words max
- If same service + location combo recurs, add a descriptor: `window-cleaning-northbrook-il-colonial-home`
- **Never put year in the URL** — put year in schema `datePublished` and visible page copy only

**Examples:**
```
/projects/window-cleaning-northbrook-il
/projects/gutter-cleaning-deerfield-il
/projects/power-washing-oak-park-stone-entranceway-il
/projects/window-cleaning-evanston-il-victorian-home
/projects/ice-dam-removal-glencoe-il
```

**File location on server:**
```
public_html/projects/window-cleaning-northbrook-il.html
public_html/projects/gutter-cleaning-deerfield-il.html
```

---

## 2. Required Information Before Building

Collect all of this before writing a single line of HTML:

| Field | Example | Notes |
|---|---|---|
| Service type | Window Washing | Drives slug, schema, hero hooks, service tags |
| Location (city) | Northbrook, IL | Determines hub parent, phone, breadcrumb |
| Hub cluster | Northbrook | Sets parentOrganization in schema |
| Hub phone | (847) 297-4492 | Used in header, CTA, footer |
| Hub address | 2970 Maria Ave Suite 229, Northbrook IL 60062 | Footer office block |
| Home type | Two-story colonial | Stats bar + narrative detail |
| Windows / units cleaned | 24 | Hero stat pill + stats bar |
| Date completed | March 2026 | Schema datePublished + stats bar + hooks |
| Before photo filename | window-cleaning-northbrook-il-before.webp | Place in `/projects/img/` |
| After photo filename | window-cleaning-northbrook-il-after.webp | Place in `/projects/img/` |
| Customer review text | "Great company..." | Review section + schema |
| Customer name | Gregory Meyer | Review section + schema |
| Any notable challenge | North-facing windows, salt residue | Narrative paragraph |

---

## 3. Hub Reference Table

Use this to fill in the correct phone, address, and schema IDs for each project location:

| Location | Hub | Phone | parentOrganization |
|---|---|---|---|
| Northbrook, Deerfield, Highland Park, Lake Forest, Glencoe, Glenview, Winnetka, Wilmette, Highwood, Libertyville, Prospect Heights, Bannockburn, Lincolnshire, Northfield, Riverwoods | Northbrook | (847) 297-4492 | `https://www.mywindowwashing.com/northbrook#localbusiness` |
| Chicago, Oak Park, Evanston, Skokie, Morton Grove, Niles, Norridge, Rogers Park, Irving Park, Harwood Heights, Park Ridge, Lincolnwood | Chicago | (773) 377-4600 | `https://www.mywindowwashing.com/chicago#localbusiness` |

---

## 4. Page Sections — Required in Order

Every project page must include all 10 sections in this sequence:

### Section 1: Breadcrumb
```
Home → Projects → [Service] — [City], IL
```
- `Home` links to `/`
- `Projects` links to `/projects/`
- Third item is plain `<span>` (current page)

### Section 2: Project Hero
- Background: `#0d2035` with dark overlay
- Hook pills (`.proj-hook`): Service type · Location · Service level · Month + Year
- H1: "[Service] in **[City], IL**" — city name in `<span>` with green color
- Sub: One sentence summary of the job
- Stat pill (right side, desktop only): Primary number stat (windows cleaned, linear feet of gutter, sq ft washed)

### Section 3: Stats Bar
Six stats displayed in dark navy bar (`#133047`):
1. Service (e.g. Window Washing)
2. Location (e.g. Northbrook, IL)
3. Home Type (e.g. Two-Story Colonial)
4. Primary metric in green (e.g. 24 Cleaned)
5. Completion date (e.g. March 2026)
6. Rating (always 5.0 ★ in green)

### Section 4: Before & After
- Two-column grid: BEFORE left, AFTER right
- Each card: image (or placeholder) + colored badge + caption
- Before badge: `#133047` navy
- After badge: `#4caf50` green
- Caption: one sentence describing what's visible in each photo
- **Image path:** `img/[slug]-before.webp` and `img/[slug]-after.webp`
- When photos not yet available: use placeholder `<div>` with swap comment — do not omit the section

### Section 5: Project Narrative + Scope of Work
Two-column section (`#f5f8fa` background):
- **Left column:** "About This Job" label + "What We Did" H2 + 2 narrative paragraphs
- **Right column:** "Services Performed" label + service tag buttons (link to service pages) + inline quote CTA with hub phone

**Narrative writing rules:**
- 2 paragraphs max, ~100 words each
- Paragraph 1: context — home type, location details, why the job was needed, customer relationship
- Paragraph 2: what the technician did, any specific challenges addressed, how job was completed, communication/invoice details
- Be specific: name the directions windows face, note if second-story equipment was used, mention if anything required special technique
- Never use filler language ("great job", "excellent results") — those go in the review

### Section 6: Customer Review
- Centered section, white background
- Single review card with heavy left green border
- 5★ in gold, quote in italic at 18px, customer name + location + date
- Verified Google Review badge
- Use real review text — do not paraphrase or alter the customer's words

### Section 7: Internal Links
Two-column card grid:
- Card 1: Links to the hub page (e.g. `/northbrook`) with address + phone
- Card 2: Links to `/projects/` index with description

### Section 8: Related Projects
Three-card grid using `.proj-related-card` style
- Link to real project pages when they exist
- Use "Coming soon" placeholder for projects not yet built
- Keep all 3 cards — use placeholders if needed to maintain layout

### Section 9: CTA Block
Dark navy gradient background, centered:
- H2: "Ready to Schedule Your [Service]?"
- Sub: Office cluster + availability note
- Two buttons: Book Online (green) + Phone number (outline)

### Section 10: Footer
Identical to spoke page footers. Update:
- Office column header to match hub (e.g. "Northbrook Office")
- Recent Projects column with real project links as they accumulate
- Footer phone to hub phone

---

## 5. Schema — Required JSON-LD Blocks

Include all four in a single `<script type="application/ld+json">` `@graph`:

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Service",
      "@id": "https://www.mywindowwashing.com/projects/[slug]#service",
      "name": "[Service] — [City], IL",
      "description": "[One sentence: service type, home type, city, month/year, key metric]",
      "provider": { "@id": "https://www.mywindowwashing.com/[hub]#localbusiness" },
      "areaServed": {
        "@type": "City",
        "name": "[City]",
        "containedInPlace": { "@type": "State", "name": "Illinois" }
      },
      "serviceType": "[Window Washing | Gutter Cleaning | Power Washing]",
      "offers": { "@type": "Offer", "priceCurrency": "USD", "priceRange": "$140-$290" }
    },
    {
      "@type": "BreadcrumbList",
      "itemListElement": [
        { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.mywindowwashing.com/" },
        { "@type": "ListItem", "position": 2, "name": "Projects", "item": "https://www.mywindowwashing.com/projects/" },
        { "@type": "ListItem", "position": 3, "name": "[Service] — [City], IL", "item": "https://www.mywindowwashing.com/projects/[slug]" }
      ]
    },
    {
      "@type": "Review",
      "@id": "https://www.mywindowwashing.com/projects/[slug]#review",
      "author": { "@type": "Person", "name": "[Customer Name]" },
      "datePublished": "[YYYY-MM-DD]",
      "reviewBody": "[Exact review text]",
      "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
      "itemReviewed": { "@id": "https://www.mywindowwashing.com/[hub]#localbusiness" }
    },
    {
      "@type": "ImageObject",
      "name": "[Service] before — [City] IL [home type]",
      "url": "https://www.mywindowwashing.com/projects/img/[slug]-before.webp",
      "description": "[One sentence describing before state]"
    },
    {
      "@type": "ImageObject",
      "name": "[Service] after — [City] IL [home type]",
      "url": "https://www.mywindowwashing.com/projects/img/[slug]-after.webp",
      "description": "[One sentence describing after state]"
    }
  ]
}
```

**Schema rules:**
- `provider` must point to the correct hub `#localbusiness` — not the root `/#localbusiness`
- `datePublished` must match the visible date on the page exactly
- `reviewBody` must be exact customer text — do not paraphrase
- Both ImageObject entries required even if photos are placeholders; update URLs when real photos are uploaded

---

## 6. SEO Checklist

Run through before uploading every project page:

- [ ] `<title>`: `[Service] in [City], IL — [Month] [Year] Project | My Window Washing`
- [ ] `<meta name="description">`: Service + home type + city + key metric + date. Under 155 characters.
- [ ] `<link rel="canonical">`: `https://www.mywindowwashing.com/projects/[slug]`
- [ ] `og:image`: Points to after photo URL (most compelling image)
- [ ] JSON-LD: All 4 blocks present and valid JSON
- [ ] Breadcrumb: 3 levels — Home → Projects → [Project title]
- [ ] All image `alt` attributes filled in — describe what's in the photo, not just "before" or "after"
- [ ] Before/after image filenames match schema `ImageObject` URLs exactly
- [ ] Hub phone number consistent throughout page (header, CTA, footer, office block)
- [ ] No `href` paths broken by subfolder depth — all root-level assets prefixed with `../`

---

## 7. Image Requirements

| Image | Format | Dimensions | Path |
|---|---|---|---|
| Before photo | `.webp` | 1200×800px min | `projects/img/[slug]-before.webp` |
| After photo | `.webp` | 1200×800px min | `projects/img/[slug]-after.webp` |
| Additional shots (optional) | `.webp` | 1200×800px min | `projects/img/[slug]-detail-1.webp` |

**Photo guidelines:**
- Shoot before and after from the same angle and position
- Natural light preferred — avoid harsh shadows across glass
- Include at least one wide shot showing the full facade or gutter run
- Before shots: show the actual problem (grime, debris, algae) — don't undersell it
- After shots: clean glass in good light — shoot in morning or afternoon when sun is indirect

**If no photos available at time of build:**
- Use the placeholder `<div>` structure in the HTML with a clear swap comment
- Do not use stock photos
- Upload real photos and update HTML + schema as soon as they are available

---

## 8. File and Folder Structure

```
public_html/
  projects/
    index.html                          ← Projects listing page (build separately)
    window-cleaning-northbrook-il.html  ← Sample project page
    gutter-cleaning-deerfield-il.html
    power-washing-oak-park-il.html
    img/
      window-cleaning-northbrook-il-before.webp
      window-cleaning-northbrook-il-after.webp
      gutter-cleaning-deerfield-il-before.webp
      gutter-cleaning-deerfield-il-after.webp
```

**Path depth note:** Project pages live one level below root. All `href` and `src` attributes that reference root-level assets must use `../` prefix:
```html
<img src="../images/logo_new.webp">   ✅ correct
<img src="images/logo_new.webp">      ❌ broken from /projects/ subfolder
```

---

## 9. Cursor Prompt Template

Use this prompt to build a new project page in Cursor:

```
Build a new project page following the /projects/ SOP at projects/PROJECT-PAGE-SOP.md.

Project details:
- Slug: [service]-[location]-il
- Service: [Window Washing | Gutter Cleaning | Power Washing]
- Location: [City], IL
- Hub cluster: [Northbrook | Chicago]
- Hub phone: [(847) 297-4492 | (773) 377-4600]
- Hub address: [address]
- Home type: [e.g. Two-story colonial]
- Primary metric: [e.g. 24 windows cleaned | 180 linear feet of gutters]
- Date completed: [Month YYYY]
- Before photo: img/[slug]-before.webp (placeholder if not yet available)
- After photo: img/[slug]-after.webp (placeholder if not yet available)
- Customer name: [Name]
- Customer review: "[Exact review text]"
- Notable challenge: [e.g. North-facing windows with heavy salt residue]

Save to: projects/[slug].html
All root assets must use ../ prefix.
Validate JSON-LD before saving.
```

---

## 10. Sitemap

Add every new project page to `sitemap.xml`:

```xml
<url>
  <loc>https://www.mywindowwashing.com/projects/window-cleaning-northbrook-il</loc>
  <lastmod>2026-03-15</lastmod>
  <changefreq>monthly</changefreq>
  <priority>0.6</priority>
</url>
```

Note: Project pages use `priority 0.6` (lower than spoke pages at `0.8` and hub pages at `0.9`).

---

*Last updated: April 2026 · My Window Washing — mywindowwashing.com*