Strapi CMS + Next.js Website mit fortschrittlicher SEO-Architektur
Ein wachsendes Unternehmen benötigte eine schnelle, inhaltsreiche Marketing-Website, auf der das nicht-technische Marketingteam Seiten, Blogbeiträge und Landing Pages eigenständig verwalten konnte – und gleichzeitig sicherstellte, dass die Seite vom ersten Tag an im organischen Suchranking wettbewerbsfähig war.
Ihr Projekt besprechen
Die Herausforderung
Die bestehende Website basierte auf einem monolithischen CMS, das kumulativ Probleme verursachte:
- Langsame Performance — Server-gerenderte Seiten mit überladenen Plugins hatten durchschnittlich 4-6 Sekunden Ladezeit, was die Core Web Vitals stark beeinträchtigte
- Entwickler-Engpass — Jede Inhaltsänderung (neue Landing Page, Blog-Layout, CTA-Update) erforderte die Anpassung von Template-Dateien durch einen Entwickler
- Schlechte SEO-Grundlage — Keine strukturierten Daten, inkonsistente Meta-Tags, fehlende Canonical URLs und keine programmatische Sitemap führten zu schwacher organischer Sichtbarkeit
- Starres Inhaltsmodell — Das Hinzufügen eines neuen Inhaltstyps (Fallstudien, FAQs, Teambeschreibungen) erforderte Schema-Migrationen und Template-Neuschreibungen
- Keine Vorschau — Redakteure veröffentlichten Inhalte blind – es gab keine Möglichkeit, Änderungen vor der Veröffentlichung in der Vorschau anzusehen
- Lokalisierungsanforderungen — Zukünftige Erweiterungen auf mehrere Sprachen erforderten ein CMS, das i18n nativ unterstützte
Unsere Lösung
Wir haben eine Strapi + Next.js Headless-Architektur entwickelt, mit einer flexiblen Inhaltsmodellierungsschicht in Strapi, einem statisch generierten Next.js Frontend mit ISR fĂĽr nahezu sofortige Updates und einem umfassenden SEO-System, das technische, On-Page- und strukturierte Datenoptimierung abdeckt.
Architektur
- CMS: Strapi (selbst gehostet) mit benutzerdefinierten Inhaltstypen und Dynamic Zones
- Frontend: Next.js mit App Router, React Server Components, TypeScript
- Styling: Tailwind CSS mit Design-System-Tokens
- SEO-Schicht: Next.js Metadata API, JSON-LD Generatoren, automatisierte Sitemap/robots.txt
- Medien: Strapi Media Library mit Cloudinary-Provider fĂĽr optimierte Bereitstellung
- Hosting: Vercel (Frontend), cloud-gehostetes Strapi Backend, Cloudinary (Medien-CDN)
- Datenbank: PostgreSQL fĂĽr die Strapi-Inhaltsspeicherung
- Cache: ISR mit On-Demand-Revalidierung ĂĽber Strapi Webhooks
Strapi Inhaltsmodellierung
Inhaltstypen
Das CMS wurde um Inhaltstypen herum strukturiert, die alle Geschäftsanforderungen abdeckten: Marketingseiten, Blogbeiträge mit Kategorien und Autoren, Kampagnen-Landingpages, Dienstleistungs-/Produktangebote, Teambeschreibungen, FAQs, Testimonials und ein globales Einstellungs-Singleton für die websiteweite Konfiguration.
Dynamic Zones (Seiten-Builder)
Strapi Dynamic Zones ermöglichen es Redakteuren, Seiteninhalte aus wiederverwendbaren Komponenten zusammenzustellen – jeder Zonen-Eintrag wird auf eine React-Komponente im Frontend abgebildet. Verfügbare Blöcke umfassen Hero-Sektionen, Feature-Grids, Text-mit-Bild-Layouts, Testimonial-Sektionen, CTA-Banner, FAQ-Akkordeons, Statistik-Zähler, Preistabellen, Logo-Grids, Embeds, Blog-Highlights und Kontaktformulare – und decken alle gängigen Marketingseiten-Muster ab.
SEO-Komponente (Wiederverwendbar)
Eine gemeinsame SEO-Komponente, die an jeden Inhaltstyp angehängt ist, bietet Felder für benutzerdefinierten Meta-Titel, Meta-Beschreibung, Canonical URL-Überschreibung, Open Graph Bild, Indexierungsanweisungen, Fokus-Keyword und optionale Überschreibung strukturierter Daten – um eine konsistente SEO-Verwaltung über alle Inhalte hinweg zu gewährleisten.
Next.js Frontend-Architektur
Komponentenstruktur
Das Frontend folgt einer geschichteten Architektur:
- Block-Komponenten werden direkt auf Strapi Dynamic Zone-Einträge abgebildet
- UI-Primitive bieten konsistente Design-System-Elemente
- Layout-Komponenten verwalten Header, Footer und Navigation
- SEO-Utilities generieren strukturierte Daten und Meta-Tags
Ein zentraler Dynamic Zone Renderer iteriert durch das Block-Array von Strapi und rendert die entsprechende React-Komponente fĂĽr jeden Eintrag.
Datenabrufstrategie
Alle Routen nutzen Incremental Static Regeneration (ISR) mit On-Demand-Revalidierung, ausgelöst durch Strapi Webhooks. Wenn ein Redakteur Inhalte veröffentlicht oder aktualisiert, sendet Strapi einen Webhook, der die Revalidierung der spezifisch betroffenen Seite auslöst und so sicherstellt, dass Updates innerhalb von Sekunden live gehen, ohne vollständige Neuaufbauten.
SEO-Implementierung
Technisches SEO
- Metadaten pro Seite — Titel, Beschreibung, Canonical URL, Open Graph und Twitter Card Tags, generiert aus Strapi SEO-Feldern mit intelligenten Fallbacks
- Automatisierte Sitemap — Programmatisch generiert aus allen veröffentlichten Inhalten mit passenden Änderungsfrequenz- und Prioritätswerten
- Robots.txt — Umgebungsbewusste Generierung (Produktion erlaubt Crawling, Staging blockiert es)
- Canonical URLs — Automatisch generiert mit Normalisierung des abschließenden Schrägstrichs, im CMS überschreibbar
Strukturierte Daten (JSON-LD)
Die automatisierte Schema-Generierung umfasst:
- Organisation — Website-weites Schema aus globalen Einstellungen
- Artikel — Blogbeiträge mit Überschrift, Autor, Daten und Herausgeber
- FAQ — Automatisch generiert, wenn FAQ-Blöcke auf einer Seite verwendet werden
- Breadcrumb — Automatisch generiert aus der URL-Pfadhierarchie
- Dienstleistung — Dienstleistungsseiten mit Anbieter und Einzugsgebiet
- Lokales Unternehmen — Optional, für Unternehmen mit physischen Standorten
Performance SEO (Core Web Vitals)
- LCP — Hero-Bilder vorgeladen, Cloudinary Auto-Format (WebP/AVIF), kritisches CSS inline, Server Components eliminieren unnötiges Client-JS
- CLS — Explizite Bildabmessungen aus der Medienbibliothek, optimiertes Laden von Schriftarten mit Größenanpassung, Skeleton-Platzhalter, Embed-Container mit festen Abmessungen
- INP — Minimales clientseitiges JavaScript, leichte interaktive Handler, Code-Splitting pro Route
On-Page SEO Tools
Das CMS umfasst eine Redakteursführung mit Zeichenzählern für Meta-Felder, eine Pflichtfeldvalidierung, die sicherstellt, dass keine Seite ohne SEO-Metadaten veröffentlicht wird, und die automatische Befüllung von SEO-Feldern aus Inhaltstiteln und Auszügen mit manuellen Überschreibungsoptionen.
Medien-Pipeline
In Strapi hochgeladene Bilder werden im Cloudinary CDN gespeichert, wobei das Next.js Frontend optimierte Varianten mit automatischer Formatauswahl, responsivem Sizing, Edge-Caching und Lazy Loading mit Weichzeichner-Platzhaltern für die Prioritätsladung über dem Falz anfordert.
Hauptfunktionen
- Dynamic Zone Seiten-Builder — Mehr als 12 zusammensetzbare Blöcke für die Seitenerstellung ohne Entwickler
- Wiederverwendbare SEO-Komponente — An jeden Inhaltstyp angehängt für konsistentes Meta-Management
- Automatisierte strukturierte Daten — JSON-LD für Organisation, Artikel, FAQ, Breadcrumb, Dienstleistung
- ISR + Webhooks — Inhaltsaktualisierungen in Sekunden live ohne vollständigen Neuaufbau
- Programmatische Sitemap — Automatisch generiert aus allen veröffentlichten Strapi-Inhalten
- Cloudinary Medien-Pipeline — Auto-Format, responsives Sizing, CDN-Bereitstellung
- Core Web Vitals optimiert — Server Components, Bild-Preloading, Schriftoptimierung, minimales JS
- Entwurfs-Vorschau — Strapi-Vorschau-Button rendert Entwurfsinhalte in Next.js vor der Veröffentlichung
- i18n-fähig — Starpis integrierte Internationalisierung für zukünftige Mehrsprachenerweiterung
- Redakteur-Leitplanken — Zeichenzählungen, Pflichtfelder und Keyword-Anleitung im Strapi-Admin
Ergebnisse
Technologie-Stack
Bereit, Ihr Unternehmen zu transformieren?
Lassen Sie uns besprechen, wie wir ähnliche Lösungen für Ihre Herausforderungen anwenden können.