sitemd.cc

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:

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: