# An embedded map or directions component is present

- **Pattern:** `ab-001776` (`marketing-local-seo.local-content.map-embed`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001776
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001776)

## Why it matters

Without an embedded map, visitors deciding whether to drive to a physical location cannot visually confirm distance, parking, or neighborhood context, and drop off before making the trip. The embed also serves as a findability signal — Google treats map embeds as corroboration of the address in JSON-LD and footer NAP, reinforcing that the business operates at the claimed coordinates. Service businesses without a map on the contact page consistently underperform on in-person visit conversion.

## Severity rationale

Medium because a map is not required for ranking but materially improves conversion on the contact and location pages.

## Remediation

Embed a Google Maps iframe (or a Mapbox / Leaflet component if you already use one) on the contact page at `src/app/contact/page.tsx`. Use `loading="lazy"` so the iframe does not block LCP, and set an accessible `title` attribute for screen readers.

```tsx
<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="100%"
  height="400"
  loading="lazy"
  title="Business location map"
/>
```

## Detection

- **ID:** `map-embed`
- **Severity:** `medium`
- **What to look for:** Search for map embeds in component files. Look for iframe tags with src attributes containing `maps.google.com/maps/embed`, Google Maps JavaScript API initialization, or integration of map libraries (Mapbox, Leaflet, react-leaflet, @vis.gl/react-google-maps, @googlemaps/js-api-loader). Also check contact and location pages specifically.
- **Pass criteria:** Count all map embeds and map library imports. At least 1 map embed or interactive map component must be present on the site -- typically on the contact or location page.
- **Fail criteria:** No map embed, iframe, or map library found anywhere in the codebase.
- **Skip (N/A) when:** The business is a service-area business with no fixed location (e.g., a mobile dog groomer or a contractor who visits client sites) where a map pin would be misleading, or whole-audit N/A rule applies. Signal: no physical address anywhere in the codebase.
- **Detail on fail:** `"No map embed found anywhere in the project. A map on the contact or location page helps customers find the business and creates a visual trust signal."`
- **Remediation:** Add a map embed to your contact page in `src/app/contact/page.tsx`:

  ```html
  <iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="400" loading="lazy" title="Business location map"></iframe>
  ```

Taxons: user-experience, findability

HTML version: https://auditbuffet.com/patterns/ab-001776