10 häufige Fehler beim Erstellen einer Webseite

10 HTML SEO Fehler MemeHeute soll es um typische Fehler bei der Webseitenerstellung und deren Bedeutung für das Suchmaschinen-Ranking gehen. Denn wenn es um Suchmaschinenoptimierung (SEO) geht, liest man oft “Content ist King”. Das mag sein, doch auch ein sauberes HTML-Coding ist immernoch von nicht zu vernachlässigender Relevanz. Nur weil eine Seite im Webbrowser wie gewünscht aussieht, heißt es noch lange nicht, dass der dahinterliegende HTML-Code auch valide und syntaktisch richtig ist. Und genau hier liegt die Crux.

Content is king, coding is queen!

Viele Webmaster geben sich zufrieden, wenn die Seite so aussieht, wie sie es sich vorstellen. Dabei könnten mit sehr großer Wahrscheinlichkeit noch bessere Rankings erzielt werden, wenn die Programmierung der Seite sauber umgesetzt wäre. Mit Programmierung ist hier der HTML-Code gemeint. Zwar können schlecht umgesetzte serverseitige Scripte (z.B. in PHP oder Perl) die Ladegeschwindigkeit und somit indirekt auch das Suchmaschinenranking beeinflussen, jedoch soll das heute nicht unser Kernthema sein.

Die Top 10 Fehler beim Webseitenbau

Nachfolgend kommen also meine Top 10 der Fehler, die sich besonders leicht einschleichen und im Anschluss direkt eine Erklärung wie man sie vermeiden kann.

1) Doctype und Contentype angeben

Das Doctype-Tag befindet sich immer in der aller ersten Zeile eines HTML-Dokuments (noch vor dem öffnenden <html>-Tag). Genau genommen handelt es sich beim Doctype-Tag auch gar nicht um ein HTML-Tag, sondern um ein Tag, dass vom Webserver ausgelesen und in die Http-HEader geschrieben wird. Die Http-Header wiederum werden dann Browser des Seitenbesuchers interpretiert, sodass der Browser weiß, um welche Art von HTML-Dokument es sich handelt und wie er dieses Rendern muss.

Die gängigsten validen Doctype-Deklarationen sehen wie folgt aus:

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Wenn der Doctype stimmt ist das schon einmal die halbe Miete. Das zweite wichtige Tag, welches dafür sorgt, dass der Browser weiß wie ein HTML-Dokument dargestellt werden soll, ist das Meta-Tag, das den Content-Type angibt.

Dieses Tag teilt dem Browser sowohl mit, dass es sich um ein HTML-Dokument handelt und in welchem Zeichensatz es verfasst ist. Ist diese Angabe unstimmig, können z.B. Umlaute schnell als unverständlicher “Datenmüll” dargestellt werden.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Der oben stehende Beispielcode gilt für ein HTML-Dokument dessen Zeichensatz UTF-8 enkodiert ist.

2) Tags korrekt schließen

Nur weil man in PHP mittlerweile (je nach Serverkonfiguration) das schließende “?>”-Tag weglassen darf, heißt das noch lange nicht, dass das für HTML auch gilt.

Je nachdem, ob das HTML-Dokument einen HTML-Doctype oder einen XHTML-Doctype verwendet, können manche Tags direkt geschlossen werden oder auch nicht. Ein <div/> in XHTML entspricht zum Beispiel einem <div></div> in HTML.

Sollte es einmal Unklarheiten geben, welches Tag wie geschlossen werden muss, hilft oft ein Blick in eine HTML-Referenz.

3) alt-Attribute für Bilder nutzen

Kommen wir zu einem weiterem Punkt er oft vergessen wird. Das alt-Attribut im <img>-Tag. Das “alt” steht für “alternate” und beschreibt somit gleichzeitig seine Funktion. Der Text im alt-Attribut wird angezeigt, wenn das Bild nicht geladen oder dargestellt werden kann. Zudem wird das alt-Attribut von Suchmaschinen zur Indexierung genutzt. Wer das alt-Attribut verwendet, sorgt also nicht nur dafür die Kompatibilität der Seite zur erhöhen, sondern tut gleichzeitig auch noch etwas gutes für die Suchmaschinenoptimierung.

Eine valide Verwendung des alt-Tags kann wie folgt aussehen:

<img src="http://code-bude.net/wp-content/uploads/2011/05/logo2.png" alt="Das code-bude.net Logo">

Aufgepasst! Das alt-Attribut wird nicht standardmäßig im Browser angezeigt. Wenn ihr beim Hovern über das Bild eine Beschreibung anzeigen wollt, dann müsst ihr zusätzlich noch das title-Attribut verwenden.

4) time-Tag nutzen

Wer über den Status hinaus ist Urls über die Suchmaske von Google aufzurufen, der hat vielleicht auch schon einmal die Suchoptionen genutzt. Hier lässt sich zum Beispiel auch eine zeitliche Eingrenzung vornehmen. Doch woher weiß Google, wann ein Artikel veröffentlicht wurde?

Hier hilft das <time>-Tag aus HTML5 mit dem es möglich ist Daten und/oder Uhrzeiten zu kennzeichnen.

Veröffentlicht um <time>13:07</time> Uhr.
Erschienen am <time datetime="2014-08-06">Release-Tag</time>.

Wie im Beispiel zu erkennen ist, kann die Zeit-/Datumsangabe entweder innerhalb der Tags oder als Attribut angegeben werden.

5) Richtig zitieren

Wer zitiert sollte dies auch richtig Kennzeichnen. Dies gilt nicht nur für Hausarbeiten und Schule und Uni, sondern auch für Veröffentlichungen im Web. Die Wahl des richtigen Tags hängt dabei von der Länge des zu zitierenden Textes ab.

  • <cite>-Tags: Für sehr kurze Zitate. Zum Beispiel direkt in der Zeile.
  • <q>-Tags: Für mittlere Zitate.
  • <blockquote>-Tags: Für längere Zitate.

6) Bilder und Fotos richtig beschriften

Wer dem dritten Tipp in diesem Artikel noch einen draufsetzen möchte und seine Webseiten in HTML5 schreibt, der kann bei der Beschriftung von Bildern die Tags <figure> und <figcaption> verwenden.

<figure>
  <img src="logo.jpng" alt="code-bude.net Logo" />
  <figcaption>Unser neues Webseiten-Logo</figcaption>
</figure>

Das <figcaption>-Tag wird hinter das <img>-Tag geschrieben und beinhaltet die Bildbeschreibung. <img>- und <figcaption>-Tag werden dann wiederum im <figure>-Tag zusammengefasst.

7) Ajax gerne, aber nur mit Verstand

Ajax (Asynchronous JavaScript and XML) ist modern, cool und nutzerfreundlich. Verständlich, dass viele deshalb voll und ganz auf Ajax setzen und versuchen es überall (und ich meine wirklich überall) einzusetzen. Was man dabei jedoch nicht vergessen sollte, ist, dass sogut wie alles, was per Ajax nachgeladen wird für Suchmaschinen nur schwer bis gar nicht zu lesen ist.

Wer seinen wertvollen Content also ausschließlich per Ajax-Requests ausliefert, sollte sich nicht wundern, wenn es mit den Rankings in der Suchmaschine nicht hinhaut.

Was nun? Komplett auf Ajax verzichten? Ich meine – nein. Wichtig ist es, immer wieder auf’s neue zu entscheiden, ob der Einsatz von Ajax Sinn macht und der Benutzerfreundlichkeit dient oder ob eine klassische Content-Auslieferung in dem jeweiligen Kontext besser sein könnte.

8) Ein Tag für Listen

Listen sind überall. Spätestens, seit es Seiten wie heftig.co und Konsorten gibt, wird alles gezählt und gelistet. Auch hierfür gibt es passende HTML-Tags. Denn eine Liste sollte keinesfalls mittels <br/>-Tags (Zeilenumbrüchen) optisch erzwungen werden.

Falsch:

1. Aufstehen<br/>
2. Programmieren<br/>
3. Schlafen

Richtig:

<ol>
    <li>Aufstehen</li>
    <li>Programmieren</li>
    <li>Schlafen</li>
</ol>

9) Quellcode validieren

Ist die Webseite fertig, sollte man sein Werk noch einmal durch einen Validator schicken. Dieser prüft den geschriebenen HTML-Code auf Validität gegenüber dem im Doctype gesetzten Standard.

Der größte und populärste Dienst hierfür ist der offizielle W3C-Validator.

10) Crossbrowser-Testing ist Ehrensache

Wenn der Code valide ist sollte doch alles stimmen, oder nicht? Jein! Denn selbst, wenn der Code ohne Fehler durch den W3C-Validator gegangen ist, heißt dies noch nicht, dass die Webseite bei jedem Nutzer so aussieht, wie es vom Programmierer erdacht war.

Um diesem Problem aus dem Weg zu gehen hilft nur eines – testen, testen, testen! Da ich dem durchschnittlichen Entwickler nun jedoch unterstelle, dass er nicht alle Browser der Welt auf seinem Rechner installieren möchte, gibt es auch hierfür abhilfe. So finden sich im Web unterschiedliche Dienste, die eine angegeben Url in allen möglichen Browsern rendern und das Ergebnis anzeigen. Ein Beispiel hierfür ist BrowserShots.

Fazit

Betrachten wir nun abschließend noch einmal die obigen 10 Regeln. Einige davon wie zum Beispiel Regel 2 (Tags richtig schließen) oder Regel 3 (alt-Attribute an Bildern) sollten für jeden Programmierer selbstverständlich sein. Andere, wie zum Beispiel Regel 4 (time-Tags verwenden), sind schon etwas spezieller. Aber alle haben eines gemeinsam – sie lassen sich relativ schnell und einfach umsetzen und verbessern somit definitiv die Qualität einer Webseite.

Wer fit in der Programmierung ist, sollte sich die Tipps also zu Herzen nehmen. Allen anderen Besitzern und Betreibern von Webseiten bleibt immer noch der Gang zu einer professionellen SEO-Agentur. Denn egal wie viel Herzblut man in seine Seite steckt, wenn man es technisch vermurkst, wird die Freude am eigenen Webauftritt nicht lange währen.

Sicherlich ließe sich die Liste noch beliebig weiter führen, aber das ist dann Stoff für einen weiteren Artikel. Was haltet ihr von den Tipps? Fehlt noch einer, den ihr meinen Lesern unbedingt ans Herz legen wollt? Ich freue mich auf eure Kommentare!

Raffi

Seit 2011 blogge ich hier über Programmierung, meine Software, schreibe Tutorials und versuche mein Wissen, so gut es geht, mit meinen Lesern zu teilen.

8 Kommentare

  1. Danke für die Tipps. Gerade mit Punkt 10, der Browser-Kompatibilität, haben die meisten doch so ihre Probleme. Wenn dann noch ein modernes Frontend-Framework wie React.js benutzt wird, hört der Support eh schon auf. Bis zu welchem Internet Explorer würdet ihr heutzutage noch optimieren?

  2. Ich bin auch auf meiner Webseite auf valide Fehler gestoßen und zwar wurde mein Umzug von WordPress auf joomla neu eingerichtet und habe eine Firma aus Berlin genommen der für viele Umzugsunternehmen schon Seiten gebaut hat und einige auch sehr gut im Ranking darstehen. Ich benutze regelmäßig ein seo Tool und schauen was ich optimieren kann oder worauf ich meinen Webmaster hinweisen kann, was er in den meisten Fällen auch gleich sich der Sache annimmt. Ich habe derzeit 2 valide Fehler . Mal schauen ;)

  3. Hi,
    ich habe auch die Erfahrung gemacht, dass es wesentlich für Ranking in der Suma ist, die Dokumentenstruktur (H1, H2, p usw) innerhalb der Seite genau zu überlegen.
    Der Mehrwert kann dann auch darin liegen, dass dem User damit ein übersichtliches Dokument vorgelegt wird und er länger auf den Webseiten verweilen wird. Längere Verweildauer der user wirkt sich auch auf die google Bewertung der Seiten aus…
    In der technischen Ausführung werden heute oft “imageslider” bzw auch viele skripte verwendet…Das kann manchmal auch zu nervig lange ladenden Webseiten führen, weil zB die Dateigrößen der Bilder nicht optimiert sind…(nicht jeder hat eine 5Mbit DSL Anbindung)
    Ich kann dazu jedem nur empfehlen seine Seiten auch auf Ladegeschwindigkeit zu testen.
    Auf http://www.webpagetest.org kann man gratis solche Tests durchführen und aus den Ergebnissen ersehen, wo eventuelle Probleme im Ladeverhalten (Waterfall Grafik) liegen. (Man kann dort auch wählen mit welcher DSL-Geschwindigkeit getestet werden soll und bekommt somit auch ein Bild davon wie das Ladeverhalten sich optisch auswirkt – abrufbar als Bildsequenz oder Video)

  4. Danke für die hilfreiche Auflistung. Bin auch schon auf so manches, angeblich sauber gecodetes, WP-Design gestoßen und der W3C-Validator offenbarte dann die Wahrheit. ;)

    Eine kleine Ergänzung zum Cross-Browser-Testing: Browsershots unterstützt das Problemkind #1 den Internet Explorer leider nicht. Hier kann schafft http://netrenderer.de/ Abhilfe.

  5. Gute Aufstellung! Eine Ergänzung noch zum Punkt 3: Vorteilhaft ist es auch, wenn man bei jedem Bild direkt die Attribute “width” und “height” mitgibt. Ansonsten muss der Browser dort einen Platrz reservieren und später wenn das Bild geladen wurde, die Seite neu rendern. Das kostet unnötige Zeit. Und PageSpeed ist ja mittlwerweile auch ein SEO-Ranking-Kriterium.

  6. Für den Programmierer ist das eine klare Sache, die Dinge einzuhalten, aber für einen Leihen finde ich es etwas schwierig, einen sauberen Code umzusetzen. Die Tipps sind in jedem Fall wertvoll.

  7. Wahre Worte! Ästhetik ist das eine, Funktionalität das andere. Nur wenn man die für den User sichtbaren Inhalte im Quellcode richtig auszeichnet, ist dieser für Suchmaschinen sinnvoll nachvollziehbar und wird entsprechend bewertet.

    Guter Artikel, weiter so!

    Grüße
    Christian

  8. Hi,

    danke für den Tipp. Das Problem der meisten Webmaster ist, das sie Ihre Webseiten mit irgendwelchen Generatoren oder Baukasten machen. Wenn ich mir manchen Quellcode anschaue, ich glaub der W3 Validator crasht wenn man das checken würde. Aber denen ist alles egal, hauptsach es sieht gut aus.

    Außen Hui (manchmal..) – Innen Pufi!

    Grüße

Hinterlasse einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Sie dient nur dem Spamschutz.