Sie haben GhostBlog erfolgreich abonniert.
Toll! Schließen Sie als NĂ€chstes die PrĂŒfung ab, um vollen Zugriff auf GhostBlog zu erhalten.
Willkommen zurĂŒck! Sie haben sich erfolgreich angemeldet.
Erfolg! Ihr Konto ist vollstÀndig aktiviert, Sie haben nun Zugriff auf alle Inhalte.
Erfolg! Ihre Zahlungsinformationen werden aktualisiert.
Aktualisierung der Rechnungsinformationen fehlgeschlagen.
Der Code entscheidet, nicht das Keyword

Der Code entscheidet, nicht das Keyword

Mike Konia

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.

Schematische Darstellung der Bestandteile einer suchmaschinenoptimierten Website.
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.

Schematische Darstellung der Bestandteile des semantischen Codes.
Bestandteile des semantischen Codes.

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