SEO für Headless CMS: Darauf sollten Sie achten

Veröffentlicht: 2020-11-30

Inhaltsverzeichnis

Grundsätzlich folgt SEO für ein Headless CMS immer noch den gleichen Regeln wie ein traditionelles CMS. Crawlbarkeit, Geschwindigkeit und Inhaltsqualität bleiben also die Ziele, wenn Sie sich darauf einlassen möchten. Aber obwohl wir ähnliche Ziele zu erreichen haben, sind die Mittel, um diese Ziele zu erreichen, in einem Headless CMS anders.

Wie SEO in einem Headless CMS anders ist

In einem Headless-CMS muss der Großteil der SEO-Arbeit manuell erledigt werden, da es in der Regel keine Plugins oder Add-Ons gibt, die den gesamten Prozess erleichtern – und das bedeutet mehr Arbeit für Sie und mehr Dinge, die Sie während des Prozesses lernen müssen sich auf Tools von Drittanbietern verlassen. Da die meisten kopflosen CMS- und Frontend-Frameworks derzeit auf JavaScript basieren, kann SEO für solche Umgebungen kompliziert werden, da Crawler JavaScript nicht einfach rendern können.

Auch wenn der Googlebot JavaScript rendern kann, möchten wir uns nicht darauf verlassen.

Martin Splitt, über die Implementierung von dynamischem Rendering

 Empfohlene Lektüre: Headless CMS vs. traditionelles CMS

Dinge, auf die Sie bei einem Headless CMS achten sollten

Alternativtexte

Alternativtexte helfen dabei, Ihre Bildinhalte für Google-Bots lesbar zu machen. Ähnlich wie benutzerdefinierte Metadaten ist Alt-Text für Bilder in den meisten Headless-CMS keine sofort einsatzbereite Funktion, und das bedeutet, dass er von Ihrem CMS-Anbieter implementiert werden muss.

Bei einem Headless-CMS ohne integrierte Alt-Text-Funktion können wir den Alt-Text pro Bild ohne großen Aufwand manuell hinzufügen, da Sie Ihren Bildern nur ein <alt> -Attribut hinzufügen müssen.

 <img src="image.png" alt="unser alternativer Text">

Metadaten

Metadaten-Tags sind spezielle Tags, die die Google-Suche versteht. Diese Tags beschreiben den Inhalt Ihrer Website und steuern, wie Ihre Seiten in der Google-Suche angezeigt werden. Und im Gegensatz zu einem herkömmlichen CMS verfügt ein Headless-CMS normalerweise nicht über die Möglichkeit, Metadaten-Tags spontan zu bearbeiten, was bedeutet, dass der Titel, die Beschreibungen und andere Meta-Tags Ihrer Seite manuell zu Ihren Inhaltsmodellen hinzugefügt werden müssen.

Beispielsweise verwenden wir für eine Headless-Website mit einem React-basierten Frontend ohne Unterstützung für benutzerdefinierte Metadaten den React-Helm, um bequem Metadaten zu unserem <head> hinzuzufügen.

Bei einem Headless-CMS, das benutzerdefinierte Metadaten unterstützt, müssen Sie in der Regel Felder mit benutzerdefinierten Metadaten-Tags zu Ihrem Inhaltsmodell hinzufügen oder ein benutzerdefiniertes SEO-Modell erstellen, das alle erforderlichen Meta-Tags enthält. Das erstellte SEO-Modell sollte so konfiguriert werden, dass es Beziehungen zu allen Seiten hat, die es benötigen.

Ein SEO-Modell in GraphCMS — Ein *SEO-Modell in* *GraphCMS*

Strukturierte Datenschnipsel

Strukturierte Daten-Snippets helfen der Google-Suche dabei, Ihre Seite und alle darin enthaltenen Inhalte besser zu verstehen. Indem Sie gültige strukturierte Datenausschnitte bereitstellen, ist Ihre Website für Rich-Suchergebnisse qualifiziert.

Um einen strukturierten Datenausschnitt zu erstellen, verwenden wir ein JSON-LD-Array, das im <head> Ihrer Website gespeichert wird. Und anders als beim herkömmlichen CMS, bei dem der gesamte Prozess mit einem Plugin (z. B. Yoast SEO) automatisiert wird, müssen Sie bei einem Headless-CMS:

Wählen Sie die richtigen strukturierten Datentypen für Ihre Seiten
Fügen Sie benutzerdefinierten JavaScript-Code hinzu, der dabei hilft, entweder alle erforderlichen strukturierten Daten zu generieren oder den serverseitig gerenderten strukturierten Daten weitere Informationen hinzuzufügen

 fetch('https://api.example.com/recipes/123')
.then(Antwort => Antwort.text())
.then(strukturierterDatentext => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = strukturierterDatenText;
  document.head.appendChild (Skript);
});

Testen Sie Ihre Implementierung mit dem Test für Rich-Suchergebnisse

Probleme mit der Verfolgung von Seitenaufrufen

Wenn Sie jemals versucht haben, Google Analytics auf einer Headless-Website zu implementieren, ist Ihnen wahrscheinlich aufgefallen, dass nur der erste Seitenaufruf Ihrer Website erfasst wird. Dies liegt vor allem daran, dass das Frontend eines Headless-CMS seiner Natur nach eine Single Page Application ist, was bedeutet, dass die Seite nur einmal geladen wird und nur ein pageView-Event pro Sitzung ausgelöst wird. Um dieses Problem zu umgehen, implementieren wir die Verlaufs-API, um virtuelle Seitenaufrufe zu ermöglichen, die dann mithilfe des Verlaufsänderungstriggers in Google Tag Manager nachverfolgt werden können.

Verlaufsänderungs-Triggerspuren für Änderungen im URL-Fragment oder im Verlaufszustandsobjekt. Wenn zwischen diesen beiden eine Änderung auftritt, haben wir die folgenden Variablen:

Verlauf altes URL-Fragment: Was das URL-Fragment früher war.
Verlauf neues URL-Fragment: Was das URL-Fragment jetzt ist.
Alter Verlaufsstatus : Das alte Verlaufsstatusobjekt, das von den Aufrufen der Website an pushState gesteuert wird.
Neuer Verlaufsstatus : Das neue Verlaufsstatusobjekt, das von den Aufrufen der Website an pushState gesteuert wird.

Um einen Auslöser für Verlaufsänderungen zu erstellen, gehen Sie einfach zu Google Tag Manager und:

Wählen Sie Auslöser > Neu
Wählen Sie Triggerkonfiguration > Verlaufsänderung

Danach müssen wir ein neues Google Analytics-Konfigurations -Tag erstellen, das auf den soeben erstellten Verlaufsänderungs-Trigger ausgelöst wird, etwa so:

Und das ist es. Sie sollten jetzt Seitenaufrufe auf Ihrer Headless-Website verfolgen können.

SEO-Audit-Probleme

Da Ihre Headless-Website hauptsächlich aus clientseitigem JavaScript besteht, könnte die SEO-Prüfung ein Problem darstellen, da die Crawler, die in den meisten kostenlosen SEO-Prüfungstools verwendet werden, nicht über die Fähigkeit verfügen, JavaScript zu rendern.

JavaScript-Rendering ist in den meisten SEO-Audit-Tools keine kostenlose Funktion — *JavaScript-Rendering ist* *in den meisten SEO-Audit-Tools* ***keine*** kostenlose Funktion

Dieses Problem kann erwartungsgemäß gelöst werden, indem Sie mehr bezahlen, da Sie auf den nächsten Premium-Plan upgraden können, um die Unterstützung für diese Funktion zu aktivieren. Sie sollten auch beachten, dass das JavaScript-Rendering in den meisten SEO-Audit-Tools nicht standardmäßig aktiviert ist, was bedeutet, dass Sie es manuell aktivieren müssen, um Ihre Headless-Website zu crawlen.

*JavaScript-Rendering in ScreamingFrog aktivieren*

Code-Splitting

Da ein typisches Headless-CMS stark auf JavaScript basiert, kann die Menge an JavaScript-Code, die auf Ihrer Website verwendet wird – insbesondere wenn Sie eine große Anzahl von Bibliotheken von Drittanbietern verwenden – an den Punkt kommen, an dem Sie überwältigt werden.

JavaScript-Startzeit zu hoch — Quelle: JavaScript-Payloads mit Code-Splitting reduzieren

Und wie wir alle wissen, wirkt sich die Seitengeschwindigkeit auf SEO aus, daher können wir unseren JavaScript-Code nicht so belassen, weshalb Code-Splitting vorgenommen wird, um dieses Problem zu umgehen. Mit Code-Splitting können Sie Ihren JS-Code in kleinere Bundles aufteilen, die dann zur Laufzeit dynamisch geladen werden können. Diese Funktion wird derzeit von Bundlern wie Webpack und Browserify über Factor-Bundle unterstützt.

 import React, { Suspense, faul } from 'react';
importiere { BrowserRouter als Router, Route, Switch } aus 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense-Fallback={<div>Laden...</div>}>
      <Schalter>
        <Routengenauer Pfad="/" component={Home}/>
        <Routenpfad="/about"-Komponente={About}/>
      </Schalter>
    </Spannung>
  </Router>
);

Dynamisches Rendern

Da die Mehrheit der Headless-Websites ihrer Natur nach JavaScript sind, stehen sie vor der gleichen großen SEO-Herausforderung, die das JavaScript-Rendering ist.

[…], es ist schwierig, JavaScript zu verarbeiten, und nicht alle Suchmaschinen-Crawler können es erfolgreich oder sofort verarbeiten.
Implementieren von dynamischem Rendering, Google

Crawler können JavaScript nicht effektiv rendern, weshalb Google selbst inzwischen Dynamic Rendering als Workaround-Lösung vorschlägt . Dynamisches Rendering wurde in Google I/O '18 eingeführt und ist eine ideale Lösung für JavaScript-basierte Websites, die eine einfache Möglichkeit suchen, die SEO-Herausforderungen zu lösen und gleichzeitig alle Vorteile des clientseitigen Renderings beizubehalten. Mit dieser neuen Rendering-Methode sendet Ihr Webserver normalen, clientseitig gerenderten Inhalt an die Benutzer, während Suchmaschinen-Crawler vollständig servergerenderten, statischen HTML-Inhalt erhalten.

Wie dynamisches Rendern funktioniert — *So funktioniert dynamisches Rendern (vereinfacht)*

All dies bedeutet, dass Sie mit dynamischem Rendering das Beste aus beiden Welten erhalten – die einfache Crawlbarkeit des serverseitigen Renderings und das schnelle nachfolgende Rendering des clientseitigen Renderings.

Um dynamisches Rendering zu implementieren, müssen wir uns auf dynamische Renderer wie Rendertron oder Puppeteer verlassen, um den gesamten Prozess zu verkürzen. Diese Renderings wandeln den Inhalt Ihrer Website in statisches HTML um, das für die Crawler verständlich ist.

Befolgen Sie nach Abschluss der Installation und Konfiguration Ihres dynamischen Renderers die zusätzlichen Schritte im offiziellen Dokument von Google, um das Verhalten von Benutzeragenten zu konfigurieren.

Fazit

SEO für ein Headless-CMS ist nicht der einfachste Weg, und es erfordert ein wenig Arbeit von Ihren Entwicklern, um alles richtig zu machen. Aber sobald Sie den Dreh raus haben, kann ein Headless CMS in Bezug auf SEO genauso effektiv sein wie ein traditionelles CMS. Darüber hinaus erhalten Sie viel mehr Freiheit und Flexibilität, um Inhalte nach Ihren Wünschen zu erstellen.