SEO-Grundlagen: Webseitendesign

  Marcel Sarman in SEO Consulting

Befolgen Sie die Tipps in diesem Leitfaden, um ein gutes Ranking in den Google SERPs und mehr Erwähnungen in den KI-Suchen zu erreichen.

Ladezeit der Website verbessern

Eine schnelle Website verbessert die Nutzerfreundlichkeit, erhöht die Verweildauer und sorgt für bessere Platzierungen in den Suchergebnissen. Außerdem bevorzugen KI-Suchmaschinen schnell ladende Seiten. Optimieren Sie daher Ihre Grafiken, übertragen Sie Ihre Dateien in komprimierter Form, richten Sie ein effizientes Caching ein und verzichten Sie auf überflüssigen Code.

Grafiken für Suchmaschinen optimieren

• Passende Bildgröße wählen:Laden Sie Grafiken nur in der Abmessung hoch, in der sie angezeigt werden. Vermeiden Sie es, große Bilder hochzuladen und nachträglich per CSS zu verkleinern. Dadurch verlängert sich die Ladezeit. Ein Bild, das mit 200 mal 200 Pixeln angezeigt werden soll, sollte auch nur in dieser Größe und nicht mit größeren Abmessungen hochgeladen werden.
• Dateigröße minimieren:Reduzieren Sie mit Komprimierungs-Tools die Dateigröße. Für das menschliche Auge ist dabei kein Qualitätsverlust erkennbar, allerdings verkürzt sich die Ladezeit der Bilddatei.
• Moderne Dateiformate:Setzen Sie neben klassischen Formaten (.jpg, .png) auch auf WebP, das bei gleicher optischer Qualität deutlich kleinere Dateigrößen bietet. Auch SVG-Vektorgrafiken sind eine gute Wahl. Bei minimaler Dateigröße und bleiben diese auf jedem hochauflösenden Display gestochen scharf.

 Dateien komprimiert übertragen

Aktivieren Sie die serverseitige Komprimierung via GZIP und übertragen Sie Ihre Webdateien ressourcenschonend an den Browser. Dort werden die komprimierten Daten entpackt und im ursprünglichen Format dargestellt.

Beispiel:

1. Der HTML-Code Ihrer Website wird auf dem Server komprimiert
2. im GZIP-Format übertragen
3. und im Browser des Nutzers wieder als HTML entpackt

Dadurch sinkt die Datenmenge und die Seite lädt schneller. Suchmaschinenbots und KI-Crawler können Ihre Inhalte dann effizienter erfassen.

Das folgende Code-Snippet für die .htaccess-Datei (für Apache-Webserver) aktiviert die GZIP-Komprimierung für die wichtigsten Dateitypen wie HTML, CSS, JavaScript und Grafiken:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
AddOutputFilterByType DEFLATE application/javascript application/x-javascript application/json
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml application/rss+xml
AddOutputFilterByType DEFLATE image/svg+xml
</IfModule>


Testen Sie auf der Seite https://www.giftofspeed.com/gzip-test/, ob GZIP für Ihre Seite aktiviert ist.

Screenshot giftofspeed.com

Effizientes Caching einrichten

Beim Browser-Caching werden statische Elemente Ihrer Website direkt im Cache des Browsers und auf dem Gerät des Nutzers zwischengespeichert, sobald der User die Seite erstmals aufruft. Bei einem erneuten Besuch müssen diese Daten dann nicht noch einmal vom Server angefordert werden. Das Laden der Elemente erfolgt stattdessen lokal aus dem Cache und die Ladezeit sinkt.

Aktivieren Sie das Browser-Caching in der .htaccess-Datei (mit dem Apache-Modul mod_expires) und legen Sie sinnvolle Cache-Zeiten für die verschiedenen Dateitypen fest:

<IfModule mod_expires.c>
ExpiresActive On
# Standard-Cache-Dauer für nicht explizit genannte Dateitypen (z. B. 1 Stunde)
ExpiresDefault "access plus 1 hour"
# Bilder und Icons (1 Monat)
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType image/avif "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
# CSS und JavaScript (1 Monat)
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# HTML-Dokumente (15 Minuten, um Änderungen schnell zu zeigen)
ExpiresByType text/html "access plus 15 minutes"
</IfModule>


Auf überflüssigen Code verzichten

Halten Sie Ihren HTML- bzw. CSS-Code so schlank wie möglich. Entfernen Sie ungenutzte Elemente und binden Sie möglichst wenig Javascript ein. Ein minimierter Quelltext hilft Suchmaschinen- und KI-Crawlern, Ihre Inhalte fehlerfrei zu erfassen und erhöht die Ladegeschwindigkeit.

Moderne Websites sind ohne JavaScript kaum denkbar. Das Problem: Der Browser lädt JavaScript-Dateien nacheinander und blockiert so das Rendering. Viele Skripte im Header führen dazu, dass CSS-Styles und Grafiken nicht geladen werden und die Seite unvollständig angezeigt wird.

Verhindern Sie diesen Effekt:

• Verschieben Sie Ihr Javascript in den Footer und binden Sie die JavaScript-Dateien am Ende des Dokuments (vor dem schließenden </body>-Tag) ein. So bauen sich Layout und Bilder vor dem Laden der Skripte auf.
• Nutzen Sie das Attribut defer. Die Skripte bleiben dann im Header. Der Browser lädt die Skripte im Hintergrund und führt diese erst nach dem vollständigen Aufbau des HTML-Dokuments aus.

Mobile First: Responsives Webdesign anwenden

Moderne Websites müssen sich flexibel an jede Displaygröße anpassen, um auf dem Smartphone leicht bedienbar, übersichtlich gestaltet und fehlerfrei lesbar zu sein. Nicht-responsive Websites haben keine Chance auf Top-Rankings bei Google oder auf Erwähnungen (Mentions) in KI-Suchergebnissen. Google nutzt ausschließlich den Mobile-First-Index und auch KI-Suchen bevorzugen die Smartphone-Ansicht.

• Gestalten Sie Ihre Website nach dem „Mobile-First“-Prinzip. Entwickeln Sie das Layout zuerst für das Smartphone und dann für Tablets und Desktop-Monitore.
• Konzentrieren Sie sich auf das Wesentliche. Der schmale Smartphone-Bildschirm zwingt Sie dazu, Inhalte auf den Punkt zu bringen und auf überflüssige Elemente zu verzichten.
• Achten Sie auf große Buttons und eine gut lesbare Schriftgröße. User bedienen Ihre Seite dann ohne Zoomen.

Nutzerzentriertes Webdesign

Beantworten Sie die Fragen Ihrer Nutzer und erfüllen Sie die individuellen Bedürfnisse Ihrer Besucher. Diese Überlegungen  bilden die Grundlage jeder erfolgreichen Website-Entwicklung. Schreiben Sie leicht verständlich und achten Sie bei der Seitengestaltung auch auf intuitive Bedienbarkeit. Das erhöht die Verweildauer auf Ihrer Website und führt zu besseren Rankings. KI-Suchmaschinen suchen gezielt nach gut strukturierten und verständlichen Texten, sodass sich auch in diesem Bereich Ihre Performance verbessert.

Sinnvolle Hauptnavigation gestalten

Eine durchdachte Hauptnavigation ist für Nutzer und Suchmaschinenbots wichtig. Gestalten Sie Ihr Menü daher leicht bedienbar, verständlich und übersichtlich.

Beschränken Sie sich auf wenige Menüpunkte. Fünf bis sieben Menüpunkte gelten dabei als optimal. Benennen Sie die Menü-Elemente eindeutig, dann wissen die User sofort, welche Inhalte sich dahinter verbergen. Vermeiden Sie für normale Nutzer unverständliche Fachbegriffe und achten Sie besonders auf die mobile Darstellung Ihres Menüs.

Breadcrumb-Navigation einbauen

Eine Breadcrumb-Navigation erleichtert Ihren Usern die Orientierung und verbessert gleichzeitig die interne Verlinkung Ihrer Website.

Nutzer sehen sofort die hierarchische Inhaltsstruktur und wechseln schneller zwischen über- und untergeordneten Seiten. Die erhöhte Nutzerfreundlichkeit bietet klare SEO-Vorteile.

Ergänzen Sie die Breadcrumbs durch strukturierte Daten (Schema.org), Suchmaschinen wie Google können den Pfad dann als Rich Snippet direkt in den SERPS anzeigen.

Das erhöht die Klickrate (CTR) und die Besucherzahl.

Interne Suchfunktion integrieren

Erleichtern Sie Ihren User durch eine interne Suchfunktion das schnelle Finden wichtiger Inhalte. Bereiten Sie die Suchergebnisse optisch ansprechend und nach Relevanz sortiert auf.

Ergänzen Sie gegebenenfalls Filter- und Sortierfunktionen und eine Autocomplete-Funktion. Die Analyse der internen Suchanfragen gewährt Ihnen wertvolle Einblicke in die genauen

Bedürfnisse und Interessen Ihrer Zielgruppe. Setzen Sie die Suchergebnisseite auf noindex und Stellen Sie so sicher, dass Google ausschließlich redaktionelle Inhalte rankt.

Texte übersichtlich gliedern

Lockern Sie Ihre Texte durch Zwischenüberschriften, Listen oder Grafiken auf. Google und KI-Suchen bevorzugen Content mit unterschiedlichen Inhaltsarten. Vermeiden Sie lange Textblöcke und achten Sie auf die korrekte Formatierung durch HTML-Elemente. Achten Sie bei Überschriften auf die logische Reihenfolge. Wählen Sie eine gut lesbare Schriftgröße und stellen Sie einen ausreichenden Kontrast zwischen Schrift- und Hintergrundfarbe her. Die ansprechende Formatierung verschafft Ihren Texten den Feinschliff.

Über Marcel Sarman

SEO OffPage & Webentwicklung

Marcel Sarman ist bei ABAKUS für den nationalen und internationalen Basislinkaufbau zuständig. Außerdem betreut er die ABAKUS Website und entwickelt sie weiter. Er kennt sich also nicht nur bestens mit Webkatalogen und Foren aus, sondern ist unser Experte für HTML5, CSS3 und WordPress.
Alle Artikel von: Marcel Sarman