Überschrift und Titel Block | Gutenberg Tutorial Teil 3

Aktualisiert am 16-12-2019, von Ellena

Überschrift Gutenberg Editor
Überschriften im Gutenberg Editor (Grafik: eb/Logo: Gutenberg)

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

Rolle der Überschrift im Gutenberg Editor

WordPress gibt sechs Arten von Überschriften vor. Diese werden mit H1 (Heading 1) bis H 6 bezeichnet, wobei deren Bedeutung von H1 nach H6 absteigt. Jedoch müssen Sie 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 Ihrer Website das Lesen nicht nur langer Beiträge. Deshalb sollten die Überschriften sich klar voneinander unterscheiden.

Um die Größe festzulegen, gehen Sie in den Customizer Ihres Themes – Typografie – und wählen 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önnten Sie eine oder mehrere fett hervorheben. Oder Sie verwenden 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 können Sie je nach Länge des Textes zur Hervorhebung unterschiedlicher Themenbereiche mehrmals verwenden. Und H3 trennt die einzelnen Textabschnitte voneinander, ist also sozusagen die „Standard-Überschrift“ innerhalb eines Textes. Deshalb setzen Sie 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 Sie ein zweites Mal H2 einsetzen.

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 Sie auf Ihrem WP Dashboard auf Beitrag erstellen geklickt haben, öffnet sich der Gutenberg Editor. Direkt zuoberst sehen Sie den ersten Block mit der Aufforderung: Titel hier eingeben.

Sie klicken in das Feld und schreiben den Titel Ihres neuen Betrags / Ihrer neuen Seite hinein. Einerseits sollte dieser nicht zu lang sein, da er sonst in der Vorschlags-Liste des Browsers gekürzt erscheint. Außerdem ist zu berücksichtigen, dass automatisch noch weitere Bestandteile der URL (s. u.) vor dem eigentlichen Titel stehen. Dies sehen Sie aber im Eingabefeld selbst nicht. Andererseits ist es Aufgabe des Titels, das Interesse potentieller Leser auf Ihren Beitrag zu lenken.

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 Sie im Customizer Ihres Themes vorgenommen haben.

Deshalb sollte der „Inhalt Ihres Beitrags klar erkennbar“ sein. Des weiteren muss Ihr, 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 klicken Sie direkt in das Feld und schreiben z. B. eine kurze Einleitung. Oder Sie klicken auf das Bild-Symbol rechts und fügen 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 Sie die Einleitung und evtl. ein Bild eingefügt haben.

Anschließend beginnen Sie Ihren Beitrag mit einer H2 Überschrift. Diese ist die zweitwichtigste und sollte ebenfalls Ihr zuvor gewähltes Schlüsselwort enthalten. Um einen neuen Block dafür zu erstellen, haben Sie zwei Möglichkeiten. Entweder Sie

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

Oder Sie klicken in den vorhergehenden Block,

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

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

Bearbeitungsleiste für Überschriften

Hier findest Sie folgende Optionen, die sich entweder auf den Block selbst oder auf den Text auswirken. Von links nach rechts sind dies

  • 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ü

Anpassung über die Seitenleiste

Nachdem Sie Ihre Überschrift eingegeben haben, bietet Ihnendie Seitenleiste des Editors noch weitere Anpassungsmöglichkeiten. Sobald Sie in den Überschriften-Block geklickt haben, erscheinen dort die Einstellungen für diesen Block. Einerseits können Sie auch hier den Rang der Überschrift H1 bis H6 ändern. Anderseits bestimmst Sie die Textfarbe für den gesamten Block. Dies ist auf drei Wegen möglich:

  • Sie wählen eine der vorgegebenen Farben, indem Sie auf den entsprechenden Punkt klicken oder Sie
  • klicken auf Individuelle Farbe und wählen die Farbe durch Verschieben des Kreises im Farbfeld oder des Reglers auf der Leiste aus
  • oder Sie geben den Hex- oder RGB-Code für Ihre Farbe ein.

Falls Ihnen die gewählte Farbe nicht gefällt, klicken Sie auf Leeren und die Schrift kehrt zu der Farbe zurück, die Sie im Customizer festgelegt hatten. Wenn Sie nur für einzelne Wörter die Textfarbe ändern möchten, markieren Sie sie und wählen die neue Farbe über die Option Highlight Text in der Bearbeitungsleiste aus.

Im Gegensatz zu beispielsweise Textblöcken können Sie die Hintergrundfarbe bei Überschriften nicht so einfach ändern. Zwar haben Sie die Möglichkeit, in der Seitenleiste auf Erweitert zu klicken und dort has-background einzutragen. Anschließend klicken Sie 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. und fügen dort die Farbe ein = z. B. class“has-background has-blue-background-color

Jedoch funktioniert das nicht immer, oft erhalten Sie die Fehler-Meldung: Dieser Block hat unerwarteten oder ungültigen Inhalt.

Überschrift H3 bis H6

Zur besseren Gliederung Ihres Textes sollten Sie mehrere Zwischenüberschriften einsetzen. Auf H2 folgt in jedem Fall ein bis mehrmals H3. Dabei gehen Sie wie für H2 beschrieben vor, nur dass Sie die (voreingestellte) H2 Überschrift in H3 ändern. Eine zweite, dritte… H2 Überschrift ist meistens nur bei langen Beiträgen notwendig. Auch auf diese folgt zunächst wiederum H3, bevor Sie am Ende (des Beitrags) vielleicht eine H4 Überschrift verwenden.

Über das Info-Symbol in der Kopfleiste des Editors können Sie kontrollieren, wie der Aufbau Ihres Beitrags aussieht. Eventuelle Fehler bei der Reihenfolge der Überschriften werden farblich hervorgehoben.

Wenn Sie Ihren Beitrag soweit fertig gestellt und gespeichert (nicht Veröffentlicht!) haben, kehren Sie noch einmal zu Ihrer H1 Überschrift zurück. Ein Klick in das H1 Feld zeigt Ihnen darüber den Permalink für diesen Beitrag an.

Anpassen des Permalinks

Diesen Permalink (URL) des Beitrags / der Seite hat WordPress automatisch erstellt. Je nach den von Ihnen in den WP-Einstellungen gemachten Vorgaben, setzt er sich etwa wie folgt zusammen

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

*Zusätze können beispielsweise Kategorie, Datum etc. sein. Je mehr „Zusätze“ Sie festgelegt haben, 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 können Sie daran etwas ändern, indem Sie neben dem oberhalb des Titels sichtbaren Permalink

  1. auf den Button Bearbeiten klicken,
  2. „unwichtige“ Teile z. B. Füllwörter des Titels löschen,
  3. aber Schlüsselwort / Keyphrase auf jeden Fall behalten

Alle Bestandteile des Permalinks vor dem Beitragstitel sind nicht veränderbar. Auch nachdem Sie Ihren Beitrag veröffentlicht haben, sollten Sie 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 eine 404 Fehlermeldung 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üssten Sie 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 Ihr 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

Fragen oder Anmerkungen » Kontakt

WordPress
WordPress – Themes und Templates
Websites
Schlecht gemachte Websites – Fehler vermeiden
Um die Nutzung meiner Website zu optimieren, verwende ich Cookies. Diese werden nur auf Ihrem Gerät gespeichert. Ich erfasse und speichere keine personenbezogenen Daten meiner Website-Besucher.
AKZEPTIEREN
ABLEHNEN
Datenschutz