Seiten: Landingpage
Leitet den Aufbau von Kampagnen-Landingpages, den Conversion-Flow und die Optimierung an. Primäre Verwendung: Bezahlte Anzeigen (PPC/SEM) — Landingpages werden in der Regel erstellt, um bezahlten Traffic zu empfangen; die Ausrichtung von Anzeige zu Seite ist für die Conversion entscheidend. Siehe paid-ads-strategy für die Entscheidung, wann bezahlte Anzeigen eingesetzt werden, und für die Prinzipien der Anzeige-Seiten-Ausrichtung. Gilt auch für Affiliate-Anmeldungen, Produkteinführungen, Lead-Erfassung, Webinar-Registrierungen und andere einzielige Conversion-Seiten. Skalierung: Bei der Erstellung vieler Landingpages (stadtspezifisch, produktspezifisch, integrationsspezifisch) verwenden Sie programmatic-seo (Vorlage + Daten) und template-page-generator für das Vorlagendesign. Unterscheidet sich von der Homepage (mehrzweckig) und Produktseiten (Katalog).
Beim Aufrufen: Bei erster Verwendung ggf. mit 1–2 Sätzen eröffnen, die erklären, was dieses Skill abdeckt und warum es wichtig ist, dann die Hauptausgabe liefern. Bei wiederholter Verwendung oder wenn der Nutzer bittet, dies zu überspringen, direkt zur Hauptausgabe übergehen.
Bezahlte Anzeigen: LP-Anforderungen
Wenn LP bezahlten Traffic erhält: Anzeigenversprechen sofort auf der Seite; mobile-first (CTA oberhalb des Folds, schnelle Ladezeit); minimales Formular (weniger Felder); Vertrauenssignale oberhalb des Folds. Siehe paid-ads-strategy für die vollständige Anzeige-Seiten-Ausrichtung und den Qualitätsfaktor.
Ersteinschätzung
Zuerst nach Projektkontext suchen: Wenn .claude/project-context.md oder .cursor/project-context.md existiert, lesen Sie es, um Produkt, Zielgruppe und Wertversprechen zu erfahren.
Identifizieren:
- Seitenziel: Anmeldung, Kauf, Lead-Erfassung, Webinar, Download
- Traffic-Quelle: Bezahlte Anzeigen, E-Mail, Affiliate, organisch
- Zielgruppe: Kalt vs. warm; Segment, falls bekannt
Landingpage-Struktur (5-Schritte-Flow)
| Schritt | Zweck | Elemente |
|---|---|---|
| 1. Den Scroll stoppen | Aufmerksamkeit in ~2,6 Sekunden einfangen | Überschrift, Unterüberschrift, Hero-Bild oder -Video |
| 2. Vertrauen aufbauen | Sozialer Beweis vor der Aufforderung | Logos, Erfahrungsberichte, Bewertungen, Kundenzahl |
| 3. Wert erklären | Vorteile, Funktionen, Anwendungsfälle | Klarer Text; Zielgruppe, Funktion |
| 4. Zweifel ausräumen | Einwände behandeln | FAQ, Garantien, Vergleich |
| 5. Die Aufforderung stellen | Einzelner primärer CTA | Eine klare Handlung; an logischen Stellen wiederholen |
Jedes Element sollte eine dieser fünf Funktionen erfüllen. Seiten mit mehreren konkurrierenden Angeboten erhalten ~266 % weniger Leads.
Überschriften-Formel
[Für wen es ist] + [Spezifisches Ergebnis] + [Zeit/Qualifikator]
- Vermeiden: Abstrakte Versprechen („Dein Potenzial entfalten“, „Dein Unternehmen transformieren“)
- Bevorzugen: Konkret („Rechnungsbearbeitung um 70 % reduzieren – ohne neue Software“)
CTA-Best-Practices
- Ein primärer CTA: Keine konkurrierenden Aktionen; schaffen Sie eine „Einbahnstraße“ zur Conversion
- Oberhalb des Folds auf Mobilgeräten: Daumenreichweite; ~65 %+ des Traffics ist mobil
- Wertorientierter Text: „Kostenlose Testversion starten“ nicht „Absenden“
- Mit Vertrauenssignalen kombinieren: Kundenzahl, Logos oder Statistiken neben dem Button
- Navigation entfernen oder minimieren: Kann Conversion um 2–28 % steigern
Programmatische Landingpages (Skalierung)
Wenn Sie viele Landingpages benötigen (z. B. stadtspezifisch, produktspezifisch, integrationsspezifisch), verwenden Sie programmatic-seo: eine Vorlage + Daten = hunderte oder tausende LPs. Wenden Sie die Landingpage-Struktur (5-Schritte-Flow, CTA, Vertrauen) auf die Vorlage an; siehe template-page-generator für das Vorlagendesign. Beispiel: „[Produkt] für [Stadt]“-LPs mit lokalen Daten; „[App A] + [App B]“-Integrationsanmeldeseiten.
Seitentypen
| Typ | Verwendung | CTA-Ziel |
|---|---|---|
| Click-Through | Warme Zielgruppe vor dem Angebot; am besten für SaaS, Abonnements | pricing-page, products-page, signup |
| Lead-Erfassung | E-Mail-Adresse für Nurturing sammeln; Formulare mit max. 5 Feldern (längere Formulare verursachen ~81 % Abbruch) | newsletter-signup, contact-page |
| Produktfokussiert | Tiefergehende Funktionen und Vorteile; Produkteinführung | products-page, features-page |
| Vergleich | X vs. Y; Markenkeyword-Anzeigen von Mitbewerbern; kommerzielle Absicht | alternatives-page, features-page, pricing-page |
| Anwendungsfälle / Lösungen | Für integrierte Produkte, die schwer in Tools aufzuteilen sind | features-page, services-page |
| Kostenlose Tools | Eigenständige Hilfsprogramme; Lead-Generierung; gleiche ICP; Auszug aus dem Produkt | tools-page-generator; Tool-Seite als LP, wenn hinter einer Mauer |
| Bridge/Bonus | Zusätzlicher Anreiz zum Kauf über Ihren Link | pricing-page, products-page |
| Webinar/Event | Veranstaltungsregistrierung; Anmeldungen vor dem Live-Termin sammeln | resources-page (Webinar als Ressource) |
Landingpage ↔ Seitentypen (Inhalt & Flow)
Inhalte beziehen aus (Schritt 2–4):
- customer-stories-page-generator: Erfahrungsberichte, Fallstudien für sozialen Beweis; Herausforderung→Lösung→Ergebnisse-Auszüge
- faq-page-generator: FAQ-Bereich zur Einwandsbehandlung; conversionsbezogene Q&A wiederverwenden
- features-page-generator: Vorteilsorientierte Feature-Texte für den Schritt „Wert erklären“
- resources-page-generator: Lead-Magnet (E-Book, Vorlage) als Gegenleistung für E-Mail; Webinar als Ressource
CTA sendet an:
- pricing-page-generator: Click-Through-LP → Preisseite; Anmeldung, Testversion
- products-page-generator: Produkt-LP → Produktdetail oder Katalog
- services-page-generator: Service-LP → Kontakt, Angebot, Buchung
- contact-page-generator: Lead-Erfassungs-LP → Kontaktformular; B2B-Demo-Anfrage
- affiliate-page-generator, creator-program: Partneranmeldung = Landingpage-Typ
Interne Verlinkung:
- LP mit Homepage (Markenanker) verlinken; about-page (Vertrauen); privacy-page (Formular-Compliance)
- Verwaiste LPs vermeiden: mindestens einen internen Link aus Sitemap, Navigation oder Kampagnen-Hub sicherstellen
Leistung und Design
- Ladezeit: Unter 2,5 Sekunden; jede zusätzliche Sekunde kann ~7 % Conversion kosten
- Mobile-first: Responsiv; CTA ohne Scrollen sichtbar
- Visuelles: Hero-Bild oder -Video kann Conversion um bis zu 80 % steigern
- Frontend-Ästhetik: Für besondere Typografie, Bewegung, räumliche Komposition, Hintergründe – siehe brand-visual-generator Frontend-Ästhetik
- Offenlegung: FTC-konforme Affiliate-/Bezahl-Offenlegung, wenn zutreffend
Checkliste vor der Auslieferung
Bevor Sie eine Landingpage ausliefern, überprüfen:
| Kategorie | Prüfung |
|---|---|
| Visuell | Keine Emojis als Icons (SVG verwenden); Icons aus einheitlichem Satz (Heroicons/Lucide); Hover-Zustände verursachen kein Layout-Shifting |
| Interaktion | Alle klickbaren Elemente haben cursor-pointer; Hover gibt klares Feedback; Übergänge 150–300ms |
| Barrierefreiheit | Bilder haben Alt-Text; Formulareingaben haben Labels; Farbe nicht alleiniger Indikator; prefers-reduced-motion respektiert |
| Layout | Kein horizontales Scrollen auf Mobilgeräten; Inhalt nicht hinter fixiertem Navigationsbalken versteckt; responsiv bei 375px, 768px, 1024px |
| Leistung | Ladezeit unter 2,5s; LCP optimiert; Bilder WebP/Lazy Loading verwenden, wo angemessen |
| Bilder | Siehe image-optimization für Alt, Format, responsiv, Lazy Loading |
Ausgabeformat
- Überschrift und Unterüberschrift
- Struktur (5-Schritte-Flow-Abschnitte)
- Platzierung von Vertrauenssignalen
- CTA-Text und Platzierung
- Einwandsbehandlung (FAQ, Garantien)
- Interne Links (Zielseiten)
- SEO-Metadaten (falls Seite indexiert ist)
Verwandte Skills
- hero-generator: Hero-Abschnitt (Schritt 1)
- grid, list: Inhaltslayout unterhalb des Hero; Abschnitte, Funktionen, Erfahrungsberichte
- cta-generator: CTA-Button-Design und -Platzierung
- image-optimization: Alt, WebP, LCP, responsiv, Lazy Loading
- pricing-page-generator: Click-Through-LP-Ziel; Anmelde-CTA
- faq-page-generator: FAQ-Bereich zur Einwandsbehandlung
- howto-section-generator: How-to-Schritt-Abschnitt (z. B. Einrichtungsablauf) vor FAQ/CTA
- comparison-table-generator: Vergleichstabelle für Mitbewerber / traditionell-vs-modern Tabellenabschnitt; Nachrichtenübereinstimmung mit Anzeigen
- homepage-generator: Mehrzweck-Homepage vs. einzielige Landingpage; ähnliche Struktur
- paid-ads-strategy: Anzeige-Seiten-Ausrichtung; wann bezahlte Anzeigen verwendet werden
- alternatives-page-generator: Mitbewerber-Markenkeyword-Anzeigen → Vergleichs-LP (kein Blog)
- programmatic-seo: Skalierung von Landingpages über Vorlage + Daten
- template-page-generator: Vorlagenstruktur für programmatische LPs
- title-tag, meta-description, page-metadata: Metadaten für Landingpages