Headless CMS bieten zahlreiche Vorteile bei der Entwicklung responsiver und mobilfreundlicher Websites und E-Commerce Shops. Dazu zählen mehr Flexibilität, schnellere Ladezeiten und ein verbessertes Nutzererlebnis. Zudem sind Unternehmen weniger abhängig von externen Anbietern, da sie nicht mehr an eine Technologie und eine darauf spezialisierte Agentur gebunden sind.
Aber: Neue Möglichkeiten bringen auch neue Herausforderungen mit sich, wie wir in der Zusammenarbeit mit der SEO Agentur Digital Leverage erfahren haben. Die Suchmaschinenoptimierung (SEO) für ein Headless CMS erfordert während der Entwicklungsphase oft mehr Aufwand. Um Erfolg mit der neuen Website zu haben, muss das Headless CMS zudem mit einem SEO-freundlichen Frontend verbunden werden. Klingt kompliziert?
Wir haben uns mit unserer Partneragentur Digital Leverage zusammengesetzt, um aufzuführen, welche SEO Elemente am wichtigsten sind und worauf es zu achten gilt, wenn man seine eigene Website auf ein Headless CMS umstellt.
Was ist Headless SEO?
Headless bedeutet im Grunde, dass Frontend und Backend voneinander getrennt sind. Headless SEO bezieht sich auf Prozesse, die eine Headless Website für Suchmaschinen optimieren. Wichtig zu wissen ist, dass viele der bekannten SEO Prozesse und -Techniken nicht einfach 1:1 übernommen werden können, sondern spezifisch auf die individuellen Anforderungen der Headless Technologie angepasst werden müssen.
Dazu gehören beispielsweise ein auf Nutzerbedürfnisse und Suchabsichten ausgerichtetes Content Modeling, ein gezieltes technisches Setup und eine starke und logisch funktionierende Informationsarchitektur. Wer die Website auf ein Headless CMS migriert, sollte die folgenden drei Hauptbereiche berücksichtigen:
Content SEO
Keyword Research
Longtail Keywords haben zwar ein geringes Suchvolumen, machen jedoch 80 % der Suchanfragen im Internet aus. Oft gestalten sich die Suchanfragen einer Zielgruppe dabei nicht willkürlich, sondern folgen einem bestimmten Muster. Mittels einer Keyword Research können wir diese Muster im Suchverhalten der Zielgruppe identifizieren und versteckte Potenziale durch die Erstellung entsprechender Kategorie-, Produkt- oder Blogseiten ausschöpfen.
- Eine Kategorieseite zu Bio Orange Wein aus Österreich
- Eine Kategorieseite zu Bio Orange Wein aus Deutschland
- Eine Kategorieseite zu Bio Orange Wein aus Frankreich
- etc.
Der Vorteil eines Headless CMS: Man kann solche Seiten praktisch vollautomatisch erstellen und durch die Kombination von Filtern und Attributen genau das liefern, was User suchen. Dabei sollte man aber darauf achten, dass der jeweilige Content immer unter einer individuellen, statischen URL für Google abrufbar ist.
Content Modeling
Content Modeling ist die Basis, aufgrund deren Inhalte in einem Headless CMS strukturiert werden. Bei der Migration auf ein Headless CMS, ist das Content Modeling deswegen ein zentraler Punkt. Beim Modeling wird die Struktur für jedes vorhandene Content Template im Shop aufgebaut. Dazu gehören Produkte, Kategorien, Blog usw. Im Headless CMS werden sie normalerweise als „Entries“ bezeichnet.
Jedes Entry verfügt über verschiedene zugehörige Felder. Im Gegensatz zu einem traditionellen CMS, bei dem ein Content Element direkt mit der jeweiligen Seite verknüpft ist, hat das Headless CMS ein Entry, dem verschiedene Elemente zugewiesen sind. Das Headless CMS kann als Content-Repository betrachtet werden, in dem alle Content Elemente gespeichert werden. Hier ist es wichtig schon früh dafür zu sorgen, dass die richtigen Content Elemente und Templates vorhanden sind, um später die eigene SEO Strategie auch umsetzen zu können.
Redaktioneller Content
Eine clevere Möglichkeit, um in Suchmaschinen für mehr Keywords zu ranken, besteht darin, Produktvergleiche, Produktalternativen oder „Top 10 Produkt“ Listen zu erstellen. Ein Headless CMS bietet sich dazu besonders an: Das Integrieren von Produktinformationen wie Preise, Bilder oder Funktionen in redaktionellen Content ist mit Headless CMS ein Kinderspiel.
So können hybride Content Pages geschaffen werden, welche gute Chancen haben, für Suchanfragen zu ranken und gleich die Brücke zum jeweiligen Produkt schlagen.
- Ein Artikel zu den Top 10 OLED TVs 2023
Onpage SEO
Die Metadaten einer Seite, insbesondere der Title Tag und die Meta Description, liefern Suchmaschinen wichtige Informationen über den Inhalt einer Seite. Jede Seite sollte individuelle Metadaten mit relevanten Keywords haben, die den Inhalt kurz und bündig zusammenfassen.
Viele SEO Profis wurden durch traditionellen CMS in den vergangenen Jahren möglicherweise ein wenig verwöhnt. Alle erforderlichen Funktionen für eine grundlegende Onpage Optimierung sind entweder schon integriert oder können über Plugins schnell installiert werden.
Bei einem Headless CMS ist das nicht ganz so einfach und es müssen zusätzliche Schritte eingeplant werden. Im Abschnitt zu technischem SEO zeigen wir, welche Tags es benötigt.
- Ein Artikel zu den Top 10 OLED TVs 2023
Informationsarchitektur
Crawling der alten Website
Es ist wichtig, ein vollständiges Bild aller Seiten zu erhalten, die derzeit indexiert sind. Hierzu dienen Crawling Tools wie Screaming Frog. Dabei sollten 404 Seiten, Weiterleitungsketten und andere Fehler gefunden und beseitigt werden. Um sicherzustellen, dass die wichtigsten Seiten bei der Migration nicht vergessen gehen, lohnt sich auch immer ein Blick in die Google Search Console.
Abhängig vom alten Setup, können durch diese Analysen die unterschiedlichsten Tasks und Challenges auftauchen. Da wir uns in diesem Artikel primär auf Migrationen zu Headless CMS konzentrieren, können wir nicht auf alle Relaunch Tasks eingehen. Nachfolgend haben wir aber eine umfassende SEO Relaunch Checkliste unserer Partneragentur verlinkt.
Kategorisierung
Ein Headless CMS kann die Zugänglichkeit und das Crawling für Google erleichtern. Durch die Erstellung einer intuitiven Produktkategorisierung können alle relevanten Seiten mit wenigen Klicks erreicht werden. Dies kann besonders bei einer grossen Anzahl von Produkten von Vorteil sein, um sicherzustellen, dass alle Seiten von Google kontinuierlich gecrawlt und indexiert werden.
Interne Verlinkung
Upselling und Cross Selling sind bekannte Veraufstechniken im E-Commerce. Das strategische Platzieren von verwandten Produkten oder weiterführendem Content kann aber auch genutzt werden, um interne Links zu schaffen, die für die SEO Performance hilfreich sind. Hyperlinks, die von einer Produktseite auf verwandte Produkte verweisen, können diesen verwandten Produkten einen zusätzlichen Boost geben und bessere Chancen auf ein gutes Ranking ermöglichen.
Dies kennt man zwar auch schon von herkömmlichen CMS, aber mit einer fortgeschrittenen, KI-gesteuerten Personalization Engine lässt sich die interne Verlinkung für Nutzer:innen und Suchmaschinen mit wenig Aufwand in Headless Systemen stark optimieren.
Tech SEO
Auswahl des Frontends
Auch wenn wir die perfekte Struktur für unsere Website geplant haben, können trotzdem potenzielle Probleme auf der Präsentationsebene auftreten. Die Folge: Alle Anstrengungen bei der Planung sind umsonst. Die Arbeit innerhalb eines Headless CMS ist entscheidend, aber das Frontend darf nicht vergessen werden.
- Korrektes Rendern – Jeglicher Content muss auf der Client Side korrekt gerendert werden, ohne Probleme.
- Mobile Geräte – Das Webdesign auch immer aus der Perspektive des Mobilgeräts betrachten werden. Jeglicher Content muss gut les- und scrollbar sein.
- Content Delivery Network – International tätige Unternehmen, mit Kunden in weit entfernten Ländern, sollten auch ihre Hostingfähigkeiten diversifizieren.
- Ladezeit – Was zur Ladezeit einer Website beiträgt, ist hauptsächlich der Front End Layer. Für einen guten Core Web Vital Score muss hier ein besonderer Fokus gesetzt werden.
Die wichtigsten Punkte schauen wir uns nachfolgend im Detail an.
Korrektes Rendern
Das grosse Problem bei vielen Headless Projekten ist der Einsatz von SPAs, sprich Single Page Applications. SPAs können oft zu Problemen führen, da sie Inhalte dynamisch laden und nicht wie traditionelle Websites über separate URLs verfügen.
Google wird zwar immer besser darin, JavaScript auszulesen. Je nach Technologie Stack kommt es aber auch hier immer wieder zu Problemen. Die Bing Suchmaschine hat wiederum noch grosse Schwierigkeiten, JavaScript zu rendern und korrekt zu interpretieren. Dadurch kann es sein, dass Suchmaschinen bestimmten Content gar nicht sehen und weder indexieren noch ranken. Das kann in einer echten SEO-Tragödie enden. Um sicherzustellen, dass Suchmaschinen die Inhalte und Links auf den Seiten verstehen können, sollte deswegen darauf geachtet werden, dass diese vom Server gerendert und bereits im initialen HTML vorhanden sind.
Die gute Nachricht: Laut Claudio Romano, einem unserer Senior Developer, bewegt sich der Trend dahin, dass Webseitenelemente wieder vermehrt vom Server und nicht dem Client aufbereitet werden. Server Side Rendering (SSR) geniesst eine kleine Renaissance. Jamstack Webarchitekturen bauen auf diesem Trend auf und erlauben es, die Vorteile einer statischen Webseite mit der Flexibilität eines Headless CMS zu kombinieren.
Ladezeit
Apropos Ladezeit: Die Core Web Vitals sind offizielle Google Rankingfaktoren, die die Page Experience bewerten.
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
Bei der Entwicklung von neuen Seitenkomponenten sollten im Zuge eines Relaunch Projekts darauf geachtet werden, dass die Schwellenwerte für die jeweiligen Metriken erfüllt sind. Mehr Informationen dazu in diesem Artikel zu den Core Web Vitals.
Meta Tags
Viele SEO Experten haben ihr Handwerk mithilfe von WordPress, Joomla, Drupal und anderen ähnlichen CMS Systemen erlernt. Hier wird man, wohl oder übel, mit einer Anzahl von Standardfeldern konfrontiert. Mit einem Headless System gibt es jedoch keine Standardfelder, die unbedingt ausgefüllt werden müssen. Die oder der SEO Verantwortliche muss selbst entscheiden, wie das technische Setup funktionieren soll und die entsprechenden Anforderungen gegenüber dem Entwicklerteam formulieren.
Ein grosser Pluspunkt von Headless CMS ist, dass man so nicht mehr auf Plugins und Add-Ons zurückgreifen muss, sondern alles von Grund auf selbst ausgewählt werden kann. Leider läuft man dabei Gefahr schnell etwas zu vergessen.
- Title Tag – Das ist der Titel, den Suchende in den Suchergebnissen sehen.
- Meta Beschreibung – Der kurze Text, welcher den Suchenden sagt, worum es auf dieser Page geht (aber leider von Google oft umgeschrieben wird).
- Statische URLs – Damit Suchmaschinen die einzelnen Seiten indexieren können, benötigt jede Seite eine individuelle, statische URL. Idealerweise beschreibt sie den Inhalt und folgt einer für Menschen verständliche Logik.
- Meta Robots – Jede Seite sollte über ein Feld verfügen, um die Meta-Roboter-Tags zu bearbeiten.
- Strukturierte Daten – Schema Markup hilft Suchmaschinen, Rich Results zu generieren. Ein Feld für das Schema Markup kann pro URL oder auf einer Inhaltskomponentenebene festgelegt werden.
- Canonical Tags – Der Canonical Tag wird verwendet, um Seiten mit doppeltem Inhalt (Duplicate Content) richtig zu kennzeichnen und die damit verwandten Probleme zu beseitigen.
- Hreflang Tags – Um anzugeben, welche Sprachversion in Google angezeigt werden soll, werden Hreflang Tags verwendet. Dies ist ein entscheidendes Element für internationales SEO.
Wichtig ist, dass das Entwicklerteam nicht nur darüber informiert wird, diese Tags verfügbar zu machen, sondern auch, welcher Logik sie folgen sollen. Zum Beispiel, wie unterschiedliche Produktseiten kanonisiert werden sollen oder welches Format ein Titel Tag haben soll.
Fazit: Eine gute Vorbereitung ist alles
Ein Headless CMS bietet viele Vorteile in der Entwicklung von responsiven und mobilfreundlichen Webseiten und Online-Shops. Der grösste Vorteil ist die Freiheit, die man bei der Entwicklung, sowie der Suchmaschinenoptimierung hat. Mehr Freiheit bedeutet aber auch, dass Entwickler und SEO Consultants mehr Verantwortung übernehmen müssen. Content Modeling, Meta Daten aber auch das korrekte Rendering sind dabei zentrale Punkte, die im Relaunchprojekt adressiert werden müssen.
Folgt man einer klaren SEO Strategie, können aber durch ein Headless CMS Strukturen geschaffen werden, die nicht nur ein effizienteres Content- und Produktmanagement ermöglichen, sondern auch fortlaufend mehr organischen Traffic generieren. Das ist die grosse Chance eines jeden Website Relaunchs und das Potenzial, welches diese neue Technologie bietet.
Steckst du gerade selbst in der Relaunch Planung und bist unsicher, ob ein Headless CSM die richtige Wahl ist? Wir unterstützen dich gerne und bringen unsere Expertise in Headless Architekturen, E-Commerce und SEO in die Umsetzung deines Projekts mit ein.
Kontaktiere uns unter projects@panter.ch
