Sind wir mal ehrlich: Niemand schaut sich heutzutage mehr als die erste Seite der Suchergebnisse bei Google oder anderen Suchmaschinen an. Anstatt die zweite oder dritte Seite ebenfalls zu überfliegen, wird die Suche lieber nochmal angepasst. Daher ist es selbstverständlich, dass jede Website möglichst weit oben im Suchindex vertreten sein möchte um Besucher*innen und Kund*innen anzulocken. Eine Stellschraube, mit der sich dieses Ziel erreichen lässt, ist technische SEO.

Während es in den Anfängen des Internets noch recht einfach war, durch bestimmte Keywords oder viele Links zu der Website höher im Suchindex zu landen, sieht das Ganze heute etwas anders aus. Bedingt durch die extrem schnell wachsende Anzahl an neuen Websites, die alle um die Gunst der Besucher*innen buhlen, mussten Google und andere Suchmaschinen sich anpassen und neue Kriterien bei der Erstellung des Indexes mit einbeziehen. Neben dem Inhalt ist nun auch die technische SEO der Website wichtig. Daher haben wir Entwickler*innen immer mehr Punkte auf unserer Liste, die es bei der Umsetzung eines solchen Projektes zu beachten gibt.

Die verschiedenen Optimierungsbereiche

Generell gibt es vier verschiedene Bereiche in der technischen SEO, die es zu beachten gibt und auf die wir hier näher eingehen möchten: Leistung, Barrierefreiheit, Best Practices und Inhalt. Ein sehr gutes Tool, um diese zu überprüfen, stellt Google unter folgendem Link parat: web.dev/measure.

Leistung

Hier wird überprüft, wie gut eure Website im Bereich Performance abschneidet, dieser Punkt ist in sechs Metriken unterteilt:

• First Contentful Paint: Wie lange es dauert, bis der erste Inhalt geladen und dargestellt wird, nachdem der Nutzer die Seite aufgerufen hat.
• Time to Interactive: Die Zeit, bis die Website vollkommen interaktiv ist.
• Speed Index: Zeigt, wie schnell die Inhalte der Website sichtbar sind.
• Total Blocking Time: Die Summe aller Zeiten zwischen dem FCP und der TTI.
• Largest Contentful Paint: Wie schnell der Hauptinhalt geladen ist. Die Ladezeit sollte hier im Idealfall unter 2,5 Sekunden liegen.
• Cumulative Layout Shift: Nachladende Inhalte dürfen die Position der bereits geladenen nicht verändern, zum Beispiel darf ein nachladendes Bild den Text darunter nicht verschieben.

Um dieses Ziel zu erreichen, hilft es meistens nicht nur an einem Knopf zu drehen. Für bessere Ladezeiten empfiehlt es sich die Kompression der einzelnen Assets (Bilder, Videos usw.) via den Einstellungen im Webserver (meistens Apache und/oder Nginx) zu aktivieren. Das führt dazu, dass geringere Datenmengen übertragen werden müssen. Alle gängigen Browser unterstützen die „gzip“-Komprimierung, moderne sogar das deutlich effektivere „Brotli“-Verfahren.

Alle Assets sollten außerdem mit sinnvollen Cache-Richtlinien versehen sein, damit der Nutzer diese nicht bei jedem erneuten Aufruf der Seite neu herunterladen muss. Bilder und Schriftarten zum Beispiel dürfen gerne 30 Tage im Cache des Browsers verweilen, JavaScript und CSS Dateien sogar 365 Tage. Aber was, wenn in diesem Zeitraum Änderungen an diesen Dateien vorgenommen wurden? Wie bekommt der/die Nutzer*in dann die neuen Versionen? Das ist dank Cache-Busting kein Problem. Der Build-Prozess der Website wird so angepasst, dass die Dateinamen mit einem automatisch generierten Hash versehen werden. Ist also eine neue Version vorhanden, erkennt der Browser dies.

Damit auch unser CLS Score nicht durch die Decke geht, muss jedes Bild und Video eine Breiten- und Höhenangabe haben.

Barrierefreiheit

Auch die Barrierefreiheit einer Website wird immer wichtiger. Es gibt Entwickler, die sich um nichts anderes kümmern, als die Website für Menschen mit Einschränkungen genauso benutzerfreundlich zu gestalten wie für Menschen ohne. Aber was macht eine zugängliche Website aus? Menschen mit Einschränkungen, wie zum Beispiel einer Sehschwäche, sollten die Website genauso nutzen können wie andere Menschen ohne.

Um dies zu ermöglichen, muss die technische SEO bestimmte Dinge berücksichtigen. Nehmen wir zum Beispiel die Überschriften: Sie sollten immer in einem geeigneten Tag (h1 bis h6) eingebettet sein (WICHTIG: nur ein „h1“-Tag pro Seite).

Bilder benötigen immer ein „alt“-Attribut, das den Inhalt des Bildes beschreibt. Auf diese Weise können auch Menschen mit Sehbehinderungen über einen Screenreader verstehen, was dort angezeigt wird.

Dasselbe gilt für Links, die Icons enthalten, wobei diese jedoch stattdessen das Attribut „aria-label“ verwenden. Links sind zudem hervorzuheben, wenn man mit der Tab-Taste auf der Website navigiert.

Auch wenn die genannten Punkte nur ein Tropfen auf den heißen Stein sind, so helfen sie doch ungemein, die Website zugänglicher zu gestalten.

Best Practices

Dieser Bereich ist definitiv der technischste. Hier geht es nicht nur um die Website selbst, sondern auch um den Server, auf dem sie gehostet wird. In der Konfiguration des Webservers, in der Regel Apache oder Nginx, werden idealerweise so genannte „Header“ gesetzt, die beispielsweise den Zugriff einschränken und dem Browser mitteilen, wie lange er Assets im Cache halten soll. Um Bandbreite zu sparen, empfiehlt es sich, den gesamten Inhalt der Seite zu komprimieren, bevor er vom Server an den Browser gesendet wird (siehe oben). Ein gültiges SSL-Zertifikat, um eine sichere Verbindung zur Website über https zu ermöglichen, darf auch nicht fehlen.

Bei der Realisierung der Website sollten bestimmte Code-Standards eingehalten werden. So sollten veraltete/nicht mehr unterstützte Skripte unbedingt vermieden werden und die verwendeten Skripte dürfen keine Fehlermeldungen in der Konsole des Browsers ausgeben. Bei Bildern ist neben dem bereits erwähnten „alt“-Tag darauf zu achten, dass immer die passende Größe für den Bildschirm der Nutzer*innen ausgegeben wird, schließlich macht es wenig Sinn, ein Bild von 2000 x 1200 px auf einem Smartphone darzustellen.

Inhalt

Die Crawler von Suchmaschinen werden zunehmend darauf trainiert, Websites so zu lesen, wie es Menschen tun, und achten weniger auf versteckte Informationen. Dennoch sollten verschiedene Tags in den Kopf des HTML-Dokuments aufgenommen werden. Die offensichtlichsten davon sind der Titel, die Beschreibung und die Schlüsselwörter der Seite.

Open-Graph- und Twitter-Meta-Tags sind ein absolutes Muss, damit die Website auch bei der Teilung auf anderen Plattformen wie den sozialen Medien eine gute Figur macht und die Nutzer zum Anklicken einlädt. Ebenfalls sehr wichtig sind eine gültige „robots.txt“, so dass Google die Seite nicht von der Suche ausschließt und kanonische Links, die Google mitteilen, welche Links in den Suchergebnissen erscheinen sollen.

Wo wir gerade beim Thema Links sind: Ein weiterer wichtiger Bestandteil einer Website ist eine Sitemap. Dies ist eine komplette Übersicht aller auf der Website enthaltenen Seiten mit ihren jeweiligen Unterseiten und können über ein SEO-Tool wie „Yoast“ oder „Rank Math“ für WordPress erstellt werden.

Und nun, wo und wie fange ich am Besten an?

Wie ihr seht, ist technische SEO sehr umfangreich. In diesem Beitrag haben wir nur an der Oberfläche gekratzt. Weitere Themen wie „Structured Content“, „303-Weiterleitungen“ und „Content Delivery Networks“ sind nur ein paar Stichworte mehr, die in diesem Zusammenhang nennenswert sind. Außerdem sollte betont werden, dass all dies nicht nur dazu dient, in den Suchmaschinen-Rankings höher zu erscheinen, sondern auch eine deutlich verbesserte Nutzer*innenerfahrung gewährleistet.

Das bereits erwähnte Tool von Google (web.dev/measure) ist ein wirklich guter erster Schritt, um sich eine grobe Übersicht des aktuellen Stands eurer Seite zu verschaffen.

Wenn dieser Artikel euer Interesse geweckt hat und ihr mehr über das Thema technische SEO erfahren wollt oder an einem Audit für eure eigene Website interessiert seid, kontaktiert uns doch einfach oder schaut euch unser Webinar „Warum SEO heute der falsche Ansatz ist“ an. Wir streben stets danach, das Beste für unsere Kunden herauszuholen und stehen euch jederzeit mit Rat und Tat zur Seite!