SEO Tipp - H1 H2 H3 Co.

H1, H2, H3 für SEO verwenden und NICHT als Designelemente



Im SEO Tipp Nr. 3 geht es um die Wichtigkeit der Überschiftenstruktur und warum Überschriften wie H1, H2 und H3 nicht als "Designelemente" verwendet werden sollten!

Überschriften und eine sinnvolle Strukturierung von Inhalten ermöglichen ein erleichtertes Lesen.

Nicht nur in Zeitungsartikeln und Magazinen ist ein sinnvoller Einsatz von Überschriften und Zwischenüberschriften ratsam.

Ein Zeitungsartikel ohne Einleitung, Hauptteil mit Zwischenüberschriften und Schluß sieht nicht nur komisch aus, sondern ist auch schwerer zu verstehen - So auch für Suchmaschinen wie Google, Bing und Co.

Probleme bereiten Plugins & Extensions

Der Markt für Plugin, Extensions und Erweiterungen für diverse CMS ist groß. Viele Programmierer sehen ein Problem und erstellen hierfür eine Lösung. Prinzipiell ein sehr gutes System.

Aber wo liegt das Problem?

Am Beispiel eines WordPress Slider Plugins möchte ich kurz erklären wo hier der Fehler im "System" liegt.

  • Der Programmierer möchte den Slider schön, groß und bunt above the fold platzieren.
  • In seinen Augen ist das  die perfekte Stelle für eine H1 Überschrift.
  • Damit die Überschriften von Slider 2, 3 und 4 nicht ganz so groß sind entscheidet er sich hier für die Überschiften H2, H3 und H4
  • Für die Webseite des Programmierers funktioniert der Slider einwandfrei, denn er nutzt Sie nach dem o.g. Schema.

Nun nutzt ein User das Plugin mit Theme XY

  • Nach der Installation erstellt er diverse Slider. Die Einbindung funktioniert problemlos.
  • Einige der etwas längeren "Überschriften" im Slider erscheinen dem User zu groß. Daher wählt er H4. 
  • Für die mittelgroße Überschrift wählt er die H3.
  • und so weiter...
  • Da der Nutzer nun denkt, dass Thema "Überschrift" geklärt zu haben

 Aber damit liegt er natürlich falsch....

H1,H2, H3 und Co sollten nicht als Designelemente verwendet werden! Alternative?

Auch wenn es einfach ist durch einen Klick auf "h1" eine große, dicke Schriftart auszuwählen ist es aus SEO-Sicht wenig sinnvoll.

So kann bspw. das CSS angepasst werden, um der h1 eine CSS-Klasse hinzuzufügen.

"Beispiel Original"

h1{
color: #123456;
font-size:2em;
text-align:center;}

"Beispiel mit Lookalike"

h1,
.h1-lookalike
{
color: #123456;
font-size:2em;
text-align:center;}
Nun kann im Code für ein Span  .h1looklike verwendet werden ohne dass hierfür eine "echte h1" verwendet wird!

 

Eine sinnvolle Überschriftenstruktur sollte daher wie folgt aussehen:

- H1 (EINMALIG)
- H2 (Sinnvoll eingesetzt gerne mehrmals)
- H3 (Folgt hierarchisch auf die H2; Sinnvoll eingesetzt gerne mehrmals)
- H4 (Folgt hierarchisch auf die H3; Sinnvoll eingesetzt gerne mehrmals)
- ...

Optimale Überschriftenstruktur (Beispiel):

H1
-H2
--H3
--H3
-H2
--H3
---H4
---H4
---H4
----H5
--H3
---H4
-H2...

 

H1, H2, H3 und andere Überschriften sollten mit Layout und SEO vereinbar sein

Sollten Sie eine Webseite erstellen lassen sind in der Regel mehrere Parteien beteiligt. Während Designer, UX-ler und UI-ler auf die Nutzerfreundlichkeit und eine ansprechende Optik achten, wird aus SEO-Sicht eher auf die Technik geachtet.

Hier kann der o.g. SEO-Tipp mit den CSS-Lookalikes für beide Parteien eine gute Möglichkeit sein um an Ihre jeweiligen und gemeinsamen Ziele zu kommen.

 

 



Kurzfassung: H1, H2, H3 für SEO verwenden und NICHT als Designelemente

  • Überschriften (H1, H2, H3 ...) nicht verwenden ohne an die Seitenstruktur zu denken!
  • Überschriften-Lookalikes können helfen!

Ein SEO Tipp von Matthias Klenk - 16.07.2021


SEO Freelancer Matthias Klenk
Ihr persönlicher Ansprechpartner
Matthias Klenk

Sie benötigen Hilfe mit der Überschriftenstruktur? Als SEO-Freelancer stehe ich Ihnen gerne zur Verfügung.

Nutzen Sie das Kontaktformular für eine ausführliche Anfrage oder vereinbaren Sie einen Telefontermin.

👉 Jetzt Termin vereinbaren

oder Projekt anfragen

Weiterführende Infos

  1. Weitere Infos direkt von Google