Verfasst durch karriere tutor® 
„Was meint der Programmierer mit semantischem HTML?“, fragt sich vielleicht der SEO-Experte. „Was interessiert den SEO-Kollegen, ob ich die Daten auf der Website im Backend strukturiere?“, wundert sich der Webentwickler. „Warum soll ich dem Content Manager Meta-Angaben für den Blogbeitrag liefern?“, fragt sich der Texter. Doch dies sind genau die Fragen, die letztlich zu mehr SEO-Erfolg und damit zu steigendem Traffic auf der Website führen. Es lohnt sich also, einen näheren Blick darauf zu werfen, um zu verstehen, wie dieses Dreamteam höhere Klickraten für die eigenen Ergebnisseiten in der organischen Suche erzielen kann.
Daniel Elischer (Webentwickler), Maren Kräft (Online-Redakteurin) und Samanta Piskor (Dozentin für E-Commerce und Suchmaschinenmarketing)
Mehr SEO-Erfolg dank Rich Snippets
Für mehr SEO-Erfolg brauchen wir nicht nur gute Rankings – Top-10-Rankings. Immer wichtiger wird auch eine aufmerksamkeitsstarke Darstellung unserer Website in den organischen Suchergebnissen. Dies gelingt mit den sogenannten Rich Snippets, die die organische Click Through Rate („CTR“) immens steigern können. Rich bzw. Featured Snippets sind zudem ein gutes Beispiel dafür, wie Suchmaschinen strukturierte Daten interpretieren und in den SERPs („Search Engine Result Pages“) darstellen.
Was ist ein Rich Snippet?
Ein Snippet ist ein „Textschnipsel“ von der Website, der zu einem bestimmten Suchbegriff in den Suchergebnissen angezeigt wird. Das normale Snippet besteht nur aus Titel, Beschreibung und der URL. Bei einem Rich Snippet werden neben einem kleinen Text weitere relevante Informationen wie Sterne-Bewertungen, ein Bild, Produkte oder nützliche Links dargestellt. Sie erscheinen meist ganz oben, auf den ersten Positionen der SERPs. Manchmal auch direkt auf der rechten Seite neben den Google-Anzeigen.
Das Zusammenspiel von Technik, Anwendung und Redaktion
Natürlich sind und bleiben User und Content der King für Websitebetreiber und SEO-Experten. Das heißt, um überhaupt auf die erste Seite der organischen Suche zu kommen, brauchen wir relevanten Content und eine technisch saubere und userfreundliche Website. Hier müssen Webentwickler, SEO-Experten, Content Manager und Online-Redakteure eng zusammenarbeiten. Dies gilt besonders für Rich Snippets, die durch Technik entstehen, aber Inhalte wiedergeben. So kommt es bei den Featured Snippets gleichermaßen auf das technische Verständnis, die praktische Anwendung im Content Management System („CMS“) sowie auf die Texte, Bilder und weitere relevante Inhaltselemente an.
Spätestens seit dem Hummingbird-Update von Google wurde es für Websites zunehmend wichtiger, strukturierte Daten zu liefern. Denn dadurch machen sie es den Suchmaschinen leichter, aus den unzähligen im Netz existierenden Informationen die inhaltlich passenden auszuwählen und geeignete Suchergebnisse zu liefern.
Doch was ist das inhaltlich passende Suchergebnis zu einer Suchanfrage? Hier kommen wir in den Bereich Semantik.
Was ist Semantik und die semantische Suche?
Semantik meint die Bedeutungslehre von Symbolen und Begriffen. Ein Begriff kann je nach Kontext völlig unterschiedliche Bedeutungen haben. Nehmen wir das simple Beispiel „Puppe“: Wie Sie sich vorstellen können, hat der Begriff für eine Mutter, die ein Geburtstagsgeschenk für ihre fünfjährige Tochter sucht, eine andere Bedeutung als für einen Biologen, der ein Forschungsprojekt über Raupen durchführt. Und genau wegen dieser unzähligen denkbaren Kontexte, in denen die Suchintention des Users stehen kann, hat Google in den letzten Jahren große Anstrengungen darin unternommen, den Suchalgorithmus auf die semantische Suche auszurichten. Schließlich will Google seinen Usern die relevantesten Suchergebnisse liefern und daher verstehen, was die genaue Suchintention des Users ist. Doch wie kommt hier nun die Technik ins Spiel?
Semantisches HTML seit HTML 5
Die Einführung von HTML 5 im Jahr 2015 stellte im Hinblick auf die semantische Suche eine wahre Revolution in der Webprogrammierung dar. Mit Hilfe semantischer Auszeichnungen – auch Tags genannt – ist es seitdem möglich, Daten einer Seite so zu strukturieren, dass der Content in einen für die Suchmaschinen gut lesbaren, sinnvollen Zusammenhang gebracht werden kann. Verwenden Sie für Ihre Seite HTML-Tags wie <article>, <nav>, <header>, <footer> und <strong>, ersparen Sie den Suchmaschinen einen enormen Crawling-Aufwand und ermöglichen ein besseres Auslesen Ihrer Seite. Eine Rich-Snippet-Darstellung in den SERPs ist dann wahrscheinlicher. Und umso eher können Sie sich folglich über höhere Klickraten und damit mehr Website-Nutzer freuen.
Wie funktionieren semantische Tags?
Ein gutes Beispiel, um zu verdeutlichen, wie Semantic Tags aus HTML 5 im Unterschied zu den Display Tags der alten HTML-Generation funktionieren, ist der Vergleich zwischen “bold” und “strong”.
<bold> vs. <strong>
Während <bold>Der Hund</bold> den Text lediglich grafisch fett darstellt, legt <strong>Der Hund</strong> fest, dass der Hund im Kontext des gesamten Texts (also im beschriebenen Geschehen) eine inhaltlich wichtige Rolle spielt. Es ist kein Zufall, dass der Browser standardmäßig auch den Text zwischen <strong> fett darstellt. So wird inhaltlich Wichtiges gemeinhin grafisch hervorgehoben und vom übrigen Text abgesetzt.
Ziel der semantischen Tags ist es, den Browser, den Screenreader und die Suchmaschinen wissen zu lassen, um welche Art von Inhalt es sich handelt.
Tipp: Halten Sie sich stets vor Augen, dass grafische Darstellungen immer eine Angelegenheit für Cascading Style Sheeds (CSS) sind und nicht für HTML. Der Versuchung, Text in <strong>-Tags zu wickeln, um diesen fett darzustellen, sollten Sie widerstehen.
Das Article-Element
Eine weitere für Blogbetreiber interessante HTML-Auszeichnung ist das Article-Element: Ein Article-Tag stellt einen unabhängigen Inhalt dar, der auch in einem komplett anderen Kontext Sinn ergeben würde. Stellen Sie sich vor, Sie lesen einen Artikel auf der Homepage des Magazins A. Da der Artikel in sich abgeschlossen und konsistent ist, könnte man ihn auch auf der Website eines beliebigen anderen Magazins B darstellen. Der Code lautet wie folgt:
<article>
<h1>Was macht eigentlich karriere tutor?</h1>
<p>Es hat die Aufgabe, Menschen gemäß ihren individuellen Talenten zu fördern und zum Erfolg zu verhelfen.</p>
</article>
Das Header-Element
Im nächsten Schritt schauen wir uns noch das Header-Element an. Der Inhalt zwischen Header-Tags führt den User in den Folgeinhalt ein. Häufig finden sich im Header Nav-Elemente wieder, welche wiederum die Seitennavigation beinhalten, aber häufig auch Überschriften und Danksagungen. Aufmerksamen Lesern wird aufgefallen sein, dass das Article-Element in sich geschlossenen Inhalt repräsentiert und demgemäß auch Header-Tags beinhalten darf. Das heißt wiederum, dass man auf einer Seite häufig auch mehr als einen Header finden kann.
<article>
<header>
<h1>Was tut karriere tutor?</h1>
<p>Die Mission:</p>
</header>
<p>Es hat die Aufgabe, Menschen gemäß ihren individuellen Talenten zu fördern und zum Erfolg zu verhelfen</p>
</article>
Auf diese Weise kann man die Einbettung von Blog-Content in HTML-Tags fortführen, bis hin zu den Meta-Angaben Title und Description oder auch zu den für die Rich-Snippets-Darstellung relevanten, strukturierten Daten. Beachten Sie, dass die hier exemplarisch angeführten Codes und Elemente keine erschöpfende Liste darstellen. Vielmehr ging es darum, Ihnen die Grundprinzipien des semantischen Webs zu vermitteln und Ihnen den Weg in den <strong>sinnvollen Umgang mit HTML</strong> zu ebnen.
SEO-Erfolg verlangt Perspektivenwechsel und interdisziplinäre Zusammenarbeit
Die gute Nachricht für SEO-Experten wie für Online-Redakteure ist, dass man keine Entwicklerkenntnisse benötigt, um Google strukturierte Daten zu liefern. Gängige Content Management Systeme wie WordPress und dafür entwickelte Plug-ins wie Yoast und Schema.org übersetzen die eingegebenen Inhalte automatisch in strukturierte Daten. Jedoch ist es durchaus hilfreich, wenn Sie als SEO- oder Content Manager ein bisschen „Techie“-Hintergrundwissen im Umgang mit strukturierten Daten abrufen können.
Semantisches HTML bestimmt die Zukunft des Internets, und Suchmaschinenbetreiber wie Google streben zu Recht danach, inhaltlich relevanten Content auszufiltern und auf den vordersten Rängen der Suchergebnislisten anzuzeigen. Als Web Developer sollten Sie sich also die Zeit nehmen, sich mit dem neuen HTML-5.0-Element auseinanderzusetzen und in den Programmieralltag einzubauen.
Egal ob Sie als SEO-Manager, Texter oder Entwickler an Ihrer Website arbeiten, schauen Sie doch gleich mal in den Quelltext, ob Sie die semantischen HTML-Tags wiederfinden, die wir Ihnen hier vorgestellt haben.
