OG Viewer#

Built-in dev tool for previewing Open Graph metadata of all your pages.

Overview#

OG Viewer is a development tool that runs at /__og-viewer during vite dev. It scans all Markdown files in your content directory and displays their OG metadata with social card previews and validation warnings.

Usage#

OG Viewer is enabled by default. Start your dev server and navigate to:

http://localhost:5173/__og-viewer

To disable it:

oxContent({
  ogViewer: false,
});

Features#

Metadata Display#

Each page card shows:

File path and URL path
Title, description, author, tags
OG image URL (computed from your config)

Validation#

OG Viewer checks each page for common issues:

Check	Level	Condition
Missing title	Error	No title in frontmatter or `# heading`
Missing description	Warning	No `description` in frontmatter
Title too long	Warning	More than 70 characters
Description too long	Warning	More than 200 characters
No siteUrl	Warning	ogImage enabled but `ssg.siteUrl` not set

Two preview modes are rendered for each page:

Twitter - summary_large_image card format
Facebook - Open Graph card format

Both show the computed OG image, title, and description as they would appear when shared.

Filtering & Search#

All - Show all pages
Warnings - Show only pages with warnings
Errors - Show only pages with errors
Search - Filter by path, title, or description

Refresh#

Click the Refresh button to re-scan files and update metadata without reloading the page.

API Endpoint#

OG Viewer also exposes a JSON API:

GET /__og-viewer/api/pages

Returns an array of page objects with all metadata and validation warnings. Useful for CI integration or custom tooling.