Die Anatomie einer Landing Page: der Leitfaden für 2026

Eine Landing Page hat eine einzige Aufgabe: Aus einem Besucher mit einem konkreten Anliegen wird eine Anfrage, ein Anruf oder ein Kauf. Das klingt einfach. Trotzdem scheitern viele Seiten daran, weil sie zu viel gleichzeitig wollen, auf dem Smartphone nicht funktionieren oder bei Google gar nicht erst auftauchen.

Seit wir 2019 unseren ersten Landing-Page-Workshop gehalten haben, hat sich viel verändert. Google bewertet Websites nur noch über die Mobilversion, misst die Geschwindigkeit mit neuen Kennzahlen und beantwortet Fragen zunehmend selbst mit KI. In diesem Leitfaden fassen wir zusammen, was heute zählt: vom Aufbau über die Texte bis zur technischen Umsetzung auf Mobile und Desktop.

Das Wichtigste in Kürze

• Eine Seite, ein Ziel. Die Seite konzentriert sich auf ein Thema und einen nächsten Schritt.
• Oben überzeugen, unten erklären. Der erste Screen verkauft, der untere Teil liefert den Inhalt, den Google und KI-Antworten brauchen.
• Mobile zuerst. Google indexiert seit Juli 2024 ausschliesslich die Mobilversion. Entworfen wird für das Smartphone, der Desktop wird daraus abgeleitet.
• Schnell und stabil. Die Core Web Vitals (LCP, INP, CLS) entscheiden mit über Rankings und über die Geduld der Besucher.
• Messen statt raten. Jede Landing Page ist eine Hypothese. Erst die Daten zeigen, ob sie stimmt.

Was ist eine Landing Page, und warum funktioniert sie?

Eine Landing Page ist eine Seite, auf der Besucher gezielt «landen», meist über eine Anzeige, eine Suche oder einen Link in einem Newsletter. Im Unterschied zur Startseite, die viele Zielgruppen und Themen bedienen muss, konzentriert sie sich auf ein Thema, ein Anliegen und eine Aktion.

Genau diese Konzentration macht sie wirksam. Wer nach «Kündigung erhalten, was tun?» sucht, will keine Übersicht über alle Leistungen einer Kanzlei. Er will wissen, ob er hier richtig ist und wie er schnell Hilfe bekommt.

Eine Seite statt drei

Früher wurde oft zwischen Conversion-Seiten (für Werbung) und SEO-Seiten (für die organische Suche) unterschieden. Für die meisten Unternehmen ist das unnötig kompliziert. Besser ist eine Seite pro Thema, die alle Aufgaben übernimmt, aber mit klarer Priorität:

1. Anfragen auslösen ist das Hauptziel. Alles im ersten Screen dient diesem Ziel.
2. Bei Google gefunden werden. Die Seite hat eine eigene URL, klare Überschriften und genug Fachinhalt.
3. Vertrauen schaffen und in KI-Antworten erscheinen. Echte Menschen, gute Antworten auf echte Fragen, lokale Präsenz.

Der Aufbau von oben nach unten

Eine bewährte Reihenfolge, die sich für Dienstleister, Kanzleien, Agenturen und viele B2B-Angebote eignet:

1. Hero: der erste Screen

Der wichtigste Bereich der Seite. Hier entscheidet sich in wenigen Sekunden, ob jemand bleibt. Der Hero enthält:

• Eine Headline, die das Anliegen nennt, nicht nur das Thema. «Kündigung erhalten? Wir prüfen Ihre Situation, bevor Fristen ablaufen.» wirkt stärker als «Arbeitsrecht».
• Einen Satz mit Nutzen und Zielgruppe: für wen, wo, was.
• Einen Haupt-Button mit konkretem Text, zum Beispiel «Ersteinschätzung anfragen» statt «Absenden».
• Eine Alternative für Eilige: die Telefonnummer.
• Eine Vertrauenszeile: Standorte, Sprachen, Zertifizierungen, Antwortzeit.
• Auf dem Desktop optional das Formular direkt daneben.

2. Typische Situationen

Drei bis sechs Karten, in denen sich Besucher wiedererkennen. Jede Karte beschreibt eine Situation in ein, zwei Sätzen und verlinkt auf eine vertiefende Seite. Das hilft den Besuchern bei der Orientierung und Google beim Verstehen, welche Themen die Seite abdeckt.

3. So läuft es ab

Drei Schritte von der Anfrage bis zum Ergebnis. Unsicherheit ist einer der grössten Gründe, warum Menschen nicht anfragen. Ein klarer Ablauf, idealerweise mit einer Aussage zu den Kosten, baut diese Hürde ab.

4. Ansprechperson

Ein echtes Foto, ein Name, die Spezialisierung, gesprochene Sprachen, vielleicht ein kurzes Zitat. Menschen kaufen von Menschen, gerade bei Dienstleistungen, die Vertrauen erfordern. Austauschbare Stockfotos erreichen das Gegenteil.

5. Wissensteil

Hier beginnt der «untere Teil» für Google und KI. Kurze Abschnitte, deren Zwischentitel als Fragen formuliert sind, so wie Kunden sie stellen. Die Antwort steht jeweils im ersten Satz, die Details folgen danach. Dazu gehören ein Autor mit Profil und das Datum der letzten Prüfung.

6. Häufige Fragen

Fünf bis acht echte Fragen aus der Praxis: Kosten, Dauer, benötigte Unterlagen, Sprachen. Als Akkordeon ist das auf dem Smartphone gut bedienbar.

7. Kontakt

Das Formular am Seitenende nochmals, kurz und vorausgefüllt, plus alle Standorte und Kontaktwege.

Zehn Regeln für mehr Anfragen

Button-Texte: konkret statt generisch

Statt	Besser
Absenden	Ersteinschätzung anfragen
Kontakt	Rückruf vereinbaren
Mehr erfahren	Situation schildern
Jetzt kaufen	Offerte in 2 Minuten erhalten

Das Formular

• Höchstens vier Pflichtfelder. Name, Kontaktweg, Thema, kurze Beschreibung.
• Thema vorausgewählt, passend zur Seite.
• Beschriftung über dem Feld, nicht als Platzhalter im Feld. Platzhalter verschwinden beim Tippen, und dann weiss niemand mehr, was gefragt war.
• Fehler direkt beim Feld erklären, nicht erst nach dem Absenden.
• Vertraulichkeit und Antwortzeit direkt beim Button nennen.
• Nach dem Absenden: eine Bestätigung mit dem nächsten Schritt.
• Feldanzahl testen statt blind kürzen. Weniger Felder bringen oft mehr Anfragen, aber nicht immer bessere. Entscheidend ist, was am Ende daraus wird.
• Datenschutz: Seit dem 1. September 2023 gilt in der Schweiz das revidierte Datenschutzgesetz (revDSG). Ein kurzer, verlinkter Hinweis beim Formular gehört dazu.

Mobile zuerst: warum das Smartphone das Design bestimmt

Die Zahlen

In der Schweiz kommen rund 45 % aller Seitenaufrufe von Smartphones, Tablets nicht mitgezählt (StatCounter, Juni 2026). Bei lokalen und akuten Suchen, etwa nach einem Anwalt, Handwerker oder Arzt, liegt der Anteil oft deutlich über 50 %. Die einzige verlässliche Zahl ist aber die eigene: In Google Analytics 4 lässt sie sich unter «Tech» nach Gerätekategorie auswerten.

Noch wichtiger als der Anteil der Besucher ist Google selbst. Seit Juli 2024 crawlt und indexiert Google alle Websites nur noch mit dem Smartphone-Crawler (Google Search Central). Was auf der Mobilversion fehlt, existiert für Google nicht.

Was das für das Design heisst

• Entwurf ab 360 bis 414 px Breite. Die Desktopversion wird aus der mobilen abgeleitet, nicht umgekehrt. Wer vom Desktop aus «herunterschrumpft», landet bei gequetschten Layouts und versteckten Inhalten.
• Eine Spalte. Karten und Blöcke stehen untereinander. Jeder Block beginnt mit einem klaren Zwischentitel.
• Headline in höchstens drei bis vier Zeilen. Kein grosses Bild, das den Text unter den ersten Screen drückt.
• Fixe Aktionsleiste unten mit «Anrufen» und «Anfrage». Sie bleibt beim Scrollen sichtbar und liegt im Daumenbereich.
• Das Formular folgt direkt nach dem ersten Screen, nicht erst ganz unten.
• Kerninhalt nicht zuklappen. Akkordeons sind gut für Nebeninhalte wie FAQ, aber der Einstieg ins Thema muss ohne Tippen sichtbar sein.

Bedienung mit dem Daumen

Auf dem Smartphone wird getippt, nicht geklickt. Das hat Folgen:

• Tippflächen: WCAG 2.2 verlangt mindestens 24 x 24 CSS-Pixel (W3C, SC 2.5.8). Apple empfiehlt 44 pt, Google Material Design 48 dp. Unsere Faustregel: Buttons mindestens 44 bis 48 px hoch, der Haupt-Button in voller Breite.
• Abstand: Links und Buttons nicht dicht nebeneinander, vor allem in Aufzählungen und im Footer.
• Daumenzone: Primäre Aktionen gehören in die untere Bildschirmhälfte, wo der Daumen ohne Umgreifen hinkommt.
• Alles antippbar: Telefonnummer als tel:-Link, E-Mail als mailto:, Adresse mit Link zur Karte.
• Zoom nie sperren. maximum-scale=1 oder user-scalable=no verletzt die Barrierefreiheit und frustriert ältere Besucher.

Formulare auf dem Handy

• Schrift in Eingabefeldern mindestens 16 px. Darunter zoomt Safari auf dem iPhone beim Antippen automatisch in die Seite hinein.
• Richtige Feldtypen zeigen die passende Tastatur: type="tel" für Telefon, type="email" für E-Mail.
• Autovervollständigen mit autocomplete="name", "tel", "email". Das Handy füllt die Felder dann selbst aus.
• Kein sichtbares CAPTCHA. Lieber unsichtbarer Spam-Schutz (Honeypot-Feld, serverseitige Prüfung).
• Rückruf als Alternative: Nur Name und Telefonnummer, für alle, die unterwegs nicht tippen wollen.

<label for="tel">Telefon</label>
<input id="tel" name="tel" type="tel" autocomplete="tel" inputmode="tel">

<label for="email">E-Mail</label>
<input id="email" name="email" type="email" autocomplete="email">

Was auf dem Smartphone nicht passieren darf

Responsive Design: eine Seite für Mobile und Desktop

Responsive Design heisst: ein HTML, ein Inhalt, eine URL, und das Layout passt sich per CSS an die Bildschirmgrösse an. Separate Mobilseiten auf m.example.ch oder unterschiedliche Inhalte je Gerät sind überholt und führen seit der vollständigen Umstellung auf Mobile-first-Indexierung eher zu Problemen.

Der Viewport

Ohne diese Zeile im <head> stellt das Smartphone die Seite wie einen verkleinerten Desktop dar:

<meta name="viewport" content="width=device-width, initial-scale=1">

Mobile-first CSS

Die Basisstile gelten für das Smartphone. Grössere Bildschirme bekommen mit min-width Erweiterungen. So lädt das Handy nur, was es braucht, und das Layout wird von einfach zu komplex aufgebaut.

/* Basis: Smartphone, eine Spalte */
.hero { display: grid; gap: 1.5rem; }
.cards { display: grid; gap: 1rem; }

/* Ab Tablet: zwei Spalten */
@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* Ab Desktop: Hero mit Formular daneben, drei Karten pro Reihe */
@media (min-width: 1024px) {
  .hero { grid-template-columns: 1.25fr 1fr; gap: 3.5rem; }
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Breakpoints richten sich nach dem Inhalt, nicht nach Geräten. Man zieht das Browserfenster auf und setzt dort einen Breakpoint, wo das Layout nicht mehr gut aussieht. Gerätelisten veralten jedes Jahr.

Flüssige Schrift und Abstände

Statt für jeden Breakpoint eigene Schriftgrössen zu definieren, wächst die Schrift mit clamp() stufenlos mit:

h1   { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem); line-height: 1.12; }
body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); line-height: 1.6; }

Für die Lesbarkeit gilt: Fliesstext mindestens 16 bis 18 px, 60 bis 80 Zeichen pro Zeile, hoher Kontrast.

Komponenten statt Seiten: Container Queries

Eine Karte kann heute auf ihre eigene Breite reagieren, nicht nur auf die Bildschirmbreite. Das ist praktisch, wenn dieselbe Komponente einmal in einer schmalen Seitenleiste und einmal im breiten Hauptbereich steht:

.card-wrap { container-type: inline-size; }

@container (min-width: 420px) {
  .card { display: grid; grid-template-columns: 120px 1fr; }
}

Bilder: scharf auf dem Handy, leicht im Mobilfunknetz

• Moderne Formate: WebP oder AVIF statt JPEG und PNG.
• Passende Grösse je Gerät mit srcset und sizes, damit das Handy kein 2'400 px breites Desktop-Bild lädt.
• Das Hero-Bild nie lazy laden. Es ist oft das grösste Element im ersten Screen und bestimmt den LCP. Stattdessen fetchpriority="high".
• Alle anderen Bilder mit loading="lazy".
• Platz reservieren mit width und height oder aspect-ratio, damit nichts springt.
• Alt-Texte für Barrierefreiheit und Bildersuche.

<img
  src="team-800.webp"
  srcset="team-480.webp 480w, team-800.webp 800w, team-1600.webp 1600w"
  sizes="(min-width: 1024px) 50vw, 100vw"
  width="1600" height="1000"
  alt="Das Team im Besprechungsraum in Zürich"
  fetchpriority="high">

Mit <picture> lässt sich für Mobile auch ein anderer Bildausschnitt zeigen, etwa ein Hochformat statt eines breiten Panoramas. Der Inhalt bleibt derselbe, nur der Ausschnitt ändert sich.

Die fixe Aktionsleiste: nur auf Mobile

.sticky-cta { display: none; }

@media (max-width: 699px) {
  .sticky-cta {
    display: flex; gap: .6rem;
    position: fixed; inset: auto 0 0 0;
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #d9dde0;
  }
  body { padding-bottom: 5rem; } /* damit die Leiste nichts verdeckt */
}

env(safe-area-inset-bottom) sorgt dafür, dass die Leiste auf iPhones nicht unter dem Home-Balken verschwindet. Sinnvoll ist ausserdem, die Leiste auszublenden, sobald das Kontaktformular im Bild ist.

Touch und Maus unterscheiden

Nicht jeder grosse Bildschirm hat eine Maus, und nicht jedes Handy ist klein. Statt nur nach Breite zu fragen, lässt sich die Art der Bedienung abfragen:

/* Hover-Effekte nur, wo es wirklich einen Mauszeiger gibt */
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: 0 12px 30px rgba(0,0,0,.08); }
}

/* Grössere Tippflächen bei Touch */
@media (pointer: coarse) {
  .btn { min-height: 48px; }
}

Wichtige Informationen dürfen nie nur per Hover sichtbar sein, denn auf dem Handy gibt es kein Hover.

Die Bildschirmhöhe auf dem Handy

100vh ist auf Mobile unzuverlässig, weil die Adressleiste ein- und ausfährt. Die neueren Einheiten svh, lvh und dvh lösen das. Für einen Hero, der genau den ersten Screen füllt, eignet sich min-height: 100svh.

Rücksicht auf Einstellungen

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

Wer in seinem Betriebssystem Bewegung reduziert hat, bekommt keine Animationen.

Testen, testen, testen

• Echte Geräte: mindestens ein aktuelles iPhone und ein Android-Gerät. Der Simulator im Browser ersetzt das nicht vollständig, vor allem nicht bei Tastatur, Zoom und Formularen.
• Browser-Entwicklertools für schnelle Checks in verschiedenen Breiten.
• PageSpeed Insights und die Search Console für die Werte echter Nutzer.
• Langsames Netz simulieren, um zu sehen, was im Zug zwischen zwei Tunneln passiert.

Geschwindigkeit: die Core Web Vitals

Google misst drei Kennzahlen bei echten Nutzern. Eine Seite besteht, wenn 75 % der Besuche die Grenzwerte erreichen (web.dev):

LCP (Largest Contentful Paint)

≤ 2,5 s

Wann der Hauptinhalt sichtbar ist

INP (Interaction to Next Paint)

≤ 200 ms

Wie schnell die Seite auf Tippen und Klicks reagiert

CLS (Cumulative Layout Shift)

≤ 0,1

Wie stark das Layout beim Laden springt

Kennzahl	Typische Massnahmen
LCP	Hero-Bild klein und priorisiert, schneller Server, wenig blockierendes CSS und JavaScript
INP	Wenige Skripte, keine schweren Widgets, Drittanbieter-Tags kritisch prüfen
CLS	Platz für Bilder, Banner und Schriften reservieren

INP hat im März 2024 den alten Wert FID ersetzt. FID mass nur die Verzögerung der allerersten Interaktion, INP bewertet alle Interaktionen während des Besuchs und ist damit deutlich strenger. Auf Baukasten-Systemen wie Wix, Squarespace oder WordPress mit vielen Plugins ist INP oft der Wert, der zuerst kippt.

Gefunden werden: SEO für Landing Pages

Die Grundlagen

Element	Regel	Beispiel
URL	Kurz, sprechend, Kleinbuchstaben	/advokatur/arbeitsrecht
Title	Ca. 50 bis 60 Zeichen, Suchbegriff vorne	Anwalt Arbeitsrecht Graubünden | Kanzleiname
Meta Description	Ca. 150 bis 160 Zeichen, Nutzen und Aufforderung	Kündigung, Lohn, Arbeitsvertrag: Beratung an 6 Standorten in 5 Sprachen.
Überschriften	Genau eine H1, darunter logische H2 und H3	H1: Anwalt für Arbeitsrecht
Interne Links	Hauptseite und Unterthemen gegenseitig verlinken	Situationen, Team, Kontakt
Strukturierte Daten	Schema.org für Organisation, Personen, Breadcrumb	LocalBusiness bzw. LegalService, Person, BreadcrumbList
Sprachversionen	Je Sprache eine eigene URL mit hreflang	/it/avvocatura/diritto-del-lavoro

Was sich geändert hat

• FAQ-Snippets gibt es kaum noch. Seit August 2023 zeigt Google FAQ-Rich-Results nur noch für bekannte Behörden- und Gesundheitsseiten (Google Search Central). FAQ-Markup schadet nicht, bringt aber für die meisten Websites keine Sonderdarstellung mehr. Die FAQ-Inhalte selbst bleiben wertvoll: für Besucher und für KI-Antworten.
• Umfang ist kein Selbstzweck. Es gibt keine ideale Wortzahl. Die Seite soll so ausführlich sein, wie das Thema es verlangt, und nicht länger.
• Erfahrung zählt. Google spricht von E-E-A-T: Erfahrung, Expertise, Autorität und Vertrauenswürdigkeit. Bei Themen, die Geld, Gesundheit oder Recht betreffen, ist das besonders wichtig. Sichtbare Autoren mit Qualifikation und ein Prüfdatum helfen.

Sichtbar in KI-Antworten

Seit März 2025 zeigt Google auch in der Schweiz KI-Übersichten über den Suchergebnissen, auf Deutsch, Französisch, Italienisch und Englisch. Dazu kommen ChatGPT, Perplexity und andere Assistenten, die Websites als Quellen verlinken. KI-Antworten erscheinen vor allem bei Fragen, also genau dort, wo der Wissensteil einer Landing Page ansetzt.

Was hilft, als Quelle genannt zu werden:

Klicks aus KI-Antworten sind seltener als aus klassischen Suchergebnissen, dafür oft qualifizierter. Wer dort genannt wird, kommt mit Vorwissen und Vertrauen auf die Seite.

Lokal gefunden werden

Bei Suchen wie «Anwalt St. Moritz» oder «Treuhand Zürich» zeigt Google auf dem Smartphone zuerst die Karte mit den Unternehmensprofilen. Deshalb:

• Ein Google-Unternehmensprofil pro Standort, mit Kategorie, Öffnungszeiten, Fotos und Link auf die passende Seite, nicht nur auf die Startseite.
• Standortseiten mit echtem Inhalt: Team vor Ort, Anfahrt, Sprachen, Schwerpunkte. Kopierte Texte mit ausgetauschtem Ortsnamen bringen nichts.
• Einheitliche Kontaktdaten überall, inklusive einer einzigen E-Mail-Domain.
• Bewertungen helfen lokal. In regulierten Branchen gelten dafür eigene Regeln, die man vorher klären sollte.

Vertrauen in regulierten Branchen

Kanzleien, Ärzte, Finanzdienstleister und Treuhänder haben zusätzliche Spielregeln. Für Anwältinnen und Anwälte in der Schweiz gilt zum Beispiel, dass Werbung sachlich bleiben und dem Informationsbedürfnis der Öffentlichkeit entsprechen muss (Art. 12 lit. d BGFA). Für Landing Pages heisst das:

• keine Erfolgsversprechen und keine Superlative
• Kundenstimmen nur anonymisiert und mit Einwilligung
• Kosten und Ablauf transparent erklären
• finale Texte durch die Fachleute selbst prüfen lassen

Das ist keine Einschränkung, sondern ein Vorteil: Sachliche, hilfreiche Seiten überzeugen gerade Menschen in schwierigen Situationen mehr als laute Werbung.

Messen und verbessern

Was gemessen wird

• Formular abgesendet
• Tipp auf die Telefonnummer (vor allem mobil)
• Klick auf die E-Mail-Adresse
• Rankings, Klicks und Core Web Vitals pro Seite

Womit

• Google Analytics 4 und Google Tag Manager für Conversions
• Google Search Console für Suchanfragen, Rankings und Core Web Vitals
• Google Ads Conversion Tracking, wenn Anzeigen geschaltet werden
• Consent Mode, abgestimmt auf den Cookie-Banner

Testen

Google Optimize wurde im September 2023 eingestellt. Für A/B-Tests gibt es Alternativen wie VWO oder Optimizely. Bei wenig Traffic sind klassische A/B-Tests allerdings kaum aussagekräftig. Dann ist es sinnvoller, grosse Änderungen nacheinander zu testen (vorher und nachher) statt viele kleine gleichzeitig. Gute Kandidaten:

• Headline und Subline
• Text und Farbe des Haupt-Buttons
• Länge des Formulars
• fixe Aktionsleiste auf Mobile: ja oder nein

Checkliste vor dem Go-live

Fazit

Eine gute Landing Page ist kein Designprojekt und kein SEO-Projekt, sondern beides gleichzeitig, mit einer klaren Priorität: Sie soll Anfragen bringen. Oben überzeugt sie Menschen mit Zeitdruck, unten liefert sie den Inhalt, den Suchende, Google und KI-Assistenten brauchen. Entworfen wird sie für das Smartphone, gebaut als eine responsive Seite für alle Geräte, und verbessert wird sie mit echten Daten.

Sie planen neue Landing Pages oder wollen wissen, wo Ihre bestehenden Seiten Anfragen verlieren? Wir schauen sie uns gerne mit Ihnen an: Schreiben Sie uns über unser Anfrageformular.

Quellen

• Google Search Central: Mobile-first indexing has landed (Juni 2024)
• Google Search Central: Changes to HowTo and FAQ rich results (August 2023)
• web.dev: Defining the Core Web Vitals metrics thresholds
• W3C: WCAG 2.2, Understanding Success Criterion 2.5.8 Target Size (Minimum)
• StatCounter Global Stats: Desktop vs Mobile vs Tablet Market Share Switzerland
• Bundesgesetz über die Freizügigkeit der Anwältinnen und Anwälte (BGFA), Art. 12