Live SEO Preview
See how your content will appear in Google search results as you edit — with real-time character counts and validation.
Preview Example
https://example.com/about
About Our Company — Example Site
Learn about our mission, team, and values. We build products that help businesses grow their online presence through better SEO.
How It Works
The SEO preview is rendered alongside your SEO fields in the document editor. It updates in real-time as you type, showing:
URL with customizable prefix based on document data
Title truncated at 60 characters (matching Google's display)
Description truncated at 160 characters
Character counts with color-coded feedback
Configuration
Preview configuration
// Enable with defaults (true by default)
seofields({ seoPreview: true })
// Disable entirely
seofields({ seoPreview: false })
// Custom URL prefix using document context
seofields({
seoPreview: {
prefix: (doc) => `/${doc.slug?.current || 'page'}`
},
baseUrl: 'https://www.example.com',
})Character Guidelines
| Field | Optimal | Max | Best Practice |
|---|---|---|---|
| Meta Title | 50–60 chars | 70 | Include primary keywords, keep concise |
| Meta Description | 120–160 chars | 160 | Compelling summary with call to action |
| OG Title | 40–60 chars | 70 | Can differ from meta title for social |
| X Description | 100–200 chars | 200 | Concise but descriptive for the X feed |