Headless CMS: Was ist das?

Entdecke die Zukunft der Webentwicklung mit Headless CMS – eine flexible und skalierbare Lösung, die traditionelle Systeme übertrifft. Warum ist es möglicherweise die perfekte Wahl für dein nächstes Projekt? Das verrate ich dir jetzt!

Viele Developer und Webentwickler nutzen traditionelle Content Management Systeme (CMS). Kein Wunder: sie laufen seit Jahren glatt und sind relativ einfach zu bedienen. Aber es gibt auch einen Haken: Klassische CMS stoßen bei komplexeren Projekten an ihre Grenzen.

Und zwar immer dann, wenn derselbe Content über mehrere Devices ausgespielt werden soll.

Deshalb sind gerade viele Unternehmen auf der Suche nach Alternativen zu klassischen CMS.

Ich habe mich in den vergangenen Monaten intensiv mit dem Thema beschäftigt und Headless CMS bei vielen Kundenprojekten im Einsatz. Aber was ist eigentlich ein Headless CMS? Wofür kann man es einsetzen und wie funktioniert es?

Das alles werde ich dir jetzt ausführlich erklären. Zusätzlich zeige ich dir, bei welchen Projekten wir ein Headless Content Management System verwenden und was die Vorteile dabei sind.

Was ist ein Headless CMS?

Ein Headless CMS ist ein Content Management System, das speziell dafür entwickelt wurde, Inhalte zentral zu verwalten und über verschiedene Kanäle wie Websites, Apps, Online-Shops und POS-Systeme zu verbreiten, ohne dabei ein Frontend – also den „Kopf“ – zu haben.

Im Gegensatz zu herkömmlichen CMS, die sowohl Frontend (die Präsentationsebene, die deine Besucher sehen) als auch Backend (wo die Inhalte verwaltet werden) verbinden, trennt ein Headless CMS diese beiden Elemente.

Das Backend, in dem du deine Inhalte in einer strukturierten und formatneutralen Form ablegst, ist dabei eine Art „Content-Datenbank“. Über APIs – Schnittstellen wie RESTful oder GraphQL – werden die Inhalte dann an Frontends ausgespielt und sorgen dann für die optimale Darstellung auf dem jeweiligen Endgerät.

Diese Architektur bietet enorme Flexibilität und ermöglicht es, dasselbe Stück Content über verschiedenste Benutzeroberflächen hinweg anzupassen – seien es Webseiten, mobile Apps, Wearables oder sogar VR-Headsets.

Dabei bleiben das Design und Benutzererlebnis unabhängig von den Einschränkungen eines Systems. Das sorgt für eine einheitliche Digital Experience.

Headless CMS vs. Klassisches CMS

Hat das gerade zu kompliziert geklungen? Lass uns das noch mal im Detail ansehen und Headless CMS mit traditionellen CMS vergleichen. Wenn wir die zwei Typen gegenüberstellen, wird die Idee dahinter leichter verständlich.

Hier schon mal eine Grafik, in der du dir die Unterschiede im Ablauf ansehen kannst:

Hier siehst du auf einen Blick die Unterschiede der zwei CMS Typen.

Traditionelle Content Management Lösungen sind etwa WordPress, Typo3, Joomla oder Drupal – sie haben eine starre Systemarchitektur, die aus Frontend und Backend besteht.

Dieser Artikel könnte auch interessant für dich sein: Statische oder dynamische Website – was passt besser zu dir?

Ablauf im klassischen CMS

Im Backend pflegen Content-Manager die Inhalte, die dann im Frontend (auf der Website) dargestellt werden. Für das Erstellen der Layouts und alle anderen Funktonen ist die Templating-Engine fest integriert und gleichzeitig für das eigene Frontend optimiert.

Du kannst an solche CMS natürlich weitere Kanäle anbieten – etwa über die WordPress REST-API. Allerdings muss man wissen, dass diese Lösungen nicht für diesen Anwendungszweck entwickelt wurden.

Zusätzliche Kanäle führen deshalb bei traditionellen CMS in der Regel zu einem Mehraufwand für den Content-Manager.

Im Backend erstellen Content-Autoren ihre Inhalte so, dass sie im Frontend gut aussehen – das funktioniert bestens, solange der Content nur auf einem einzigen Ausgabegerät ausgespielt wird.

Wenn du denselben Content für andere Kanäle anpassen möchtest, bedeutet das meist zusätzlichen Aufwand und komplizierte Workarounds.

Mit jedem neuen Kanal, sei es eine mobile Website, eine App, eine LED-Wall oder ein Online-Shop, steigt die Komplexität – sowohl in der Entwicklung und im IT-Betrieb als auch im Content-Management. Ganz zu schweigen von ganz neuen Kanälen wie smarten Lautsprechern oder IoT-Geräten.

Normalerweise müssen Unternehmen den Content für diese zusätzlichen Kanäle in separaten Systemen verwalten.

Manchmal verknüpfen sie diese Systeme über Schnittstellen, oder sie verwalten den Content ganz separat und übertragen ihn manuell hin und her. Beide Methoden sind sehr zeitraubend und fehleranfällig.

Ablauf im Headless CMS

Und genau hier kommt das Headless Content Management System zum Einsatz. Es wurde speziell für diese Anwendungsfälle entwickelt.

Weil bei einem Headless CMS zwischen Backend und Frontend getrennt wird, ist es perfekt für Multichannel-Landschaften geeignet. Es ist völlig egal, wie viele und welche Kanäle du anbinden möchtest. Da alle Inhalte formatneutral vorliegen, lassen sie sich direkt und ohne Umwege für die jeweiligen Frontends optimieren.

Es war nur eine Frage der Zeit, wann die ersten Headless CMS entstehen. Nach meinen eigenen Recherchen entstanden im Jahr 2017 die ersten Ideen für Headless Content Management Systeme.

Lass uns hier noch mal einen Blick auf die genauen Unterschiede werfen:

Wozu und für wen ist ein Headless CMS sinnvoll?

Meiner Meinung nach sind Headless CMS Lösungen die Zukunft des Content Managements. Dafür gibt es zwei gute Gründe:

1. Digitaler Content und die Erwartungen der Anwender werden immer komplexer. Um sich vom Wettbewerb abzuheben und außergewöhnliche Kundenerlebnisse zu bieten, müssen Unternehmen ansprechenden, bedürfnisgerechten und interaktiven Content schnell erstellen.
2. Es kommen ständig neue Kanäle, Contenttypen und Nutzergeräte hinzu. Es reicht nicht mehr aus, nur tollen Content zu produzieren. Er muss so effizient wie möglich und überall verfügbar ist.

Und das ist gut für alle drei Beteiligen: für Content Ersteller, für Anwender und Entwickler.

Das heißt aber nicht, dass klassische CMS das Zeitliche gesegnet haben. Für manche Projekte sind traditionelle Content Management Systeme nach wie vor eine sehr gute Lösung.

Bei diesen Projekten verwenden wir Headless CMS

Du kannst dir noch nichts Konkretes darunter vorstellen? Als Agentur für Headless CMS haben wir schon viele Projekte mit Directus umgesetzt. Ich zeige dir die neuesten Projekte, bei denen wir auf Headless CMS setzen:

Für die statischen Inhalte der Trail-Buchungsplattform Booyourtrail wurde ein Headless CMS eingesetzt. Damit können die Betreiber die Inhalte selbstständig anpassen, ohne dass die Frontend-Applikation angepasst werden muss.

Darüber hinaus verwaltet das Headless CMS auch alle E-Mails des gesamten Systems. Von der Anfrage bis zur Buchungsbestätigung können alle E-Mails zentral bearbeitet werden.

Ein weiteres Beispiel für den Einsatz eines Headless CMS ist das Produktinformationssystem der Wüstenrot AG. Die als Confluence-Alternative entwickelte Web-App lädt ihre Inhalte benutzerspezifisch aus dem Headless CMS.

Die Redakteure des Unternehmens bereiten die Inhalte mit einem WYSIWYG-Editor auf. Eine Vorschaufunktion hilft den Redakteuren zudem, das Endergebnis im Frontend direkt während der Bearbeitung zu sehen.

Dass ein Headless CMS aber noch viel mehr kann als nur Content, zeigt die ART App von AST Turbo. Dabei handelt es sich um eine Wartungs-App. Auch hier wurde ein Headless CMS als Backend verwendet.

In diesem Fall kann man aber eher von einer Datenplattform sprechen, da das Backend in diesem Fall auch weitere Funktionen wie die Benutzerverwaltung oder die Speicherung von Bildmaterial übernimmt.

Unsere Empfehlungen für ein Headless CMS

Bei all diesen Projekten haben wir als Headless CMS Agentur auf Directus gesetzt. Directus wurde als Headless CMS entwickelt, bietet aber mittlerweile viele weitere Features und kann als „Backend as a Service“ betrachtet werden.

Wir haben uns deshalb auf die Entwicklung mit Directus spezialisiert und sind mittlerweile offizieller Partner. Wir setzen unsere App und Web-Projekte fast ausschließlich mit Directus um.

Wenn du Fragen dazu hast, kannst du mich jederzeit kontaktieren. Nutze das Kontaktformular oder rufe mich bei Projektanfragen einfach an.

Was sind die Bestandteile eines Headless Content Management Systems?

Du möchtest mehr über die Technik der Headless CMS Umgebung wissen? Dann bist du hier richtig. Ich werde dir hier die einzelnen Bestandteile im Detail erklären und natürlich die technischen Konzepte, die sich hinter dem CMS ohne Frontend verbergen.

Grundsätzlich unterscheidet man zwischen Frontend (Darstellung am Client) und Backend (Schnittstelle am Server, Datenbank).

API

Die Datenschnittstelle (auch REST-API oder RESTful-API genannt) ist das Herzstück des Backends. Aus diesem Grund werden Headless CMS oft auch als „API-first CMS“ bezeichnet.

Die API stellt nicht nur Anfragen an die Datenbank, sondern dient auch als Brücke, um Inhalte an die Frontends zu übermitteln und gleichzeitig Daten aus anderen Systemen abzurufen.

REST-APIs folgen festen Standards, wodurch sie in einer klaren und einheitlichen Sprache wie JSON oder XML kommunizieren.

Dies ermöglicht eine einfache Anbindung verschiedener Systeme nach einem einheitlichen Schema. So muss nicht für jedes System eine eigene Schnittstelle entwickelt werden.

Admin-Oberfläche

Die Administrationsoberfläche bildet das zweite Herzstück des Backends und ist der zentrale Ort für die Verwaltung der Inhalte. Es ist sozusagen das Frontend des Backends.

Leider werden die Begriffe immer wieder verwechselt, auch im Web. Was du wissen musst, wenn du noch nicht viel mit dem Thema zu tun hattest: Als Content Manager hast du auch beim Headless CMS eine ganz normale Oberfläche (Frontend). Hier findest du Editoren, um Inhalte anzulegen und zu bearbeiten (Bilder, Texte etc.).

Ein Headless CMS ist also auch für all jene einfach zu bedienen, die wenig technische Erfahrung haben.

In einem Headless CMS werden die Inhalte grundsätzlich strukturiert und ohne festes Format gespeichert. Aber was bedeutet das genau?

„Strukturiert“ bedeutet hier, dass jeder Inhalt einem bestimmten Typ zugeordnet ist, wie Titel, Textblöcke, Fotos, Produkttitel, Produktbeschreibungen und Links.

Du kannst verschiedene Contenttypen und ihre Beziehungen zueinander definieren, so dass z.B. die Elemente „Produkttitel“, „Produktbeschreibung“, „Größe“, „Preis“ und „Produktbild“ zusammen ein „Produkt“ bilden.

Frontend

In den Frontends werden die Inhalte aus dem CMS zusammengestellt und gerendert – das reicht von normalen Webseiten, die in HTML angezeigt werden, bis hin zu Ansichten in einer VR-Brille.

Die Templates für diese Frontends werden unabhängig vom CMS entwickelt. Sie können in jeder Programmiersprache verfasst und mit jeder Technologie umgesetzt werden. Oft kommen JavaScript-Frameworks wie Angular, Ionic oder Astro zum Einsatz.

Diese Templates bestehen aus Platzhaltern, die mit den Inhalten aus dem CMS gefüllt werden.

Das Frontend holt sich über die API den Content und stellt diesen, passend zum jeweiligen Endgerät, dar.

So kann der gleiche Inhalt in verschiedenen Kanälen und an verschiedenen Orten verwendet werden. Je nach Vorgabe der Templates erhält er dabei ein unterschiedliches Layout und Design.

Gut zu wissen: Eine Schnittstelle – verschiedene Content-Quellen

In einem Headless CMS konzentrierst du dich hauptsächlich auf die Verwaltung von Marketing-Content wie Texten und Bildern.

PDFs oder kurze Videos kannst du direkt in die Mediathek des CMS hochladen.

Längere Videos bindest du über die URL des Videos (z.B. von YouTube) ein. Die API liefert dann den Content und das Frontend holt sich das Video direkt über die URL von YouTube.

Ein Headless CMS kann im Hintergrund Daten von verschiedenen APIs holen (z.B. Wetterdaten, Videos etc.) und diese dann dem Frontend als einzelne Datenquelle zur Verfügung stellen.

Das könnte auch interessant für dich sein: „Was ist serverseitiges Tracking und wann ist es wichtig?“

Was sind die Vorteile eines Headless CMS?

Ich bin sehr begeistert von Content Management Systemen, die headless sind, weil sie eine unglaubliche Flexibilität ermöglichen.

Das sind die größten Vorteile von Headless Content Management Systemen:

• Trennung zwischen Frontend und Backend
• Zentrale Content Erstellung und Verwaltung
• Performance und schnellere Ladezeiten
• Cross-Plattform und Multichannel Nutzung
• Skalierbarkeit und flexible Anpassbarkeit

Trennung zwischen Frontend und Backend

Content kann überall eingebunden werden und die Darstellung ist unabhängig je nach Endgerät
Dadurch sind Headless CMS im Vergleich zu monolithischen Ansätzen in der Regel sicherer, wenn Seiten im Frontend statisch generiert werden, da es dann weniger Zugriffe auf die API gibt.

Zentrale Content Erstellung und Verwaltung

In einem Headless CMS erstellen Content Manager ihre Inhalte einmalig zentral im Content Hub. Diese Inhalte lassen sich dann nahtlos auf allen Kanälen wiederverwenden.

Sie müssen also nicht mehr denselben Content mehrmals erstellen oder ihn kopieren und separat verwalten.

So können Marketer und Content-Manager viel effizienter arbeiten; neue Kampagnen lassen sich kostengünstiger und schneller umsetzen.

Du kannst also suchmaschinenoptimierten Website Content schreiben und auf allen Devices gleichzeitig ausspielen lassen.

Performance und schnellere Ladezeiten

Da nur strukturierte Daten und nicht das komplette vorgerenderte HTML übertragen werden, werden die Ladezeiten verkürzt, vor allem wenn man die Seiten auch Frontend zusätzlich noch statisch rendert.

Großer Vorteil: An das Frontend werden nur jene Daten übertragen, die tatsächlich benötigt werden.

Cross-Plattform und Multichannel Nutzung

Ein Headless CMS ist dank seiner API-Anbindung in der Lage, eine Vielzahl von Kanälen mit Inhalten zu versorgen, auch moderne wie Wearables oder IoT-Geräte.

Tatsächlich ist es mit jedem Kanal oder Endgerät kompatibel, auch mit solchen, die erst in Zukunft entwickelt werden.

Das Headless CMS versorgt nicht nur alle digitalen Touchpoints mit Inhalten, sondern sammelt auch Daten von allen Touchpoints.

So kannst du alle Nutzerdaten zentral in einer Lösung sammeln und auswerten. Deine Datenbasis wird dadurch umfangreicher und qualitativ hochwertiger, als wenn du separate Datensilos pflegen würdest.

Mit diesen Daten kannst du deine Marketing- und Vertriebsstrategien verfeinern und deine digitalen Angebote auf deine Nutzer zuschneiden.

Skalierbarkeit und flexible Anpassbarkeit

Im Vergleich zu monolithischen Systemen sind Headless CMS-Systeme besser skalierbar. Die Architektur ist bereits so ausgelegt, dass mehrere Instanzen des Systems an verschiedenen Orten der Welt laufen können.

Bei herkömmlichen Systemen sind Updates nicht so einfach möglich, da bei Problemen immer auch das Frontend betroffen ist und dies zu Ausfallzeiten führen kann.

Headless CMS bieten in der Regel umfangreiche Erweiterungsmöglichkeiten und mittlerweile auch Low-Code- bzw. No-Code-Editoren für Automatisierungen, die bei der Content-Erstellung immer wieder benötigt werden.

Ein weiterer Punkt der Flexibilität ist, dass ein Headless CMS System auch einfacher zu wechseln ist als ein traditionelles CMS.

Da die Daten von der Präsentation getrennt sind, kann man mit seiner Datenbank umziehen und ein anderes Headless CMS darüber stülpen.

Natürlich sind auch hier Anpassungen notwendig, aber diese sind bei Weitem nicht so umfangreich wie bei einem Umzug von WordPress auf ein anderes CMS.

Flexible Weiterentwicklung

Früher waren CMS große Systeme, in denen alle Funktionen fest miteinander verbunden waren. Im Gegensatz dazu besteht eine Headless CMS Umgebung aus schlanken, unabhängigen Modulen, die über APIs miteinander vernetzt sind.

Die einzelnen Komponenten sind viel einfacher zu handhaben. Fehler lassen sich schneller aufspüren und beheben.

Kleinere, separate Module können leichter weiterentwickelt oder ersetzt werden, sobald bessere Alternativen verfügbar sind. Bei einem traditionellen CMS müsste dagegen das gesamte System ausgetauscht werden.

Diese Flexibilität macht das Gesamtsystem anpassungsfähiger. Unternehmen können laufend Verbesserungen vornehmen, schnell Innovationen einbinden und sich so einen Vorteil gegenüber der Konkurrenz verschaffen.

Ein weiterer Pluspunkt der modularen Architektur ist, dass mehrere Entwicklerteams parallel an verschiedenen Modulen arbeiten können.

Auch Content-Teams profitieren, da sie ungestört neue Kampagnen entwickeln können. Außerdem entfallen lange Ausfallzeiten für Updates oder Wartungen, die das gesamte System stilllegen würden.

Kennst du schon diesen Blogbeitrag: „Was ist eine Progressive Web App (PWA)?“

Gibt es auch Nachteile?

Headless-Content-Management-Systeme (CMS) sind zwar eine innovative Lösung, doch sie sind nicht die Antwort auf alle Herausforderungen.

Der größte Nachteil meiner Meinung nach ist, die Umgewöhnung für Content Manager.

Denn die Herangehensweise, Inhalte zu strukturieren, ist für viele noch ungewohnt. Die meisten kennen CMS wie WordPress. In einem Headless CMS müssen sie sich daran gewöhnen, in Blöcken zu denken und nicht in ganzen Seiten.

Die Einarbeitungszeit kann deshalb länger dauern. Ist das aber mal getan, läuft alles rund. Das kann ich aus den Kundenprojekten bestätigen, bei denen ich bereits mit Headless CMS gearbeitet habe.

Für wen lohnt sich ein Umstieg?

Nutzt du noch ein traditionelles CMS und eine über die Jahre gewachsene Systemlandschaft? Dann fragst du dich sicher, ob sich der Wechsel zu einem Headless CMS für dich lohnt.

Die Antwort ist ziemlich einfach: Sobald du Inhalte für mehr als ein oder zwei verschiedene Kanäle verwalten musst, bietet dir ein Headless CMS klare Vorteile.

Schon die parallele Pflege einer Website und einer Smartphone App zeigt, wie viel zusätzlicher Aufwand in Entwicklung und Wartung entstehen kann. Dieser Aufwand steigt mit jedem weiteren Kanal.

Mit einem Hybrid Headless CMS kannst du deine Website weiterhin wie gewohnt betreiben und gleichzeitig zusätzliche Kanäle anbinden. Deine Marketer müssen sich also nicht komplett umgewöhnen.

Gut zu wissen: Du musst dein altes CMS nicht sofort komplett ersetzen.

Wie sieht die Zukunft von Headless CMS aus?

Im Bereich Content Management Systeme erwarten uns meiner Meinung nach in naher Zukunft noch sehr viele Entwicklungen. Der Trend ist klar ersichtlich: Es geht weg von „reinen“ Headless CMS immer mehr in eine Art Datenplattform.

Man verwaltet darin nicht nur Content, sondern hat auch Schnittstellen etwa für einen Shop, für das User-Management, für eine App und vieles mehr. Das Stichwort lautet: Backend as a service.

Wenn du mehr Infos benötigst, kannst du gerne auf unserer Seite über Headless CMS vorbeischauen. Hier erkläre ich gerne noch mal alles an im Detail!