SEO für HTML: Seitencode für google optimieren

Im Bereich HTML / Seitenprogrammierung könnt ihr viel tun, um euer google-Ranking zu verbessern. Muss sich die Suchmaschine erst durch einen Wust von Quelltext arbeiten, bevor sie mal das erste Stück Content zu Gesicht bekommt, so habt ihr schlechte Karten.
Hier erfahrt ihr, wie ihr sauberes SEO HTML produzieren könnt.
Grundsätzlich gilt: google honoriert schlanken, aufgeräumten Code mit möglichst wenig extern eingebundenen Scripten. Bilder sollten für’s Web optimiert sein um die Ladezeit nicht unnötig aufzublähen. Die Texte auf eurer Seite (ja, Texte! Wortlängen von >300 Wörtern sollten es schon sein) sollten gut strukturiert und durch Absätze, Zwischenüberschriften und Grafiken aufgelockert werden.
Außerdem sollten die Meta-Tags korrekt gesetzt sein.

Konkret möchte ich hier auf die folgenden Bereiche eingehen:

  • Title-Tag richtig verwenden
  • Überschriften oder „Was nützen mir H1 bis H6“?
  • Meta-Tag, ein altmodisches Konstrukt?
  • schlanker Code oder Reduzieren leicht gemacht

Title-Tag- wie sieht der optimale Seitentitel aus?

Mit einer optimierten meta desciption zu einer guten Klickrate in der SERPs

  • Der Titel wird neben der URL im SERP-Snippet von google angezeigt und ist daher besonders wichtig
  • Die Länge sollte 28 Zeichen nicht überschreiten, da der Title ansonsten im SERP-Snippet abgeschnitten wird
  • Unbedingt auf einzigartige Seitentitel achten
  • Das wichtigste Keyword sollte im title möglichst weit vorne vorkommen
  • Der title muss aussagekräftig sein und den User zum Klicken animieren

 

Überschriften: Wie setze ich H1 bis H6 sinnvoll für SEO ein?

  • H1:

    Neben dem Title-Tag als Hauptüberschrift der wichtigste SEO Bestandteil jeder Seite. Auf jeder Seite nur EINE H1 setzen! Hier sollten wichtige Keywords genannt werden! Aber nicht um jeden Preis, die H1 soll das Interesse des Lesers wecken.

  • H2 und H3:

    Gut geegnet für Zwischenüberschriften und um seinen Text auch optisch zu gliedern. Weitere (Neben-)keywords dürfen hier genannt werden.

  • H4-H6:

    hier nimmt die SEO-Relevanz ab, diese Unterüberschriften sind eher als Gestaltungsmöglichkeit zu sehen.

Meta-Tag – wozu?

 <meta <span class="html-attribute-name">name</span>="<span class="html-attribute-value">description</span>" <span class="html-attribute-name">content</span>="<span class="html-attribute-value">Full Service Internetagentur & SEO Agentur PixelConsult in Dortmund - wir bieten mehr: Erfolgreiches Online Marketing, Suchmaschinenoptimierung & Webdesign</span>">

Neben dem Title-Tag gibt es noch ein weiteres sehr wichtiges Meta-Tag, welches zwar keinen direkten Einfluss auf das Ranking hat, aber auf die Klickrate der in den SERPs angezeigten Snippets: Die description.

Neben der URL einer Seite und ihrem title wird – so google sie für relevant genug hält – die Meta-Description mit angezeigt. Ihr habt hier also die Chance, die Anzeige Eurer Seite in den SERPs direkt zu beeinflussen. Setzt ihr die description nicht, so sucht sich google eine eigene description zusammen aus dem Text, den er auf der betreffenden Seite so findet.

Fasst in der description kurz zusammen, um was es auf Eurer Seite geht, gerne auch mit Keywords, und baut am besten ein CTA (Call-to-Action)-Element mit ein um den User möglichst zum Klicken zu animieren.
Auch für die description gilt: Sie sollte eine bestimmte Länge nicht überschreiten.

Um Eure titles und description auf Herz und Nieren zu überprüfen und einen Eindruck davon zu bekommen, wie das Ergebnis aussehen könnte, hilft Euch der
SERP-Snippet-Generator

Optimiert Euer Snippet mit dem Snippet Generator

Mit schlankem Code durch mod_deflate und Minifizierung zu einem besseren PageSpeed

Schlanker Code

Je mehr Quellcode eure Seite hat, je mehr externe Scripten ihr ladet, desto länger ist die Ladezeit Eurer Seite. Das macht sich nicht nur schlecht für die google PageSpeed, sondern fällt auch unangenehm auf bei Usern, die mobil auf eurer Seite vorbeischauen.
Tipps für schlanken Code:

  • Reduzierung von HTTP-Requests durch mergen von mehreren CSS-Dateien und .js
  • Whitespaces in Code und Kommentaren entfernen, hierfür eigenen sich gut kostenlose Online-Tools wie den cssMinifier oder den jsMinifier
  • Unnötige Kommentare im Code komplett entfernen
  • Inline-css und Inline-js in externe Dateien auslagern

Weitere Aspekte zum Thema schlanker Code findet ihr auf meiner Seite zur Serveroptimierung

Die Kommentare wurden geschlossen