Headless CMS und SEO – dies gilt es zu beachten

Populäre Vertreter für Headless CMS sind Sulu, Sanity oder Hygraph und es kommen ständig neue CMS dazu. Grund genug also, einmal einen genaueren Blick darauf zu werfen, was man bei der Suchmaschinenoptimierung für ein Headless CMS beachten muss.

Was ist ein Headless CMS?

Ein Headless CMS ist ein Content Management System, das nur die Backend-Funktionalität bereitstellt, nicht aber die Frontend-Benutzeroberfläche. Das bedeutet, dass das CMS den eigentlichen Inhalt von der späteren Darstellung trennt. Während klassische CMS die drei Komponenten Datenbank, Backend und Frontend bereitstellen, basieren Headless CMS nur noch auf zwei dieser Komponenten, Datenbank und Backend. 

Diese Art von CMS ist besonders nützlich, wenn Inhalte auf verschiedenen Plattformen und Geräten angezeigt werden sollen, z. B. auf einer Website, in einer mobilen App oder über einen digitalen Assistenten. Gerade in Zeiten von Mobile First, dem Internet of Things und unzähligen Ausgabegeräten macht Headless also durchaus Sinn. Man kann sagen: Je mehr wir uns der IoT-Ära, plattformübergreifenden Erfahrungen, KI, Sprachassistenten und Omnichannel-Erfahrungen nähern, desto mehr stoßen traditionelle CMS an ihre Grenzen. Wie aber optimieren wir für Suchmaschinen, wenn wir nur noch den Inhalt beeinflussen können, nicht aber die Darstellung? 

Die Admin-Oberfläche im Demo-Backend unter sulu.rocks/admin/

SEO für Headless: eine Einführung 

Headless SEO bedeutet vor allem eins: Planung. Bevor wir eine Website launchen, müssen wir Schritte durchführen, die noch vor der ersten Zeile Code stattzufinden haben:

Die Datenstruktur 

Unser Content besteht aus Contentpieces oder sogenannten Entities, die einer bestimmten Struktur folgen müssen. Ein Beispiel: Wenn wir eine Produktcontent-Datenbank aufbauen wollen, müssen wir vorab festlegen, welche Elemente wir für jedes Contentpiece, also in diesem Fall das Produkt, pflegen wollen. Also: Preis, Abmessungen, Gewicht, Farbe etc. 

Dabei gilt zu beachten: Diese Daten werden unabhängig von einer Desktop- oder mobile-Darstellung gepflegt, wir schränken uns nicht durch Darstellungsmöglichkeiten in der Beschreibung der Entität ein, sondern definieren losgelöst von Layout Beschränkungen mit welchen Attributen wir unser Produkt bestmöglich versehen.

Die Templates

Im Headless CMS müssen Templates per XML vom Entwickler erstellt werden. Dementsprechend sollte ich mir im Vorfeld für jedes relevante Ausgabegerät genau überlegen, wie die UX bestmöglich auszusehen hat, welche Felder und Content-Bereiche notwendig sind und wie das Template im Endeffekt aussehen soll. 

Bei der Planung einer Website ist dieses Vorgehen generell empfohlen, das Headless CMS zwingt uns diese Vorab-Konzeption jedoch auf. Aus UX Sicht (und damit aus SEO Sicht) ein klarer Vorteil! 

Wir müssen SEO von Anfang an mitdenken! 

Eine Herausforderung beim Headless CMS ist die Tatsache, dass uns entsprechende Helferlein fehlen. Während ich beim klassischen WordPress beispielsweise auf Yoast oder andere SEO-Plugins zurückgreifen kann, die mir Felder für notwendige Meta-Angaben generieren, muss ich beim Headless CMS den SEO freundlichen Quelltext selbst von Grund auf neu planen und erstellen. 

Das ist jedoch weniger komplex, als man vielleicht denkt. Im Folgenden listen wir die Felder auf, die für eine SEO im Headless CMS unabdingbar sind. Die hinterlegten Inhalten werden im Backend-Bereich des CMS eingegeben und können dann über die API abgerufen und angezeigt werden.

• Meta Robots: Wir brauchen eine saubere Steuerung, welche Inhalte indexiert werden sollen und welche nicht. Zudem können wir hier beispielsweise hinterlegen, ob der Bot Links folgen soll oder nicht und ob die Seite ein Snippet mit Description erhalten soll oder nicht. 
• Canonical Tag: Dito. Wir definieren vorab, welche URL die Haupt-URL einer Seite ist und kanonisieren Seiten, die nur Derivate dieser Seite darstellen, beispielsweise Parameter-URLs. 
• Title Tag: Auch beim Headless CMS brauchen wir einen individuellen und ansprechenden Title Tag, der nicht länger als 59 Zeichen sein sollte und den Besucher zum Klicken animiert. 
• Descriptions: Die Description ist unser kostenloser Werbeslogan bei Google & Co. Hier gilt: die Zeichenlänge sollte zwischen 120 und 155 Zeichen liegen und die Formulierung sollte ansprechend und unique sein und einen Klickanreiz bieten.
• Das richtige Markup nach schema.org bei z.B. Produktdarstellungen oder FAQs sollte entsprechend angelegt sein. Hier muss im Vorfeld gut überlegt werden, welche Schemata für das Unternehmen relevant sind.
• H-Tags, also die saubere hierarchische Gliederung der Inhalte nach Überschriften und Unter-Überschriften.

10% Rabatt auf alle DF Produkte

Jetzt 2-Jahre Laufzeit wählen!

Headless CMS und Redaktionen

Ist das Backend entsprechend eingerichtet, stellt man als Editor kaum Unterschiede zu klassischen CMS fest. Beim Headless CMS Sulu zum Beispiel, das auf dem PHP-Framework Symfony basiert, sind all diese Felder bereits im Reiter „SEO“ hinterlegt. Dem Redakteur steht zudem ein Editor mit Live-Preview zur Verfügung, der an klassische CMS erinnert. 

Wichtig ist, dass die Templates, die in XML geschrieben werden, SEO Empfehlungen korrekt implementieren. Wenn der Editor beispielsweise eine „Headline“ für den Artikel zur Verfügung stellt, dann sollte diese selbstverständlich im entsprechenden XML-Template als H1 ausgezeichnet sein. Wenn aus Gründen der Vorformatierung beispielsweise eine H2 gewählt wird, kann es passieren, dass auf keiner Unterseite eine H1 vorhanden ist. 

Doch seien wir ehrlich: Solche Basics werden auch heute noch von vielen WordPress-Entwicklern nicht korrekt berücksichtigt, die bei der Template-Gestaltung H-Tags als Design-Elemente in Seitenleisten verwenden, um die hübsche Vorformatierung zu nutzen. 

Man kann sogar, wenn man Headless und SEO richtig verknüpft, einen elaborierteren Editor bauen als den, den es üblicherweise in klassischen CMS gibt. Hervorragend erklärt wird dieser Vorteil von Lidia Infante, Senior SEO Manager at Sanity.io, im Interview mit Loren Baker auf searchenginejournal.com. Lidia nennt als Beispiel, dass man als Vorgabe machen kann, dass H1 und Title Tag sich unterscheiden müssen, die Hierarchie von H-Tags eingehalten werden muss oder die Description nicht über 155 Zeichen lang sein darf. Der Redakteur kann dann den Artikel nicht veröffentlichen, wenn diese Regel nicht erfüllt ist.  Das ist insbesondere dann von Vorteil, wenn das CMS von vielen verschiedenen Redakteuren und Stakeholdern genutzt wird oder User Generated Content erstellt wird.

Diese Veröffentlichungsregeln müssen vorab von der SEO im Unternehmen klar definiert sein und können dann ins CMS integriert werden. Wir haben also quasi eine grüne Wiese der Contenterstellung, die es bestmöglich zu nutzen gilt. Wichtig ist, dass wir zukunftsweisende und sinnvolle Regeln definieren, da spätere Änderungen immer direkt über die IT realisiert werden müssen.  

Schön ist auch die Möglichkeit, per API weitere Contentquellen anzubinden. So kann ich beispielsweise festlegen, dass meine Produktdescriptions alle von einer künstlichen Intelligenz via API angeliefert werden oder die KI für meine Bilder automatisch aussagekräftige Alt-Texte liefert. Spätestens seit den ersten Tests mit openai.com ist klar, dass sich die Texterstellung in der Zukunft noch einmal grundlegend verändern wird. Mit einem Headless CMS lässt sich optimal von dieser Weiterentwicklung profitieren.

Texterstellung mit ChatGPT (openai.com)

Man sieht also: Die größte Herausforderung beim Headless CMS besteht darin, eine saubere und klare Planung vor dem Launch einer Seite durchzuführen. Die Hauptverantwortung liegt hier bei den Entwicklern. Aus redaktioneller Sicht besteht der größte sichtbare Unterschied zwischen einem herkömmlichen CMS und einem Headless CMS in der fehlenden Möglichkeit, Metadaten im laufenden Betrieb zu bearbeiten. Wenn die notwendige Planung jedoch vorausgegangen ist, kann man davon ausgehen, dass SEO im laufenden Redaktionsbetrieb für Headless CMS sogar einfacher ist als die SEO für ein klassisches CMS, insbesondere, wenn im Vorfeld ein derart intelligenter Editor erstellt wurde, der SEO direkt berücksichtigt.

Gehört dem Headless CMS die Zukunft?

Um diese Frage zu beantworten, lohnt es sich, insbesondere im Hinblick auf SEO, immer mal wieder, in Richtung Google zu schielen und zu schauen, was Mitarbeiter des Suchgiganten selbst zu diesem Thema zu sagen haben. 

Bereits 2017 veröffentlichte Sujoy Gupta (Solutions Architect, Google Cloud Platform) eine Liebeserklärung an Headless CMS. Für ihn ist das Headless CMS insbesondere in einem Anwendungsfall von Vorteil: wenn man einerseits eine Corporate Website pflegen muss, deren Inhalte relativ statisch sind, und auf der anderen Seite ein Redaktionsteam hat, das beispielsweise im Corporate Blog regelmäßig News veröffentlicht. In den meisten Fällen wird dies über zwei unabhängige Systeme geregelt, was einen doppelten Betreuungsaufwand bedeutet. Zudem können die Redakteure über ein Headless CMS global auf Entities zugreifen, was Redundanzen im Workflow minimiert. Stellen wir uns vor: Der Slogan zu einem bestimmten Produkt ändert sich, und Redakteure müssen nun nicht mehr vier verschiedene URLs überarbeiten, sondern können diese Änderung global an der Produkt-Entität vornehmen – was für eine komfortable Idee des Content Managements. 

Zudem ist der Headless Approach, Inhaltselemente wie Entities zu behandeln, die unabhängig von der URL bearbeitet werden können, auf der sie erscheinen, der Arbeitsweise von Google im Hinblick auf das Identifizieren von Entities sehr ähnlich. Hier wird auch noch einmal der klare Vorteil von Headless CMS im Hinblick auf SEO klar: Ich behandle Contentpieces als Entities, die ich für verschiedene Ausgabegeräte über verschiedene Templates unterschiedlich dargestellt bekomme. Meine Content-Datenbasis bleibt von der Darstellungsweise jedoch unberührt und so können Templates im Hinblick auf z.B. entsprechende Suchanfragen verändert werden, wenn man erkennt, dass User z.B. mobile weitere Fragen zum Produkt haben, die das mobile Template bisher nicht beantwortet. Und im Hinblick auf die Zukunft lässt sich nur sagen: Welche Ausgabegeräte werden noch kommen, von denen wir aktuell nur träumen können? 

Headless CMS und SEO - Fazit

Fassen wir zusammen: Headless CMS bieten Freiheit, Flexibilität, Skalierbarkeit und Geschwindigkeit. Gleichzeitig fordern sie aber auch viel Planung, Eigeninitiative und Entwicklungsaufwand, bevor man mit einer Seite live gehen kann. 

Im Hinblick auf SEO und Headless kann man sagen: Große Macht bringt große Verantwortung. Wenn SEO von Anfang an mitgedacht wird, bietet ein frei gestaltbares Headless CMS enorme Vorteile gegenüber einem klassischen CMS. Gleichzeitig kann man aber auch, wenn die Entwicklung SEO nicht von Anfang an ausreichend berücksichtigt, eine bedeutende schlechtere Ausgangsbasis für Suchmaschinenoptimierung haben als mit dem klassischen WordPress & Co. Insbesondere ausreichend JavaScript SEO Know-How sollte im Entwicklerteam vorhanden sein, um hier nicht auf technischer Seite von Anfang an Hürden für eine reibungslose Kommunikation mit Suchmaschinenbots aufzubauen. 

Ist Headless also das beste CMS für Ihre Organisation? Antworten wir, wie SEOs nun mal antworten: It depends.

Titelmotiv: Photo by Jantine Doornbos on Unsplash