Wir erklären, was sich hinter dem Begriff „Headless CMS“ verbirgt und welche Vorteile sie bieten, und wir stellen einige wichtige Vertreter dieser modernen Webcontent-Verwaltungssysteme vor. Viel Spaß beim Lesen!
Typische Content-Management-Systeme (CMS) kombinieren die Schichten zur Erstellung bzw. Verwaltung (Backend) und Darstellung (Frontend) von Inhalten miteinander. Als CMS-Anwender fügen Sie einer Website Content in Form von Texten, Bildern und Videos hinzu, das CMS verwaltet diese Inhalte und stellt sie automatisch im Frontend dar. Programmierkenntnisse und Wissen über die Datenspeicherung in der Datenbank brauchen Sie nicht, die Datenpflege erfolgt über eine leicht bedienbare Oberfläche im Backend.
Klassische CMS erfüllen ihre Aufgabe sehr gut, wenn Sie diese zur Content-Verwaltung einer einzelnen Website verwenden. WordPress, das bei mehr als 40 Prozent aller im Internet erreichbaren Websites zum Einsatz kommt (w3techs.com, Stand Oktober 2022), ist dafür das beste Beispiel.
Aber das Web hat sich weiterentwickelt (Stichwort Multichannel oder „Omnichannel“): Mobile Webseiten und Apps liefen Desktop-Webseiten den Rang ab, und immer neue Kanäle zur Kommunikation mit Nutzern entstanden und entstehen, etwa Kiosksysteme, Spielkonsolen, Smartwatches, VR/AR-Systeme (Virtual/Augmented Reality) oder Smart Speaker wie Amazon Echo. Wenn Sie mehrere Apps, Websites und andere Kanäle gleichzeitig mit Inhalten füllen möchten, müssten Sie beim klassischen Ansatz mit einer größeren Anzahl an CMS arbeiten. Hier kommt das Headless CMS ins Spiel.
Was ist ein Headless CMS?
Die ersten klassischen CMS (z.B. FileNet, Vignette, Interwoven, Documentum) entstanden in der zweiten Hälfte der 1990er Jahre mit der Entwicklung des dynamischen und interaktiven Web 2.0. Weil sie Funktionen für die Content-Verwaltung im Backend und die Content-Präsentation im Frontend (Content Delivery) kombinieren, ermöglichen sie es vielen verschiedenen, mit unterschiedlichen Rechten ausgestatteten Benutzern, schnell und einfach Inhalte zu erstellen, zu bearbeiten, freizugeben und zu veröffentlichen bzw. zu aktualisieren. Dafür speichern sie Inhalte häufig bereits weitgehend formatneutral. Diese Idee der Trennung von Inhalten und ihrer Struktur von ihrer Darstellung, die seit HTML und CSS zu den Basiskonzepten des WWW gehört, wird in Headless CMS konsequent weiterentwickelt.
Ein Headless CMS bietet nur noch eine Schicht zur Erstellung und Verwaltung von Inhalten und kümmert sich nicht um Darstellungsaspekte wie Templates, Seitenstruktur und Design. Daher werden die von der Darstellung entkoppelten Inhalte als „pur“ angesehen.
Frei nach dem Motto „Weniger ist mehr“ liegt der Fokus komplett auf dem Backend und der Inhaltsverwaltung, der Abbildung von Workflows sowie den Möglichkeiten zur Zusammenarbeit und Organisation von Inhalten in Taxonomien.
Damit sind Headless CMS eine Form der sogenannten „entkoppelten“ CMS-Architektur, bei denen die jeweilige Darstellungskomponente über Programmierschnittstellen (APIs, Application Programming Interfaces) auf die Inhalte im Backend zugreift. Nicht alle entkoppelten CMS sind headless; auch wenn die beiden Komponenten auf unterschiedlichen Servern betrieben werden können, spricht man von Entkopplung. Aber erst mit Headless-Systemen kann die gesamte Web- und Content-Infrastruktur entkoppelt und das Versprechen der Jamstack-Architektur (JavaScript, APIs, Markup) auf maximale Flexibilität eingelöst werden.
Backend für moderne Content-Strategien
Mit einem Headless CMS erstellen Sie die Inhalte zentral und können sie an beliebig viele Medien ausgeben. Die gespeicherten Inhalte werden unabhängig von der Verwendung vorgehalten, Backend und Frontend sind nicht mehr miteinander verknüpft. Durch den Wegfall des Frontends ist diese Form eines Content-Management-Systems sozusagen „kopflos“, dadurch ergeben sich flexible Möglichkeiten zur Content-Verwertung.
Insbesondere ermöglichen Headless CMS die Umsetzung einer modernen Content-first-Strategie. Denn Content ist eine wertvolle Ressource für jedes Unternehmen, die möglichst effizient verwaltet und verteilt werden sollte. Viele Inhalte, zum Beispiel Produktinformationen, können – entsprechend aufbereitet – für ganz unterschiedliche Zielgruppen nützlich sein: für interne wie Marketing, Support oder Vertrieb und für externe wie Kunden, Interessenten, Partner oder Suchmaschinen.
In vielen Unternehmen ist die Content-Arbeit aber noch nach Kanälen organisiert, mit separat gepflegten Content-Silos für Website, Online-Shop, Social Media, CRM, Intranet etc. Mit Headless CMS schaffen sich Unternehmen eine zentrale Plattform für die Content-Verwaltung und Bereitstellung (Content-Hub), mit denen sie Inhalte ganzheitlich, effizient und ohne Redundanzen pflegen, bereitstellen und zielgruppenoptimiert ausspielen können.
API als Kommunikationsschnittstelle zwischen Headless CMS und Frontends
Wie in herkömmlichen CMS erfolgt bei Headless CMS die Datenverwaltung über das Backend und die Speicherung in einer Datenbank. Aber traditionelle (und auch entkoppelte) CMS sind proaktiv: Sie bereiten Inhalte für die Veröffentlichung vor und liefern sie an den Webserver oder die Darstellungskomponente aus. Ein Headless CMS ist dagegen reaktiv: Es wartet auf Anfragen von außen und gibt daraufhin den Content zurück.
Der externe Datenzugriff findet über eine REST- oder GraphQL-API statt. Für eine Website, App, VR-Anwendung, Smartwatch oder ein beliebiges anderes Ausgabemedium werden die gewünschten Inhalte per API abgefragt. Dafür kommen HTTP-Anfragemethoden wie GET, PUT, POST und DELETE zum Einsatz. Auf diese Weise sind der Abruf, die Veränderung und das Löschen von Inhalten möglich.
Headless CMS: Die Vorteile
- Fokus auf den Inhalt: Content-Entwickler konzentrieren sich 100-prozentig auf den Inhalt. Die Komplexität ist geringer.
- Flexible Ausgabe: Die Content-Ausgabe kann flexibel über verschiedene und beliebig viele Medien erfolgen.
- Plattformunabhängig: Das Headless CMS ist nicht an eine Plattform gekoppelt. Es stellt die Daten per API zur Verfügung.
- Freie Wahl der Programmiersprache: Die verwendete Programmiersprache des Headless CMS spielt keine Rolle. Die bereitgestellte REST-API kann mit einer beliebigen Sprache benutzt werden.
- Freiheit für Designer: Frontend-Entwickler sind nicht an ein bestimmtes CMS oder eine Programmiersprache gebunden und deutlich freier in der Darstellung der Inhalte.
- Unterstützung von Jamstack: Entwickler können flexible Webanwendungen mit entkoppelter Architektur und clientseitiger Anwendungslogik bereitstellen und dafür Frontend-Frameworks wie React, Angular oder Vue und darauf basierende Static-Site-Generatoren (wie Gatsby, Scully, VuePress) verwenden.
- Ideal für das Multichannel-Marketing: Jedes Gerät und jeder Kanal können mit Inhalten gefüttert werden.
- Dynamische Abfragen sind möglich: Inhalte können zum Beispiel für eine Website nachgeladen werden, ohne die Website neu zu laden.
Natürlich haben Headless CMS auch Nachteile: Da ein Frontend fehlt, müssen mehrere Softwaresysteme betrieben und konfiguriert werden, zusätzlich zum CMS etwa ein Static Site Generator und meist auch ein Editor-Werkzeug mit Template-Engine. So gibt es auch nicht ohne Weiteres eine Live-Vorschau von Inhalten, da erst ein Build nötig wird.
Übersicht der Top 5 Open Source Headless CMS
Seit um 2013 die ersten Headless-CMS-Systeme wie Contentful oder Prismic auf den Markt kamen, liegen sie im Trend. Das Angebot wächst kontinuierlich; selbst WordPress bietet seit einiger Zeit eine API und kann somit headless verwendet werden (siehe unten). Das folgende Ranking der fünf besten Open-Source-Headless-CMS erfolgt anhand der vergebenen GitHub-Sterne (Stand: Oktober 2022):
1. Strapi
Strapi basiert auf Node.js und bietet eine Plugin-Architektur an. Quelle: Website-Screenshot
Das derzeit populärste Headless CMS auf Github, Strapi, wird seit 2015 entwickelt. Es basiert auf dem Node.js-Framework und integriert eine Plugin-Architektur. Alternativ zur REST-API kann der Datenzugriff via Plugin auch per Graph-QL erfolgen. Der optisch ansprechende Admin-Bereich spart Zeit bei der API-Entwicklung.
2. Ghost
Das Ghost CMS eignet sich für Blogs, Magazine und vieles mehr. Quelle: Website-Screenshot
Früher war Ghost vor allem für Blogs interessant, doch heute nutzen unter anderem die NASA oder Apple die unabhängige Plattform für professionelle Publisher. Das Ghost CMS basiert auf Node.js; lange war die Node-API mit dem Admin-Bereich auf Ember.js-Basis und der Template-Engine Handlebars verbunden. Noch immer bietet Ghost Editor und zahlreiche Themes, aber inzwischen eignet sich die bereitgestellte REST-API für Jamstack-Websites und Headless-Architekturen, Ghost kann jetzt als ein vollständig entkoppeltes Headless CMS genutzt werden.
3. Directus
Directus ist mehr als ein Headless CMS: Die erste Version entstand 2004, lange bevor es den Begriff und das Konzept des Headless CMS gab. Das Open-Source-Werkzeug (seit Version 9 auf Basis von Node.js und Vue.js) versteht sich heute als „Modern Data Stack“ und „Open Data Platform“ und bietet „No-Code“-API-Zugriff (REST, GraphQL) für beliebige SQL-Datenbanken. Directus ist als Cloud-Service verfügbar, kann aber auch selbst gehostet werden.
4. Payload CMS
Payload CMS ist ein Headless CMS und Application Framework, das sich vor allem an Entwickler richtet. Basierend auf TypeScript, Node.js, React und MongoDB, bietet es diesen umfangreiche Funktionen, um ihren Website-Admins ein CMS maßzuschneidern, mit REST- und GraphQL-APIs (plus lokaler API auf dem Server), anpassbarem React-Admin-Panel, Rich-Text-Editor u. v. m.
5. Cockpit
Webiny wurde als entkoppeltes CMS für Unternehmen entwickelt und soll eine Alternative zu SaaS-Angeboten und unflexiblen selbstgehosteten CMS-Lösungen bieten. Es basiert auf einer serverlosen AWS-Infrastruktur und bietet eine Reihe verschiedener Applikationen, neben dem Headless CMS mit GraphQL u. a. auch Werkzeuge für die Erstellung von Webseiten und Formularen sowie für Verwaltung und Workflow-Steuerung.
Klassische CMS ziehen nach
Der Erfolg von Headless CMS setzt auch die Entwickler klassischer CMS unter Zugzwang. WordPress hat seit Version 4.7 eine umfangreiche REST-API, wodurch sich Ansätze eines Headless CMS mit WordPress realisieren lassen. Schauen Sie sich bei Interesse das Beispiel für ein Headless WordPress mit React und Next.js (in Englisch) an.
Auch das beliebte CMS Drupal hat 2016 eine API-first-Initiative gestartet und entwickelt sich seit Version 8 mit Integration diverser Schnittstellen (REST, GraphQL, JSON:API) zu einer Headless-Architektur. Der Gründer Dries Buytaert hat einen ausführlichen Artikel zur Entkopplung von Drupal veröffentlicht.
Und auch Typo3 kann sich dem Trend nicht entziehen. So bietet die Erweiterung Headless die Möglichkeit, Content aus Typo3 im JSON-Format abzurufen.
Zusammenfassung
Möchten Sie Ihre Inhalte für verschiedene Formate und Plattformen bereitstellen, zum Beispiel für Website, App, VR-Anwendung, Smartwatch und andere IoT-Geräte? Dann ist der Wechsel zu einem Headless CMS die richtige Entscheidung. Geht es nur um die Betreuung einer einzelnen Website, bleiben Sie besser bei den bewährten Content-Management-Systemen wie Joomla! oder WordPress mit integriertem Frontend.
Die vorgestellten Open-Source-Headless-CMS eignen sich für Anwender mit entsprechenden Fachkenntnissen. Lösungen von Anbietern wie Contentful und Contentstack sind kostenpflichtige Alternativen mit umfangreicherem Support. Schauen Sie sich die Features im Detail an, testen Sie die Lösungen und wählen Sie das Headless CMS nach Ihren individuellen Ansprüchen aus.
Bildnachweis: Photo by Lee Campbell on Unsplash
- Website erstellen? Wie geht das und was braucht man dafür? - 8. September 2023
- 10 Tipps, wie Sie mit Content Marketing Ihr Business voran bringen - 17. August 2023
- Favicon in Website einbinden: So erscheint Ihr Logo in der Browser-Adresszeile - 29. Juni 2023
