Getting Started

Kirby SERP Preview is a plugin for Kirby CMS. It adds a Panel section that draws the Google result snippet for the page being edited – favicon, site name, URL, title and description – and redraws it as you type, before anything is saved.

Step 1: Install the Plugin

composer require johannschopplich/kirby-serp-preview

Step 2: Add the Section to a Blueprint

Pick a page blueprint, or the site blueprint, and add the section:

sections:
  serpPreview:
    type: serp-preview

Open a page that uses the blueprint. With nothing else configured, the snippet shows the page title as last saved, an en dash and the site title on the title line, the site URL followed by the page path underneath, and no description:

Step 3: Point It at Your Meta Fields

Most sites keep the search title and description in their own fields. Name those fields and the snippet reads them instead, falling back to the values above while they are empty:

fields:
  metaTitle:
    label: Meta Title
    type: text
  metaDescription:
    label: Meta Description
    type: textarea
    size: small

sections:
  serpPreview:
    type: serp-preview
    faviconUrl: "{{ site.favicon.toFile.url }}"
    titleContentKey: metaTitle
    descriptionContentKey: metaDescription

Type into either field and the snippet follows:

SERP Preview ×

Kirby Toolshttps://kirby.tools/about

About Kirby Tools – Plugins for the Kirby Panel

Kirby Tools builds Panel plugins for editors and developers: AI content generation, translation, SEO analysis and navigation.

The section never writes. It reads the form as it stands, so what you see is the unsaved draft, and closing the page without saving leaves nothing behind.

For every property the section takes, see the Configuration guide.