Semantische HTML Tags in TYPO3: Struktur für SEO

Gliederung von HTML Code zur Suchmaschinenoptimierung

Seit der Einführung von HTML5 hat man beim Aufbau des Quellcodes einer Webseite eine sehr gute Möglichkeit, die Inhalte der Seite zu gliedern. Für den menschlichen Besucher ist dies unsichtbar, für Suchmaschinen ist dies jedoch eine sehr große Arbeitserleichterung. Daher ist die Arbeit mit semantischen Tags ein wichtiges Thema bei der Suchmaschinenoptimierung. Und wie in anderen Themenfeldern ist TYPO3 auch in diesem Bereich der SEO sehr gut aufgestellt.

Was bedeutet semantischer Tag in HTML?

Zuerst einmal: Was ist überhaupt ein semantischer Tag? Hinter dieser Struktur steckt die Idee, eine Webseite gleich schon bei der Generierung ein einzelnen Blöcke an HTML-Code zu gliedern. Denn woraus besteht eine Webseite? Meist hat man eine Gliederung in der folgenden Art: 

  • Kopfbereich: Dieser enthält die Navigation, das Logo, den Titel der Seite und eine Parallelnavigation. Der größte Teil dieses Bereichs ist bei jeder Seite gleich. 
  • Inhaltsbereich: Hier spielt das inhaltliche Leben der Seite, hier sind die Inhalte aufgeführt, die auf jeder einzelnen Seite anders sind. In diesem Bereich der Seite stehen Texte, Bilder, Videos. 
  • Fußbereich: Am unteren Ende der Webseite stehen oftmals Adressen, Kontakte, Serviceangaben, eine kleine Navigation. Oft sind die Angaben statisch und auf jeder Seite gleich. 

Damit ergibt sich, dass sowohl für menschliche als auch für maschinelle Besucher der Webseite klar ist, in welchem Teil der Webseite die eigentliche Information steckt. Um dies für Suchmaschinen klarer zu beschreiben, verwendet man semantische HTML-Tags.

<header> und <footer> anstatt <div>

Um das Beispiel von oben aufzugreifen, gliedert man nun die oberste Grundstruktur der HTML-Elemente einer Webseite in drei Bereiche. Diese werden mit eigenen HTML-Tags benannt: 

 <header>
  <!-- Kopfbereich der Webseite -->
</header>
  
<main>
  <!-- Inhalt der Webseite -->
</main>
  
<footer>
  <!-- Fußbereich der Webseite -->
</footer>

Damit haben wir der gesamten Webseite bereits eine Struktur gegeben. Diese kann man nun noch erweitern. Denn oft ist sinnvoll, die semantische HTML-Struktur der Webseite zu nutzen, um Formatierungen über das Style Sheet zu gestalten. So kann es die Anforderung für das Layout der TYPO3 Webseite sein, die Schriften in den drei Bereichen der Seite unterschiedlich zu gestalten. Für das CSS ist es dabei die beste Wahl, mit IDs zu arbeiten, da diese die höchste Wertigkeit haben. Die Grundstruktur des HTML-Codes für den Aufbau der Webseite kann also so aussehen: 

 <header id="header">
  <!-- Kopfbereich der Webseite -->
</header>
  
<main id="main">
  <!-- Inhalt der Webseite -->
</main>
  
<footer id="footer">
  <!-- Fußbereich der Webseite -->
</footer>

Natürlich kann man die Namen der ID für jedes Element frei wählen und eine andere Bezeichnung wählen als den Namen des HTML-Elements. Es hat sich aber gerade in der Arbeit mit umfangreichen CSS-Dateien als großer Vorteil erweisen, klar benannte Namen für Elemente zu vergeben. Dies erleichtert einem Frontend Entwickler die Arbeit ungemein. 

Fluid Templates und Layout in TYPO3 mit semantischen HTML-Tags

Hier schlägt nun die große Stunde von TYPO3! Denn sehen wir uns an, was passiert, wenn TYPO3 eine Seite rendern soll. 
Beim Aufruf einer Webseite in TYPO3 bekommt das System die Aufgabe, eine zu einem Backend Layout gehörende HTML-Datei als Fluid-Template zu laden. In dieser Datei steht dann der Verweis auf eine Layout-Datei. In dieser Datei findet sich nun das grundlegende Gerüst der gesamten Webseite und das Inhaltsverzeichnis aller zum Backend Layout passenden Elemente, die in diese Seite eingebunden werden sollen. Und damit ist es diese Datei, um den oben stehenden Code einzubauen. Somit kann die Layout Datei folgendermaßen aussehen: 

 <header id="header">
  <f:render partial="Header" />
</header>
  
<main id="main">
  <f:render section="content" />
</main>
  
<footer id="footer">
  <f:render partial="Footer" />
</footer> 

Damit haben Sie das Grundgerüst für Ihre TYPO3 Webseite angelegt. Sehen wir uns nun die weiteren Elemente an, die wir gliedern können und sollten, um erfolgreich SEO für unsere Webseite zu betreiben.

Semantische HTML-Tags für Navigation und einzelne Bereiche

Wenn wir in den Quellcode einer fertig generierten Webseite blicken, dann sehen wir oft sehr viele Zeilen Quelltext, bevor der eigentliche Inhalt zu sehen ist. Dies ist dann meist die Navigation. Bei der Nutzung responsiver Webseiten ist dies auch kein Wunder, denn oft stecken in der Navigation im Kopfbereich der Seite sehr viele Links über zwei oder sogar noch mehrere Ebenen. Diese sind zum einen mit CSS- und JavaScript-Code versehen, damit wir diese Navigation mit Hilfe eines Frameworks wie Bootstrap bei mobilen Endgeräten anders darstellen können als auf Desktop-Rechnern. Zum anderen möchten wir erfolgreich Suchmaschinenoptimierung betreiben und verstecken in den Links <TITLE>-Tags und andere HTML-Elemente, mit denen sich Suchmaschinen orientieren können. Es kann also eine ganze Menge an Quelltext zusammen kommen.


Um nun einer Suchmaschine zu sagen, dass es sich bei einem bestimmten Bereich der Webseite um die Navigation handelt, nutzt man den <nav> Tag. Sie können also Ihre Navigation in ein entsprechendes HTML-Element einbauen: 

 <nav>
  <!-- Navigation der Webseite -->
</nav>

Sie haben die Möglichkeit, mehrere <nav>-Tags in Ihre Webseite einzubauen, denn neben der Header Navigation hat man oft eine Brotkrümel-Navigation und hervorgehobene Seiten wie Kontakt oder Impressum im Footer der Seite.

Semantische HTML-Tags für einzelne Inhaltselemente

Nach der Grobgliederung des Quelltextes Ihrer Webseite können Sie einzelnen Elementen noch HTML-Elemente zuweisen. Dabei gibt es eine Menge Möglichkeiten: 

  • <header> für Überschriften 
  • <aside> für nebensächliche Informationen (z. B. eine Sidebar) 
  • <article> für einzelne Inhaltselemente 
  • <sections> für einzelne Bereiche im Inhalt 

Moment mal... <header> als Element? Hatten wir das nicht schon? Ja, richtig, das <header> Element dient uns bereits dazu, den Kopfbereich der Webseite von allen anderen Bereichen zu trennen. TYPO3 geht beim Zusammenbau einer Webseite seit der Version 9.5 so vor, dass alle Überschriften <h1> bis <h6> mit einem <header>-Tag umfasst werden. Wer ein upgrade einer TYPO3 Webseite von der Version 8.7 auf die Version 9.5 macht, erlebt also unter Umständen sein gestalterisches Wunder, wenn er den Kopfbereich zuvor im CSS über den <header> Tag gestaltet hatte. Hier zeigt sich erneut, dass die ID #header eine gute Idee ist. 

Um den Gebrauch dieser Elemente gibt es hervorragende Möglichkeiten, den Streit zwischen Entwicklern in diversen Foren im Internet zu verfolgen. Grundsätzlich sollte man bei der Verteilung der oben genannten HTML-Elemente beim <header> klar die Headings umfassen. Der <article> kann für mehrere Ebenen gebraucht und auch verschachtelt werden. Für die Verbindung mit den <sections> gibt es keine starren Regeln. Nutzen Sie beim Templating Ihrer TYPO3 Webseite diese Elemente, um den Inhaltsbereich Ihrer Seite sinnvoll zu gliedern.

Semantische HTML-Tags für SEO

Warum nutzt man überhaupt semantische HTML-Tags für den Aufbau der Webseite? Nun, diese Frage lässt sich einfacher beantworten, wenn man sich einmal den fertig generierten Quelltext einer Webseite ansieht. 

Oftmals stellt man dann fest, dass sich nach dem <HEAD>-Bereich der Webseite im <BODY>-Tag der Kopfbereich der Webseite öffnet. Dort steht der Quellcode für die Navigation. Sehr viel Quellcode. Oft sind es Hunderte Zeilen. Dann endlich kommt der Inhalt. 

Und genau aus diesem Grund sollte man semantische HTML-Tags nutzen. Auch Suchmaschinen lesen Ihren Quellcode. Wenn Sie Google Arbeit abnehmen und der Maschine sagen, dass der eigentliche Inhalt der Seite in einem bestimmten Bereich des Code liegt, dann nehmen Sie der Maschine mitunter 90% der Arbeit ab. Und das wirkt sich beim Thema SEO sehr positiv aus.

Thomas Berscheid ⧉ 06.08.2020