Überschriften gestalten

Wie formatiere ich meine Überschriften H1 bis H6?

Überschriften, so genannte <h> Tags, sind ein strukturelles Element, das Text in Abschnitte gliedert und für den Leser übersichtlicher macht. In WordPress haben wir 6 verschiedene Gestaltungsmöglichkeiten vorgegeben, die wir durch das Einfügen von CSS nach eigenem Geschmack abändern können. Die Hauptüberschrift wird dabei als <h1> Tag bezeichnet.

Der H1-Tag ist eine HTML-Überschrift, die am häufigsten verwendet wird, um den Titel einer Webseite auszuzeichnen. Die meisten Websites verwenden CSS, um den H1-Tag auf der Seite gegenüber kleineren Überschriften wie H2, H3 etc. hervorzuheben

Überschriften werden von Google nicht als direkter Rankingfaktor angesehen, dennoch können sie indirekt für ein gutes Ranking sorgen.
Seit einem Google Webmaster Hangout im September 2019 wird an dieser langjährigen Auffassung jedoch etwas gerüttelt. Davor gab es die mehrheitliche Meinung, dass Google Seiten mit mehreren oder keiner H1 Überschrift abstraft. Google selbst sieht das jedoch gar nicht so kritisch.

Zunächst wollen wir uns hier darum kümmern, wie wir mit CSS diese Überschriften gestalten und geben uns mit 6 verschiedenen Möglichkeiten zufrieden. Ich habe dafür 2 Beispiele gewählt, wie ich sie auf meinen Websites anwende.

Beispiel für eine H1-Überschrift

Die Gestaltung der Überschrift orientiert sich u.a. an der Farbgebung der Website, dem Platzbedarf und eben dem Anblick im Auge des Betrachters.

Beispiel für eine H2-Überschrift

Nach diesen Mustern können alles weiteren Überschriften H3 bis H6 gestaltet werde. Zu beachten ist immer, dass es sich auf alle Überschriften der gesamten Website auswirkt. Nachträgliche Änderungen sind also auf jeder Seite, bei jeder Überschrift, zu überprüfen.