Headless: Was ist das und warum verändert es alles für Ihre Online-Sichtbarkeit

«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 wirklich zu verstehen, worum es geht, und das ist völlig normal. Der Begriff ist technisch, die übliche Erklärung oft zu abstrakt, und der konkrete Nutzen für Ihr Unternehmen wird selten klar formuliert.

Dieser Artikel tut beides: Er erklärt einfach, was eine Headless-Architektur ist, und zeigt dann (mit Daten), warum sie die Spielregeln für Ihre Online-Sichtbarkeit, Ihre Performance und Ihre Freiheit bei der Weiterentwicklung Ihrer Website tatsächlich verändert.

Die «traditionelle» Architektur: verstehen, 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 Websites, die vor 2018 gebaut wurden.

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, in einem typischen Fall nach 3 bis 5 Sekunden

Das ist langsam, fragil und gekoppelt: Inhalt und Darstellung sind untrennbar miteinander verbunden.

Die Metapher vom Körper ohne Kopf

Das Bild hinter «headless» ist das eines Körpers 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 weiss nicht und kümmert sich nicht darum, wie sein Inhalt dargestellt wird. Es stellt seine Daten einfach über eine API bereit (meist REST oder GraphQL), und jeder beliebige «Kopf» kann sich damit verbinden.

Das mag komplizierter klingen: zwei Systeme statt einem. In der Praxis schafft diese Trennung aber eine Flexibilität und Performance, die mit einer gekoppelten Architektur unerreichbar sind.

Wie eine Headless-Website konkret funktioniert

Die drei Komponenten einer Headless-Architektur

1. Das Headless CMS: Hier arbeitet Ihr Redaktionsteam. Eine moderne, intuitive Oberfläche, erreichbar über den Browser. 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, 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, in 50 bis 150 ms
3. Der Browser zeigt den Inhalt sofort an
4. JavaScript hydratisiert die interaktiven Teile im Hintergrund

Der Benutzer sieht in weniger als 0.5 Sekunden etwas auf dem Bildschirm. Für Google, das den LCP (Largest Contentful Paint) misst, ist das ein entscheidender Unterschied.

Die konkreten SEO-Vorteile einer Headless-Architektur

Performance: das wichtigste Google-Kriterium im Jahr 2025

Google hat die Core Web Vitals 2021 offiziell in seinen Ranking-Algorithmus aufgenommen und gewichtet sie mit jedem Update stärker. 2025 ist die technische Performance ein erstrangiger SEO-Rankingfaktor, weder nebensächlich noch zweitrangig.

Das erreicht eine Headless-Architektur mit Next.js im Vergleich zu einem klassischen gekoppelten CMS:

Diese Zahlen entsprechen dokumentierten realen Migrationen. Kinsta hat bei Migrationen von WordPress auf Headless-Stacks Verbesserungen des LCP von 30 bis 70 % dokumentiert. Vercel veröffentlicht regelmässig Fallstudien, die nach der Einführung von Next.js einen Sprung der Lighthouse-Scores von 40-50 auf 90-99 zeigen.

Indexierung und Rendering: der strukturelle 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, aber nicht optimal. 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 zu Indexierungsverzögerungen von mehreren Tagen führt.

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, in wenigen Dutzend Millisekunden und mit echtem HTML in der Antwort.

Incremental Static Regeneration (ISR): das Beste aus beiden Welten. Die Seiten werden vorab generiert (Performance einer statischen Seite), regenerieren sich aber 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.

Structured Data 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. Laut Studien von Search Engine Land steigern diese Rich Snippets die organische Klickrate um 20 bis 30 %.

In einer Headless-Architektur mit Next.js ist die Umsetzung von JSON-LD trivial und sauber:

{
  "@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, kein Hack. Das Ergebnis ist genau das, was Google 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 entscheidend, 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 ein bekanntermassen schwer sauber zu lösendes Problem.

Flexibilität und Weiterentwicklung: auf Dauer bauen

Ein Inhalt, der mehrere Kanäle speist

Einer der am meisten unterschätzten Vorteile von Headless ist die Wiederverwendbarkeit der Inhalte. Ihr CMS speichert strukturierte Inhalte: kein HTML, kein Darstellungscode, sondern reine Daten 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

Das ist für ein KMU auf lange Sicht vielleicht 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 bedeutet das, dass ein Redesign 40 bis 60 % weniger kostet als ein kompletter Relaunch mit Content-Migration.

Skalierung ohne Turbulenzen

Ein wachsendes KMU sieht seinen Traffic steigen. Eine erfolgreiche LinkedIn-Kampagne, ein in einer Branche geteilter Artikel, eine Medienpartnerschaft: Der Traffic kann sich innerhalb weniger Stunden verzehn- oder verhundertfachen.

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.

Eine Headless-Website mit Next.js auf einem modernen CDN ist bei statischen Seiten praktisch unverwüstlich. Das HTML wird von Edge-Servern ausgeliefert, ohne Datenbankabfrage und ohne PHP-Ausführung. Vercel, Netlify und Cloudflare Pages skalieren automatisch: Sie müssen nichts konfigurieren und zahlen nur, was Sie verbrauchen.

Headless CMS: der Markt im Jahr 2025

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 2025 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: null Kosten, maximale 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 für die grosse Mehrheit der Schweizer KMU (weniger als 3 Redaktoren, weniger als 1'000 Content-Einträge).

Was Schweizer KMU in der Praxis einsetzen

Laut den Daten von State of JS 2024 und den Analysen von Jamstack.org sind die 2025 in Produktion beliebtesten Kombinationen:

1. Next.js + Sanity: das beliebteste 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 ist Next.js das dominierende Frontend. Seine Fähigkeit, SSG, SSR und ISR im selben Projekt zu unterstützen, kombiniert mit React 19 und dem System der Server Components, macht es zur De-facto-Wahl für moderne Headless-Architekturen.

Headless für Schweizer KMU: konkrete Anwendungsfälle

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»).

Ideale 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.

Ideale 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 leistungsstarke Marketing-Website, einen Blogbereich für Content-Marketing und eine Landingpage, die konvertiert. Es will schnell iterieren: neue Funktionen, A/B-Tests, Integrationen.

Ideale Architektur:

• CMS: Sanity (flexible Schemas, leistungsstarke 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 intuitiver 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 bewältigt, nicht dauernd bei der 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.

Zudem sind die Kosten einer nicht performanten Architektur (schlechtere Google-Positionen, tiefere Conversion-Rate, beschädigtes Markenimage) schwer zu beziffern, aber sehr 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 für alle zugänglich. 2025 bietet Sanity einen Gratisplan, der perfekt für KMU ist, Vercel bietet kostenloses Hosting für Standard-Next.js-Projekte, und die Entwicklungskosten einer Headless-Firmenwebsite sind mit denen einer professionellen WordPress-Website vergleichbar.

Der Unterschied ist nicht mehr das Budget: Es ist die Wahl des Entwicklers.

Was INFUSE anbietet

INFUSE baut von Anfang an Headless-Websites. Nicht, weil es gerade im Trend liegt, sondern weil es die Architektur ist, die die beste SEO-Performance, das beste Benutzererlebnis und die grösste Zukunftssicherheit für ein KMU bietet, das in seine digitale 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.

Das konkrete Ergebnis für Ihr KMU: 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 (mittelmässige Google-Scores, riskante Updates, keine Möglichkeit, die gewünschten Weiterentwicklungen umzusetzen), ist es Zeit herauszufinden, was eine moderne Architektur für Ihre Online-Sichtbarkeit leisten kann.