---
title: "Configuration"
description: "Every blueprint property the SERP Preview section takes, and the order in which it resolves the title and the description."
canonical_url: "https://kirby.tools/docs/serp-preview/configuration"
---

# Configuration

> Every blueprint property the SERP Preview section takes, and the order in which it resolves the title and the description.

## Section Properties

Properties marked **Query** accept [Kirby's query language](https://getkirby.com/docs/guide/blueprints/query-language), so `{{ site.title }}` resolves against the current model. A query that resolves to something no string can hold leaves the placeholder empty.

### `label` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge>

The heading above the snippet. It defaults to the Panel language's own translation, which is `SERP Preview` in English, shipped in English, German, French and Dutch; other Panel languages get the English label. It accepts a translation key or a map of languages:

```yaml [sections/serp-preview.yml]
type: serp-preview
label: Search Result
```

### `faviconUrl` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge> <u-badge className="align-middle,ml-2,rounded-full!" label="Query" variant="subtle" color="neutral"></u-badge>

The icon in front of the site name. Without it the snippet drops the icon and its circle:

```yaml [sections/serp-preview.yml]
type: serp-preview
faviconUrl: "{{ site.favicon.toFile.url }}"
```

### `siteTitle` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge> <u-badge className="align-middle,ml-2,rounded-full!" label="Query" variant="subtle" color="neutral"></u-badge>

The site name next to the favicon, and the part after the separator on the title line. Defaults to the site's own title:

```yaml [sections/serp-preview.yml]
type: serp-preview
siteTitle: Kirby Tools
```

### `siteUrl` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge> <u-badge className="align-middle,ml-2,rounded-full!" label="Query" variant="subtle" color="neutral"></u-badge>

What the URL line starts with. Defaults to the URL Kirby runs under, so a staging install shows its own host until the production one is set here. The page's preview URL path follows, with its language prefix in a multi-language site; a blueprint whose `options.preview` is `false` leaves the line at the site URL:

```yaml [sections/serp-preview.yml]
type: serp-preview
siteUrl: https://kirby.tools
```

### `titleSeparator` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge> <u-badge className="align-middle,ml-2,rounded-full!" label="Query" variant="subtle" color="neutral"></u-badge>

What sits between the page title and the site title. Defaults to an en dash, `–`, and is only used when neither `titleContentKey` nor `defaultTitle` supplies a title:

```yaml [sections/serp-preview.yml]
type: serp-preview
titleSeparator: "|"
```

### `titleContentKey` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge>

The field whose value becomes the title line, followed as the editor types. Name it as it appears in the blueprint; the section lowercases it to match Kirby's content keys. Without it, the title line reads the page title as last saved; `titleContentKey: title` makes it follow the title field instead:

```yaml [sections/serp-preview.yml]
type: serp-preview
titleContentKey: metaTitle
```

### `defaultTitle` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge> <u-badge className="align-middle,ml-2,rounded-full!" label="Query" variant="subtle" color="neutral"></u-badge>

The title to show while the `titleContentKey` field is empty:

```yaml [sections/serp-preview.yml]
type: serp-preview
titleContentKey: metaTitle
defaultTitle: "{{ page.title }} – {{ site.title }}"
```

### `descriptionContentKey` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge>

The field whose value becomes the description. Lowercased like `titleContentKey`:

```yaml [sections/serp-preview.yml]
type: serp-preview
descriptionContentKey: metaDescription
```

### `defaultDescription` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge> <u-badge className="align-middle,ml-2,rounded-full!" label="Query" variant="subtle" color="neutral"></u-badge>

The description to show while the `descriptionContentKey` field is empty. Without either, the snippet has no description line at all:

```yaml [sections/serp-preview.yml]
type: serp-preview
descriptionContentKey: metaDescription
defaultDescription: "{{ site.metaDescription }}"
```

### `searchConsoleUrl` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge> <u-badge className="align-middle,ml-2,rounded-full!" label="Query" variant="subtle" color="neutral"></u-badge>

Adds a button below the snippet that opens the given URL in a new tab. Without it, no button appears:

```yaml [sections/serp-preview.yml]
type: serp-preview
searchConsoleUrl: https://search.google.com/search-console
```

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



</panel-serp-preview-snippet>

<panel-button-group :buttons="[{"icon":"open","text":"Google Search Console"}]">



</panel-button-group>
</panel-section>
</panel-mock>

## Title and Description Resolution

The title line takes the first of these that has a value:

<steps level="3">

### The `titleContentKey` Field

Whatever the editor has typed into it, saved or not.

### `defaultTitle`

The fallback, after its queries are resolved.

### The Page Title, Separator and Site Title

Joined with spaces, so `About – Kirby Tools`. The page title here is the saved one, so this line only changes on save.

</steps>

The description takes the first of these that has a value, and is left out entirely when neither does:

<steps level="3">

### The `descriptionContentKey` Field

Whatever the editor has typed into it.

### `defaultDescription`

The fallback, after its queries are resolved.

</steps>

Both lines are clamped the way Google clamps them – one line for the title, two for the description. To shorten the text itself rather than clip it, see [Custom Formatters](/docs/serp-preview/formatters).

---

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