---
title: Frontmatter
description: Konfigurieren Sie Seitentitel, Beschreibungen, Icons, Seitenleistenüberschreibungen und SEO-Metadaten mit dem YAML-Frontmatter-Block jeder MDX-Datei.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Jede MDX-Datei beginnt mit einem YAML-Block zwischen `---`-Markierungen. Diese Metadaten steuern den Seitentitel, das Erscheinungsbild der Seitenleiste und die Darstellung der Seite beim Teilen in sozialen Medien oder in Suchergebnissen.

## Grundlegendes Frontmatter

Jede Seite benötigt mindestens einen Titel:

```yaml
---
title: Getting Started
description: Learn the basics in 5 minutes
---
```

## Verfügbare Felder

### Erforderlich

| Feld | Typ | Beschreibung |
|-------|------|-------------|
| `title` | string | Seitentitel, der in der Navigation und im Browser-Tab angezeigt wird |

### Empfohlen

| Feld | Typ | Beschreibung |
|-------|------|-------------|
| `description` | string | Kurze Zusammenfassung für SEO und Suchergebnisse (50–160 Zeichen) |

### Optional

| Feld | Typ | Standard | Beschreibung |
|-------|------|---------|-------------|
| `icon` | string | - | Font Awesome-Icon, das neben dem Seitentitel in der Seitenleistennavigation angezeigt wird |
| `sidebarTitle` | string | `title` | Kürzerer Titel für die Seitenleistennavigation |
| `mode` | string | - | Auf `"wide"` setzen, um ein Layout mit voller Breite zu verwenden |
| `hideFooter` | boolean | `false` | Den Social-Footer auf dieser Seite ausblenden |
| `rss` | boolean | `false` | RSS-Feed-Generierung aus [Update](/de/components/update)-Komponenten auf dieser Seite aktivieren |
| `private` | boolean | `false` | Das [Seitenpasswort](/de/setup/password-protection) zum Anzeigen dieser Seite voraussetzen. Wenn dies auf einer beliebigen Seite aktiviert wird, wird beim nächsten Build der Modus für bestimmte Seiten aktiviert. |
| `public` | boolean | `false` | Diese Seite vom Passwortschutz ausnehmen (wird verwendet, wenn die gesamte Website über `auth.password.enabled` geschützt ist). Hat Vorrang vor `private: true`, wenn beide Werte gesetzt sind. |

### SEO und soziale Medien

Steuern Sie, wie die Seite in Suchergebnissen und Social-Previews erscheint. Legen Sie diese als flache Schlüssel auf oberster Ebene oder in einem verschachtelten `seo:`-Block fest. Beides funktioniert, und seitenbezogene Werte überschreiben die `seo.metatags`-Standardwerte aus Ihrer `docs.json`.

| Feld | Typ | Standard | Beschreibung |
|-------|------|---------|-------------|
| `keywords` | string[] | - | Suchbegriffe, die als `<meta name="keywords">`-Tag ausgegeben werden |
| `canonical` | string | auto | Canonical-URL für diese Seite, die die automatisch generierte URL überschreibt |
| `noindex` | boolean | `false` | Diese Seite von Suchmaschinen und der Sitemap ausschließen |
| `og:*` / `twitter:*` | string | - | Open-Graph- und Twitter/X-Tags für Social-Previews (z. B. `og:title`, `og:image`, `twitter:card`) |
| `seo` | object | - | Verschachtelter Block mit den oben genannten sowie beliebigen benutzerdefinierten Meta-Tags |

```yaml
---
title: API Reference
description: REST endpoints and authentication
"og:image": /images/api-card.png
"twitter:card": summary_large_image
canonical: https://docs.acme.com/api-reference
---
```

Unter [SEO-Optimierung](/de/content/seo) finden Sie die vollständige Liste der unterstützten Tags und Beispiele.

<Tip>
Fügen Sie nach einem Build die Seiten-URL in das kostenlose Tool [OpenGraph Preview](https://jamdesk.com/utilities/opengraph-preview) ein, um zu sehen, wie diese Tags auf X, Facebook, LinkedIn, Slack, Discord und weiteren Plattformen dargestellt werden.
</Tip>

## Beispiele

### Standard-Dokumentationsseite

```yaml
---
title: Authentication
description: Secure your API with OAuth 2.0 and API keys
icon: lock
---
```

### Langer Titel mit Überschreibung der Seitenleiste

```yaml
---
title: Configuring Single Sign-On with SAML 2.0
sidebarTitle: SSO Setup
description: Set up enterprise SSO for your organization
---
```

Der vollständige Titel wird auf der Seite angezeigt, während `sidebarTitle` für eine übersichtliche Navigation sorgt.

### Layout mit voller Breite

```yaml
---
title: API Reference
description: Complete API documentation
mode: wide
---
```

Der breite Modus entfernt das Inhaltsverzeichnis und erweitert den Inhalt auf die volle Breite. Er eignet sich für API-Referenzseiten oder Inhalte mit breiten Tabellen.

### Footer ausblenden

```yaml
---
title: Custom Landing
description: A focused landing page experience
hideFooter: true
---
```

Verwenden Sie `hideFooter` für Landingpages, Changelog-Seiten oder jede Seite, auf der Sie einen aufgeräumteren unteren Bereich ohne Social-Links wünschen.

## SEO-Best Practices

<AccordionGroup>
  <Accordion title="Überzeugende Titel verfassen" icon="heading" defaultOpen>
    Ihr Titel erscheint in:
    - Browser-Tabs
    - Suchmaschinenergebnissen
    - Seitenleisten-Navigation
    - Geteilten Beiträgen in sozialen Medien

    Halten Sie Titel unter 60 Zeichen. Platzieren Sie wichtige Suchbegriffe am Anfang.

    ```yaml
    # Good - clear and keyword-rich
    title: Deploy to Production

    # Avoid - vague or too long
    title: How to Deploy Your Application to Production Servers
    ```
  </Accordion>

  <Accordion title="Nützliche Beschreibungen erstellen" icon="align-left">
    Beschreibungen erscheinen in Suchergebnissen und Social-Previews. Streben Sie 50–160 Zeichen an, die:
    - den Seiteninhalt zusammenfassen
    - relevante Suchbegriffe enthalten
    - Nutzer zum Klicken anregen

    ```yaml
    # Good - actionable and specific
    description: Deploy your docs to production in under 2 minutes with zero configuration

    # Avoid - generic or missing
    description: Documentation page
    ```
  </Accordion>

  <Accordion title="Konsistente Icons verwenden" icon="icons">
    Icons helfen Nutzern, die Navigation schnell zu überblicken. Verwenden Sie für verwandte Seiten dasselbe Icon:

    | Thema | Empfohlenes Icon |
    |-------|----------------|
    | Getting started | `rocket` |
    | Authentication | `lock` |
    | API reference | `code` |
    | Settings | `gear` |
    | Billing | `credit-card` |

    Durchsuchen Sie die Icons bei [Font Awesome](https://fontawesome.com/icons).
  </Accordion>
</AccordionGroup>

## Validierung

Jamdesk validiert das Frontmatter beim Build. Häufige Fehler:

<Accordion title="Erforderliche Felder fehlen">
```text
Error: Page "api/auth.mdx" is missing required field: title
```

**Lösung:** Fügen Sie das Feld `title` zu Ihrem Frontmatter hinzu.
</Accordion>

<Accordion title="Ungültige YAML-Syntax">
```text
Error: Invalid frontmatter in "guide.mdx": unexpected token
```

**Lösung:** Prüfen Sie:
- Fehlende Anführungszeichen bei Zeichenfolgen mit Sonderzeichen
- Falsche Einrückung
- Fehlende Doppelpunkte nach Schlüsseln

Fügen Sie den Block zwischen den `---`-Markierungen in den kostenlosen [YAML Validator](https://jamdesk.com/utilities/yaml-validator) ein, um die Zeile und Spalte des Fehlers zu ermitteln.
</Accordion>

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="SEO-Optimierung" icon="magnifying-glass-chart" href="/de/content/seo">
    Optimieren Sie Ihre Dokumentation für Suchmaschinen
  </Card>
  <Card title="MDX-Grundlagen" icon="file-code" href="/de/content/mdx-basics">
    Lernen Sie die Grundlagen von MDX kennen
  </Card>
</Columns>