SEO und Webdesign: Warum Sichtbarkeit im Entwurf entsteht

Seitenstruktur, Ladezeit, Überschriften: Die wichtigsten SEO-Entscheidungen fallen im Design. 7 teure Fehler und der Prozess, der sie vermeidet.

Designer-Arbeitsplatz mit Website-Layout und Analytics-Dashboard auf zwei BildschirmenKI-generiert

„Erst bauen wir die Website, dann machen wir SEO.” Dieser Satz fällt in vielen Erstgesprächen – und er beschreibt die teuerste Reihenfolge, in der man beides angehen kann. Denn die Entscheidungen mit der größten SEO-Wirkung fallen nicht nach dem Livegang, sondern beim Design: Seitenstruktur, Überschriftenlogik, Ladeverhalten, interne Verlinkung. Wer sie im Entwurf falsch trifft, bezahlt später doppelt – einmal für die Website und einmal für deren Reparatur.

Dieser Beitrag zeigt, an welchen Stellen Webdesign und Suchmaschinenoptimierung dieselbe Baustelle sind, welche Designentscheidungen Rankings kosten und wie ein Prozess aussieht, der beides von Anfang an zusammen denkt.

Warum sich SEO nicht „nachrüsten” lässt

Suchmaschinen bewerten eine Website entlang von drei Fragen: Versteht Google, worum es auf jeder Seite geht? Können Nutzer und Crawler die Inhalte problemlos erreichen? Und ist die Erfahrung auf der Seite gut – schnell, stabil, bedienbar? Alle drei Fragen werden maßgeblich im Design beantwortet.

  • Seitenarchitektur: Welche Seiten es überhaupt gibt und wie sie verschachtelt sind, entscheidet darüber, für welche Suchbegriffe die Website antreten kann. Eine Leistung, die nur als Absatz auf einer Sammelseite existiert, rankt für ihr Keyword praktisch nie.
  • Überschriftenhierarchie: H1 bis H3 sind für Google das Inhaltsverzeichnis der Seite. Ein Design, das Überschriften nach Optik statt nach Logik wählt, macht dieses Inhaltsverzeichnis unlesbar.
  • Ladeverhalten: Große Hero-Videos, ungeladene Schriften, Layout-Sprünge – die Mehrheit der Performance-Probleme sind Designentscheidungen, keine Serverprobleme.
  • Interne Verlinkung: Navigation, Footer und kontextuelle Links verteilen die Autorität der Website. Was nicht verlinkt ist, existiert für Suchmaschinen kaum.

Faustregel: Alles, was sich nach dem Livegang nur mit einem Relaunch ändern lässt, ist eine SEO-Entscheidung – auch wenn sie im Designtermin fällt.

Die Core Web Vitals: Wo Design messbar wird

Google misst Nutzererfahrung über die Core Web Vitals – drei Kennzahlen, die direkt von Gestaltungsentscheidungen abhängen:

Core Web Vitals – die Schwellenwerte

Diese Werte gelten als „gut” und sollten auf Mobilgeräten erreicht werden

≤ 2,5 s
LCP – bis das größte Element sichtbar ist
≤ 200 ms
INP – Reaktionszeit auf Eingaben
≤ 0,1
CLS – wie stark das Layout springt

Schwellenwerte nach Google (web.dev), Stand 2026.

Hinter jeder dieser Zahlen steht eine Designfrage. Das LCP-Element ist fast immer das Hero-Bild – ist es als 4-MB-Datei eingebunden, ist der Wert nicht zu retten. Layout-Sprünge entstehen, wenn Bilder ohne feste Größenangaben geladen werden oder Werbebanner nachträglich Platz fordern. Und die Reaktionszeit leidet, wenn Animationsbibliotheken und Tracking-Skripte den Hauptthread blockieren.

Sieben Designentscheidungen, die Rankings kosten

1. Die Leistung ohne eigene Seite

Der Klassiker: Zehn Leistungen, eine „Leistungen”-Seite. Für Suchmaschinen ist das ein einziges Dokument, das für zehn Themen gleichzeitig antritt – und für keines gewinnt. Jede Leistung mit eigenem Suchvolumen braucht eine eigene, tiefe Seite.

2. Text im Bild

Aussagen, die als Grafik eingebunden sind, existieren für Google nicht. Das betrifft Headlines in Hero-Grafiken genauso wie Preislisten als Foto. Text gehört in HTML – gestalten lässt er sich trotzdem.

3. Überschriften nach Schriftgröße

Wenn die H3 vor der H2 kommt, weil sie im Layout besser aussah, verliert die Seite ihre inhaltliche Gliederung. Die Hierarchie muss dem Inhalt folgen; die Optik regelt das Stylesheet.

4. Navigation als Sackgasse

Mega-Menüs, die nur die Top-Ebene verlinken, oder Landingpages, die nirgends in der Navigation auftauchen: Seiten ohne interne Links bekommen weder Besucher noch Linkkraft. Jede wichtige Seite braucht mindestens einen festen Platz in der Seitenstruktur.

5. Der ungeplante Umgang mit Bildern

Bilder sind auf den meisten Websites der größte Performance-Posten. Moderne Formate, saubere Größenangaben, Lazy Loading unterhalb des sichtbaren Bereichs – das sind Standards, die im Designprozess festgelegt werden müssen, nicht beim Befüllen.

6. Slider und Akkordeons für Kerninhalte

Inhalte, die erst nach Interaktion sichtbar werden, wiegen weniger. Was für das Ranking zählt, gehört sichtbar auf die Seite – Interaktionselemente sind für Ergänzendes da.

7. Der Relaunch ohne Weiterleitungskonzept

Streng genommen keine Designentscheidung, aber die Folge vieler Designprojekte: Neue Seitenstruktur, alte URLs ins Leere. Ohne 301-Weiterleitungen verliert die Website ihre über Jahre aufgebaute Autorität. Wie man das verhindert, haben wir in einer eigenen Checkliste beschrieben.

Die Anatomie einer Seite, die rankt

Abstrakte Regeln helfen wenig – deshalb einmal konkret. So ist eine Leistungs- oder Standortseite aufgebaut, die sowohl Besucher als auch Suchmaschinen überzeugt, von oben nach unten:

Element Aufgabe Woran es scheitert
Title & Meta-Description Das Versprechen im Suchergebnis – entscheidet über den Klick Titel über 60 Zeichen, kein Nutzenversprechen, überall gleich
H1 mit Kernbegriff Sagt Besucher und Google in einer Zeile, worum es geht H1 = Firmenname statt Thema; mehrere H1 pro Seite
Erster Absatz Beantwortet die Suchintention in 2–3 Sätzen Werbelyrik statt Antwort – „Willkommen auf unserer Website”
H2/H3-Struktur Deckt die Unterfragen des Themas ab – jede H2 eine Suchfacette Deko-Überschriften ohne Inhaltsbezug
Vertrauensblock Referenzen, Zahlen, Gesichter – konvertiert die Besucher, die SEO bringt Stockfoto-Testimonials, die niemand glaubt
FAQ mit Schema Fängt Longtail-Fragen und Voice-Suchen, erzeugt SERP-Snippets FAQs ohne strukturierte Daten oder mit Ein-Satz-Antworten
Interne Links im Kontext Führt zu Nachbarthemen, verteilt Linkkraft nur „Mehr erfahren”-Buttons ohne sprechenden Linktext
Der Aufbau folgt der Suchintention – Design entscheidet, ob er lesbar wird.

Der Punkt dabei: Keine einzige Zeile davon ist „SEO-Text” im schlechten Sinn. Es ist schlicht die Struktur, mit der eine Seite die Frage des Besuchers vollständig beantwortet – und genau das misst Google inzwischen erstaunlich gut.

Ein Beispiel aus unserer eigenen Praxis

Wie stark Struktur wirkt, zeigt ein Fall aus unserem eigenen Haus: Unsere Seite Webdesign für Restaurants steht für „webdesign restaurant” auf Platz 1 – nicht wegen Dutzender Backlinks (die hat sie nicht), sondern weil die Seite die Suchintention vollständig bedient: eigene Sektionen für Speisekarten, Reservierung, lokale Suche und Fotografie, echte Branchenbeispiele, konkrete Antworten. In Nischen gewinnt die inhaltlich beste Seite – erst in umkämpften Märkten entscheidet zusätzlich die Autorität der Domain.

Die Lehre für Ihr Projekt: Bevor Budget in Linkaufbau fließt, muss die Seite selbst konkurrenzfähig sein. Andernfalls bewirbt man ein Schaufenster, das beim Betreten enttäuscht.

Werkzeuge, mit denen Sie den Zustand selbst prüfen

  • Google PageSpeed Insights: misst die Core Web Vitals mit echten Nutzerdaten – die mobile Bewertung zählt.
  • Google Search Console: zeigt, für welche Begriffe Sie bereits Impressionen bekommen – die Schlagdistanz-Keywords (Position 8–20) sind Ihre schnellsten Chancen.
  • Ein Blick in den Quelltext: Rechtsklick → „Seitenquelltext anzeigen”: Steht Ihr wichtigster Begriff in Title, H1 und erstem Absatz? Wenn nicht, weiß Google nicht, wofür die Seite antreten soll.
  • Der Handy-Test: Website am Smartphone öffnen, mit einer Hand ein Formular absenden. Alles, was Sie dabei stört, stört Ihre Besucher zuerst.

So sieht ein integrierter Prozess aus

  1. Keyword- und Marktrecherche vor dem ersten Entwurf. Welche Begriffe suchen die Kunden, welche Seiten braucht die Website dafür? Das Ergebnis ist die Seitenstruktur – nicht umgekehrt.
  2. Wireframes mit Inhaltslogik. Überschriftenhierarchie, Textblöcke und interne Verlinkung stehen im Wireframe, bevor Farben und Bilder ins Spiel kommen.
  3. Design mit Performance-Budget. Maximalgrößen für Bilder, Schriften und Skripte werden im Design festgelegt und beim Umsetzen geprüft.
  4. Texte parallel zur Entwicklung. Suchmaschinenoptimierte Inhalte entstehen während der Umsetzung – nicht als Lückenfüller kurz vor dem Livegang.
  5. Technischer SEO-Check vor dem Start. Indexierbarkeit, Meta-Angaben, strukturierte Daten, Weiterleitungen, Ladezeiten – erst wenn das steht, geht die Seite live.

Der Unterschied zur üblichen Reihenfolge ist unscheinbar, aber entscheidend: SEO ist hier kein Gewerk nach dem Design, sondern ein Qualitätsmaßstab im Design. Genau so arbeiten wir bei envyo – Gestaltung und Sichtbarkeit aus einer Hand statt in getrennten Silos.

Die Briefing-Checkliste zum Mitnehmen

Wenn Sie ein Webdesign-Projekt ausschreiben und sicherstellen wollen, dass SEO nicht hinten runterfällt – diese acht Punkte gehören ins Briefing:

  1. Keyword- und Wettbewerbsrecherche vor dem Seitenkonzept – mit dokumentiertem Ergebnis.
  2. Eine Seitenstruktur, in der jede Leistung mit Suchvolumen eine eigene URL bekommt.
  3. Wireframes mit definierter Überschriftenhierarchie (H1–H3) je Seitentyp.
  4. Performance-Budget: Zielwerte für LCP, Gesamtgewicht und Skripte, im Vertrag festgehalten.
  5. Meta-Titel und -Beschreibungen für alle Seiten als Teil des Text-Lieferumfangs.
  6. Strukturierte Daten (Organisation, Leistungen, FAQ) als Standard, nicht als Extra.
  7. Bei Relaunch: Weiterleitungskonzept mit URL-Mapping als eigenes Arbeitspaket.
  8. Zugriff auf Search Console und Analytics ab Tag 1 – Sie besitzen die Daten, nicht die Agentur.

Häufige Fragen

Was bringt mehr: gutes Design oder gutes SEO?

Die Frage stellt ein falsches Entweder-oder auf. Design ohne Sichtbarkeit erreicht niemanden, Sichtbarkeit ohne überzeugende Website konvertiert nicht. Die Projekte, die funktionieren, behandeln beides als eine Aufgabe mit zwei Blickwinkeln.

Kann ich SEO nach dem Website-Launch nachholen?

Teilweise. Texte, Meta-Angaben und einzelne Inhalte lassen sich jederzeit optimieren. Seitenstruktur, URL-Logik und Performance-Architektur dagegen stecken tief im Aufbau der Website – sie nachträglich zu ändern kostet oft so viel wie ein kleiner Relaunch.

Welche Rolle spielen die Core Web Vitals wirklich?

Sie sind ein bestätigter Rankingfaktor unter vielen – kein Zauberhebel, aber ein Hygienefaktor. Deutlich wichtiger ist ihr indirekter Effekt: Schnelle, stabile Seiten halten Besucher, und das zahlt auf alle anderen Signale ein.

Wie erkenne ich, ob eine Agentur beides beherrscht?

Fragen Sie nach dem Prozess: Kommt die Keyword-Recherche vor oder nach dem Design? Gibt es ein Weiterleitungskonzept beim Relaunch? Werden Ladezeiten im Designfreigabe-Termin besprochen? Wer hier konkrete Antworten hat, denkt integriert.

Was kostet suchmaschinenoptimiertes Webdesign?

Die SEO-Grundlagen – saubere Struktur, Meta-Angaben, Performance, strukturierte Daten – gehören in jedes professionelle Webprojekt und sind in seriösen Angeboten enthalten. Laufende Optimierung ist ein eigenes Thema; was sie kostet, schlüsseln wir in einem eigenen Beitrag auf.

Passend dazu: Webdesign · Suchmaschinenoptimierung · Webdesign München · Webdesign Berlin · Was kostet eine Website?