Überschriften und der Aufbau einer Seite

Modul 3: Die technische Grundlage einer Seite · Lesezeit: 11 Minuten

Lernziel: Nach dieser Lektion können Sie eine Seite mit einer klaren Hauptüberschrift und logischen Zwischenüberschriften aufbauen, erklären, was Google und Screenreader mit Überschriften machen, und gute Alt-Texte und Dateinamen für Bilder schreiben.

Kernbegriffe: Überschrift (<h1> bis <h6>), Hauptüberschrift, Zwischenüberschrift, Ebene überspringen, semantisches HTML, Screenreader, formatierter Text, der keine Überschrift ist, Alt-Text, leeres alt="" für Dekoration, Dateiname, Text in Bildern

Überschriften sind das Inhaltsverzeichnis Ihrer Seite

Einen langen Text ohne Zwischenüberschriften liest niemand gern. Im Internet gilt das noch stärker: Besucher überfliegen eine Seite zuerst und lesen erst, wenn sie sehen, dass die Antwort darin steht. Überschriften helfen dabei. Aber Überschriften sind mehr als große, fette Buchstaben. In HTML sind sie eigene Elemente mit einer Ebene:

<h1>Bruidsboeketten op maat</h1>
  <h2>Zo werken we</h2>
    <h3>De kennismaking</h3>
    <h3>Het proefboeket</h3>
  <h2>Voorbeelden</h2>
  <h2>Veelgestelde vragen</h2>

Die <h1> ist die Hauptüberschrift: Worum geht es auf dieser Seite? Die <h2>-Überschriften sind die Kapitel, die <h3>-Überschriften die Abschnitte darin, und so weiter bis <h6>. Die Einrückung oben dient nur der Veranschaulichung; in echtem HTML spielt sie keine Rolle.

Zwei Gruppen lesen diese Struktur wirklich:

1. Menschen mit einem Screenreader. Eine blinde oder sehbehinderte Person lässt sich vom Screenreader oft zuerst alle Überschriften vorlesen und springt dann zu dem Teil, den sie sucht. Ohne echte Überschriften ist die Seite ein einziger langer Textblock.
2. Suchmaschinen. Google nutzt Überschriften, um zu verstehen, worum es in den verschiedenen Teilen einer Seite geht.

Was Google über Überschriften sagt

Über Überschriften kursieren viele Mythen. Das sagt Google selbst:

• Im SEO-Startleitfaden von Google steht, dass die Reihenfolge der Überschriften für die Google Suche keine Rolle spielt und dass es keine magische Anzahl an Überschriften gibt, die eine Seite haben muss. Überschriften in einer logischen Reihenfolge sind aber sehr gut für Screenreader.
• John Mueller von Google sagte in einem Video (2019), dass die Systeme von Google kein Problem mit mehreren <h1>-Überschriften auf einer Seite haben. Google versucht, mit dem HTML so zu arbeiten, wie es ist: eine <h1>, mehrere oder nur formatierter Text ohne echte Überschriften.
• In der Dokumentation zu Titellinks (Lektion 3.1) nennt Google allerdings eine Situation, die schiefgehen kann: kein klarer Haupttitel. Stehen oben mehrere große, auffällige Überschriften und ist nicht klar, welche der Haupttitel ist, kann Google Schwierigkeiten haben, einen guten Titellink zu wählen. Google empfiehlt, die Hauptüberschrift klar hervorzuheben, zum Beispiel als erste sichtbare <h1>.

Das Fazit dieses Kurses: Eine klare <h1> pro Seite ist eine gute Gewohnheit, nicht weil Google Sie sonst bestraft, sondern weil die Seite dann für alle klar sagt, worum es geht. Leser, Screenreader und Google kommen dann nicht daran vorbei. Die Prüfung in Aufgabe A3.2 zeigt deshalb Grün bei genau einer nicht leeren <h1>, Orange bei mehr als einer und Rot, wenn keine vorhanden ist.

Was oft schiefgeht

Eine Seite aufbauen, die Antworten gibt

Eine gute Reihenfolge für fast jede Seite:

1. Hauptüberschrift (<h1>), die sagt, was der Besucher hier findet. Oft ähnelt sie dem Titel aus Lektion 3.1, muss aber nicht gleich sein. Der Titel steht in den Suchergebnissen, die Hauptüberschrift auf der Seite selbst.
2. Eine kurze Einleitung mit der wichtigsten Antwort gleich zu Beginn.
3. Zwischenüberschriften (<h2>) für jedes Teilthema, formuliert als etwas, das der Leser sucht: "Was kostet ein Brautstrauß?" sagt mehr als "Preise".
4. Wo nötig <h3> unter einer <h2>, nicht für sich allein.

Lektion 7.3 geht näher auf das Schreiben selbst ein. Hier geht es um das Gerüst.

Bilder: Alt-Text und Dateiname

Eine Suchmaschine "sieht" ein Foto nicht so wie Sie. Google nutzt maschinelles Sehen, holt aber viel aus dem Text drumherum. Die wichtigste Quelle nennt Google selbst: den Alt-Text.

<img src="/beelden/bruidsboeket-pioenrozen-wit.jpg"
     alt="Bruidsboeket met witte pioenrozen en eucalyptus">

Der Alt-Text (Alternativtext) hat zwei Aufgaben:

• Barrierefreiheit: Ein Screenreader liest ihn Menschen vor, die das Bild nicht sehen können. Kann das Bild nicht geladen werden, zeigt der Browser ihn anstelle des Fotos.
• Verständnis: Google nutzt den Alt-Text zusammen mit maschinellem Sehen, um zu verstehen, was auf dem Bild zu sehen ist. Das hilft vor allem in Google Bilder.

So schreiben Sie einen guten Alt-Text:

• Beschreiben Sie in einem kurzen Satz, was zu sehen ist und warum es auf dieser Seite steht.
• Verwenden Sie Suchbegriffe nur, wenn sie natürlich passen. Google warnt, dass mit Suchbegriffen vollgestopfte Alt-Texte eine schlechte Nutzererfahrung bieten und als Spam gewertet werden können.
• Ein Bild, das nur Dekoration ist (eine Linie, ein Hintergrundmuster), erhält einen leeren Alt-Text: alt="". Dann überspringt ein Screenreader es. Ein fehlendes alt-Attribut ist etwas anderes: Dann liest ein Screenreader manchmal den Dateinamen vor.
• Steht wichtiger Text im Bild (eine Öffnungszeit, ein Preis, ein Flyer), dann stellen Sie diesen Text auch ganz normal auf die Seite. Text in einem Bild ist für einen Screenreader und für eine Suchmaschine schwer zu lesen.

Auch der Dateiname hilft ein wenig. Google empfiehlt kurze, beschreibende Namen und nennt image1.jpg oder pic.gif als Beispiele für das, was Sie besser vermeiden. bruidsboeket-pioenrozen-wit.jpg (Brautstrauß, Pfingstrosen, weiß) sagt mehr als IMG_4032.jpg.

Geschwindigkeit und Abmessungen von Bildern behandeln wir in Lektion 4.3.

In der Praxis: Überschriften in Website-Baukästen

• Im AI Builder von WebOké wird die erste Überschrift einer Seite automatisch zur <h1>, und alle folgenden Überschriften werden zu <h2>. So hat jede Seite genau eine Hauptüberschrift. Bei jedem Foto können Sie eine Beschreibung eingeben; sie wird zum Alt-Text. Die SEO-Prüfung warnt bei Fotos ohne Beschreibung.
• In WordPress wählen Sie im Block-Editor beim Block Überschrift die Ebene (H1 bis H6). Das Theme macht meist schon den Seitentitel selbst zur <h1>; verwenden Sie im Text dann H2 und darunter. Den Alt-Text geben Sie beim Bild in der Mediathek oder im Block ein.

Andere Website-Baukästen funktionieren ähnlich. Schauen Sie im Zweifel in den Quelltext (Strg+U) oder suchen Sie mit Strg+F nach <h1.

Zusammenfassung

• Überschriften (<h1> bis <h6>) sind das Inhaltsverzeichnis Ihrer Seite, für Leser, Screenreader und Suchmaschinen.
• Google hat kein Problem mit mehreren <h1>-Überschriften oder einer anderen Reihenfolge, empfiehlt aber einen klaren Haupttitel. Eine klare <h1> ist eine gute Gewohnheit.
• Wählen Sie die Ebene nach dem Aufbau, nicht nach der Schriftgröße; überspringen Sie möglichst keine Ebenen.
• Ein guter Alt-Text beschreibt kurz, was zu sehen ist; Dekoration erhält alt=""; keine Anhäufung von Suchbegriffen.
• Wichtiger Text gehört auf die Seite, nicht nur in ein Bild.

Quiz

Aufgabe

Aufgabe A3.2: Eine Hauptüberschrift und ein logischer Aufbau. Geben Sie die Adresse einer Seite Ihrer eigenen Website ein. Das Programm ruft die Seite ab, zählt die <h1>-Überschriften und zeigt die Überschriftenstruktur als Inhaltsverzeichnis. Sie sehen, ob es genau eine nicht leere Hauptüberschrift gibt, ob Ebenen übersprungen werden und wie viele Bilder kein Alt-Attribut haben. Geben Sie vorab ein, wie viele <h1>-Überschriften Sie erwarten. Keine eigene Website? Verwenden Sie www.rijksoverheid.nl.

Weiterführende Links

• Google Search Central, SEO-Startleitfaden (Überschriften, Alt-Text): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, Best Practices für Bilder: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (barrierefreie Überschriften): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, Alt-Texte: https://www.w3.org/WAI/tutorials/images/