Ich habe in den letzten Wochen bereits zwei kleine Tutorials über „SEO URLs“ geschrieben (Teil1 und Teil2), doch die URLs eurer Webseite sind nur ein Teil des großen ganzen. Heute geht es um generelle SEO Tipps!

SEO geht noch viel weiter als „hübsche URLs“ – Suchmaschinen wie Google achten nämlich nicht nur auf doppelte Seiten/Inhalte und leserliche URLs sondern auch auf bewusstes „verstecken“ von Elementen (weiße Schrift auf weißem Hintergrund) oder der Barrierefreiheit eurer Seite (ist die Seite sauber Strukturiert, werden für Listen die Listen-Elemente statt einfacher Spiegelstriche benutzt, …).

Heute möchte ich ein paar kleine Tipps zum groben Aufbau eurer Seite sowie dem Content geben.

Bevor wir eine HTML Seite mal von oben nach unten durchgehen, möchte ich euch von einer Regel erzählen die ihr auf beinahe alle Bereiche eurer Seite anwenden könnt und sollt:

Beschränkt euch auf das Wesentliche und benutzt eure Keywords.

Eure Besucher kommen auf eure Seite um Informationen zu erhalten – Nicht für unnötige Informationen oder ausschweifende Texte die am Thema vorbei gehen. Denkt mal über euer eigenes „Surfverhalten“ nach. Wie sucht ihr auf einer Website nach Informationen? Zum Beispiel die Öffnungszeiten eines Geschäfts oder einer bestimmten Produktinformation.
Natürlich gibt es Ausnahmen dieser „Regel“, doch ich möchte hier einen möglichst „Allgemein-gültigen“ Eintrag verfassen 😉

Der HEAD Bereich.

Hier gibt es sicherlich ein paar der wichtigsten Dinge, die wir beachten sollten: TITLE, DESCRIPTION, META-TAGS (Keywords, Author, Sprache, Content-Typ, …). Wie müssen diese Felder befüllt werden?

• Der Titel eurer Seite sollte nur wenige Worte beinhalten plus den Namen eurer Seite: „Kleine SEO Tipps | Web Developer Blog“ lautet Beispielsweise der Titel dieses Eintrages. Schaut euch an, wie andere große Seiten den Titel darstellen!
• Die Description eurer Seite sollte, im Gegensatz zum Titel, etwas ausführlicher sein – Jedoch nicht am Thema vorbei gehen. Dieser Beschreibungstext wird (teilweise) benutzt um euch in den Suchmaschinen zu repräsentieren. Idealerweise werden hier die 5-W Fragen beantwortet.
• Keywords sollten, ähnlich wie die Schlagworte eines Blog-Eintrages, kategorisieren was auf eurer Seite zu finden ist. Die einzelnen Keywords werden mit Kommas separiert.
• Die Angabe der Sprache ist ebenfalls wichtig – Grade wenn ihr (wie dieser Blog) Beispielsweise eine .com Domain mit deutschem Inhalt führt. Solltet ihr eine mehrsprachige Seite administrieren solltet ihr hier immer die aktuell dargestellte Sprache angeben.
• Author, Copyright und Publisher lassen sich in der Regel ohne Probleme mit den gleichen Inhalten befüllen. Die Ausnahme bieten Seiten mit Inhalten aus verschiedenen Quellen bzw. von verschiedenen Personen/Firmen.
• Ein wichtiges Attribut für uns Entwickler stellt der Content-Type dar. Hier wird definiert in welchem Format die Seite ausgegeben wird (üblicherweise „text/html“). Außerdem wird hier das encoding angegeben was auf eurer Seite über unschöne Umlautefehler entscheiden kann (üblicherweise „iso-8859-1“ oder „utf-8“)

Diese kleine Liste an Angaben zum HEAD Bereich sollte euch in die Richtige Richtung lenken. Es gibt hier leider kein „best-practice“ – Ein Künstlerportfolio wird Beispielsweise immer andere Angaben beinhalten als ein Firmenportal oder eine Webseite zu einem großen Magazin.
Es gibt sehr viel weitere META-TAGs die man benutzen kann – zum Beispiel „page-topic“, „audience“, „geo.region“, … Wie sehr diese zum positiven Suchmaschinen-Ranking beitragen können ist zwar nicht bekannt, es ist jedoch unwahrscheinlich das es für ausführliche META-TAGs Minuspunkte gibt.

Der BODY Bereich

Kommen wir zum Inhaltlichen Teil – Dieser sollte stets sauber strukturiert sein und immer die Inhaltlich entsprechenden TAGs benutzen: Das ist sehr wichtig für die Barrierefreiheit!

Der erste Text, der auf der Seite auftaucht sollte mit größter Sorgfalt formuliert werden – Dieser wird nämlich (zusätzlich zur META-Beschreibung) die erste Anlaufstelle für Suchmaschinen und Besucher sein. Benutz eure Keywords, kommt auf den Punkt ohne viel (unnötig) auszuschmücken.

Weitere wichtige Elemente sind die Überschriften auf eurer Seite (<h1> bis <h6>) – Eine wichtige Anmerkung: Pro Seite nur eine H1, die restlichen Überschrift-TAGs dürfen öfter benutzt werden.

Fette Texte sollten mit <strong> definiert werden – <b> wird zwar visuell denselben Effekt haben, allerdings nicht syntaktisch – Während „strong“ aussagt, dass der Textabschnitt hervorgehoben werden soll oder besonders wichtig ist wird „b“ tatsächlich nur als visuelles Hilfsmittel benutzt. Der Unterschied ist für den normalen Leser zwar nicht ersichtlich, doch die Suchmaschinen und sogenannte Screenreader machen hier einen Unterschied.
Das gleiche gilt auch für andere TAGs wie <em> gegenüber <i> usw.

Ebenso gehören sämtliche Texte eurer Seite in <p> (Paragraph) TAGs – Speziell für News-Seiten oder Blogs ist das unbedingt zu beachten! Absätze sollten immer mit Paragraphen gebildet werden anstatt mit mehreren <br /> TAGs.

Weiter geht es mit Listen – Anstatt einfache „Text-Listen“ zu erstellen, solltet ihr den „Mehraufwand“ in Kauf nehmen und HTML verwenden.

- Text-Liste.
- Text-Liste.
- Keine guter Stil.
1. Text-Liste.
2. Text-Liste.
3. Keine guter Stil.

<ul>
    <li>Eine formatierte HTML-Liste</li>
    <li>Eine formatierte HTML-Liste</li>
    <li>Guter Stil!</li>
</ul>

<ol>
    <li>Eine formatierte HTML-Liste</li>
    <li>Eine formatierte HTML-Liste</li>
    <li>Guter Stil!</li>
</ol>

Ihr solltet euch mal den Spaß machen und eure Webseite ohne Styles ansehen - Für den Firefox und Chrome Browser gibt es die sogenannte Web Developer Toolbar, mit Hilfe einer Tastenkombination (Unter Firefox STRG+SHIFT+S) kann das Tool die Styles eurer Seite deaktivieren... Dadurch bekommt ihr einen ungefähren Eindruck, wie eure Seite für eine Suchmaschine oder einen Screenreader aussehen.

Ein weiterer Tipp: Eure HTML Struktur sollte (im Idealfall) so angeordnet werden, das an erster Stelle im BODY-Tag der Inhalt steht - Danach kommt die Navigation und anschließend die "unwichtigen" Elemente wie Teaser, Footer, usw. Das ist allerdings schon ein ziemlich krasser Schritt, da hier eine menge durch CSS wieder in "die Richtige Reihenfolge" gebracht werden muss.

Elemente wie Bilder sollten immer über das TITLE und ALT (Alternativ) Attribut verfügen, das "Alternativ" Attribut enthält einen Text der angezeigt wird, falls das Bild nicht gefunden/geladen werden kann, der Titel sollte sich selbst erklären 😉

Was verursacht Minuspunkte im Ranking?

Hier gibt es ebenfalls einige Punkte zu beachten - Vor allem wenn es darum geht Content zu "verstecken" (z.B. auf "left:-9999px;top:-9999px;" setzen). Solltet ihr viele Keywords auf eurer Seite "versteckt" haben kann das durchaus zu einem schlechteren Ranking führen - Hier ein paar Dinge die ihr meiden solltet:

• HTML nicht mit CSS-Styles wie "left:-9999px;top:-9999px;", "width:0px;height:0px;", "opacity:0;" oder "display:none;" verstecken
• Texte nicht in der gleichen Farbe wie den Hintergrund (sei es nun schlechtes Design oder Absicht)
• HTML nicht beim laden der Seite mit Javascript verstecken
• Nicht mehrere H1-Elemente pro Seite definieren
• HTML5 und moderne Techniken statt "nicht scanbaren Inhalten" wie z.B. Flash
• Bilder lassen sich zwar scannen, sind aber nicht so Wertvoll wie tatsächliche Texte

Gibt es weitere Dinge zu beachten?

Auf immer mehr Webseiten findet man eine "humans.txt" Textdatei oder auch die sogenannten Canonical-Links. Diese zwei Punkte müssen nicht zwangsläufig einen Ranking-Bonus bedeuten doch sie zeigen euren Usern und den Suchmaschinen das ihr euch um neue Standards kümmert. Vielleicht wird es sich ja auszahlen?

Außerdem solltet ihr eure Webseite stehts aktuell halten - Seiten die sich Monate und Jahrelang nicht verändern werden sicherlich nicht so gut bewertet wie andere Seiten die stehts aktualisiert werden (sofern es sich natürlich um sinnvolle/redaktionelle Aktualisierungen handelt).

Ich denke für den Anfang sollten euch diese Informationen ein gutes Stück weiter bringen - Wenn ihr selbst noch Informationen zu SEO habt lasst es mich bitte in den Kommentaren wissen! Ich möchte ja auch selbst noch etwas lernen 🙂

Damit wünsche ich euch eine angenehme Woche und viel Erfolg mit euren Projekten!