SEO-Webdesign.
Vom Wireframe an.

Warum Nachrüsten die teure Variante ist

SEO betrifft drei Ebenen: die Struktur der Website, den Aufbau der einzelnen Seite und die technische Umsetzung. Alle drei werden im Design festgelegt, lange bevor eine Zeile Code entsteht. Wenn die Seitenstruktur erst nach dem Design an den Suchbedarf angepasst wird, ändern sich Navigation, Seitentypen und Templates — also genau die Dinge, die den Designaufwand ausmachen.

Struktur: das Fundament

Die Seitenstruktur ist die wichtigste SEO-Entscheidung überhaupt und gleichzeitig eine reine Konzeptaufgabe. Grundregel: eine Suchintention, eine Seite. Wer drei Leistungen auf einer Seite bündelt, konkurriert mit Anbietern, die für jede einzelne eine eigene Seite haben — und verliert.

• Flache Hierarchie: wichtige Seiten maximal drei Klicks von der Startseite entfernt
• Sprechende URLs ohne Parameter, klein geschrieben, mit Bindestrichen, ohne Datum
• Ein Thema pro Seite, erkennbar an H1 und Title
• Themencluster statt Einzelseiten: eine Übersichtsseite, die auf Detailseiten verweist, die zurückverlinken
• Keine doppelten Inhalte über mehrere URLs — Filter und Sortierungen brauchen Canonicals

Layoutentscheidungen mit SEO-Folgen

Nicht jede Designentscheidung hat SEO-Konsequenzen. Diese hier haben es:

Umgekehrt ist vieles egal, was oft diskutiert wird: Farbwahl, Anzahl der Spalten, Animationen (solange sie performant sind), Bildstil, Rundungen. Gestaltet frei — die SEO-relevanten Punkte sind überschaubar und klar benannt.

Typografie und Semantik

Überschriften sind kein Gestaltungsmittel, sondern eine Struktur, die zufällig auch gestaltet wird. Wenn ein Designer eine Zeile groß setzt, weil sie wichtig aussehen soll, wird daraus im Code oft eine H2 — auch wenn sie inhaltlich keine Ebene eröffnet. Das verwirrt Suchmaschinen und Screenreader gleichermaßen.

• Genau eine H1 pro Seite, die das Seitenthema benennt
• H2 für Hauptabschnitte, H3 für Unterpunkte — keine Ebene überspringen
• Optische Größe und semantische Ebene entkoppeln: eine H3 darf groß aussehen
• Fließtext mindestens 16 px, Zeilenlänge 60–80 Zeichen, Zeilenhöhe ab 1,5
• Webfonts selbst hosten, auf zwei Schnitte begrenzen, Hauptschrift vorladen

Bilder und Medien

• Moderne Formate: WebP oder AVIF statt JPEG, spart typischerweise 40–70 Prozent Dateigröße
• Responsive Bilder mit srcset — kein 2400-px-Bild an ein Smartphone ausliefern
• width und height im Markup setzen, sonst springt das Layout und der CLS-Wert leidet
• Aussagekräftige Dateinamen statt Kameranamen
• Alternativtexte beschreiben die Information, nicht das Motiv — dekorative Bilder bekommen alt=""
• Videos nicht als Autoplay-Hintergrund im Hero: kostet Ladezeit, Datenvolumen und LCP

Navigation und interne Links

Interne Verlinkung ist der am stärksten unterschätzte Rankingfaktor, weil sie vollständig in eurer Hand liegt. Jeder interne Link sagt Google zwei Dinge: dass die Zielseite wichtig ist und worum es dort geht.

• Hauptnavigation als echte Links, nicht als JavaScript-gesteuerte Menüs ohne href
• Maximal sieben Hauptpunkte — längere Menüs verwässern die Signalwirkung
• Beschreibende Linktexte: „Website-Wartung im Detail“ statt „hier klicken“
• Aus jedem längeren Text mindestens zwei Links auf thematisch passende Seiten
• Breadcrumbs mit BreadcrumbList-Schema, besonders bei tieferen Strukturen
• Footer nicht mit hunderten Links füllen — das ist ein Muster, das eher schadet als hilft

Fünf hartnäckige Mythen

1. 1„Mehr Text ist besser“ — Nein. Passender Text ist besser. Eine Seite kann mit 400 Wörtern gewinnen, wenn sie die Frage vollständig beantwortet.
2. 2„Keywords müssen X-mal vorkommen“ — Keyword-Dichte ist seit Jahren kein Faktor. Semantische Abdeckung des Themas ist einer.
3. 3„Onepager ranken nicht“ — Sie ranken für genau ein Thema. Das reicht, wenn ihr nur eines habt.
4. 4„Animationen schaden SEO“ — Nur, wenn sie die Ladezeit oder Bedienbarkeit verschlechtern. Performante Animationen sind unkritisch.
5. 5„SEO macht Design hässlich“ — SEO stellt Anforderungen an Struktur, Kontrast und Ladezeit. Alles drei ist gutes Design.

So baut ihr SEO in den Designprozess ein

1. 1Vor dem Konzept: Keyword-Recherche, Suchintentionen clustern, Seitenstruktur daraus ableiten
2. 2Im Wireframe: pro Seite Zielkeyword, H1, Einleitung und Ziel-CTA festlegen
3. 3Im Design: Überschriftenebenen definieren, Kontraste prüfen, Bildformate festlegen
4. 4In der Entwicklung: semantisches HTML, strukturierte Daten, Ladezeit-Budget einhalten
5. 5Vor dem Launch: Titles und Descriptions je Seite, Weiterleitungsplan, Search Console vorbereiten
6. 6Nach dem Launch: vier Wochen beobachten, dann anhand echter Daten nachschärfen

Der Aufwand für diese Integration liegt bei etwa fünf bis zehn Prozent des Projektbudgets. Die nachträgliche Reparatur einer fertig gestalteten Website kostet regelmäßig das Drei- bis Fünffache davon.