# SEO Preview

Every page on your dev server has a companion preview at `/{slug}/seo-preview`. It shows exactly what search engines, social platforms, and messaging apps will display when someone shares or finds your page. The homepage preview lives at `/seo-preview`.

## Keyboard Shortcut

Press **⌘.** (Mac) or **Ctrl+.** (Windows/Linux) to open the current page's SEO preview in a new browser tab. This works on any page while the dev server is running.

## What's Included

The preview page has seven sections:

| Section | What it shows |
|---|---|
| **Search** | Google-style SERP entry with URL breadcrumb, title, and description |
| **Social** | Open Graph card as it appears on Facebook, LinkedIn, Twitter/X |
| **Mobile** | Link bubble preview as seen in iMessage, WhatsApp, Slack |
| **Browser** | Tab bar mockup with favicon and truncated title |
| **Keywords** | Top 15 keywords extracted from your page content with frequency counts |
| **Meta** | Full audit table of every meta tag with character count badges |
| **Data** | JSON-LD structured data that would be embedded in the page |

## Character Count Badges

Every text field that search engines or social platforms truncate shows a colored badge:

- <span style="color:#22c55e">**Green**</span> — within recommended limit
- <span style="color:#f59e0b">**Yellow**</span> — approaching the limit (over 85%)
- <span style="color:#ef4444">**Red**</span> — over the limit, will be truncated

Recommended limits:

| Field | Limit |
|---|---|
| Page title | 60 characters |
| Meta description | 155 characters |
| OG title | 60 characters |
| OG description | 155 characters |
| Twitter title | 70 characters |
| Twitter description | 200 characters |
| Browser tab title | 30 characters |

## How It Works

SEO preview pages are generated during every build, alongside your regular pages. They use the same layout and theme as your site — nav, footer, and theme toggle all work normally.

The preview resolves SEO data using the same logic as activated builds — title suffix, description derivation, canonical URLs, OG image paths, and schema type detection. The preview works identically whether your site is trial or activated.

## Title Suffix

Every page gets a `titleSuffix` field auto-populated in its frontmatter (e.g. `" | sitemd"`). This suffix is appended to the page title in the browser tab, Google results, and social cards. The default comes from your `brandName` in `settings/meta.md`.

To customize a specific page's suffix, edit `titleSuffix` directly in that page's frontmatter. To remove the suffix entirely for a page, set `titleSuffix: none`. The homepage always uses just the site title — no suffix is added.

## OG Images in Preview

When `ogImage: auto` is set in `settings/seo.md` (the default), the dev server generates a single branded OG card on startup and after every file change rebuild. The card uses your theme colors (based on `defaultMode` in `theme.md`) and brand identity — all pages share the same image. The social and mobile card previews load this image directly, so you see exactly what will appear when someone shares your page.

To use a custom image for a specific page, add `image: /path/to/image.png` to that page's frontmatter. The preview picks it up immediately — that page will use your custom image instead of the shared brand card.

### Before activation

If your site has not been activated yet, OG images cannot be generated. The preview shows an informational placeholder. Authenticate and run `sitemd activate` to enable OG image generation.

## Never Deployed

Preview pages exist only on the dev server. They are:

- Excluded from `sitemap.xml`
- Excluded from the search index
- Excluded from `llms.txt` and `llms-full.txt`
- Not written to disk during production builds
- Tagged with `<meta name="robots" content="noindex">`

## Related

- [SEO](/docs/seo) — full SEO configuration reference
- [Build Modes](/docs/build-modes) — trial vs activated
- [Live Build Sync](/docs/live-build-sync) — how the dev server watches for changes