Headless CMS: Wir nehmen die entkoppelten Content-Management-Systeme unter die Lupe

Ein Backend und ein Frontend – untrennbar miteinander vereint. Lange Zeit galt die feste Verbindung der Präsentationsebene und der dahinterliegenden Logik als Go-to-Lösung im E-Commerce. Spätestens seit dem Einzug des Mobile Shopping wird diese jedoch hinterfragt: Heutzutage müssen Inhalte über verschiedenste Kanäle und Gerätetypen ohne Qualitätsverlust abrufbar sein. Mit monolithischen Systemen kann dies aber nur schwer erreicht werden.

Das Headless CMS hingegen wird den Anforderungen einer Multichannel-Strategie sehr viel besser gerecht. Nicht zuletzt deshalb hält es sich bereits seit längerer Zeit als eines der E-Commerce-Buzzwords schlechthin. Was es mit dem Begriff auf sich hat, der auf den ersten Blick vielleicht etwas befremdlich anmutet, und worin die Stärken des Headless Commerce liegen, erfahren Sie in diesem Blogbeitrag.

Was ist ein Headless CMS?

Ein Headless CMS ist ein Content-Management-System, das nur das Backend für die Verwaltung von Inhalten bereitstellt und kein festes Frontend hat. Im Gegensatz zu traditionellen CMS wie WordPress, die eine eng gekoppelte Architektur haben, werden die Inhalte zentral in einem strukturierten Format gespeichert und können über APIs flexibel an verschiedene Frontends – wie Websites, Apps oder andere digitale Kanäle – ausgeliefert werden.

So funktioniert Headless CMS

Ein Headless CMS funktioniert wie eine zentrale Content-Bibliothek, die Inhalte strukturiert speichert und über Schnittstellen an beliebige Kanäle verteilt.

Der dreistufige Aufbau:

• Das Backend ist das Herzstück, wo Redakteure Inhalte design neutral erstellen und verwalten – ohne Layout-Vorgaben.

• Die API-Schicht vermittelt zwischen Content-Repository und Ausgabekanälen. Über REST oder GraphQL werden Inhalte maschinenlesbar bereitgestellt.

• Das Frontend kann frei gestaltet werden. Entwickler nutzen Technologien wie React oder Vue.js, um API-Daten abzurufen und darzustellen – ob als Website, mobile App, Smart-TV-Anwendung oder IoT-Gerät.

Headless CMS Vorteile für Unternehmen

Das Frontend von der Logik eines Shopsystems zu entkoppeln, bietet zahlreiche Vorteile. Nachfolgendend erläutern wir Ihnen die 5 Wichtigsten einmal näher.

#1 Die Erstellung zielgruppengerechter Inhalte wird vereinfacht

Einer Statista-Umfrage zufolge personalisieren 44,59% der befragten Webseitenbetreiber die Inhalte ihrer Onlinepräsenz. Damit folgen sie dem Ruf ihrer Kunden, die ein individuelles Einkaufserlebnis schätzen und für sie relevante Informationen und Produkte schnell finden möchten.

Ein Headless CMS macht die Erstellung individuellen Contents einfacher. Es ermöglicht spezifische Layouts für verschiedene Kanäle. Unabhängig von der Gerätekategorie lassen sich bestimmte Seitenelemente auch standort-, uhr- und/oder jahreszeitgesteuert ausspielen.

#2 Gute Anpassungsfähigkeit an die Lebenszyklen eines Systems

Sobald ein ins Backend integriertes System erst einmal reibungslos funktioniert, verrichtet es seinen Dienst über mehrere Jahre. Insbesondere ERPs sind manchmal ein Jahrzehnt oder länger im Einsatz, ohne dass diese nennenswerte Updates erhalten – ihre Kernprozesse funktionieren dennoch. Zudem wäre ein Austausch des Systems sehr aufwändig und für gewöhnlich auch mit hohen Kosten verbunden.

Ein Frontend hingegen hat einen sehr viel kürzeren Lebenszyklus. Was heute als modern und nutzerfreundlich gilt, kann in zwei Jahren bereits wieder überholt sein. Durch die Trennung von Backend und Frontend innerhalb des Headless CMS können Sie besser auf die unterschiedlichen Lebenszyklen beider Ebenen reagieren. So bleibt das Backend von einer Modernisierung des Frontends weitgehend unberührt und umgekehrt.

#3 Bessere Performance

Auch wenn Full-Stack-CMS die Content-Erstellung, wie gesagt, sehr vereinfacht haben, entpuppt sich die monolithische Architektur häufig als Flaschenhals in Sachen Performance. Der Grund dafür ist, dass die Systeme oft einen hohen Anteil nicht genutzten CSS, HTML- und JavaScript-Code mitliefern, der die Ladegeschwindigkeiten ausbremst. Dies führt vor allem auf mobilen Seiten dazu, dass die Nutzererfahrung leidet. Im Headless Commerce lässt sich das Frontend losgelöst vom Backend leichter optimieren, weil die Backend-Prozesse nicht betrachtet werden müssen.

#4 SEO-Vorteile

Aus einer verbesserten Nutzererfahrung und schnelleren Ladezeiten ergeben sich auch indirekte Vorteile für die Suchmaschinenoptimierung, die für die Sichtbarkeit von Onlineshops nach wie vor von essenzieller Bedeutung ist.

Erwartbar ist, dass Nutzer, denen für sie passender Content ausgespielt wird, weniger geneigt sind, eine Seite direkt wieder zu verlassen. Verweildauer und Absprungrate sind Indikatoren für Suchmaschinen-Bots, da davon auszugehen ist, dass Seiten mit besonders langen Sitzungen relevante und hochwertige Inhalte bieten. Sie werden dementsprechend höher im Ranking eingestuft.

Darüber hinaus sind schnelle Ladezeiten nicht nur für die Nutzererfahrung bedeutsam. Auch für Google & Co. wird aus der Webseiten-Performance ein immer wichtigeres Kriterium. Google hat 2021 aus diesem Grund die Web Vitals eingeführt, die die Ladezeiten besser beurteilen sollen und als Rankingfaktor in die Indexierung mit einfließen.

#5 Verkürzung von Prozessketten

Eine responsive Webseite ist auch heute oft „nur“ die mobile Version einer für den Desktop optimierten Seite. Wollten Sie neben der Desktop- und der mobilen Version weitere Kanäle bespielen, bedürfte es verschiedener Full-Stack-Systeme. Sie müssten Ihren Content deshalb mehrmals einpflegen, was Ihre Prozesse unnötig aufbläht und Ressourcen bindet.

Ein Headless CMS ermöglicht die Zentralisierung Ihrer Inhalte, die kanalübergreifend in ein- und demselben Backend gepflegt werden können. Zudem verfügen moderne Systeme oft über sogenannte Pattern Librarys, in denen genau definiert ist, wie ein bestimmtes Element auszusehen hat. Das schafft Konsistenz und beschleunigt die Erstellung neuer Seiten.

Shopify Plus, Headless dank Storefront API

Natürlich geht der Trend des Headless Commerce auch an der kanadischen Commerce-Plattform Shopify nicht vorbei. Die Enterprise-Lösung des Systems, Shopify Plus, lässt sich deshalb als Headless CMS betreiben. Dies ermöglicht die sog. Storefront API. Diese basiert auf der Abfragesprache GraphQL, die eine besonders performante und ressourcensparende Schnittstelle garantiert.

Händler können über die API eigene Frontends programmieren oder externe Systeme anbinden, z.B.:

• Storyblok

• Makaira

• Contentful

Beste Practices für die Einrichtung eines Headless CMS

Die Einrichtung eines Headless CMS erfordert einen Fokus auf Struktur, Automatisierung und Performance. Hier sind die wichtigsten Best Practices, um sicherzustellen, dass Ihr Projekt erfolgreich und skalierbar ist.

1. Content-Architektur zuerst planen: Modellieren Sie Inhalte für Wiederverwendbarkeit. Bevor Sie etwas entwickeln, definieren Sie Ihre Content-Typen (z.B. Artikel, Produkte, Events) und deren Felder. Dieser strukturierte Ansatz stellt sicher, dass Inhalte sauber, wiederverwendbar und nicht an ein einzelnes Design oder einen Kanal gebunden sind.

2. Für Omnichannel entwickeln: Denken Sie über die Website hinaus. Ihre Inhalte sollten vollständig unabhängig vom Frontend sein. Das ist das Kernprinzip von Headless. Gestalten Sie Ihr Content-Modell so, dass es jede Plattform bedienen kann - von Web und mobilen Apps bis hin zu IoT-Geräten und darüber hinaus.

3. Workflows & Sicherheit optimieren: Automatisieren und sichern Sie alles. Implementieren Sie klare Rollen und Berechtigungen für Ihr Team (Entwurf, Überprüfung, Veröffentlichung). Nutzen Sie Webhooks, um automatisch Deployments auszulösen, wenn Inhalte veröffentlicht werden. Stellen Sie sicher, dass Ihre APIs mit Zugriffstokens, Key-Rotation und verpflichtendem HTTPS sicher sind.

4. Für Geschwindigkeit optimieren: Maximieren Sie die Leistung von Anfang an. Nutzen Sie Technologien wie Static Site Generation (SSG) oder Incremental Static Regeneration (ISR) für blitzschnelle Ladezeiten. Integrieren Sie ein Content Delivery Network (CDN), um Assets global zu servieren, und nutzen Sie Caching, um API-Aufrufe zu minimieren.

Headless CMS vs. Traditional CMS vs. Decoupled CMS

Bei einem Traditional CMS handelt es sich um eine All-In-One-Lösung, bei der das Backend und das Frontend eng miteinander verbunden sind. Ein Beispiel hierfür ist WordPress. Ein Decoupled CMS hingegen ist eine Hybrid-Lösung, die Elemente des Headless CMS und des Traditional CMS vereint. Welche Unterschiede es zwischen den drei Systemen gibt, zeigen wir Ihnen anhand der Tabelle:

Auswahlkriterien für Headless CMS

• Benutzerfreundlichkeit: Bietet die Plattform intuitive Oberflächen sowohl für Entwickler als auch für Content-Redakteure?

• Content-Architektur: Ermöglicht das System eine flexible Inhaltsmodellierung, die den Anforderungen Ihres Unternehmens entspricht?

• Redaktioneller Workflow: Können auch nicht-technische Nutzer Inhalte einfach überprüfen und veröffentlichen?

• Systemintegration: Ist die Plattform kompatibel mit bestehenden Tools wie E-Commerce-Systemen, Analytics und Personalisierung?

• Internationalisierung: Unterstützt das System mehrsprachige und regionale Content-Strategien?

• Performance & Skalierbarkeit: Kann die Plattform mit dem Unternehmenswachstum in neuen Märkten, Kanälen und Marken mithalten?

• Support & Dokumentation: Sind qualitativ hochwertige Dokumentation und Support-Services für Entwicklungs- und Marketing-Teams verfügbar?

• Migration & Portabilität: Bietet die Plattform Datenexport-Möglichkeiten und Flexibilität, um Vendor Lock-in zu vermeiden?

• Kostenstruktur: Sind die Preismodelle mit dem prognostizierten Wachstum bei Content-Volumen, Nutzerzahl und API-Verbrauch vereinbar?

• Sicherheit & Compliance: Verfügt das System über robuste Authentifizierung, Datenschutz und Compliance-Funktionen?

Headless CMS Beispiele: Diese Headless CMS gibt es

Storyblok

Storyblok ist ein Headless CMS, das leistungsstarke Content-Erlebnisse ermöglicht. Das Besondere an diesem CMS ist, dass es sich sowohl an Entwickler, als auch an Marketer richtet. Das sind die Funktionen von Storyblok:

• Erstellen von Inhalten

• Asset Management

• Rich-Text-Editor

• Bild Management

• Wiederverwendbarer Content

• Analyse der Content Performance

• Interne Suche

Latori Kunde Horando hat sich für die Nutzung des Headless CMS Storyblok entschieden. Dies haben wir für sie programmiert, Inhalte eingepflegt und das CMS mithilfe einer API an Shopify Plus angebunden. 

Auch Latori nutzt das Content-Management-System, um Inhalte zu erstellen und auf der Website zu präsentieren. 

Ghost

Das CMS Ghost wird von der NASA und Apple genutzt und ist wohl das bekannteste Headless CMS. Das Content-Management-System basiert auf dem Node.js-Framework und eignet sich, dank bereitgestellter REST-API, bestens als Headless CMS.

Cockpit

Bei Cockpit handelt es sich um ein deutsches Headless CMS. Die Open-Source-Lösung eignet sich bestens für den üblichen PHP-Stack. 

Directus

Directus ist ein self-hosted Content-Management-System mit einem Open-Source-basierten Framework. Das System bietet neben der API auch eine intuitiv bedienbare Admin-Oberfläche. Es basiert auf der Programmiersprache PHP und Backbone.js.

Was ist Headless SEO?

Headless SEO ist der Prozess der Suchmaschinenoptimierung von Websites, die mit einer entkoppelten CMS-Architektur erstellt wurden. Da Inhalt und Frontend voneinander getrennt sind, müssen SEO-Elemente manuell implementiert werden – im Gegensatz zu herkömmlichen CMS-Plattformen, die über integrierte SEO-Funktionen verfügen.

Implementierung in drei Schritten:

• SEO-Felder im Inhaltsmodell: Planen Sie von Anfang an SEO-spezifische Felder ein: Meta-Titel, Beschreibungen, URL-Slugs, Schema-Markup und Alt-Text.

• Suchmaschinenfreundliche Anzeige: Verwenden Sie statische Seitengenerierung (SSG) oder serverseitiges Rendering (SSR), um sicherzustellen, dass Suchmaschinen vollständig gerenderte HTML-Seiten crawlen können.

• Leistungsoptimierung: Implementieren Sie Caching, CDNs und dynamische XML-Sitemaps. Die Geschwindigkeitsvorteile der Headless-Architektur tragen zu verbesserten Such-Rankings bei.

Unser Fazit zum Headless CMS

Angesichts seiner vielen Vorteile wird das Headless CMS monolithische Full-Stack-Systeme mittel- und langfristig mit hoher Wahrscheinlichkeit ablösen, wenn sich das Nutzerverhalten im Web weiter diversifiziert.

Shopiy Plus lässt sich schon heute headless betreiben und ermöglicht Händlern so die Umsetzung einer effizienten Multi- und Omnichannel-Strategie.