Meta-Daten richtig setzen

Meta-Daten: Der erste Eindruck in den Suchergebnissen

Meta-Daten sind das Erste, was potenzielle Besucher von deiner Website sehen — noch bevor sie überhaupt auf deiner Seite landen. Ein gut geschriebener Title und eine überzeugende Description können den Unterschied zwischen einem Klick und einem übersprungenen Ergebnis machen. In diesem Tutorial lernst du, wie du Meta-Daten schreibst, die klicken.

Was sind Meta-Daten?

Meta-Daten sind Informationen über deine Webseite, die im HTML-Code stehen und von Suchmaschinen gelesen werden:

<title>Maler München | Müller Malermeister</title>

<meta name="description" content="Professionelle Malerarbeiten in München...">

Maler München — Hochwertige Innenraumgestaltung | Müller Malermeister
https://mueller-malermeister.de › leistungen
Professionelle Malerarbeiten in München mit 5-Jahres-Garantie. 
Ökologische Farben, faire Preise. Jetzt kostenloses Angebot anfordern!

Warum Meta-Daten so wichtig sind

Der perfekte Title-Tag

Grundregeln

• Länge: 50-60 Zeichen (Google schneidet bei ~60 ab)
• Keyword: Hauptkeyword möglichst am Anfang
• Einzigartig: Jede Seite braucht einen eigenen Title
• Brand: Firmenname am Ende (optional bei langen Titles)

Title-Formeln die funktionieren

[Keyword] — [Nutzen] | [Marke]

Beispiele:
• Maler München — Qualitätsarbeit mit Garantie | Müller
• Coaching für Gründer — Erste Kunden gewinnen | Name
• Webdesign Berlin — Professionell ab 2.500€ | Agentur

[Dienstleistung] [Ort] | [Marke]

Beispiele:
• Zahnarzt Köln Innenstadt | Praxis Dr. Schmidt
• Steuerberater Hamburg | Kanzlei Meier
• Friseur Berlin Mitte | Salon Style

[Keyword]: [Versprechen] | [Marke]

Beispiele:
• Wand streichen: Anleitung in 7 Schritten | Malerprofi
• SEO lernen: Der komplette Guide 2024 | Marketing Blog
• Steuern sparen: 15 legale Tipps | Finanzblog

[Zahl] [Keyword] [Versprechen]

Beispiele:
• 10 Tipps für perfekte Wände — Malerprofi München
• 7 Fehler beim Renovieren vermeiden | Handwerker XY
• 5 Gründe für ökologische Farben | Müller Maler

Title-Tag Beispiele nach Seitentyp

Die perfekte Meta-Description

Grundregeln

• Länge: 150-160 Zeichen (Google schneidet bei ~155-160 ab)
• Call-to-Action: Immer einen CTA einbauen
• Keyword: Hauptkeyword einmal verwenden (wird fett hervorgehoben)
• Einzigartig: Jede Seite braucht eine eigene Description
• Nutzen kommunizieren: Was hat der Nutzer davon?

Description-Formeln

[Nutzenversprechen]. [Feature/Unterscheidung]. [CTA]!

Beispiel:
Professionelle Malerarbeiten in München mit 5-Jahres-Garantie. 
Nur ökologische Farben. Jetzt kostenloses Angebot anfordern!

[Problem ansprechen]? [Lösung anbieten]. [CTA]!

Beispiel:
Frustriert von unpünktlichen Handwerkern? Bei uns zählt Zuverlässigkeit. 
Termin in 24h — jetzt anfragen!

Description Beispiele

Gut:

✓ Professionelle Malerarbeiten in München mit 5-Jahres-Garantie. 
Ökologische Farben, faire Preise, pünktliche Ausführung. 
Kostenloses Angebot in 24h!

Schlecht:

✗ Willkommen auf unserer Website. Wir sind ein Malerbetrieb. 
Kontaktieren Sie uns für mehr Informationen.

Meta-Daten in Next.js setzen

In Next.js (App Router) setzt du Meta-Daten über die metadata Export:

// app/page.tsx (Startseite)
export const metadata = {
  title: 'Müller Malermeister München — Hochwertige Innenraumgestaltung',
  description: 'Professionelle Malerarbeiten in München mit 5-Jahres-Garantie. Ökologische Farben, faire Preise. Jetzt kostenloses Angebot anfordern!',
}

// app/leistungen/page.tsx (Unterseite)
export const metadata = {
  title: 'Unsere Leistungen — Wände, Decken, Fassaden | Müller Malermeister',
  description: 'Alle Malerleistungen im Überblick: Wände streichen, Decken, Tapezieren, Fassaden. Qualitätsarbeit mit Garantie. Angebot anfordern!',
}

Dynamische Meta-Daten (z.B. für Blog)

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPostBySlug(params.slug)
  
  return {
    title: `${post.title} | Müller Malermeister Blog`,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.featuredImage],
    },
  }
}

Open Graph Meta-Tags

Open Graph Tags bestimmen, wie deine Seite auf Social Media aussieht:

export const metadata = {
  title: '...',
  description: '...',
  openGraph: {
    title: 'Müller Malermeister — Ihr Maler in München',
    description: 'Professionelle Malerarbeiten mit Garantie...',
    images: [{
      url: '/og-image.jpg',
      width: 1200,
      height: 630,
    }],
    locale: 'de_DE',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Müller Malermeister — Ihr Maler in München',
    description: 'Professionelle Malerarbeiten mit Garantie...',
    images: ['/og-image.jpg'],
  },
}

Häufige Meta-Daten Fehler

Meta-Daten testen

Google SERP Preview Tools

Prüfe, wie deine Meta-Daten in Google aussehen:

• SERP Snippet Optimizer
• Mangools SERP Simulator

Social Media Preview

Prüfe, wie deine Seite auf Social Media aussieht:

• Facebook Sharing Debugger
• Twitter Card Validator
• LinkedIn Post Inspector

Meta-Daten Checkliste

Für jede wichtige Seite prüfen:

• ☐ Title-Tag vorhanden und einzigartig
• ☐ Title enthält Hauptkeyword
• ☐ Title ist 50-60 Zeichen lang
• ☐ Meta-Description vorhanden und einzigartig
• ☐ Description enthält Keyword
• ☐ Description ist 150-160 Zeichen lang
• ☐ Description hat einen CTA
• ☐ Open Graph Tags gesetzt
• ☐ OG-Image vorhanden (1200x630)
• ☐ Preview in Google und Social getestet