Templating-Basis

Unsere HTML-Templates werden von Haus aus unter technischen SEO-Gesichtspunkten entwickelt.

  • Schlankes, validiertes HTML und CSS bildet die Basis für eine schnelle Webseite. In ein Template verpackt hält man ein wachsames Auge auf überflüssige Container/Wrapper-Elemente, die HTML und Template unnötig aufblasen.
  • Die Vollständigkeit beim Aufbau des HTML-Markups gibt Suchmaschinen weitere Fingerzeige zur Qualität der Webseite, z.B. alt- oder title-Attribute.
  • Beim Aufbau der Templates auf die Dokumentstruktur achten: Wichtige Elemente (Überschriften, eigentlicher Inhaltstext) gehören nach oben, sekundäre Elemente (Menüs, Marginalboxen) nach unten.
  • JavaScript-Code wird für möglichst flotte Ausführbarkeit auf Performance getrimmt, um Besucher und Suchmaschinen-Bots nicht auszubremsen.

Templating-Semantics

Semantisches HTML ist Markup, in dem die Suchmaschine einzelnen Bestandteilen oder Passagen Bedeutung zuordnen kann, z.B. erkennt sie klar, was eine Überschrift, was Fließtext und was eine Bildunterschrift ist. Darüber hinaus lassen sich auch beispielsweise Produkt- oder Bestelldetails markieren.

  • Semantisches XHTML enthält eine saubere Dokumentstrukturierung über Überschriftenebenen, Paragraphen, spezielle Textarten und Listen (<h1>, <h2>, […] , <p>, <code>, <blockquote>, <ul>, <ol>, <dl>), Unterscheidung von inhaltlichen Illustrationen (<img>) und schmückenden Grafiken (CSS), sowie der Textformatierungsabbildung per CSS und nicht etwa mit Format-Tags im HTML-Code.
  • Mit HTML5-Tags erreicht man die nächste semantische Stufe. Die Strukturierung der Webseitentexte wird mit Tags wie <header>, <section>, <article>, <aside>, <figure>, <summary> erweitert, Navigations- (<nav>) und Footer-Bereich (<footer>) entsprechend gekennzeichnet.
  • Für moderne Suchmaschinen ist das nicht genug: Mit Strukturierten Daten (RDF – Resource Description Framework: Microformats, Schema.org) lassen sich Textfragmenten nicht nur die Position in der Dokumentstruktur, sondern auch inhaltliche Bedeutung zuordnen, z.B. Kennzeichnungen als Produkte, Blogartikel, Geschäftsfelder, Käufermeinungen, Bestelldetails, Bankverbindung und viele Dutzend mehr.

Templating-Performance

Auch aus performance-technischer Sicht lässt sich die SEO-Qualität beim Templating beeinflussen.

  • Kleine Grafiken und Icons kombiniert man in einem Sprite Sheet; weniger Einzeldateien reduzieren die Anzahl der Serveranfragen und sparen damit wertvolle Besucher und Indizierungszeit.
  • Bei größeren Grafiken und Fotos ist es wichtig, auf das richtige Dateiformat zu achten (siehe Artikel Technik Ratgeber: PNG, JPG, GIF, SVG) sowie die Kompressionsstufe.
  • Auch die Dokumentstruktur um den eigentlichen Content herum ist wichtig: nur die nötigsten Scripts gehören in den Header-Bereich, so dass die Ladezeit des sichtbaren Homepage-Bereichs auf das möglichst machbare Minimum sinkt.
  • Wozu jQuery, Bootstrap, Schriften und anderen Bibliothek auf dem eigenen Server hosten, wenn die Lieferung per CDN – Content Delivery Network viel schneller geht? Zusätzlich beschleunigt das die Website, da mehrere Anfragen auf verschiedene Server verteilt werden.