Webdesign

SEO-optimiertes Webdesign: die Checkliste

Die Checkliste prüft URL-Struktur, Überschriftenhierarchie, Ladezeit und strukturierte Daten schon in der Designphase und vermeidet so Fehler, die sich nach dem Livegang nur schwer korrigieren lassen.

Aurora YazılımRedaktionsteam 6 Min. Lesezeit
SEO-optimiertes Webdesign: die Checkliste
Was ist SEO-gerechtes Webdesign?

SEO-gerechtes Webdesign bedeutet, eine Website von Grund auf so aufzubauen, dass Suchmaschinen sie leicht crawlen und verstehen können. Sprechende URLs, genau eine H1 pro Seite mit einer sinnvollen Überschriftenhierarchie, eine schnelle und mobilfreundliche Struktur, einzigartige Title- und Description-Tags, interne Verlinkung, Sitemap und strukturierte Daten sind die Bausteine.

Warum SEO von Anfang an dazugehört

SEO wird oft als Leistung betrachtet, die erst nach dem Livegang hinzukommt. Dabei fallen viele Entscheidungen, die über die Sichtbarkeit in der Suche bestimmen, schon in Design und Entwicklung: Seitenstruktur, URL-Aufbau, die Auszeichnung der Überschriften, das Laden der Bilder und die Technologie, mit der die Seiten erzeugt werden.

Sind diese Entscheidungen falsch, gleicht nachträgliche SEO-Arbeit dem Flicken eines Gebäudefundaments von außen. Eine geänderte URL-Struktur erfordert Weiterleitungen, eine schwerfällige Oberfläche muss neu programmiert werden. Von Anfang an richtig aufzusetzen ist günstiger und nachhaltiger.

Die folgende Checkliste fasst die technischen und strukturellen Punkte zusammen, die in Planung und Entwicklung eines Webprojekts geprüft werden sollten.

Seitenstruktur und URL-Aufbau

Suchmaschinen entdecken eine Website über Links. Eine logische Hierarchie hilft Nutzern wie Crawlern, das Gesuchte schnell zu finden. Seitenstruktur und SEO hängen deshalb direkt zusammen: Wichtige Seiten sollten von der Startseite aus in wenigen Klicks erreichbar sein.

  • Planen Sie für jede Leistung bzw. Produktgruppe eine eigene, dauerhafte Seite.
  • Halten Sie URLs kurz, lesbar und frei von Sonderzeichen und Umlauten, zum Beispiel /webdesign/unternehmenswebsite/.
  • Verwenden Sie in URLs weder Datumsangaben noch IDs oder überflüssige Parameter.
  • Legen Sie Groß- und Kleinschreibung, den abschließenden Schrägstrich und die www-Variante einheitlich fest.
  • Zeigen Sie mit einer Breadcrumb-Navigation (Brotkrümelnavigation), wo sich die Seite innerhalb der Website befindet.
  • Lassen Sie keine verwaisten Seiten zurück, auf die nirgends verlinkt wird.

Überschriftenhierarchie und Meta-Tags

Im visuellen Design unterscheiden sich Überschriften durch Größe und Farbe, im Code durch die Tags H1 bis H6. Setzt ein Designer eine H1 ein, nur weil ein Text groß wirken soll, oder codiert ein Entwickler alle Überschriften mit demselben Tag, versteht die Suchmaschine den Aufbau der Seite falsch.

  • Jede Seite sollte nur eine einzige H1 haben, die das Hauptthema beschreibt.
  • H2 und H3 werden der Reihe nach verwendet und spiegeln die inhaltlichen Abschnitte wider.
  • Für die Schriftgröße gehört eine CSS-Klasse her, kein Überschriften-Tag.
  • Jede Seite erhält ein einzigartiges Title-Tag, in dem das Hauptkeyword möglichst weit vorn steht.
  • Die Meta-Description beschreibt den Nutzen der Seite; derselbe Text sollte sich nicht auf allen Seiten wiederholen.
  • Open-Graph-Tags sorgen für eine saubere Darstellung beim Teilen.
htmlGrundlegende Head-Tags
<title>Unternehmenswebsite erstellen lassen | Firmenname</title>
<meta name="description" content="Kurze Beschreibung, die den Nutzen der Seite erklärt.">
<link rel="canonical" href="https://www.ornek.com/web-tasarimi/kurumsal-web-sitesi/">
<meta property="og:title" content="Unternehmenswebsite erstellen lassen">
<meta property="og:image" content="https://www.ornek.com/img/paylasim.jpg">

Ladezeit und Core Web Vitals

Die Ladegeschwindigkeit hängt unmittelbar von Designentscheidungen ab. Ein großes Intro-Video, zahlreiche Schriftschnitte oder schwere Animationsbibliotheken bremsen die Seite aus, egal wie sauber der Code ist.

Die Schwellenwerte der Core Web Vitals von Google eignen sich als Designziel: 2,5 Sekunden für LCP, 200 Millisekunden für INP und 0,1 für CLS. Die Metriken erklären wir ausführlich im Beitrag Was sind die Core Web Vitals, praktische Methoden in unserer Anleitung Website-Ladezeit verbessern.

  • Bilder im Format WebP oder AVIF, in der richtigen Größe und mit Angabe von Breite und Höhe.
  • Bilder außerhalb des sichtbaren Bereichs werden verzögert geladen, das Hauptbild hat Priorität.
  • Schriftarten als WOFF2, nur mit den benötigten Schnitten und Zeichensätzen.
  • Kein ungenutztes CSS und JavaScript; nicht kritische Skripte werden verzögert geladen.
  • Caching, Komprimierung und bei Bedarf ein CDN sind eingerichtet.

Mobile Nutzung und Barrierefreiheit

Google verwendet für die Indexierung vorrangig die mobile Version einer Website. Inhalte, die mobil ausgeblendet oder gekürzt werden, gelten für die Suchmaschine unter Umständen als fehlend. Im mobilen Design sollten Sie Inhalte deshalb nicht beschneiden, sondern das Layout neu aufbauen; Details finden Sie auf unserer Seite zum Responsive Webdesign.

Auch Barrierefreiheit und SEO überschneiden sich an vielen Stellen. Aussagekräftige Alternativtexte für Bilder, beschreibende Linktexte, die richtige Reihenfolge der Überschriften und ausreichender Farbkontrast helfen sowohl Menschen mit Behinderungen als auch Suchmaschinen, die Inhalte zu verstehen.

Technische SEO-Einstellungen

Unsichtbare, aber entscheidende technische Einstellungen bestimmen, ob eine Website gecrawlt und indexiert wird. In der Phase des technischen SEO-Designs sollten folgende Punkte geprüft werden:

  • Die gesamte Website wird über https ausgeliefert, http-Adressen leiten dauerhaft weiter.
  • Die XML-Sitemap wird automatisch aktualisiert und an die Search Console übermittelt.
  • Die robots.txt sperrt nur Bereiche, die wirklich nicht gecrawlt werden sollen.
  • Auf jeder Seite ist die richtige Canonical-URL gesetzt; Filter- und Sortierseiten erzeugen keinen doppelten Content.
  • Es gibt eine individuelle, hilfreiche 404-Seite und keine defekten Links.
  • Mehrsprachige Websites nutzen hreflang-Tags und je Sprache eine eigene URL.
  • Der Inhalt ist auch ohne ausgeführtes JavaScript im HTML sichtbar.
textEine schlichte robots.txt
User-agent: *
Disallow: /panel/

Sitemap: https://www.ornek.com/sitemap.xml

Strukturierte Daten

Strukturierte Daten erklären der Suchmaschine in einer standardisierten Sprache, was die Informationen auf der Seite bedeuten: Das ist ein Unternehmen, hier ist seine Adresse, das ist ein Produkt und sein Preis, das ist eine häufig gestellte Frage. Das Vokabular Schema.org und das Format JSON-LD sind der gängigste Weg.

Strukturierte Daten verbessern das Ranking nicht direkt, unterstützen aber die Eignung für Rich Results in den Suchergebnissen und das richtige Verständnis des Inhalts. Die Auszeichnungen müssen exakt mit den tatsächlich sichtbaren Informationen auf der Seite übereinstimmen.

  • Organization oder LocalBusiness auf Unternehmenswebsites
  • Service oder Product auf Leistungs- und Produktseiten
  • Article in Blogbeiträgen, BreadcrumbList für die Brotkrümelnavigation
  • FAQPage in FAQ-Bereichen
htmlJSON-LD-Beispiel für Organization
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Firmenname",
  "url": "https://www.ornek.com/",
  "logo": "https://www.ornek.com/img/logo.png",
  "telephone": "+90-000-000-00-00"
}
</script>

Content- und Verlinkungsplan

So solide die technische Basis auch ist: Es ist der Inhalt, der die Suchmaschine zum Besucher führt. Wer in der Designphase festlegt, welche Suchintention jede Seite bedienen soll, kann Textflächen und Abschnitte entsprechend planen. Die Keyword-Recherche gehört zusammen mit der Sitemap erarbeitet.

Interne Links transportieren sowohl Nutzer als auch Ranking-Kraft zwischen den Seiten. Verlinken Sie von Leistungsseiten auf passende Blogbeiträge und von Blogbeiträgen auf Leistungsseiten, mit natürlichen, beschreibenden Linktexten. Verwenden Sie statt “hier klicken” aussagekräftige Formulierungen wie “Unternehmenswebsite erstellen lassen”.

Beim Relaunch einer bestehenden Website verhindert der Abgleich dieses Plans mit den alten Inhalten, dass wertvolle Seiten verloren gehen. Worauf es bei einem Relaunch ankommt, haben wir in unserer Anleitung zum Website-Relaunch zusammengestellt; weitere Beiträge zum Thema finden Sie in der Kategorie Webdesign.

Erfolgsmessung nach dem Livegang

Eine SEO-gerechte Website sollte ab dem Tag des Livegangs gemessen werden. Fügen Sie die Website zur Search Console hinzu, übermitteln Sie die Sitemap und beobachten Sie die Berichte zu Indexierung und Core Web Vitals. Verfolgen Sie im Analyse-Tool organischen Traffic, Landingpages und Conversions getrennt.

Werten Sie in den ersten Monaten aus, welche Seiten an Sichtbarkeit gewinnen, bei welchen Suchanfragen Sie erscheinen und wie hoch die Klickraten sind, und aktualisieren Sie Inhalte und Überschriften entsprechend. Das ist eine fortlaufende Aufgabe; für regelmäßiges Reporting und Optimierung können Sie unsere Leistung SEO und Analyse nutzen. Auch die laufende Überwachung der Ladezeit sollte mit Speed- und Performance-Optimierung in diesen Zeitplan aufgenommen werden.

Häufig gestellte Fragen

01Bringt eine SEO-gerechte Website Platz 1?

Kein Design kann ein bestimmtes Ranking versprechen. Eine SEO-gerechte Struktur schafft die Grundlage dafür, dass die Website korrekt gecrawlt, verstanden und mit guter Nutzererfahrung ausgeliefert wird; das Ranking selbst bestimmen Content-Qualität, Wettbewerb und Vertrauenssignale gemeinsam.

02Woran erkenne ich, ob meine Website SEO-gerecht ist?

Die Berichte zu Indexierung und Nutzererfahrung in der Search Console, die Ergebnisse von PageSpeed Insights und die Überschriftenstruktur im Seitenquelltext liefern einen guten Einstieg. Ein umfassender technischer Crawl deckt zudem versteckte Probleme wie defekte Links und doppelten Content auf.

03Sind mit JavaScript gebaute Websites SEO-tauglich?

Das können sie sein, doch der Inhalt muss der Suchmaschine als fertiges HTML ausgeliefert werden. Lösungen mit serverseitigem Rendering oder statischer Generierung lösen dieses Problem von Anfang an.

04Wann zeigt SEO Wirkung?

Die Dauer hängt vom Alter der Website, vom Wettbewerb und vom Umfang der Inhalte ab. Die Wirkung technischer Korrekturen zeigt sich nach dem Crawling, der Aufbau von Content und Autorität dagegen zieht sich in der Regel über Monate.

SEO-gerechtes Webdesign macht Sichtbarkeit in der Suche nicht zur nachträglichen Ebene, sondern legt sie ins Fundament der Website. Um diese Liste von der URL-Struktur bis zu den strukturierten Daten von Anfang an in Ihrem Projekt umzusetzen, lernen Sie unsere Leistung SEO-gerechtes Webdesign kennen; wenn Sie eine neue Website planen, machen Sie sich mit unserem allgemeinen Webdesign-Ansatz vertraut.