SeoPreview

Domain

Google search result preview card. Shows title, URL, and description with character count indicators. Empty fields render placeholder text.

Filled

Preview

Google Preview

Shop Example

https://shop.example.com/running-shoes

Best Running Shoes 2025

Discover the top-rated running shoes for every terrain and budget. Free shipping on orders over $50.

23/60

Title

100/160

Description

2

Keywords

Code
<SeoPreview seo={{ seoTitle: 'My Page Title', seoDescription: 'A clear meta description.', keywords: ['next', 'react'] }} url="https://example.com/page" />

Empty (placeholders)

Preview

Google Preview

https://example.com/page

Page title will appear here

Meta description will appear here. Keep it between 120–160 characters for best results in search engines.

0/60

Title

0/160

Description

0

Keywords

Code
<SeoPreview seo={{}} url="https://example.com/page" />
Sourcemodules/domains/common/seo/SeoPreview.tsx