SeoPreview

Domain

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

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

Keywords

Code

<%- include('modules/domain/common/seo/SeoPreview', {
  seo: { seoTitle: 'My Page Title', seoDescription: 'A clear meta description.', keywords: ['next', 'react'] },
  url: 'https://example.com/page'
}) %>

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

Keywords

Code

<%- include('modules/domain/common/seo/SeoPreview', {
  seo: {},
  url: 'https://example.com/page'
}) %>

<%
  var _seo      = locals.seo      || {};
  var _url      = locals.url      || 'https://example.com/page';
  var _siteName = locals.siteName || null;

  var TITLE_PLACEHOLDER = 'Page title will appear here';
  var DESC_PLACEHOLDER  = 'Meta description will appear here. Keep it between 120–160 characters for best results in search engines.';

  var title    = (_seo.seoTitle    || '').trim() || TITLE_PLACEHOLDER;
  var desc     = (_seo.seoDescription || '').trim() || DESC_PLACEHOLDER;
  var hasTitle = !!(_seo.seoTitle || '').trim();
  var hasDesc  = !!(_seo.seoDescription || '').trim();
  var titleLen = (_seo.seoTitle    || '').length;
  var descLen  = (_seo.seoDescription || '').length;
  var kwCount  = Array.isArray(_seo.keywords) ? _seo.keywords.length : 0;
%>
<div class="rounded-xl border border-border bg-surface-raised p-4 space-y-3<%= locals.className ? ' ' + locals.className : '' %>">
  <p class="text-xs font-semibold text-text-secondary uppercase tracking-wider">Google Preview</p>

  <div class="max-w-lg space-y-1">
    <% if (_siteName) { %><p class="text-xs text-text-secondary truncate"><%= _siteName %></p><% } %>
    <p class="text-xs text-success-fg truncate"><%= _url %></p>
    <p class="text-base font-medium leading-snug truncate <%= hasTitle ? 'text-[#1a0dab]' : 'text-text-disabled italic' %>"><%= title %></p>
    <p class="text-sm leading-relaxed line-clamp-2 <%= hasDesc ? 'text-text-secondary' : 'text-text-disabled italic' %>"><%= desc %></p>
  </div>

  <div class="flex gap-4 pt-1 border-t border-border">
    <div class="text-center">
      <p class="text-sm font-semibold tabular-nums <%= titleLen > 60 ? 'text-error' : 'text-text-primary' %>"><%= titleLen %><span class="text-text-secondary font-normal">/60</span></p>
      <p class="text-xs text-text-secondary">Title</p>
    </div>
    <div class="text-center">
      <p class="text-sm font-semibold tabular-nums <%= descLen > 160 ? 'text-error' : 'text-text-primary' %>"><%= descLen %><span class="text-text-secondary font-normal">/160</span></p>
      <p class="text-xs text-text-secondary">Description</p>
    </div>
    <div class="text-center">
      <p class="text-sm font-semibold text-text-primary tabular-nums"><%= kwCount %></p>
      <p class="text-xs text-text-secondary">Keywords</p>
    </div>
  </div>
</div>

SeoPreview

Filled

Empty (placeholders)