Webdesign und SEO werden oft als getrennte Disziplinen behandelt: Designer gestalten, SEOs optimieren. In der Praxis sind sie eng verknüpft. Viele Design-Entscheidungen haben direkte SEO-Konsequenzen – sowohl positiv als auch negativ. Wer beide Perspektiven von Anfang an berücksichtigt, baut Websites die sowohl Menschen als auch Google überzeugen.
Warum Google Design bewertet
Google misst keine ästhetischen Urteile über Farben oder Layouts. Aber Google misst Nutzersignale, die direkt durch Design beeinflusst werden:
- Absprungrate: Wenn Nutzer eine Seite sofort wieder verlassen, ist das ein schlechtes Signal.
- Verweildauer: Gut strukturierte, angenehm lesbare Seiten halten Nutzer länger.
- Core Web Vitals: Ladezeit, Interaktivität und visuelle Stabilität sind direkte Rankingfaktoren.
- Klickrate: Wie eine Seite in den Suchergebnissen wirkt, beeinflusst die CTR.
Websites mit gutem UX-Design erzielen im Schnitt 35 % niedrigere Absprungraten und 40 % längere Verweildauer als Seiten mit schlechtem Design – beides positive Nutzersignale für Google.
Typographie und Lesbarkeit
Text ist der Hauptinhalt der meisten Websites – und wie er gesetzt ist, entscheidet über Lesbarkeit.
Schriftgröße: Mindestens 16px für Fließtext. Kleinere Schrift führt auf mobilen Geräten zu Pinch-to-Zoom, was die CLS-Wertung verschlechtert und Nutzer frustriert.
Zeilenabstand: 1.5–1.7 für Fließtext. Zu enger Zeilenabstand macht Texte schwer lesbar, besonders auf kleinen Screens.
Zeilenlänge: 60–80 Zeichen pro Zeile sind optimal für Lesbarkeit. Sehr breite Textspalten ermüden die Augen; sehr schmale unterbrechen den Lesefluss.
Kontrastverhältnis: WCAG empfiehlt mindestens 4,5:1 für normalen Text. Heller Text auf hellem Hintergrund ist nicht nur ein Accessibility-Problem – es erhöht die Absprungrate.
Navigation und Seitenstruktur
Die Navigation ist der wichtigste strukturelle Faktor im Webdesign mit direktem SEO-Einfluss:
Klare Hierarchie: Hauptnavigation, Unternavigation und Breadcrumbs sollten die logische Seitenstruktur widerspiegeln. Google folgt diesen Struktursignalen bei der Einschätzung von Seitenrelevanz.
Crawler-zugängliche Links: JavaScript-basierte Navigationsmenüs können von Google nicht immer korrekt verarbeitet werden. Native HTML-Links in <a>-Tags sind zuverlässiger für interne Verlinkung und Crawling.
Hamburger-Menü auf Mobile: Versteckte Navigationen auf Mobilgeräten sind für Nutzer oft frustrierend. Google berücksichtigt, dass wichtige Inhalte für mobile Nutzer zugänglich sein müssen – versteckte Navigationen können die interne Verlinkungsstruktur für Google schwächen.
Testen Sie Ihre Navigation mit ausgeschaltetem JavaScript – das entspricht ungefähr dem, was Googlebot sieht. Wenn Hauptmenü-Links ohne JavaScript nicht sichtbar oder nicht klickbar sind, erreicht Google diese verlinkten Seiten möglicherweise nicht direkt über die Navigation.
Above-the-Fold und LCP
Der Largest Contentful Paint (LCP) misst wie schnell das größte sichtbare Element einer Seite geladen wird. Design-Entscheidungen beeinflussen den LCP direkt:
Hero-Images: Große Bilder über dem Fold sind der häufigste LCP-Kandidat. Unkomprimierte Hero-Images verzögern den LCP erheblich. Lösung: WebP-Format, korrekte Größe, loading="eager" und fetchpriority="high".
Full-Screen-Videos im Hintergrund: Autoplay-Hintergrundvideos sind ein LCP-Killer und schaden der Ladezeit erheblich. Für SEO und Core Web Vitals fast immer kontraproduktiv.
Font Loading: Wenn Custom Fonts zu spät geladen werden, sehen Nutzer zunächst ein Flash of Unstyled Text (FOUT) oder eine unsichtbare Seite (FOIT) – beides verschlechtert die wahrgenommene Ladegeschwindigkeit und kann den LCP verzögern.
Layout Shifts und CLS
Der Cumulative Layout Shift (CLS) misst wie stark sich das Layout während des Ladens verschiebt. Häufige Design-Ursachen:
Bilder ohne Dimensionsangaben: Wenn Bildgröße nicht im HTML angegeben ist, springt der Inhalt darunter wenn das Bild lädt. Immer width und height setzen.
Eingebettete Werbung oder Widgets: Werbebanner, die nachträglich eingeblendet werden und Inhalt verschieben, verschlechtern den CLS.
Animationen: CSS-Animationen die Elemente ins Layout einfügen (nicht nur transformieren) können CLS erzeugen. transform: translateY() ist CLS-sicher; top: 0 zu top: 50px erzeugt CLS.
Websites mit einem CLS-Score unter 0,1 (Google-Rating: „Gut”) ranken im Schnitt 1–2 Positionen höher als vergleichbare Seiten mit schlechten CLS-Werten.
Pop-ups und Interstitials
Pop-ups können das Ranking direkt schaden wenn sie:
- Den Inhalt sofort beim Öffnen der Seite vollständig überlagern
- Schwer schließbar sind
- Auf Mobilgeräten einen Großteil des Screens abdecken
Google hat mehrere Updates durchgeführt die aufdringliche Interstitials auf Mobilgeräten abstrafen. Pop-ups die erst nach einigen Sekunden erscheinen oder nicht den Hauptinhalt verdecken, sind in der Regel unkritisch.
Farbe, Vertrauen und Conversion
Design beeinflusst nicht direkt die SEO-Rankings, aber stark die Conversion-Rate – und eine höhere Conversion-Rate ist das eigentliche Ziel hinter Rankings.
Vertrauenssignale im Design: professionelle Typographie, konsistente Farbgebung, erkennbare Logos und Siegel, klare Kontaktinformationen. Diese Elemente schaffen Vertrauen und erhöhen die Wahrscheinlichkeit dass Besucher zu Kunden werden.
Das beste SEO bringt nichts wenn Design und UX Besucher abschrecken. Rankings bringen Traffic – Design und Inhalt konvertieren diesen Traffic. Investieren Sie in beides. Eine Conversion-Rate von 2 % auf einem gut rankenden und gut gestalteten Seite bringt mehr Kunden als 10 % auf einer Seite die nicht gefunden wird.
Für Ihre eigene Website lohnt sich ein Blick auf unsere Webdesign-Leistungen – wo SEO und Design von Anfang an gemeinsam gedacht werden.