Websitestruktur analysieren und optimieren

Seit HTML5 gibt es viele Möglichkeiten, Inhalte einer Website semantisch korrekt auszuzeichnen, für die das vorher nicht möglich war. Aber auch schon vorher konnte die Grundstruktur wie Überschriften, Absätze, Listen etc mit den entsprechenden Tags ausgezeichnet werden. Wie und warum du die Struktur deiner Website prüfen und optimieren solltest, erfährst du im Artikel.

Was versteht man unter Websitestruktur?

Die Websitestruktur ist das Grundgerüst jeder Website. Anhand der unterschiedlichen HTML-Tags wird Inhalten eine Wertigkeit, Rangordnung oder Funktion zugeschrieben. Die Tags für Überschriften (h1-h6) gliedern einen Text, p-Tags definieren Absätze und seit HTML5 lassen sich auch Bereiche einer Website auszeichnen (article, section usw.). Die Optik einer Website hat damit nichts zu tun, sie wird/sollte rein über CSS geregelt werden.

Bei der Websitestruktur spricht man auch oft über semantisches HTML. Wikipedia fasst das mit diesen Worten zusammen:

HTML dient als Auszeichnungssprache dazu, einen Text semantisch zu strukturieren, nicht aber zu formatieren. Die Darstellung ist kein Teil der entsprechenden Spezifikationen und ist somit willkürlich vom Browseranbieter bestimmbar.

Darum solltest du auf semantisch korrekten Code achten

Ordentlicher, semantischer Code deiner Website ist wie die Grammatik in der Sprache. Ein kleines Beispiel: Den Satz „Der Name ist Blog von media-affin“ ist grammatikalisch falsch. Verstanden hast du ihn trotzdem. In sauberem deutsch wäre er aber besser zu verstehen und würde auch von mehr Seriosität zeugen.

So verhält es sich auch mit dem Code deiner Website. Sind alle Elemente sauber ausgezeichnet, verwenden also die korrekte „Grammatik“, versteht Google deine Seite besser und kann die Inhalte einfacher bewerten. Viele Webmaster sagen, Google verstehe Websiten auch so. Das ist häufig richtig – aber wieso solltest du das Schicksal deiner Website der Interpretationsfähigkeit des Google-Bots überlassen? Sicherer für dich und einfacher für den Bot ist es, ordentlichen Code abzuliefern.

Nicht unerwähnt bleiben sollte die Tatsache, dass auch Screenreader sich an der Strukturierung des HTML-Codes orientieren.

Weil es insbesondere bei komplexerem Code mühselig sein kann, die Struktur zu checken, möchte ich dir zeigen, wie du das ganz einfach mit unterschiedlichen Tools prüfen kannst.

Browseo – Der SEO-Browser

Der Name lässt vermuten, dass es sich bei Browseo um einen eigenständigen Browser handelt. Tatsächlich ist es aber „nur“ eine Website, auf der du die zu analysierende URL eingeben musst. Browseo selbst beschreibt seinen Dienst so:

BROWSEO is a web app that allows you to view any webpage without distractions caused by styles. It also highlights parts of a page that are relevant for SEO.

Das Tool wurde also dafür gemacht, die Struktur deiner Website zu prüfen. Außerdem bietet Browseo noch diese Funktionen:

• Response Code anzeigen
• Wörter zählen
• Überschriften auswerten
• interne und externe Links zählen und highlighten
• nofollow-Links hervorheben
• Meta-Tags (title, description, robots, …) ausgeben

Die Soundqualität ist leider nicht so toll – sorry!

Ein richtig cooler Bonus ist auch die mobile App, die es für Android und iOS gibt.

Semantik-Check mit der Web Developer Toolbar

Die Web Developer Toolbar ist ein feines Plugin für Chrome und Firefox, das sich auch für Bilder-SEO Analysen eignet. Das Plugin bietet außerdem die Möglichkeit, CSS zu deaktivieren.

Das Ergebnis ist dasselbe wie bei Browseo auch: Es wird lediglich der reine HTML-Code ohne Styling ausgegeben. Allerdings liefert Web Developer keine Infos zu Status Codes etc.

Fazit

Beide Möglichkeiten, die Websitestruktur zu analysieren sind kostenlos und einfach zu bedienen. Es gibt also keinen Grund mehr, deinen Besuchern und Google keine saubere Seitenarchitektur zu bieten. Wie sieht die Struktur deiner Seite aus? Legst du wert auf saubere Hierarchien im Aufbau deiner Templates? Verrate es mir doch in den Kommentaren!