Headless CMS: was es für die Sichtbarkeit Ihres KMU bringt

«Headless.» Das Wort fällt immer häufiger in Gesprächen rund ums Web, eingestreut von Entwicklern oder Agenturen, die Ihnen einen Relaunch vorschlagen. Die meisten KMU-Inhaber nicken höflich, ohne genau zu wissen, worum es geht, und das ist normal. Der Begriff ist technisch, die übliche Erklärung bleibt abstrakt, und selten sagt Ihnen jemand, was Ihr Unternehmen davon hat.

Dieser Artikel tut beides: Er erklärt einfach, was eine Headless-Architektur ist, und zeigt dann konkret, was sie für Ihre Online-Sichtbarkeit, Ihre Performance und Ihre Freiheit bei der Weiterentwicklung Ihrer Website ändert.

Die «traditionelle» Architektur: was ersetzt wird

Wie eine klassische Website funktionierte (und immer noch funktioniert)

Um Headless zu verstehen, muss man zuerst die klassische Architektur verstehen: die von WordPress, Joomla, Drupal, Typo3 und den meisten bestehenden KMU-Websites.

In einem klassischen System (man spricht von «monolithisch» oder «gekoppelt») steckt alles im selben Paket:

• Die Datenbank: speichert Ihre Artikel, Seiten, Produkte und Benutzer
• Das Backend: verwaltet die Logik (PHP im Fall von WordPress), holt die Daten und setzt das HTML zusammen
• Das Frontend: die Templates, Themes und Styles, die das Erscheinungsbild bestimmen

Diese drei Schichten sind untrennbar. Ein Wechsel des WordPress-Themes ändert nicht nur das Design: Er ändert, wie der Inhalt strukturiert, angezeigt und manchmal sogar gespeichert wird. Eine Migration von WordPress zu etwas anderem bedeutet oft, bei null anzufangen.

Wenn ein Benutzer Ihre Website besucht, passiert Folgendes:

1. Sein Browser sendet eine Anfrage an Ihren Server
2. Der PHP-Server fragt die MySQL-Datenbank ab
3. PHP setzt das HTML aus den Daten und dem Template zusammen
4. Das HTML wird an den Browser gesendet
5. Der Browser lädt zusätzliches CSS und JavaScript herunter
6. Die Seite wird angezeigt, oft erst nach mehreren Sekunden

Das ist langsam, fragil und gekoppelt: Inhalt und Darstellung hängen aneinander.

Die Metapher vom Körper ohne Kopf

«Headless» bedeutet «ohne Kopf». Der «Körper» ist das Backend (die Datenbank, die Logik, der Inhalt). Der «Kopf» ist das Frontend: das, was der Benutzer in seinem Browser sieht.

In einer Headless-Architektur sind der Körper (das CMS) und der Kopf (die Website) zwei getrennte Systeme, die über eine API kommunizieren. Das CMS befasst sich nicht damit, wie sein Inhalt dargestellt wird. Es stellt seine Daten über eine API bereit (meist REST oder GraphQL), und jeder beliebige «Kopf» kann sich damit verbinden.

Das mag komplizierter klingen, denn es sind zwei Systeme statt einem. In der Praxis bringt diese Trennung aber eine Flexibilität und Performance, die eine gekoppelte Architektur nicht erreicht.

Wie eine Headless-Website funktioniert

Die drei Komponenten einer Headless-Architektur

1. Das Headless CMS: Hier arbeitet Ihr Redaktionsteam. Die Oberfläche ist modern, einfach und über den Browser erreichbar. Beispiele: Sanity, Contentful, Directus, Strapi, Payload CMS. Sie erstellen einen Artikel und erfassen Titel, Text, Hauptbild und SEO-Metadaten. Das CMS speichert alles strukturiert und stellt eine API bereit.

2. Das Next.js-Frontend: Das ist die Website, die Ihre Benutzer sehen. Sie verbindet sich mit der API des CMS, holt den Inhalt und generiert hochoptimiertes HTML. Dieser Vorgang findet beim Build (Deployment) statt, nicht bei jedem Besuch. Das Ergebnis wird auf einem weltweiten CDN gespeichert.

3. Das CDN (Content Delivery Network): Das vorab generierte HTML wird auf Server in der ganzen Welt verteilt, in Genf, Zürich, Paris, London oder New York. Wenn ein Benutzer aus Zürich Ihre Website besucht, erhält er das HTML von einem Server, der nur wenige Millisekunden von ihm entfernt ist, und nicht von einem Shared-Hosting-Server in Paris.

Was sich für den Benutzer ändert

Wenn ein Benutzer eine gut gebaute Headless-Website besucht:

1. Sein Browser sendet eine Anfrage an das nächstgelegene CDN
2. Das CDN antwortet mit vorgefertigtem HTML, ohne serverseitige Berechnung
3. Der Browser zeigt den Inhalt sofort an
4. JavaScript aktiviert die interaktiven Teile im Hintergrund

Der Benutzer sieht den Inhalt fast sofort. Für Google, das den LCP (Largest Contentful Paint) misst, ist der Unterschied deutlich.

Die SEO-Vorteile einer Headless-Architektur

Performance: ein erstrangiges Google-Kriterium im Jahr 2026

Google hat die Core Web Vitals 2021 in seine Ranking-Signale aufgenommen. Die technische Performance gehört also zu dem, was Google Seite für Seite misst, und ist kein Detail.

Auf einer vorab generierten Headless-Website mit Next.js sind die Schwellenwerte «Gut» von Google (LCP < 2.5 s, INP < 200 ms, CLS < 0.1) leichter zu erreichen: Das HTML ist vor dem Besuch fertig, wird über ein CDN ausgeliefert, ohne Datenbankabfrage und ohne PHP. Bei einem gekoppelten CMS verlängert jedes Plugin, jede Datenbankabfrage und jedes Theme-Skript die Ladezeit.

Indexierung und Rendering: ein struktureller Vorteil

Google indexiert Ihre Website, indem es seinen Robot (Googlebot) schickt, um Ihre Seiten zu «lesen». Eine WordPress-Website in PHP liefert ihm HTML, das on the fly zusammengesetzt wird: korrekt, mehr nicht. Eine clientseitige JavaScript-Website (reine SPA) liefert ihm eine leere Seite mit einem <div id="root">: Googlebot muss das JavaScript ausführen, um den Inhalt zu sehen, was die Indexierung verzögern kann.

Eine Headless-Website mit Next.js löst beide Probleme:

Static Site Generation (SSG): Alle Seiten werden beim Build als reines HTML vorab generiert. Googlebot kommt an, findet vollständiges HTML und indexiert es sofort. Es muss kein JavaScript ausgeführt werden, um den Inhalt zu sehen.

Server-Side Rendering (SSR): Für Seiten, deren Inhalt sich häufig ändert, kann Next.js sie bei jeder Anfrage serverseitig rendern, mit echtem HTML in der Antwort.

Incremental Static Regeneration (ISR): eine Mischung aus beidem. Die Seiten werden vorab generiert (mit der Geschwindigkeit einer statischen Seite) und regenerieren sich automatisch im Hintergrund, wenn sich der Inhalt im CMS ändert. Sie veröffentlichen einen Artikel in Sanity, und er ist wenige Sekunden später als reines HTML online.

Strukturierte Daten und Rich Snippets: eine saubere Umsetzung

Strukturierte Daten (JSON-LD) ermöglichen es Google, angereicherte Informationen in den Suchergebnissen anzuzeigen: Bewertungssterne, Produktpreise, aufklappbare FAQ, Unternehmensinformationen. Ihr Eintrag nimmt mehr Platz ein und lädt zum Klicken ein.

In einer Headless-Architektur mit Next.js ist JSON-LD einfach und sauber umzusetzen:

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Ihr KMU",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Rue de Rive 10",
    "addressLocality": "Genève",
    "postalCode": "1204",
    "addressCountry": "CH"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": 46.2044,
    "longitude": 6.1432
  }
}

Dieses JSON wird direkt in den <head> jeder betroffenen Seite eingefügt und dynamisch aus den Daten des CMS generiert. Kein Plugin, keine eingeschränkte grafische Oberfläche, keine Notlösung: Google erhält genau das, was es erwartet.

Mehrsprachigkeit und hreflang-Tags: der Schweizer Fall

Die Schweiz ist ein mehrsprachiger Markt. Ein KMU in Genf richtet sich oft an französischsprachige Kunden, doch bestimmte Branchen (Finanzen, Immobilien, Industrie) erfordern auch eine Präsenz auf Deutsch und Englisch. Mehrsprachigkeit im SEO richtig zu handhaben ist komplex und nötig, um Duplicate Content zu vermeiden.

Die hreflang-Tags teilen Google mit, welche Version einer Seite für welchen Sprachmarkt bestimmt ist:

<link rel="alternate" hreflang="fr-CH" href="https://example.ch/fr/article" />
<link rel="alternate" hreflang="de-CH" href="https://example.ch/de/artikel" />
<link rel="alternate" hreflang="en-CH" href="https://example.ch/en/article" />

Next.js unterstützt die Internationalisierung (i18n) nativ über sein Routing-System. URLs, Metadaten, hreflang-Tags und übersetzte Inhalte werden konsistent und automatisch verwaltet. Das Headless CMS speichert die Übersetzungen jedes Inhalts, Next.js ruft sie ab und zeigt sie je nach Locale des Benutzers an.

Auf WordPress oder einer No-Code-Plattform ist das deutlich schwerer sauber zu lösen.

Flexibilität und Weiterentwicklung: auf Dauer bauen

Ein Inhalt, der mehrere Kanäle speist

Die Wiederverwendung der Inhalte ist ein oft unterschätzter Vorteil von Headless. Ihr CMS speichert strukturierte Inhalte: kein HTML, kein Darstellungscode, nur Rohdaten mit ihren Metadaten.

Derselbe Inhalt kann gleichzeitig Folgendes speisen:

• Ihre Hauptwebsite
• Eine mobile App (React Native, Flutter)
• Einen Chatbot oder internen KI-Assistenten
• Automatische Exporte auf LinkedIn oder in Ihren Newsletter
• Eine Partnerwebsite oder eine White-Label-Version

Bei WordPress ist Ihr Inhalt in MySQL-Tabellen und in von Shortcodes generiertem HTML eingeschlossen. Der Export in ein anderes Format erfordert Handarbeit oder fragile Plugins. Mit einem Headless CMS und seiner API genügt eine API-Anfrage, um den Inhalt im gewünschten Format abzurufen.

Das Design ändern, ohne den Inhalt zu migrieren

Für ein KMU ist das auf lange Sicht wohl der praktischste Vorteil. Wenn Ihre WordPress-Website in die Jahre kommt und Sie sie erneuern möchten, haben Sie in der Regel zwei Optionen:

1. Das Theme wechseln und dann wochenlang Ihren Inhalt an das neue Theme anpassen
2. Bei null anfangen und dann Ihren gesamten Inhalt manuell migrieren

Bei einer Headless-Architektur sind Frontend und Backend entkoppelt. Sie können das Erscheinungsbild Ihrer Website komplett neu gestalten (neues Corporate Design, neue Animationen, neue Navigationsstruktur), ohne das CMS anzufassen. Ihr Inhalt bleibt in Sanity oder Contentful unverändert. Nur das Next.js-Frontend ändert sich.

In der Praxis kostet ein Redesign so weniger als ein kompletter Relaunch mit Content-Migration, denn der Inhalt bleibt, wo er ist.

Traffic-Spitzen aushalten

Ein wachsendes KMU sieht seinen Traffic steigen. Eine LinkedIn-Kampagne, die funktioniert, ein in Ihrer Branche geteilter Artikel, eine Medienpartnerschaft: Der Traffic kann innerhalb weniger Stunden sprunghaft ansteigen.

Eine WordPress-Website auf Shared Hosting bricht unter dieser Last zusammen. Selbst mit einem gut konfigurierten VPS und einem Cache-Plugin erzeugen Traffic-Spitzen Engpässe bei der Datenbank.

Auf einem modernen CDN fällt eine Headless-Website mit Next.js bei statischen Seiten praktisch nie aus. Das HTML wird von Edge-Servern ausgeliefert, ohne Datenbankabfrage und ohne PHP-Ausführung. Vercel, Netlify und Cloudflare Pages passen sich der Last automatisch an: Sie müssen nichts konfigurieren und zahlen nur, was Sie verbrauchen.

Der Markt für Headless CMS im Jahr 2026

Die wichtigsten Anbieter und wie man wählt

Der Markt für Headless CMS hat sich seit 2020 stark strukturiert. Hier ein Überblick über die 2026 am häufigsten eingesetzten Lösungen:

Für ein KMU in Genf oder Zürich hängt die Wahl von mehreren Faktoren ab:

Volumen und Publikationsfrequenz: Wenn Sie einen Artikel pro Monat veröffentlichen und Ihren Inhalt selten ändern, genügen mit Git versionierte Markdown-Dateien, ohne Kosten und mit maximaler Performance. Wenn Sie mehrmals pro Woche mit mehreren Autoren publizieren, sind Sanity oder Directus besser geeignet.

Datensouveränität: Wenn Ihre Daten in der Schweiz bleiben müssen (regulierte Branchen, Präferenz gemäss DSG), ist Directus oder Payload CMS self-hosted auf einem Infomaniak-Server die Lösung. SaaS-CMS hosten in der Regel in den USA oder in der EU.

Budget: Die Gratisversion von Sanity genügt vielen KMU, solange das Redaktionsteam und die Menge an Inhalten überschaubar bleiben. Prüfen Sie die aktuellen Limiten auf der Website des Anbieters, bevor Sie sich entscheiden.

Was Schweizer KMU in der Praxis einsetzen

Die Kombinationen, die man in Produktion am häufigsten antrifft, sind:

1. Next.js + Sanity: ein sehr verbreitetes Duo für Firmenwebsites und professionelle Blogs
2. Next.js + Contentful: bevorzugt von Unternehmen mit grossen Redaktionsteams
3. Next.js + Markdown (Git-basiert): für Websites mit stabilem Inhalt (Firmenwebsites, Portfolios)
4. Next.js + Directus: für Projekte, die souveräne Daten oder maximale Flexibilität erfordern

In allen Fällen dominiert Next.js im Frontend. Es unterstützt SSG, SSR und ISR im selben Projekt, mit React 19 und Server Components, und ist damit die Standardwahl für aktuelle Headless-Architekturen.

Headless für Schweizer KMU: Fälle aus der Praxis

Arztpraxis oder paramedizinische Praxis in Genf

Eine Arztpraxis hat spezifische Anforderungen: Inhalte, die sich wenig ändern (Leistungen, Team, Öffnungszeiten), aber sensible Daten, DSG-Konformität und die Notwendigkeit, bei lokalen Suchanfragen auf Google leicht gefunden zu werden («Hausarzt Eaux-Vives», «Zahnarzt Carouge»).

Passende Architektur:

• CMS: Markdown oder Payload CMS self-hosted bei Infomaniak (Daten in der Schweiz)
• Frontend: Next.js 16, statisches Rendering (SSG)
• Hosting: Infomaniak oder Vercel (keine exponierte Datenbank)
• SEO: Structured Data LocalBusiness + MedicalBusiness, hreflang FR/DE je nach Region

Erwartetes Ergebnis: Website lädt in 0.9 s, Lighthouse-Score 95+, sofortige Indexierung durch Googlebot, null Sicherheitswartung.

Handwerker oder Bauunternehmen in der Romandie oder der Deutschschweiz

Ein Handwerker möchte bei seinen lokalen Keywords auf Google an erster Stelle stehen, seine Referenzen zeigen und von Kunden einfach kontaktiert werden. Seine Website ändert sich selten: neue Baustellenfotos, Kundenstimmen.

Passende Architektur:

• CMS: Sanity (gratis, intuitive Oberfläche zum Veröffentlichen von Referenzfotos)
• Frontend: Next.js 16, optimierte Bildgalerie, Kontaktformular über die Resend API
• Hosting: Vercel oder Infomaniak
• SEO: schema.org HomeAndConstructionBusiness, Galerie mit optimierten Alt-Texten, eine Seite pro Leistung

Erwartetes Ergebnis: Jede neue Referenz ist über die Sanity-Oberfläche in weniger als einer Minute veröffentlicht, die Seiten sind innerhalb einer Stunde als reines HTML indexiert.

Tech-Startup oder SaaS-Unternehmen in Genf

Ein Technologie-Startup braucht eine schnelle Marketing-Website, einen Blogbereich für Content-Marketing und eine Landingpage, die konvertiert. Es will schnell iterieren: neue Funktionen, A/B-Tests, Integrationen.

Passende Architektur:

• CMS: Sanity (flexible Schemas, vollständige API)
• Frontend: Next.js 16 mit React Server Components, GSAP-Animationen
• Hosting: Vercel (Edge Functions für A/B-Tests, integrierte Analytics)
• SEO: dynamische Sitemap, Open Graph pro Artikel, JSON-LD SoftwareApplication

Erwartetes Ergebnis: 100 veröffentlichte Artikel ohne Performance-Einbussen, die Möglichkeit, das Design zu ändern, ohne den Inhalt anzufassen.

Die gängigen Vorurteile über Headless

«Das ist zu komplex für ein KMU»

Die Komplexität liegt beim Entwickler, nicht beim Benutzer. Die Administrationsoberfläche eines CMS wie Sanity ist einfacher als WordPress, und sie ist über jeden Browser erreichbar, ohne dass ein Plugin installiert werden muss. Für eine Person, die Inhalte pflegt, ist der Unterschied zu WordPress nicht vorhanden oder positiv.

Die architektonische Komplexität wird einmal bei der Entwicklung gelöst, nicht bei jeder Nutzung.

«Das kostet mehr»

Die anfänglichen Entwicklungskosten sind etwas höher als bei WordPress. Doch über 3 bis 5 Jahre gleichen die Einsparungen bei Wartung, Hosting, Plugin-Lizenzen und Updates das bei Weitem aus. Die detaillierten Zahlen finden Sie in der Vergleichstabelle in unserem Artikel über No-Code.

Dazu kommen die Kosten einer langsamen Website (schlechtere Google-Positionen, tiefere Conversion-Rate, beschädigtes Markenimage). Sie sind schwer zu beziffern, aber real.

«Das ist nur etwas für Grossunternehmen»

Die grössten Headless-Websites der Welt gehören tatsächlich Unternehmen wie Nike, Spotify oder Airbnb. Doch Headless ist inzwischen breit zugänglich. 2026 bietet Sanity einen Gratisplan, der zu KMU passt, das Hosting einer Next.js-Website bleibt erschwinglich (der Gratisplan von Vercel ist privaten, nicht kommerziellen Projekten vorbehalten, eine Firmenwebsite läuft über den kostenpflichtigen Pro-Plan oder bei einem anderen Anbieter wie Infomaniak), und die Entwicklungskosten einer Headless-Firmenwebsite sind mit denen einer professionellen WordPress-Website vergleichbar.

Es ist keine Frage des Budgets mehr, sondern der Wahl des Entwicklers.

Was INFUSE anbietet

INFUSE baut seit Beginn Headless-Websites. Mit Mode hat das nichts zu tun: Diese Architektur bietet die beste SEO-Performance, das beste Benutzererlebnis und die längste Lebensdauer für ein KMU, das in seine Online-Präsenz investiert.

Jedes Projekt folgt demselben Ansatz: Next.js 16 für das Frontend, die Wahl eines Headless CMS, das zum Content-Volumen und zu den Anforderungen passt (je nach Fall Sanity, Directus oder Markdown), Hosting auf einer weltweiten Infrastruktur oder bei Infomaniak, wenn Souveränität ein Kriterium ist, und sauber auf Git gelieferter Code.

Für Ihr KMU heisst das: eine Website, die in weniger als einer Sekunde lädt, von Google sofort indexiert wird, von Ihren Teams ohne technische Schulung aktualisiert werden kann und sich in 5 Jahren ohne mühsame Migration weiterentwickeln lässt.

Wenn Ihre aktuelle Website Sie bremst (schwache Google-Scores, riskante Updates, Weiterentwicklungen, die nicht möglich sind), schauen wir gemeinsam, was eine moderne Architektur für Ihre Online-Sichtbarkeit leisten kann.

Häufige Fragen

Was ist ein Headless CMS?

Es ist ein CMS, das von der Website getrennt ist, die den Inhalt anzeigt. Es speichert Inhalte strukturiert und stellt sie über eine API (REST oder GraphQL) bereit, und die Website, zum Beispiel mit Next.js gebaut, holt sie ab, um ihre Seiten zu erzeugen.

Ist ein Headless CMS im Alltag kompliziert?

Nein. Die Komplexität liegt beim Entwickler. Für die Person, die Inhalte veröffentlicht, funktioniert eine Oberfläche wie die von Sanity im Browser ohne Plugin und ist mindestens so einfach wie WordPress.

Kann man das Design ändern, ohne die ganze Website neu zu bauen?

Ja. Da Inhalt und Darstellung getrennt sind, lässt sich das Frontend komplett neu gestalten, ohne den Inhalt im CMS anzufassen. Ein Redesign kostet so weniger als ein kompletter Relaunch mit Content-Migration.