SEO: Der Code entscheidet, nicht das Keyword

In meiner nun gut 20-jährigen Tätigkeit im Webpublishing bin ich immer wieder den gleichen Indifferenzen gegenüber dem einen oder anderen Aspekt dieser Disziplin begegnet. Das eine Mal ist es die Accessibility, mit der man nichts zu tun haben will, das andere Mal ist es die Suchmaschinenoptimierung, auf die es nun wirklich nicht ankomme. Als nun aber kürzlich ein so genannter SEO-Experte allen Ernstes meinte, dass den Suchmaschinen alle Semantik von den Schlüsselwörtern zugetragen wird, hörte bei mir der Spass unwiederbringlich auf. Die ganze Debatte um die mit HTML5 neu geschaffene Klasse von semantischen Tags wie <nav>, <header>, <section>, <article>, <footer> usw. scheint an ihm völlig vorbeigegangen zu sein.

Um dieser nicht wenig verbreiteten Meinung etwas entgegenzuhalten, habe ich mir vorgenommen, SEO sozusagen von unten, vom HTML-Code her zu beleuchten. Ich stelle die These in den Raum, dass der auslösende Faktor für den Analysevorgang einer Suchmaschine nicht ein bestimmtes Keyword ist, zum Beispiel das Seiten-Keyword, sondern ein bestimmtes HTML-Tag, zum Beispiel das dem Seiten-Keyword zugrundeliegende <h1>-Tag.

Diese These ist für meine Ansatz zentral. Auf Grund der enormen Rechenleistungen der heutigen Suchmaschinen geht vergessen, dass der dem Content unterliegende HTML-Code eine wesentliche Rolle spielt bei der Optimierung von Webinhalten für Suchmaschinen. Viele SEO-Spezialisten legen ihr Augenmerk zu stark auf die Keyword-Optimierung, weil sie der Meinung sind, dass die Algorithmen der Suchmaschinen Bedeutung vorwiegend aus der Analyse der indexierten Texte ermitteln können, während der HTML-Code dagegen vernachlässigt werden kann.

Im Gegensatz zu den “Keyword-zentrierten SEO-Fachleuten” steht diese Arbeit. Sie zeigt auf, wie sich optimierter Code auf die Content-Optimierung, die Accessibility und Usability auswirkt und somit zum gesamten Optimierungserfolg beiträgt.

SEO-Faktoren

Es existieren unzählige Faktoren, die zu berücksichtigen sind, wenn man eine Website fit für die Suchmaschinen machen will. Einige von SEO-Fachleuten vernachlässigten Aspekte werden im Folgenden behandelt. Dazu zählen der HTML-Code, der Content, hier fokussiert auf den Text, die Accessiblity (Barrierefreiheit) und die Performance.

Bestandteile, die zu einer suchmaschinenoptimierten Website beitragen.

Bestandteile einer suchmaschinenoptimierten Website.

W3C-valider HTML-Code

HTML (Hypertext Markup Language) ist eine so genannte Auszeichnungssprache (Markup Language), die mit einem beliebigen Texteditor auf jedem Computer-Betriebssystem geschrieben und gelesen werden kann.

Eine mit HTML ausgezeichnetes Dokument enthält standardisierte HTML-Befehle, so genannte Tags. Diese Tags zeichnen bestimmte Textelemente aus, woher auch der Name “Auszeichnungssprache” stammt. Durch die so ausgezeichneten Elemente erhält der reine Fliesstext eine hierarchische Struktur.

Die Funktion der HTML-Tags erschöpft sich aber nicht nur darin, den Fliesstext hierarchisch zu gliedern, HTML-Tags gliedern den Inhalt eines HTML-Dokuments auch semantisch. So interpretiert ein Browser ein mit dem <h1>-Tag ausgezeichnetes Textelement, z. B <h1>Titel</h1>, hierarchisch. Mit anderen Worten: für den Browser steht ein solcherart ausgezeichnetes Textelement über einem mit <h2>, z. B. <h2>Untertitel</h2>, ausgezeichneten Textelement. Demzufolge gibt der Browser ein <h1>-Element im Browserfenster in einer grösseren Schrift wieder, als ein <h2>-Element.

Eine Suchmaschine interpretiert einen Tag nicht nur hierarchisch, sie ordnet ihm auch Bedeutung zu. Ein <h1>-Tag ist gewichtiger als ein <h2>-Tag. Er hat höhere Bedeutung, er steht in einem HTML-Dokument bzw. einer HTML-Seite zuoberst, er steht sozusagen für das Dokument.

Woher “weiss” nun die Maschine das? Sie “weiss” es nicht, weil sie Texte interpretieren, Begriffe einordnen kann; sie “weiss” es, weil sie darauf programmiert wurde.

Ein Titel steht zuoberst auf Grund von gesellschaftlicher Konvention. Die Menschen wissen, dass in der Regel am Anfang eines jeden Textes ein Titel steht. Sie wissen, dass dieses Textelement hervorgehoben und grösser als der restliche Text ist, und sie wissen, dass dieser Titel in der Regel in verdichteter Form den Inhalt (Bedeutung) des ihm subsumierten Textes wiedergibt.

Die äusseren Elemente – Einordung im Text, Hervorhebung und Schriftgrösse – signalisieren dem Menschen die Funktion: “Das ist ein Titel, der dir kurz und bündig sagt, um was es im folgenden Text geht.” Wenn es sich um einen “guten” Titel handelt, wenn er in kürzester Form, den Inhalt des ihm subsumierten Textes wiedergegen kann, dann braucht ein Mensch den Text gar nicht mehr zu lesen – er weiss allein anhand des Titels, um was es im folgenden Text geht.

Eine Suchmaschine dagegen erkennt einen Titel nicht an der Ausformung des Textes, sondern einzig und allein anhand der Auszeichnung durch den HTML-Tag, in diesem Beispiel den <h1>-Tag. Hat die Suchmaschine anhand des Tags festgestellt, um welches ausgezeichnete Textelement es sich handelt (<h1> = Titel erster Ordnung, macht eine Kernaussage über den folgenden Text, muss das wichtigste Keyword enthalten), vergleicht sie den Titel mit dem subsumierten Text. Kommt das im Titel enthaltene Keyword im Text vor und in welcher Dichte? Enthält der Text semantische Kookkurrenzen, also Begriffe, die oft im Zusammenhang mit dem Titelschlüsselwort auftreten?

Das gehäufte Vorkommen bestimmter Schlüsselwörter und der semantischen Kookkurrenzen “erschliesst” der Suchmaschine – unter Anwendung statistischer Verfahren – den thematischen Schwerpunkt des Textes.

Im Folgenden wird anhand einiger ausgesuchter Tag-Elemente die Code-Optimierung veranschaulicht. Dabei handelt es sich um einflussreiche Bereiche, Elemente der ersten Klasse, die sorgfältig optimiert werden sollten.

Das Titelelement

Das HTML-Titel-Element <title> erscheint in der Titelleiste des Browsers oder im Tab des Browserfensters. Es definiert den Titel des HTML-Dokuments bzw. der HTML-Seite.

Der Text innerhalb des <title>-Tags im <head>-Bereich gehört mit zu den wichtigsten Elementen bei der Optimierung. Er wird nicht nur von sämtlichen Suchmaschinen hoch gewichtet, sondern erscheint auch in beinahe jeder Ergebnisliste prominent in gefetteter und unterstrichener Schrift.

Die enorme Bedeutung des Titels basiert darauf, dass nirgendwo sonst der Inhalt des Dokuments so knapp und präzise formuliert werden muss. Der Titel muss inhaltlich nicht nur den Suchmaschinen, sondern auch den Nutzern gefallen, beim Lesen ansprechend sein und auf den ersten Blick vermitteln, dass sich dahinter das gewünschte Dokument für den Suchenden verbirgt.

Da der Text des <title>-Tags als Lesezeichenvorlage für den Browser genutzt wird, sollte das wichtigste Schlüsselwort zu Beginn des Titeltextes stehen, was das Wiederauffinden in der Lesezeichenleiste erleichtert.

Beispiel:

<title>SEO: Das Titel-Tag</title>

Das Navigationselement

Das HTML-Navigationselement <nav> stammt aus einer Reihe neu geschaffener, semantisch stark markierter HTML5-Tags. Es repräsentiert einen Teilbereich einer HTML-Seite und enthält eine Anzahl von Links, die auf andere HTML-Seiten oder auf Bereiche innerhalb einer HTML-Seite verweisen.

Bis anhin wurde die Navigation mit generischen, rein funktionalen div-Tags umschlossen, die keinerlei Bedeutung mit sich trugen. Da es sich bei der (Haupt-)Navigation um das zentrale Organ handelt, mit dem eine Website – von Mensch und Maschine – erschlossen werden kann, steht das <nav>-Tag hier stellvertretend für die neue Klasse von HTML5-Tags. Dank diesem neuen Tag sind nun auch Screenreader in der Lage, sehbehinderten bzw. blinden Menschen anhand der Navigationstexte stichwortartigen Überblick über das inhaltliche Angebot der Website zu vermitteln. Die in den Navigationstexten vorhanden Schlüsselwörter dienen aber nicht nur den Screenreadern, sie liefern auch den Suchmaschinen wertvolle Keywords und Verlinkungen für die Indexierung. Navigationseinträge sollten daher immer in Textform und nicht als graphische Elemente vorliegen, da Suchmaschinen keinen Verweistext aus Bildern extrahieren können. Je barrierefreier eine Webseite gestaltet ist, desto besser ist sie von Suchmaschinen indexierbar.

Ein abschliessendes Argument, weshalb die Hauptnavigation eine verstärkte Optimierung erfahren sollte, ist die Stellung innerhalb des HTML-Codes, die relativ weit vorne liegt. Je weiter vorne sich ein Text befindet, umso wichtiger ist er für die Bewertung durch die Suchmaschinen.

Überschriften

HTML stellt bis zu sechs Überschriftenebenen dar (<h1> bis <h6>). Wobei <h1> von Suchmaschinen am höher gewichtet wird als <h2>. Für die Suchmaschinen-Optimierung des Haupttextes sollten die ersten drei Ebenen verwendet werden. <h4>, <h5> und <h6> eignen sich für Randspalten und weniger wichtige Inhaltsbereiche.

Die 6 HTML-Überschriftenebenen

Die 6 HTML-Überschriftenebenen

Jede Seite sollte nur eine <h1>-Überschrift beinhalten. Die suchmaschineoptimierte Überschrift <h1> enthält das Schlüsselwort des Themenschwerpunkts der Seite, sodass Suchmaschinen eindeutig feststellen können, dass das Thema der Seite sich mit dem Haupt- bzw. dem Seiten-Keyword des Haupttitels <h1> deckt.

Während also das Schlüsselwort des Haupttitels für den Themenschwerpunkt der ganzen Seite steht, sollen die Schlüsselwörter der Untertitel (<h2> bis <h6>), die über einem oder mehreren Paragraphen stehen, jeweils den in diesen Paragraphen behandelten Thementeilbereich repräsentieren.

Überschriften sind also gliedernde Elemente, unter denen unterschiedliche Themenkomplexe zu finden sind. Die Überschrift beschreibt mit ihrem Inhalt das, was der Leser im nächsten Abschnitt erfahren kann. Dieser Logik folgen auch die Suchmaschinen bei ihrer Dokumentanalyse.

Suchmaschinen gehen davon aus, dass Stichwörter in Überschriften zur Erschliessung des Themas einer Webseite bedeutender sind als Stichwörter innerhalb des Fliesstextes. Diese Struktur mit einer klaren Gliederung durch Überschriften kommt auch dem Benutzer entgegen, der Webseiten eher „scannt“ als liest.

Hervorhebungen

Texte im Web werden in der Regel nicht gelesen, sondern in einem Scan-Vorgang überflogen. Dieser Befund zur Verbesserung der Textgestaltung decken sich mit einer optimalen Textgestaltung für Suchmaschinen. Man kann so neben der Suchmaschinen-Optimierung gleichzeitig die Usability erhöhen, damit Webnutzer die Texte in höherem Masse erfassen.

Zu den hervorgehobenen Textelementen gehören – neben den Überschriften, deren Rolle bereits weiter oben beschrieben wurde – Links, die Listendarstellung und spezifische Hervorhebungstags wie <strong>, <em> (für emphasis) und <cite>. Diese drei Hervorhebungstags unterscheiden sich von anderen Hervorhebungstags wie <b> (für bold), das in der Ausgestaltung identisch mit <strong> ist, und <i> (für italics), das in der Ausgestaltung identisch mit <em> und <cite> ist, nicht in der Form, dafür aber im Inhalt. Die drei Tags <strong>, <em> und <cite> sind nämlich semantisch markiert. Den Suchmaschinen bedeuten sie, dass im Fall von <strong> und <em> hervorgehobene Schlüsselwörter ausgezeichnet sind, und dass es sich bei mit <cite> ausgezeichneten Texten um z. B. Buch-, Film- oder Musiktitel handelt.

Stellvertretend wird an dieser Stelle Funktion und Bedeutung des <strong>-Tags genauer beschrieben. Gemäss der W3C-Spezifikation erhält ein mit dem <strong>-Tag ausgezeichneter Text starke Bedeutung (Semantik) und wird typischerweise in Fettschrift angezeigt.

Dem <strong>-Element sei das <b>-Element gegenübergestellt. Dieses repräsentiert gemäss W3C "eine Textspanne, die sich in der Auszeichnung [hier ist die typographische Auszeichnung gemeint] von normalen Text unterscheidet, aber keinerlei Bedeutung oder Relevanz transportiert” (vergleich Mozilla Developer Network) .

Für den Rezipienten eines Webtextes ist dieser Unterschied nicht bemerkbar, da beide Tags in der Ausgestaltung nicht voneinander unterscheidbar sind. Für ihn handelt es sich in beiden Fällen um hervorgehobenen Text, um Fokuspunkte des Textes, an denen er sich durchangelt, bis er zu dem Punkt gelangt, der für ihn von Bedeutung ist.

Hervorhebungen steigern also die Effizienz beim rezipieren von Textinhalten; der Besucher kommt schneller zu seinem angestrebten Ziel. Ergo bewerten Suchmaschinen Dokumente mit ausgezeichneten Schlüsselwörtern besser. Aufgrund der oben genannten W3C-Spezifikationen gilt für die Webautoren, dass sie Schlüsselwörter, die den Themeninhalt einer Website repräsentieren mit dem <strong>-Tag auszeichnen, Textelemente dagegen, die nichts zum eigentlichen Inhalt der Website beitragen, sollen mit dem <b>-Tag ausgezeichnet werden. Beispiel: In einem Text über eine stattgefundene wissenschaftliche Konferenz, werden die Namen der teilnehmenden Wissenschafter mittels <b>-Tag hervorgehoben, Stichwörter, die das eigentliche Thema der Konferenz repräsentieren, werden dagegen mit dem <strong>-Tag ausgezeichnet. Damit ist beiden Parteien gedient: den Wissenschaftern, die ihre Namen gerne fettgedruckt sehen, auch wenn sie nichts bedeuten und der Suchmaschine, die Bedeutendes von Unbedeutendem unterschieden haben will.

Hyperlinks in HTML werden durch <a>...</a> markiert (a = anchor). Das Anchor-Element kann auf einen Bereich innerhalb eines HTML-Dokumentes verweisen oder auf eine Seite irgendwo im Hyperuniversum.

Der vom <a>-Tag umschlossene Text wird als Anchor-Text bzw. Ankertext bezeichnet. Der Ankertext soll das zentrale Stichwort enthalten, von dem auf der verwiesenen Seite thematisch die Rede ist. Die thematische Passgenauigkeit des Ankertextes mit dem zu erwartenden Inhalt erfüllt die Bedingung einer guten Usability, denn der Besucher weiss so genau, was ihn hinter einem Link erwartet, und zwar bevor er darauf klickt.

Diesem themenrelevanten Linkprinzip messen auch Suchmaschinen viel Relevanz zu. Links werden insbesondere unter Berücksichtigung des Ankertextes analysiert und bilden damit in Bezug auf die hypertextuellen Gewichtungen ein wichtiges Kriterium der Suchmaschinen-Optimierung.

Da für den Benutzer die optische und inhaltliche Prägnanz der Links höher ist, wenn sie auf die wichtigsten Schlagwörter reduziert werden, empfiehlt es sich, den Suchmaschinen mittels des title-Attributes (title="...") zusätzliche Information bereitzuhalten.

Beispiel:

<a href="http://www.vice.com/" title="Homepage des Onlinemagazins Vice">Vice</a>

Das title-Attribut stellt diese zusätzlichen Informationen nicht nur der Suchmaschine zur Verfügung, auch der Nutzer profitiert. Gleitet er mit der Maus über den Link, blendet der Browser eine kleine Box ein, worin die ergänzende Information erscheint:

Vice

Content

Texte werden im Web in der Regel nicht gelesen, sondern in einem Scan-Vorgang überflogen. Diverse Studien, die das Scan-Verhalten von Website-Nutzern untersuchten, stellten übereinstimmend fest, dass die Nutzer vor allem Inhalte wahrnehmen, die sich im oberen, linken Bereich einer Website befinden. Die folgende Abbildung verdeutlicht diese Wahrnehmung. Die roten Bereiche markieren so genannte Hotspots, wo das Auge beim "Scannen" am längsten haften bleibt. Die wichtigen Schlüsselbegriffe und Links (die auch aus Schlüsselwörtern gebildet werden) gehören deshalb prominent an den Anfang, und zwar innerhalb der ersten 1000 Zeichen. Eine Hervorhebung von Schlüsselwörtern, begünstigt die Bildung von Hotspots, also Bereiche, wo Content verstärkt wahrgenommen wird.

Die „Heatmap“ verdeutlicht, in welchen Bereichen der Nutzer beim Scannen mit den Augen hängen bleibt.Die „Heatmap“ verdeutlicht, in welchen Bereichen der Nutzer beim Scannen mit den Augen hängen bleibt.

Textgliederung

Auch die Gliederung von Texten mittels Überschriften verschieden Grades, Abschnitten und Listen unterstützt den Nutzer beim Scannen von Inhalten. Die thematischen Schwerpunkte sollten dabei in einzelnen Abschnitte unterteilt werden. Dabei ist es von Vorteil, wenn pro Abschnitt ein stark vertretener Hauptgedanke zu finden ist. Suchmaschinen erkennen bei ihrer Analyse Abschnitte anhand des <p>-Tags und werten die einzelnen Abschnitte gegebenenfalls einzeln aus.

Texte mit starker thematischer Gliederung erleichtern das Erfassen von Informationen.Texte mit starker thematischer Gliederung erleichtern das Erfassen von Informationen.

Accessibility

Ein barrierefreies Webangebot ist eine Website, die für alle Nutzer unabhängig von körperlichen und technischen Möglichkeiten uneingeschränkt zugänglich ist (Accessibility).

Wenn von Accessibility die Rede ist, fasst man gemeinhin Menschen mit Behinderung ins Auge. Dabei geht ganz vergessen, dass im Bereich Webzugang viele Formen von Einschränkung existieren, von denen auch nichtbehinderte Menschen betroffen sind. Wenn mit einem Smartphone auf eine Website zugegriffen wird, so steht nur ein sehr kleines Display zur Verfügung. Auch hier also eine Form der Einschränkung. Das Gleiche gilt für den Ausdruck von Webseiten. Viele Seiten im Web lassen sich nur sehr schlecht zu Papier bringen.

Für die Suchmaschinen-Optimierung hat eine barrierefreie Website einen ganz zentralen und entscheidenden Vorteil: Suchmaschinen können ohne Hindernisse die bereitgestellten Inhalte lesen und verarbeiten.

Performance

Auch die Performance, also die Ladegeschwindigkeit von Websites, übt Wirkung auf Mensch und Maschine aus. Web-Performance ist im Wesentlichen mit Benutzererfahrung gleichzusetzen. Seiten, die ihre Inhalte nicht unmittelbar nach der Eingabe einer URL bzw. nach dem Klick auf eine URL, freigeben, sind ein Ärgernis für Web-Nutzer. Deshalb werden Websites, deren Seiten – auch wenn nur einzelne Seiten von langen Ladezeiten betroffen sind – von Suchmaschinen abgestraft.

Auch im Bereich der Performance-Optimierung sollte das Hauptaugenmerk auf den Code gerichtet sein. Bilder oder andere Media-Dateien sind schnell einmal als Bremser identifiziert, der Code dagegen geht in aller Regel vergessen. Gerade die so genannten Content-Management-Systeme (CMS), die heute vermehrt Einsatz finden, sind extrem Code-lastig. So produzieren sie oft unnützen, zum Teil auch fehlerhaften Code, der die Ladezeiten von Webseiten stark verlangsamt und im Falle von schadhaftem Code das Laden von Seiten teils vollständig verunmöglicht.

Webautoren sollten also vor dem publizieren ihres Contents, den Code aus dem Editor kopieren und mit einem spezialisierten Programm auf fehlerhaften Code überprüfen sowie unnötige Leerzeilen und Leerzeichen entfernen.


Quellen

Erlhofer, Sebastian: Suchmaschinen-Optimierung: Das umfassende Handbuch. Galileo Computing, 2014.

Mozilla Developer Network

World Wide Web Consortium (W3C)