Überschriften in WordPress – Funktion geht vor Format

Überschriften dienen der OrientierungStellen Sie sich vor, Sie schlagen ein Fachbuch auf und werfen einen Blick in das Inhaltsverzeichnis um sich einen Überblick darüber zu verschaffen, worum es in diesem Buch ganz konkret geht.

Und dann schaut das Inhaltverzeichnis ungefähr so aus:

Buchtitel: Nicht vorhanden
Kapitel 1: Nicht vorhanden
Kapitel 1.1: „Tipps für Einsteiger“
Kapitel 2: Nicht vorhanden
Kapitel 2.1: Nicht vorhanden
Kapitel 2.1.1: Heute unbedingt noch anschauen! Das finden Sie so nicht wieder.
…..

Ein wenig verwirrend, oder? Wüssten Sie anhand dieses Inhaltsverzeichnisses, worum es in dem Buch geht? Würden Sie dieses Buch kaufen?

So oder so ähnlich geht es Suchmaschinen wie Google oft, wenn sie eine Seite oder einen Beitrag sichten. Suchmaschinen versuchen, ähnlich wie menschliche Leser bei einem Buch, sich anhand der Überschriftenstruktur ein Bild davon zu machen worum es auf dieser Seite oder in diesem konkreten Blogartikel geht.

Überschriften dienen der Strukturierung, nicht der Formatierung

Leider verwenden viele Blogger und Website-Betreiber die Überschriften-Hierarchien die WordPress im Editor anbietet (Überschriften 1 – 6) nicht analog Ihrer Bedeutung im Text, sondern ausschließlich aufgrund der gerade passenden Formatierung.

Man benötigt zur Hervorhebung einen Textabschnitt der eine etwas größere Schriftart verwendet als der normale Fließtext und fett hervorgehoben ist? Super – Da passt die Überschrift 4 doch ganz genau.

Und die Überschrift 2 ist doch ein wenig zu groß, das sieht optisch nicht so ansprechend aus? Dann verwendet man lieber die Überschrift 3, die ist etwas dezenter.

Was dann optisch auf der Website recht ansprechend aussehen mag ist für die Suchmaschine dann aber ein ziemliches Durcheinander an Informationen – Ähnlich meines fiktiven Inhaltsverzeichnisses vom Beginn dieses Blogbeitrages.

Korrekte Anwendung der Überschriften

Korrekterweise sollten Sie Überschriften auf Ihrer Website daher wie folgt verwenden:

Überschrift 1

Das ist der Seitentitel, also die Überschrift. Diese Überschrift wird von WordPress automatisch für die Überschrift der Seite bzw. des Beitrages vergeben.

Um bei meiner Analogie mit dem Buch zu bleiben: Die Überschrift 1 entspricht dem Buchtitel und sollte daher für jede Seite und für jeden Blogbeitrag nur ein einziges Mal verwendet werden.

Für diesen Beitrag ist die Überschrift 1: „Überschriften in WordPress – Funktion geht vor Format“

Überschrift 2

Die Überschriften mit der Hierarchiestufe 2 entsprechen den Kapitel-Überschriften in einem Buch.

Die erste Überschrift in der Seite bzw. im Blogbeitrag ist daher immer eine H2-Überschrift.

In diesem Beitrag sind die folgenden Überschriften als Überschriften 2. Ordnung ausgezeichnet: „Überschriften dienen der Strukturierung, nicht der Formatierung“, „Korrekte Anwendung der Überschriften“ und „So passen Sie die Formatierung der Überschriften Ihren Vorstellungen an“

Überschrift 3

Diese Überschriften dienen als Einschub innerhalb eines Kapitels. Man verwendet sie wenn man innerhalb eines Kapitels einen weiteren, thematisch passenden Einschub einfügt, der aber kein eigenständiges Kapitel ist. In einem Fachbuch würden Sie also einem Kapitel 1.1.1 entsprechen.

In diesem Beitrag sind die folgenden Überschriften mit Überschriften 3. Ordnung ausgezeichnet: „Überschrift 1“, „Überschrift 2“, „Überschrift 3“ und „Überschrift 4 – 6“.

Überschrift 4 – 6

Die Überschriften 4 – 6 kommen nach meiner persönlichen Erfahrung so gut wie nie zur Anwendung. Sie würden Sinn machen, wenn man innerhalb eines Unterkapitels noch ein Unterkapitel einfügt.

Um beim Fachbuch zu bleiben: Eine Überschrift 4. Ordnung wäre ein Kapitel 1.1.1.1

In diesem Beitrag hier gibt es keine Überschriften 4. bis 6. Ordnung, weil ich den Beitrag nicht so tief verschachtelt habe.

Das Inhaltsverzeichnis dieses Blogbeitrages liest sich also wie folgt:

Titel: „Überschriften in WordPress – Funktion geht vor Format“
Kapitel 1: „Überschriften dienen der Strukturierung, nicht der Formatierung“
Kapitel 2: „Korrekte Anwendung der Überschriften“
Kapitel 2.1: Überschrift 1
Kapitel 2.2: Überschrift 2
Kapitel 2.3: Überschrift 3
Kapitel 2.4: Überschriften 4 – 6
Kapitel 3: So passen Sie die Formatierung der Überschriften Ihren Vorstellungen an

Vielleicht ist das nach wissenschaftlichen Anforderungen auch noch ein wenig sehr simpel, aber es wird doch anhand der Überschriften sehr viel verständlicher als das Kauderwelsch-Inhaltsverzeichnis am Beginn 🙂

So passen Sie die Formatierung der Überschriften Ihren Vorstellungen an

Ich kann die Beweggründe gut nachvollziehen die dazu führen dass man als Einsteiger dazu neigt, die Überschrift auszuwählen die optisch am besten passt. Gerade wenn das verwendete Theme nicht die Funktion bietet die Überschriften den eigenen Anforderungen anzupassen kann es frustrierend sein wenn die korrekte Überschriften-Hierarchie so gar nicht den eigenen Vorstellungen an Design und Ästhetik entspricht.

Daher hier ein kleiner Crash-Kurs in die Anpassungsmöglichkeiten per CSS. Wenn Sie ein Child-Theme verwenden (und nur dann!) können Sie die folgenden Angaben direkt in die style.css Ihres Themes schreiben. Wenn Ihr Theme die Möglichkeit bietet eine Custom CSS erfassen tragen Sie die folgenden Regeln dort ein.

Alternativ können Sie auch das Plugin „Simple Custom CSS“ installieren und die Anpassungen dann unter „Design“ – „CSS anpassen“ schreiben.


/* Überschriften formatieren */

h1, h2, h3, h4, h5 {font-family: Arial, Helvetica, sans-serif;}
h1 {font-size: 32px; color: red;}
h2 {font-size: 28px; color: blue;}
h3 {font-size: 24px; color: green;}

Zur Erläuterung:

font-family -> Definiert die Schriftart in der die Überschriften angezeigt werden sollen. Die erste angegebene Schriftart (Arial) wird standardmäßig verwendet. Wenn diese Schriftart auf dem Rechner des Lesers nicht verfügbar ist dann weicht das System auf die zweite Schriftart aus (Helvetica) und wenn auch diese Schriftart nicht vorhanden ist dann wird eine beliebige serifenlose Schrift (sans-serif) verwendet.

font-size -> Definiert die Schriftgröße. Je größer der Pixelwert desto größer die Schrift

color -> Definiert die Schriftfarbe. Die klassischen Farben können als Klarname angegeben werden, Sie können den Farbwert aber auch als Hexwert angeben (z.B. #ff000;}

Fazit

Eine ordentliche Überschriften-Struktur ist nicht nur in Büchern, sondern auch für eine Website wichtig, damit die Leser ebenso wie die Suchmaschinen auf einen Blick erkennen können worum es geht.

Wenn Ihnen dieser Beitrag gefallen hat dann freue ich mich wenn Sie ihn in Ihrem Netzwerk teilen.

Haben Sie noch Fragen hierzu? Dann stellen Sie diese gern in den Kommentaren.

Bildquelle:
©tashatuvango – Fotolia.de

Print Friendly

Kommentare

Überschriften in WordPress – Funktion geht vor Format — 23 Kommentare

  1. Hallo Michaela,

    danke für die wichtigen Tipps und Hinweise. Ich habe daraufhin meine Artikel alle angepasst und so formatiert, wie es auch Sinn macht.

    Ich bin ja mal gespannt ob ich das in Zukunft bewusster und von alleine mache 😉

    Grüße
    Sascha

    • Hallo Sascha,

      super, wenn mein Beitrag sofort dazu geführt hat dass Du Deine Artikel überarbeitet hast!

      Und ja, ich glaube, wenn man sich das einmal bewusst macht geht es einem irgendwann in Fleisch und Blut über.

      Herzliche Grüße
      Michaela

  2. Danke für die super Erklärung, Michaela.
    Was empfiehlst du denn für den Einleitungstext direkt am Anfang. Der ist bei mir immer farbig und kursiv. Ich benutze dazu die H4-Formatierung. Ist das ok oder sollte ich das ändern?
    Liebe Grüße
    Petra

    • Hallo Petra,

      ich würde Dir empfehlen die H4-Überschrift nicht mehr zu nutzen sondern stattdessen die Formatierungswerkzeuge aus dem Editor zu verwenden. Auch damit kannst Du Überschriften ja farbig und kursiv gestalten.

      Wenn Du dazu Hilfe brauchst darfst Du mich gern ansprechen.

      Herzliche Grüße
      Michaela

  3. Liebe Michaela,
    dieser Blogpost war ein guter Gedankenanstoss. Ich habe nie wie Google gedacht iS. von „form follows function“. Sondern „Ach, das sieht jetzt schön aus so!“. DO gibt es den nächsten Blogpost und den werde ich jetzt überarbeiten. Danke!
    Stürmische Grüsse von Bettina

  4. Das ist mit einer schönen Analogie beschrieben und auch alles richtig, aber was macht man wenn man jetzt keinen Fachartikel mit 1.1.2.1 Unterkapiteln schreibt (was wohl für die Mehrzahl der Seitenbetreiber zutrifft)?
    Sind Widget-Titel eher H2 oder H3?
    Usw. usf.

    Hier stößt dieses starre System der Headline Hierarchie meiner Ansicht nach an konzeptionelle Grenzen, weshalb ich auch den Eindruck habe, dass Google eventuelle „Fehler“ in der H-Auszeichnung geflissentlich übersieht oder nicht so stark gewichtet.

    • Ich darf mal antworten. Ich benutze in Widget stets H2 Überschriften. Allerdings sollte man dann darauf achten das man nicht zu viele Widgets am Laufen hat. Bei 20 Widgets könnte es etwas übertrieben sein. Zur Not kann man diese Überschriften auch „fett“ oder gänzlich mit eigenem CSS bestücken.

  5. Pingback: Änderungen bei Yoast WordPress SEO 3.0 › WordPress

  6. Vielen Dank für den Beitrag. Ich habe aber noch eine Frage…

    Mein Blog-Theme ist wie folgt formatiert:
    Blog-Name = H1 (Chrononautix)
    Blog-Name-Untertitel = H2 (Uhren-Blog)
    Beitrags-Titel = H2 (z.B. kosmische Uhrenmarken…)
    –> auf diese H-Formatierungen habe ich im Theme anscheinend keinen Einfluss.

    siehe http://chrononautix.com/

    Ich habe meine BEITRÄGE aber nun eigentlich immer mit H1 gestartet und mit H2 etc. hierarchisch fortgeführt.
    Siehe z.B.
    http://chrononautix.com/raumfahrt-uhrenmarken-moonwatch/

    Ich schätze das ist falsch? Muss ich dann im BEITRAG mit H2 oder H3 starten?
    Anders formuliert: Der Google-Bot geht z.B. auf http://chrononautix.com/raumfahrt-uhrenmarken-moonwatch/ und erkennt zunächst den Blog-Name als H1, den Untertitel und den Beitragstitel als H2 und DANN die Folge-Unterschriften… !? Ich hoffe ich konnte mich einigermaßen verständlich ausdrücken 🙂

    LG
    Mario

    • Für mich sieht das richtig aus.

      Bei dem Beitrag: „Militäruhren“ ist das hier die H1-Überschrift:

      Militäruhren: Günstige und teure Uhren für den rauen Einsatz.

      und das hier sind H2:

      Was sind Militäruhren? Historische Anhaltspunkte.
      Das Image von Militäruhren

      Das sieht für mich alles richtig aus 🙂

      Herzliche Grüße
      Michaela

  7. Hi Zusammen,

    Ich fand den Artikel auch hilfreich und die Antworten in den Kommentar Fragen. Ich selbst nutze hauptsächlich H1 und H2 Überschriften. Selten mal H3. Ich bin mir auch nicht sicher ob das so gut ist. Ich glaube auch wenn man einen Artikel schön und übersichtlich präsentieren möchte, sollte man den Tipps folgen.
    Danke dafür, LG
    Bastian

  8. Pingback: 8 einfache SEO-Tipps, damit deine Website-Inhalte gefunden werden › Contentkiste

  9. Danke für den Artikel. Ich bin neu beim bloggen und wußte das so leider auch nicht. Was heißt H1 und H2? Headline 1, Headline 2? Wie ich das verstehe soll man die Formatierungen von WordPress: Überschrift 1, Überschrift 2, Überschrift 3 usw. gar nicht verwenden sondern nur selbst über den Editor die Schriftgrößen, fett oder kursiv einstellen? Und dann die Hierarchie beachten? Oder kann ich Überschrift 1, Überschrift 2 usw. verwenden wenn ich hier die richtige Hierarchie nutze? Viele Grüße Kathleen

    • Hallo Kathleen, die WordPress-Formatierungen Überschrift 1, Überschrift 2 etc. entsprechen H1, H2 und so weiter.

      Du darfst also natürlich die WordPress-Formatierung verwenden. Dabei solltest Du nur darauf achten, dass Du sie in der richtigen Reihenfolge verwendest und nicht quer durcheinander 🙂

      Herzliche Grüße
      Michaela

  10. Huhu, ich habe mal eine Frage. Wie kann ich denn bei WordPress diese einzelnen Überschriften oben wo „Home“, „Blog“, „Lernen“ usw. steht einfügen? Ich kriege leider immer nur eine Überschrift hin falls man das überhaupt so nennt, wahrscheinlich nicht :D. Würde mich über eine Antwort sehr freuen.
    Liebe Grüße
    Kerstin

  11. Hallo in die Runde,

    ich habe einen Koch Blog erstellt über ein WP Thema.
    Mein Problem ist, das die Seite zwei H1 Überschriften generiert, eine davon muss ich also abschalten. Ich weiß das es geht, da ich es vor Jahren schon mal gemacht habe, es nun aber irgendwie nicht hin bekomme. Bin für jeden Rat dankbar.

    • Hallo Daniel,

      das ist so ein wenig schwer zu beantworten.

      Zum einen kann es nach HTML5 korrekt sein, wenn eine Seite mehr als eine H1-Überschrift hat, sofern diese sich jeweils auf unterschiedliche Sektionen bezieht.

      Zum anderen müsste man sehen, warum zwei H1-Überschriften generiert werden. Dafür wäre ein Blick in den Quelltext Deiner Website hilfreich und evtl. auch zu wissen, welches Theme Du verwendest?

      Herzliche Grüße
      Michaela

  12. Vielen Dank für diesen hilfreichen Artikel! Ich überarbeite meine Blogartikel gerade alle, damit die Struktur passt und auch Google besser klar kommt. Gibt es eigentlich Ausnahmen bei denen die Suchmaschinen dieser Überschriften-Struktur nicht folgen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


Ich möchte auch den WordPress-Rundbrief abonnieren