Ein Leitfaden für Anfänger zu Headless CMS

Headless CMS (Content Management Systems) entfernen die direkte Verbindung zwischen dem Backend Ihrer Inhaltsdatenbank und der Art und Weise, wie Inhalte Benutzern bereitgestellt werden, wenn sie Ihre Website oder App besuchen.

Dies steht im Vergleich zu herkömmlichen „gekoppelten“ CMS, bei denen sowohl die Datenbank als auch die Wiedergabe des Inhalts von demselben CMS gesteuert werden.

Während ein gekoppeltes CMS seine Vorteile hat – wie z. B. eine einzige Schnittstelle, um sowohl Ihre Datenbank als auch die Art und Weise, wie sie auf dem Bildschirm angezeigt wird, zu bearbeiten – ist ein Headless CMS leistungsfähiger und flexibler.

Dies gilt insbesondere für größere Websites, komplexe Datenbanken oder wenn mehrere Personen an verschiedenen Aspekten Ihrer Inhalte, Website/App und On-Site-SEO arbeiten müssen.

Was ist Headless-CMS?

In einem traditionellen CMS können die Backend-Inhaltsdatenbank und das Frontend-Website-Design innerhalb desselben CMS-Dashboards bearbeitet werden, weshalb diese Systeme als „gekoppelt“ bezeichnet werden.

Ein Headless-CMS-System verwendet separate Systeme für die Datenbank und die Bereitstellung, wobei eine API (Application Programming Interface) als Brücke zwischen beiden fungiert.

Einige der am häufigsten verwendeten Headless-CMS sind Ghost, Prismic, Netlify und Contentful, und wie gekoppelte CMS wurden sie entwickelt, um effizient zu laufen, flexible Funktionen zu bieten und schnell zu skalieren, wenn Ihre Datenbank zu wachsen beginnt.

Headless CMS kann aufgrund der größeren Komplexität teurer sein, bietet jedoch Funktionen, die ein gekoppeltes System nicht bieten kann, z. B. die Möglichkeit, Inhalte auf völlig andere Weise für Besucher bereitzustellen, die von verschiedenen Geräten aus auf Ihre Website zugreifen.

Dies wiederum hat einige positive Auswirkungen auf Techniken der Suchmaschinenoptimierung (SEO) wie responsives Website-Design, da Ihre Inhalte viel reaktionsschneller, plattformabhängiger und wirklich mobilfreundlicher bereitgestellt werden können.

Weitere Vorteile von Headless CMS

Schauen wir uns einige der spezifischen Vorteile von Headless CMS an, die dazu beitragen, die enorme Popularität und schnelle Akzeptanz dieses Ansatzes auf Websites auf der ganzen Welt voranzutreiben:

Maßgeschneiderte Inhalte

Eine genauere Kontrolle über Ihre Inhalte und die Art und Weise, wie sie angezeigt werden, bedeutet, dass Sie Ihre Seiten in viel größerem Umfang anpassen können. Ob Sie dies für bestimmte Benutzergruppen oder für Ihr gesamtes Publikum tun, dies gibt Ihnen noch mehr Möglichkeiten, sich von Ihren Mitbewerbern abzuheben.

Schnelleres Laden

Die Verwendung einer für das Gerät geeigneten API und eines Frontends optimiert die Ladegeschwindigkeiten auf verschiedenen Geräten, einschließlich derjenigen, die über eine mobile Datenverbindung auf Ihre Website zugreifen. Dies unterstützt auch alle Maßnahmen, die Sie in SEO-Kampagnen ergreifen, um die Leistung Ihrer Core Web Vitals zu verbessern.

Zukunftssichere Flexibilität

Die Möglichkeit, zusätzliche APIs zu installieren, bedeutet, dass Ihre Datenbank in Zukunft mit neuen Frontends verbunden werden kann. Auf diese Weise können Sie beispielsweise von einer Website für Desktop- und mobile Besucher abweichen und auch Infobildschirme im Geschäft und tragbare Technologie anbieten.

Zusammenfassend lässt sich sagen, dass ein Headless CMS ideal ist, wenn Sie komplexe Frontend-Anforderungen haben, aber die Bearbeitung und Pflege Ihrer eigentlichen Inhalte vereinfachen möchten – mit Änderungen und Aktualisierungen, die sofort auf all Ihren verschiedenen Plattformen widergespiegelt werden.

So planen Sie ein Headless-CMS

Die Inhaltsmodellierung ist die entscheidende Planungsphase, bevor Sie ein neues Headless-CMS implementieren. Es ähnelt der Art und Weise, wie Sie die Ordnerhierarchie, die URL-Struktur und die Sitemap einer Website planen, außer dass Sie in diesem Fall mit Inhaltstypen und nicht mit einzelnen Seiten arbeiten.

Was sind Inhaltstypen?

Die verschiedenen Inhaltstypen, die Sie definieren, enthalten Felder, die Informationen aus Ihrer Datenbank abrufen. Dies könnten SEO-Metadaten sein – und wenn Sie ein traditionelles gekoppeltes CMS mit einem SEO-Plugin wie Yoast verwenden, haben Sie wahrscheinlich in der Vergangenheit Metadatenfelder gesehen und ausgefüllt.

Auf Ihren Hauptinhaltsseiten haben Sie möglicherweise Felder für den URL-Slug sowie einen oder mehrere Abschnitte mit sichtbarem Inhalt, die auf der Seite gerendert werden sollen.

Sie können auch Inhaltstypen für Medienobjekte definieren, indem Sie Ihren Dateien einen Namen, eine Beschreibung, die nur intern angezeigt werden kann, und einen Ort, an dem auf die Datei zugegriffen werden kann, geben.

Wie funktionieren Inhaltstypen?

Sobald Sie alle erforderlichen Inhaltstypen definiert haben, haben Sie eine modulare „Baustein“-Methode entwickelt, mit der APIs Informationen aus Ihrer Datenbank extrahieren und für verschiedene Plattformen zusammenstellen können.

APIs können Daten von verschiedenen Inhaltstypen anfordern und sie auf völlig einzigartige Weise konstruieren, um Seiten plattformspezifisch zu rendern.

Wenn Sie in Zukunft Änderungen vornehmen müssen, z. B. um ein neues SEO-Meta-Tag hinzuzufügen, können Sie den Inhaltstyp aktualisieren, um das erforderliche Feld für alle relevanten Elemente in Ihrer Datenbank zu erstellen.

So definieren Sie SEO-Anforderungen

Es empfiehlt sich, SEO-Anforderungen für Headless-CMS zu definieren, bevor Sie zu tief in die Entwicklung einsteigen, damit Ihre Entwickler wissen, was sie implementieren müssen.

Einige zu berücksichtigende Elemente sind:

• URL-Slug (der pro Seite verschlagwortet werden kann)
• Metadaten (z. B. „title“, „description“ und „keywords“-Tags)
• Canonical-Tag (um Duplicate-Content-Abstrafungen zu vermeiden)
• Meta-Robots-Tag (um unerwünschtes Crawlen von Seiten zu verhindern)

Sie können auch Felder für einige der moderneren Methoden und dienstspezifischen Überprüfungen erstellen, die Ihre SEO unterstützen:

• Mikrodaten, Mikroformate und Schema.org-Markup
• Verifizierungs-Tags für Google Analytics, Search Console und Bing Webmaster Tools
• Markup für Social-Media-Previews (z. B. Twitter Cards)

Auch hier beeinflussen diese alle, wie Ihre Inhalte gefunden und auf verschiedenen Plattformen angezeigt werden – in diesem Fall Websites und Apps von Drittanbietern –, sodass Sie durch die Einbeziehung dieser Felder die Kontrolle darüber behalten, wie die Leute Ihre Inhalte sehen, egal wo sie sie finden es.

Wie viele Inhaltstypen benötige ich?

Die Entscheidung, wie viele Inhaltstypen verwendet werden sollen, ist eine der großen Fragen beim Wechsel zu Headless CMS, und die Antwort ist, dass es davon abhängt, was Sie erreichen möchten.

Für die beste SEO-Performance sollten Sie Felder definieren, die jeden einzelnen Parameter abdecken. Beispielsweise könnten Sie ein Feld für das Robots Follow/NoFollow-Meta-Tag und ein separates Feld für Robots Index/NoIndex haben.

Grenzen und Anforderungen

Headless CMS wie Contentful ermöglichen es Ihnen auch, Zeichenbegrenzungen für Felder festzulegen, sodass Sie Titel-Tags und andere Metadaten innerhalb einer bestimmten Anzahl von Zeichen halten können.

Schließlich können Sie Felder obligatorisch und eindeutig machen – wenn also Metadaten von einer anderen Seite repliziert werden oder vollständig fehlen, erhält der Redakteur eine Fehlermeldung und kann die erforderlichen Korrekturen vornehmen.

Ob Sie dies mit mehreren Feldern innerhalb eines einzelnen Inhaltstyps tun oder separate Inhaltstypen für eine noch größere Flexibilität auf der Rendering-Seite verwenden, hängt teilweise davon ab, welche Funktionen Ihre Daten unterstützen müssen, und teilweise von Ihren persönlichen Vorlieben.

Etwas zusammensetzen

Man kann sich das so vorstellen, als würde man einen Wunschbrunnen bauen. Je größer die Steine, desto schneller und einfacher wird der Bau. Aber je kleiner die Steine, desto perfekter wird die Kreisform.

Die „richtige Anzahl“ von Inhaltstypen sollte ein Mittelweg sein, der für Sie am besten funktioniert, damit Sie die gewünschte Website erstellen können, ohne das Gefühl zu haben, jeden Absatz, jede Überschrift und jedes Meta-Tag einzeln zu bearbeiten.

Was ist mit dem Frontend?

So wie es mehrere häufig verwendete Headless-CMS-Backends gibt, stehen auch einige großartige Frontend-Frameworks zur Auswahl.

Zwei der besten sind React und Vue, und diese modernen Frameworks wurden erneut so konzipiert, dass sie effizient arbeiten, Inhalte schnell laden und den Besuchern Ihrer Website die beste Benutzererfahrung bieten.

Denken Sie daran, technische Überlegungen zu berücksichtigen. Durch das Vorab-Rendering Ihrer Inhalte kann beispielsweise sichergestellt werden, dass sie für Suchmaschinen-Crawler vollständig sichtbar sind, die Inhalte möglicherweise nicht „sehen“ können, wenn sie clientseitig mit JavaScript gerendert werden.

Schlussbetrachtungen

Stellen Sie nach der Implementierung Ihres Headless-CMS sicher, dass es von seriösen Webentwicklern und insbesondere von SEO-Experten ordnungsgemäß geprüft wird, um sicherzustellen, dass Sie keine technische Besonderheit übersehen haben, die sich auf Ihre Suchrankings auswirken könnte.

Ein Beispiel dafür, das bei APIs recht häufig vorkommt, ist eine starke Zunahme dynamischer URLs für Dinge wie E-Commerce-Kategorien, unterschiedliche Größen und Farben eines Produkts und Paginierung von Ergebnissen.

Indem Sie alle diese URLs für Suchmaschinenroboter sichtbar machen, riskieren Sie, ihr Crawl-Budget zu verbrauchen, bevor sie den wertvolleren, statischen URL-Inhalt auf Ihrer Website finden.

[Fallstudie] Verwaltung des Bot-Crawlings von Google

Mit mehr als 26.000 Produktreferenzen benötigte 1001Pneus ein zuverlässiges Tool, um seine SEO-Leistung zu überwachen und sicherzustellen, dass Google sein Crawl-Budget den richtigen Kategorien und Seiten zuweist. Erfahren Sie, wie Sie das Crawl-Budget für E-Commerce-Websites mit OnCrawl erfolgreich verwalten.

Lesen Sie die Fallstudie

Vorausschauen

Indem Sie all dies berücksichtigen, können Sie komplexe und umfassende Website-Datenbanken erstellen, die Desktop-Sites, mobile Sites und Apps, intelligente Lautsprecher, KI-Chat-Bots, In-Store-Infobildschirme und viele, viele weitere Gerätetypen über das bedienen können Internet der Dinge.

Zukünftige Entwicklungsarbeit kann sofortige Aktualisierungen für die vielen verschiedenen Geräte und Plattformen liefern, für die Sie Daten veröffentlichen, und so einen schnelleren und positiveren Return on Investment aus Ihren SEO- und Content-Kampagnen ermöglichen.

Und ähnlich wie die Trennung von Inhalt und Design, die Anfang der 2000er Jahre mit Cascading Style Sheets (CSS) einherging, bietet Ihnen das Headless CMS eine detailliertere Möglichkeit, Ihre Inhalte zu definieren, zu bearbeiten und zu rendern – und hilft Ihnen dabei, Ihre SEO- und E-Commerce-Ziele zu erreichen eine besser verwaltete Methode, wenn Sie Ihre Datenbank in den kommenden Monaten und Jahren aufbauen.