Ein Leser namens Marius hat uns daraufhin hingewiesen, dass unsere Website auf jeder Seite drei H1-Überschriften hat.
In diesem Beitrag zeige ich, warum das keine gute Idee ist und wie man das in einem Block-Theme ganz einfach korrigieren kann.
Vielen Dank an Marius für den Hinweis.
Inhaltsverzeichnis
- H1 bis H6: Auf Webseiten gibt es sechs Überschriftebenen
- Wir hatten auf jeder Seite dreimal H1
- Twenty Twenty-Four hat nur eine H1 pro Seite
- Header und Footer anpassen im Website-Editor
- Fazit: Block-Themes sind echt gut
H1 bis H6: Auf Webseiten gibt es sechs Überschriftebenen
Wie im Einstieg in WordPress 6 in Kapitel 6.7 beschrieben, gibt es auf Webseiten sechs Überschriftebenen, die mit den Kürzeln H1 bis H6 gekennzeichnet werden.
Das H steht für heading (deutsch Überschrift), die Zahl dahinter für die Gliederungsebene. H2 bedeutet also nicht »die zweite Überschrift im Text«, sondern »eine Überschrift der zweiten Gliederungsebene«.
Die erste Gliederungsebene H1 ist normalerweise für den Titel des Dokuments reserviert, sodass Zwischenüberschriften im Beitrag immer mit der Ebene H2 beginnen.
WordPress weist dem Block Überschrift nach dem Einfügen automatisch diese Ebene zu, aber bei Bedarf können Sie sie in der Block-Werkzeugleiste ändern.
Außerhalb des Inhalts sollte es normalerweise so wenig wie möglich Überschriften geben, damit die Webseite als Ganzes eine sinnvolle Überschriften-Struktur hat.
Idealerweise ist die H1-Überschrift der Titel des Beitrags oder der Seite, und die weiteren Überschriften entsprechen dann der Gliederung.
Das erleichtert unter anderem Screenreadern die Navigation im Dokument, und Suchmaschinen wissen so, welche Überschrift die wichtigste ist und worum es auf der Seite geht.
Wir hatten auf jeder Seite dreimal H1
So weit so gut. Aber wie in der Einleitung erwähnt, schrieb ein Leser in seinem Kommentar unter dem Beitrag zum Anpassen vom Header in Block-Themes, dass es bei uns auf jeder Seite drei H1-Überschriften gab:
toll wäre wenn die titelverteilung beim twenty twenty-four theme besser wäre. bsp. auf dieser seite hat es 3 x H1 was suboptimal ist:
einstieg-in-wp.de/block-themes-anpassen-header/#comment-33584
: Einstieg in WordPress
: Twenty Twenty-Four: Header anpassen
: Einstieg in WordPress
Daraufhin habe ich mir im Browser-Entwicklertool mal den Quelltext angeschaut, und Marius hatte recht. Dreimal H1. Etwas vereinfacht sah die Sache so aus:
- Im Header:
<h1>Einstieg in WordPress</h1> - Titel des Beitrags:
<h1>Twenty Twenty-Four: Header anpassen</h1> - Im Footer:
<h1>Einstieg in WordPress</h1>
Drei H1. Auf jeder Seite. Nicht gut.
Twenty Twenty-Four hat nur eine H1 pro Seite
Zunächst einmal wollte ich wissen, ob der Website-Titel in einer Standard-Installation mit Twenty Twenty-Four auch als H1 ausgegben wird, und das kann man in einem WordPress-Playground ganz einfach checken:
- Playground mit WordPress und Twenty Twenty-Four aufrufen (der Link erzeugt ein WP mit TT4 im Browser)
Ein Blick in den Quelltext zeigt, dass Twenty Twenty-Four den Website-Titel als ganz normalen Absatz ausgibt. Etwas vereinfacht sieht der Code in Header und Footer so aus:
<p class="wp-block-site-title">Einstieg in WordPress</p>Keine Ahnung, wie und wann der Absatz um den Website-Titel auf dieser Website zu einer H1-Überschrift wurde, aber in einem Block-Theme ist die Korrektur ziemlich einfach.
Header und Footer anpassen im Website-Editor
Um die Ausgabe des Website-Titels zu ändern, starten Sie zunächst den Website-Editor. Dann rufen Sie den Header zur Bearbeitung auf, zum Beispiel mit der Befehlspalette:
- Befehlspalette starten mit dem Tastenkürzel
strgbzw.cmd+ k. - Im Eingabefeld
headereingeben. - Mit
Enterbestätigen.
Danach erscheint der Header zur Bearbeitung im Website-Editor und es kann losgehen:
- In der oberen Werkzeugleiste die
Listenansichtaktivieren - Den Block Gruppe und die Blöcke
Zeileaufklappen - Den Block
Website-Titelmarkieren. - In der Block-Werkzeugleiste auf das Symbol
H1 (Ebene wechseln)klicken. - Absatz auswählen und alle Änderungen speichern.
Für den Footer geht das im Prinzip genauso, nur das man in der Befehlspalette halt footer eingibt und die Block-Struktur etwas anders aussieht. Aber das kriegt man hin.
Fazit: Block-Themes sind echt gut
Drei H1-Überschriften sind keine gute Idee, und deshalb sollte der Website-Titel in Header und Footer als Absatz ausgegeben werden.
Ein Block-Theme besteht komplett aus Blöcken, und somit kann man im Website-Editor auch den Website-Titel in Header und Footer ohne Eingriffe in den Code ganz einfach ändern.
Lovin‘ it.
