---
title: "Getting Started"
description: "Draw the Google result snippet for a page inside the Panel, updating as the editor types."
canonical_url: "https://kirby.tools/docs/serp-preview"
---

# Getting Started

> Draw the Google result snippet for a page inside the Panel, updating as the editor types.

Kirby SERP Preview is a plugin for [Kirby CMS](https://getkirby.com). 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

<card icon="i-ri-terminal-box-line" title="Composer">

The recommended way to install the plugin:

```bash
composer require johannschopplich/kirby-serp-preview
```

</card>

<card icon="i-ri-folder-zip-line" title="ZIP File Download">

Download the <latest-version>



</latest-version>

 or head over to the [releases page](https://github.com/johannschopplich/kirby-serp-preview/releases) to see all versions. Extract the ZIP file to your `site/plugins` folder.

</card>

## Step 2: Add the Section to a Blueprint

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

```yaml [pages/default.yml]
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:

<panel-mock>
<panel-section label="SERP Preview">
<panel-serp-preview-snippet siteTitle="Kirby Tools" siteUrl="https://kirby.tools/about" title="About – Kirby Tools">



</panel-serp-preview-snippet>
</panel-section>
</panel-mock>

## 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:

```yaml [pages/default.yml]
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:

<panel-mock>
<panel-section label="SERP Preview">
<panel-serp-preview-snippet siteTitle="Kirby Tools" siteUrl="https://kirby.tools/about" title="About Kirby Tools – Plugins for the Kirby Panel" description="Kirby Tools builds Panel plugins for editors and developers: AI content generation, translation, SEO analysis and navigation." faviconUrl="/favicon.ico">



</panel-serp-preview-snippet>
</panel-section>
</panel-mock>

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](/docs/serp-preview/configuration) guide.

---

Every page of this site as Markdown: <https://kirby.tools/sitemap.md>