Headless WordPress ist eine gute Variante, um moderne Websites zu bauen. Wenn du noch nie von Headless CMS (Content Management Systemen) gehört hast, ist das Konzept am Anfang vielleicht schwer zu verstehen. Deshalb habe ich diesen Artikel geschrieben. Hier erfährst du alles über Headless WordPress. Konkret besprechen wir diese Dinge:

1. Was ist Headless WordPress?
2. Vorteile von Headless WordPress
3. Nachteile von Headless WordPress
4. Wie benutzt man Headless WordPress?
5. Headless WordPress Best Practices

---

Was ist Headless WordPress?

Websites bestehen meist aus zwei Teilen.

1. Frontend: Der Bereich, den Website-Besucher sehen
2. Backend: Die Verwaltungsoberfläche, bei WordPress das Admin Dashboard

Bei “Headless WordPress” wird das Frontend, also der Kopf (Head) der Seite, von dem Backend, dem Körper (Body) der Website getrennt. WordPress ist dann nur noch die Verwaltungsoberfläche: Hier werden Inhalte erstellt, bearbeitet und verwaltet. Das Frontend ist komplett selbstständig. Du kannst entscheiden, welche Technologie du für die Erstellung verwendest.

Genau das ist der Charme bei Headless WordPress: Die Daten werden über eine API (Application Programming Interface = Schnittstelle) von WordPress übertragen und können so überall weiterverarbeitet werden. Entwickler haben die absolute Freiheit. Sie können die Daten in komplexen technischen Lösungen wie Websites oder Apps verwenden, während Redakteure und Content-Manager wie gewohnt die durchdachte Verwaltungsoberfläche von WordPress verwenden können.

---

Vorteile von Headless WordPress

Du weißt jetzt, was Headless WordPress ist - aber was sind die Vorteile?

1. Starke Leistung

Da das Frontend bei Headless WordPress komplett vom Backend getrennt wird, kannst du eine viel bessere Leistung erzielen: Schnellere Ladezeiten und eine bessre allgemeine Nutzererfahrung. Das führt unter Anderem auch zu einem besseren Ranking auf den Suchmaschinen.

2. Bessere Kontrolle

Du hast mit Headless WordPress volle Kontrolle über das Aussehen deiner Website. Ein Frontend-Entwickler kann sich durch Headless WordPress komplett austoben - der Art und Weise, wie du deine Inhalte darstellst, sind keine Grenzen gesetzt.

3. Erhöhte Skalierbarkeit

Manchmal ist es schwierig, WordPress Websites richtig zu skalieren. Mit Headless WordPress kannst du ganz einfach das Frontend unabhängig vom Backend skalieren. Du kannst je nach Bedürfnissen stärkere Server einsetzen, ein CDN dazwischenschalten, Caching optimieren, statisch Seiten generieren und andere Maßnahmen ergreifen, um die Website zu skalieren und auch bei viel Traffic starke Leistung beizubehalten.

4. Verteilung der Inhalte auf verschiedenen Kanälen

Mit Headless WordPress verwaltest du die Inhalte an einem zentralen Ort. Du kannst diese Inhalte jedoch an unzähligen Orten verwenden: Auf einer Website, in einer App oder in firmeninternen Systemen. Du kannst verrückte Automationen einsetzen: Erstellte beispielsweise mit künstlicher Intelligenz automatisch einen Instagram-Post, wenn ein neuer Post im WordPress-Backend hinterlegt wird, und sende den Nutzern deiner Mobile-App eine Push-Benachrichtigung. Deiner Kreativität sind bei Headless WordPress keine Grenzen gesetzt.

5. Erhöhte Sicherheit

Durch das Trennen von Backend und Frontend (das “Decoupling”) wird die Website sicher. Nutzer, die deine Website finden, können nicht direkt Zugriff zur Login-Oberfläche von WordPress haben. So werden automatisierte Brute-Force-Attacken sehr sehr unwahrscheinlich. Durch statische Generierungen der Website mit Frameworks wie Astro oder Next.js kann außerdem sichergestellt werden, dass die Daten nur während des Build-Prozess der Website zum “rendern” verwendet werden - die tatsächliche Live-Website hat also keine Verbindungen zur WordPress-Websites. So ist es nahezu unmöglich für Hacker, die URL des WordPress-Backends herauszufinden. Außerdem werden Server-Ressourcen im Backend gespart, was zu geringeren Kosten führt.

6. Weniger fehleranfällig

Sind Inhaltsverwaltung eng miteinander verknüpft, kann es schnell mal passieren, dass sich Redakteure und Texter verirren und aus Versehen das Layout oder WordPress-Einstellungen zerstören. Mit Headless WordPress passiert das nicht: Die Entwickler kümmern sich um das Layout, die Redakteure müssen nur die Inhalte verwalten.

7. Einfacher Umstieg

Wenn dein Team schon an WordPress gewöhnt ist, kann ein Umzug zu einem anderen System stressig und nervenaufreibend für alle Beteiligten sein. Steigst du auf Headless WordPress um, ist das kein Thema: Die Daten müssen nicht umgezogen werden und dein Team muss in kein neues System eingearbeitet werden.

---

Nachteile von Headless WordPress

Du hast jetzt ein gutes Verständnis von den Vorteilen, die Headless WordPress mit sich bringt - aber was sind die Nachteile.

1. Steilere Lernkurve

Es gibt einige Leute, die sich sehr gut mit WordPress auskennen, aber kein erweitertes Verständnis von moderner Frontend-Entwicklung haben. “Entwickler”, die mit Page-Builder-Plugins wie Elementor per Drag-and-Drop WordPress-Seiten zusammenklicken, haben gegebenenfalls noch nicht das Wissen, um eine komplette Website in einem Framework wie Next.js oder Astro umzusetzen.

2. Mehr Arbeitsaufwand und Ressourcen bei der Entwicklung

Gerade bei kleinen Teams kann es sein, dass die Entwicklung von einer Headless WordPress Website mehr Zeit und Geld verbraucht, als eine “normale” WordPress-Website. Das liegt primär an dem häufig besprochenen Punkt, dass für die Umsetzung des Frontends mehr Expertise gebraucht wird.

Das sind die primären Nachteile von Headless WordPress. Headless WordPress kann besonders dann schwierig werden, wenn du externe Entwickler-Teams engagieren musst und nur ein kleines Budget hast.

---

Wie benutzt man Headless WordPress?

Wie schon erklärt, musst du eine API, also eine Schnittstelle verwenden, um die Daten von WordPress in dein Frontend zu bekommen. Dazu hast du zwei zentrale Möglichkeiten:

1. WordPress REST API - WordPress hat eine eigene REST API, mit der du Daten aus dem Backend bekommst (s. WordPress Developer Dokumentation)
2. WP GraphQL - WP GraphQL ist ein kostenloses Open-Source WordPress Plugin, dass es dir ermöglicht, die Daten über eine GraphQL-Schnittstelle abzufragen

Ich möchte gar nicht groß ins Detail gehen und den Unterschied zwischen “REST” und “GraphQL” erklären, sondern möchte nur, dass du zu Beginn mal von diesen beiden Möglichkeiten gehört hast. Am besten berätst du dich mit einem Entwickler, was für eure Situation am besten geeignet ist.

Im WordPress-Backend musst du nicht viel ändern, um WordPress als Headless CMS zu verwenden. Die große Baustelle ist ganz klar das Frontend: Hier brauchst du vermutlich einen Webentwickler, der ein Fronted erstellen kann. Du kannst aber auch selbst lernen, eine Website zu programmieren! Ich werde in diesem Artikel nicht darauf eingehen, wie genau man ein solches Frontend-Framework verwendet.

---

Headless WordPress Best Practices

Du kennst dich jetzt schon gut im Bereich “Headless WordPress” aus! Hier erfährst du jetzt noch ein paar Tipps, die dich weiterbringen können.

1. SEO-Plugins und Schema-Markup

Es ist empfehlenswert, ein SEO-Plugin wie Rankmath oder Yoast SEO zu verwenden. Hier können Redakteure ganz einfach SEO-spezifische Daten und Inhalte verwalten, die dann von den Frontend-Entwicklern verwendet werden können. Es kann auch hilfreich sein Schema Markup einzubauen, um die Nutzererfahrung zu verbessern und Suchmaschinen-Ranking zu erhöhen.

Tipp: Lies dir doch meinen Artikel mit den Top 7 SEO Tipps durch!

2. Sitemap und robots.txt

Dein “neues Frontend” sollte eine XML-Sitemap und eine robots.txt Datei haben, die Suchmaschinen wie Google dabei helfen, deine Website zu verstehen.

3. OpenGraph

Du solltest auf deiner neuen Website definitiv OpenGraph-Meta-Tags verwenden, um Beiträge auf Social Media anschaulicher zu gestalten.

4. Verwendung eines CDN

Ein CDN (Content-Delivery-Network) kann dir dabei helfen, die Performance deiner Website zu verbessern. Du kannst außerdem WordPress-Plugins und Anbieter wie Cloudinary verwenden, um Medien-Inhalte wie Bilder effizient zu verwalten.

5. Suchmaschinen-Indexierung des Backends deaktivieren

Navigiere im WordPress-Admin-Dashboard auf Einstellungen → Lesen und aktiviere die Option “Suchmaschinen davon abhalten, diese Website zu indexieren”. So wird verhindert, dass Google und andere Suchmaschinen dein Backend indexieren.

6. Hosting auf Subdomain

Ich empfehle dir, WordPress auf einer subdomain wie “wp.example.com” zu installieren. So ist es einfach für Texter und Redakteure, sich die Domain einzuprägen.

---

Bonus: Wie man das WordPress Frontend komplett ausschaltet

Das Frontend der WordPress Seite verbraucht unnötig Ressourcen, wenn du Headless WordPress verwendest. Du brauchst nur Zugriff auf den Admin-Bereich, also kannst du das Frontend komplett deaktivieren.

Dafür kannst du ein “leeres Theme” erstellen. Tipp: Lies dir doch meinen Artikel zur Entwicklung von Child-Themes durch.

Dank einer Antwort auf StackExchange war ich dazu imstande, ein solches Theme zu erstellen. Hier findest du das Theme: Theme herunterladen

Lade einfach die Zip-Datei herunter und gehe dann im WordPress Admin zu Design → Themes → Theme hinzufügen → Theme hochladen. Hier kannst du die Zip-Datei auswählen und das Theme installieren und aktivieren. Schon ist das Frontend deiner Website deaktiviert.

Tipp: Standardmäßig leitet das Theme jetzt auf /wp-admin/ weiter. Wenn du die URL ändern möchtest (beispielsweise zu deiner richtigen Website mit dem neuen Frontend), dann entpacke die Zip-Datei einfach auf deinem Computer und ändere folgende Stelle in index.php:

wp_redirect("https://example.com/")

Jetzt leitet das WordPress-Frontend auf example.com weiter. Sehr gut!

---

Fazit

Headless WordPress kann zu Beginn schwierig sein, aber mit den richtigen Tools und ausreichend Wissen bringt es viele Vorteile mit sich. Mit diesem Artikel hast du jetzt den ersten Schritt zu einer guten Headless WordPress Website gemacht! Glückwunsch!