Überschrift und Titel Block | Gutenberg Tutorial Teil 3

Titel und Überschrift im Gutenberg Editor. Im 3. Teil des Tutorials erkläre ich die Funktion dieser Blöcke sowie deren Anpassungsmöglichkeiten.

Aktualisiert am 16-12-2019, Ellena

Überschrift Gutenberg
Grafik: eb (Logo: Gutenberg)

Rolle der Überschrift im Gutenberg Editor

WordPress gibt sechs Arten von Überschriften vor. Diese werden mit H1 (Heading 1) … H 6 bezeichnet, wobei deren Bedeutung von H1 nach H6 absteigt. Jedoch musst du nicht alle sechs verwenden. In den meisten Fällen dürften H1, H2, H3 und evtl. noch H4 ausreichen. Einerseits spielen diese Überschriften und deren Reihenfolge bei der Suchmaschinenoptimierung (SEO) eine Rolle.

Andererseits aber auch bei der optischen Gliederung der Texte. Denn sie erleichtern den Besuchern deiner Webseite das Lesen nicht nur langer Beiträge. Deshalb sollten die Überschriften sich klar voneinander unterscheiden.

Um die Größe festzulegen, gehst du in den Customizer deines Themes – Typografie – und wählst für jede Überschrift eine andere Schriftgröße. Die H1 Überschrift wäre am größten, H2 geringfügig kleiner usw.; die kleinste sollte immer noch größer als die Schriftgröße des Textes sein. Außerdem könntest du eine oder mehrere fett hervorheben. Oder du verwendest für alle Überschriften einheitlich eine andere Schriftart (Font) als für den Text.

Darüber hinaus unterscheiden sich die Überschriften auch in ihrer Anzahl. So gibt es pro Beitrag nur eine H1 Überschrift. H2 kannst du je nach Länge des Textes mehrmals verwenden. Und H3 trennt die einzelnen Textabschnitte voneinander, ist also sozusagen die „Standard-Überschrift“ innerhalb eines Textes. Deshalb setzt du sie beliebig oft ein.

Darüber hinaus ist es wichtig, nicht nur auf die Anzahl, sondern auch auf die Reihenfolge zu achten. Auf eine H2 Überschrift sollte mindestens eine H3 Überschrift folgen, bevor du ein zweites Mal H2 einsetzt.

Sonderfall – H1

Wie bereits erwähnt, gibt es in jedem Beitrag / auf jeder Seite nur eine H1 Überschrift. Da es sich hierbei immer um den Titel eines Beitrags handelt, wird sie auch im Gutenberg Editor entsprechend bezeichnet. Nachdem du auf deinem WP Dashboard auf Beitrag erstellen geklickt hast, öffnet sich der Gutenberg Editor. Direkt zuoberst siehst du den ersten Block mit der Aufforderung: Titel hier eingeben.

Du klickst in das Feld und schreibst den Titel deines neuen Betrags / deiner neuen Seite hinein (s. Abb. 07). Einerseits sollte dieser nicht zu lang sein, da er sonst in der Vorschlags-Liste des Browsers gekürzt erscheint. Außerdem musst du berücksichtigen, dass automatisch noch weitere Bestandteile der URL (s. u.) vor dem eigentlichen Titel stehen. Dies siehst du aber im Eingabefeld selbst nicht. Andererseits ist es Aufgabe des Titels, potentielle Leser dazu bewegen, auf deinen Beitrag zu klicken.

Im Gegensatz zu den nachrangigen Überschriften ist die H1 Überschrift im Editor nicht anpassbar. Ihr Aussehen bestimmen allein die Einstellungen (Schriftart, -größe, -farbe), die du im Customizer deines Themes vorgenommen hast.

Deshalb sollte der „Inhalt deines Beitrags klar erkennbar“ sein. Des weiteren muss dein, für den Beitrag gewähltes „Schlüsselwort (Keyword / Keyphrase)“ enthalten sein. Im Hinblick auf die SEO vorzugsweise am Anfang des Titels.

Überschrift H2

Direkt unterhalb des Titels ist im Gutenberg Editor bereits ein weiterer Block angelegt. Entweder klickst du direkt in das Feld und schreibst z. B. eine kurze Einleitung. Oder du klickst auf das Bild-Symbol rechts und fügst eine Abbildung ein. Details zu diesen Blöcken folgen in den jeweiligen Tutorials. Da sich dieses Tutorial mit Überschriften beschäftigt, nehmen wir nun an, dass du die Einleitung und evtl. ein Bild eingefügt hast.

Anschließend beginnst du deinen Beitrag mit einer H2 Überschrift. Diese ist die zweitwichtigste und sollte ebenfalls dein zuvor gewähltes Schlüsselwort enthalten. Um einen neuen Block dafür zu erstellen, hast du zwei Möglichkeiten. Entweder du

  1. fährst du mit dem Cursor über den darüber befindlichen Block
  2. und klickst auf das nun sichtbar + = die Options-Liste poppt auf,
  3. auf H (s. Abb. 07-2) klicken.

Oder du klickst in den vorgehenden Block,

  1. auf die drei Punkte rechts in der Bearbeitungsleiste (s. u.),
  2. Block danach einfügen
  3. und wieder auf das H

Nachdem du so einen neuen Block erstellt hast, klickst du in das Feld. Anschließend erscheint darüber (oder am oberen Rand des Editors) die Bearbeitungsleiste. Diese ähnelt der, die du z. B. aus Microsoft Word kennst.

Bearbeitungsleiste für Überschriften

Hier findest du folgende Optionen, die sich entweder auf den Block selbst oder auf den Text auswirken. Von links nach rechts sind dies (s. Abb. 08)

  • H: Art des Blocks wechseln
  • H2: Überschrift in H3 oder H4 ändern
  • Text: links, zentriert oder rechts ausrichten
  • Fette oder kursive Schrift / Link erstellen
  • Pfeil nach unten: Text durchstreichen, hervorheben, ein Inline-Bild oder einen Code einfügen
  • Drei-Punkte-Menü: s. Abb. 10-6

Anpassung über die Seitenleiste

Nachdem du deine Überschrift eingegeben hast, bietet dir die Seitenleiste des Editors noch weitere Anpassungsmöglichkeiten. Sobald du in den Überschriften-Block geklickt hast, erscheinen dort die Einstellungen für diesen Block. Einerseits kannst du auch hier den Rang der Überschrift H1 bis H6 ändern (s. Abb. 09-3). Anderseits bestimmst du die Textfarbe für den gesamten Block (Abb. 09-4,5). Dies ist auf drei Wegen möglich:

  • Du wählst eine der vorgegebenen Farben, indem du auf den entsprechenden Punkt oder
  • auf Individuelle Farbe klickst und durch Verschieben des Kreises im Farbfeld oder des Reglers auf der Leiste eine Farbe auswählst
  • oder du gibst den Hex- oder RGB-Code für deine Farbe ein.

Falls dir die gewählte Farbe nicht gefällt, klickst du auf Leeren und die Schrift kehrt zu der Farbe zurück, die du im Customizer festgelegt hattest. Wenn du nur für einzelne Wörter die Textfarbe ändern möchtest, markierst du sie und wählst die neue Farbe über die Option Highlight Text in der Bearbeitungsleiste.

Im Gegensatz zu beispielsweise Textblöcken kannst du die Hintergrundfarbe bei Überschriften nicht so einfach ändern. Zwar hast du die Möglichkeit, in der Seitenleiste auf Erweitert zu klicken und dort has-background einzutragen.

Anschließend klickst du in der Bearbeitungsleiste für diese Überschrift auf

  1. die drei Punkte
  2. als HTML bearbeiten = der Inhalt des Blocks beginnt mit p class“has-background“…
  3. fügst dort die Farbe ein = z. B. class“has-background has-blue-background-color

Jedoch funktioniert das nicht immer, oft erhältst du die Fehler-Meldung: Dieser Block hat unerwarteten oder ungültigen Inhalt.

Überschrift H3 bis H6

Zur besseren Gliederung deines Textes solltest du mehrere Zwischenüberschriften einsetzen. Auf H2 folgt in jedem Fall ein bis mehrmals H3. Dabei gehst du wie für H2 beschrieben vor, nur dass du die H2 Überschrift in H3 änderst. Eine zweite, dritte… H2 Überschrift ist eigentlich nur bei wirklich langen Beiträgen notwendig. Auch auf diese folgt zunächst wiederum H3, bevor du (am Ende) des Beitrags vielleicht eine H4 Überschrift verwendest.

Über das Info-Symbol in der Kopfleiste des Editors kannst du kontrollieren, wie der Aufbau deines Beitrags aussieht. Eventuelle Fehler bei der Reihenfolge der Überschriften werden farblich hervorgehoben. Wie die Größen-Abstufung aller Überschriften aussehen könnte, zeigt Abb. 10.

Alle Abbildungen ansehen »

Wenn du deinen Beitrag soweit fertig gestellt und gespeichert (nicht Veröffentlicht!) hast, kehrst du noch einmal zu deiner H1 Überschrift zurück. Ein Klick in das H1 Feld zeigt dir darüber den Permalink für diesen Beitrag.

Anpassen des Permalinks

Diesen Permalink hat WordPress automatisch erstellt. Je nach den von dir in den WP-Einstellungen gemachten Vorgaben, setzt er sich etwa wie folgt zusammen

  • https://
  • deine Domain /
  • eventuelle Zusätze* /
  • Titel des Beitrags.

*Zusätze können beispielsweise Kategorie, Datum etc. sein. Je mehr „Zusätze“ du festgelegt hast, desto länger wird der Permalink. Deshalb gilt hierfür dasselbe wie für den Titel. Wenn der Permalink zu lang ist, ist im Browser später nur der Anfang lesbar und das Ende (der eigentliche Titel) ist durch „…“ ersetzt. Jedoch kannst du daran etwas ändern, indem du in den Titel-Block klickst,

  1. der Permalink wird über dem Titel sichtbar
  2. Bearbeiten
  3. „unwichtige“ Teile z. B. Füllwörter des Titels löschen
  4. Schlüsselwort / Keyphrase auf jeden Fall behalten

Alle Bestandteile des Permalinks vor dem Beitragstitel sind nicht veränderbar. Auch nachdem du deinen Beitrag veröffentlicht hast, solltest du den Permalink nicht mehr verändern. Denn dann würde er als neue URL indexiert. Und die Eingabe des alten in die Browser-Suche bzw. ein Klick auf den alten Link hätte einen 404 Fehler beim Aufrufen der Seite zur Folge.

Umlaute im Permalink

Da es bei URLs / Permalinks keine Umlaute gibt, können Wörter mit Umlauten zum Problem werden. Beispiel:

Südtiroler Alpen – ein unerwartet aufregendes Abenteuer
= https:// meineseite.de / wanderungen / 2019 / sudtiroler-alpen-ein-unerwartet-aufregendes-abenteuer/ .

Wenn das Schlüsselwort „Südtiroler Alpen“ wäre, müsstest du es im Permalink behalten. Jedoch wird das ü automatisch durch ein u ersetzt. Anschließend kann es passieren, dass die Suchmaschine „Sudtiroler“ nicht mit „Südtiroler“ gleichsetzt. Deshalb würde dein SEO-Plugin anzeigen, dass das Schlüsselwort nicht in der URL enthalten ist. Um das zu umgehen, hilft es meistens, beim Anpassen des Permalinks auch den Umlaut zu ändern.

Das Endergebnis der Anpassungen könnte dann wie folgt aussehen: https:// meineseite.de / wanderungen / 2019 / suedtiroler-alpen-abenteuer/

Vermeide nach Möglichkeit Schlüsselwörter mit Umlauten oder ersetze Umlaute im Permalink: Ä = ae / ö = oe / ü = ue.

Soviel zum Thema Titel- und Überschriften-Blocks. Im nächsten Teil meines Gutenberg Tutorials erkläre ich Textblöcke und deren Gestaltung.



Weitere Gutenberg Tutorials

Mehr zum Thema

WordPress
WordPress Tutorials
SEO
Website-Optimierung mit Yoast SEO
SEO
Vermeiden von 404-Fehlern