Auszeichnungssprachen für Produktseiten

Guter Text, schlechtes Ranking

Deine Teamleitung öffnet zwei Produktseiten nebeneinander: links deine, rechts die der Konkurrenz. Beide beschreiben dasselbe Laufrad. Dein Text liest sich sogar besser. Überzeugende Produktbeschreibungen formulieren kannst du. Trotzdem rankt die Konkurrenz auf Seite 1 bei Google, deine Seite erst auf Seite 5. Bei 120 Euro Warenkorbwert kostet jede Woche dort mehrere tausend Euro Umsatz.

Ein Klick auf Quelltext anzeigen macht den Unterschied sichtbar: Bei dir stehen Produktvorteile als Fließtext mit <br>-Zeilenumbrüchen. Bei der Konkurrenz: saubere Listen mit Zwischenüberschriften im HTML-Code.

🔮 Bevor du weiterliest: Welche Informationen kann ein Suchmaschinenbot aus reinem Fließtext mit Zeilenumbrüchen nicht herauslesen, die er aus semantischen HTML-Tags sofort erkennt?

Vier Tags, die der Bot versteht

Semantische HTML-Tags sagen dem Browser und dem Suchmaschinenbot, welche Rolle ein Textteil spielt. Vier Elemente brauchst du für Produktseiten:

<h1> bis <h3> sind Überschriften. Für Nutzende gliedern sie die Seite visuell. Für den Bot signalisieren sie die Themenhierarchie: <h1> markiert das Hauptthema der Seite.

<ul> und <li> erzeugen eine ungeordnete Liste. Nutzende scannen sie auf einen Blick. Der Bot erfasst jeden Listenpunkt als eigenständigen Datenpunkt.

<strong> hebt ein Wort hervor. Nutzende sehen Fettdruck. Der Bot liest ein Signal: dieses Wort ist im Kontext besonders relevant.

Ein <br> dagegen erzeugt nur einen optischen Zeilenumbruch, ohne dem Bot irgendeine Bedeutung zu transportieren.

Dein Laufrad-Text im Quellcode

So sieht der Quellcode deiner Laufrad-Seite aktuell aus:

Laufrad FlitzerPro<br>
Fördert den Gleichgewichtssinn.<br>
Vorteile:<br>
Leichter Aluminiumrahmen (nur 3,2 kg)<br>
Pannensichere EVA-Reifen<br>
Höhenverstellbarer Sattel (30-40 cm)

Für den Bot ist das ein einziger Textblock ohne innere Struktur. Er kann nicht erkennen, was der Produktname ist, wo die Vorteile beginnen und welche Angabe besonders wichtig ist.

Dieselbe Beschreibung, semantisch ausgezeichnet

<h1>Laufrad FlitzerPro</h1>
<p>Fördert den Gleichgewichtssinn.</p>

<h2>Vorteile</h2>
<ul>
  <li>Leichter Aluminiumrahmen
      (nur <strong>3,2 kg</strong>)</li>
  <li>Pannensichere EVA-Reifen</li>
  <li>Höhenverstellbarer Sattel
      (30-40 cm)</li>
</ul>

Drei Änderungen, drei Signale an den Bot:

1. <h1> markiert den Produktnamen als Hauptthema. Google nutzt ihn bevorzugt als Seitentitel in den Suchergebnissen.
2. <h2> plus <ul>/<li> machen die Vorteile als einzelne Datenpunkte erkennbar. Sie können als Rich Snippets (die auffälligen Aufzählungen direkt in der Google-Suche) erscheinen.
3. <strong> hebt "3,2 kg" als Schlüsselwert hervor. Der Bot gewichtet dieses Wort stärker bei passenden Suchanfragen.

Drei Fehler, drei verlorene Chancen

Deine Teamleitung hat drei Stellen markiert, an denen dein Quellcode Ranking-Punkte verschenkt:

1. Ohne <h1> kann Google das Hauptthema der Seite nicht identifizieren. Der Seitentitel in den Suchergebnissen wird aus Fragmenten zusammengesetzt und passt oft nicht zur Suchanfrage. Korrektur: Produktnamen in <h1>-Tags setzen.
2. Vorteile als <br> statt <ul>/<li> verhindern Rich Snippets. Der Bot sieht nur Fließtext statt einzelner Datenpunkte und kann keine Aufzählung in die Suchergebnisse übernehmen. Korrektur: Jeden Vorteil als <li> innerhalb einer <ul> auszeichnen.
3. Ohne <strong> gehen Schlüsselwerte wie "3,2 kg" im Textfluss unter. Der Bot stuft sie nicht als besonders relevant ein. Korrektur: Kaufentscheidende Werte mit <strong> hervorheben.

So hätte deine Laufrad-Seite aussehen müssen

Drei Tags hätten gereicht, um deine Laufrad-Seite von Seite 5 nach vorn zu bringen: eine <h1> für den Produktnamen, eine <ul> für die Vorteile, <strong> für die Schlüsselwerte. Der Text war bereits gut. Nur der Code hat Google im Dunkeln gelassen.

Nächstes Mal pflegst du den Text nicht einfach ins CMS-Textfeld ein, sondern wechselst in die Quellcode-Ansicht und prüfst, ob die semantischen Tags stimmen.

🧑‍🏫 Erkläre es im Kopf: Eine neue Auszubildende fragt: "Warum soll ich <strong> benutzen? Ich kann den Text doch einfach im Editor fett machen." Was antwortest du?