{"id":69201,"date":"2024-02-26T09:19:34","date_gmt":"2024-02-26T08:19:34","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=69201&preview=true&preview_id=69201"},"modified":"2024-02-29T08:35:58","modified_gmt":"2024-02-29T07:35:58","slug":"headless-wordpress-seo","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-seo\/","title":{"rendered":"Erweiterte SEO-Strategien f\u00fcr Headless-WordPress-Websites"},"content":{"rendered":"

Die Entscheidung f\u00fcr eine Headless-WordPress-Website<\/a> anstelle einer traditionellen Website-Architektur ver\u00e4ndert das SEO-Spiel ganz erheblich. Dieser Ansatz trennt das Frontend der Website von ihrem Backend, was die Flexibilit\u00e4t und Geschwindigkeit erh\u00f6ht. Aber es bringt auch neue SEO-Herausforderungen mit sich.<\/p>\n

Die Sichtbarkeit deiner Website und die Art und Weise, wie du \u00fcber Suchmaschinen gefunden wirst, h\u00e4ngen von deiner SEO-Taktik ab. Deshalb stellen wir dir heute einige fortschrittliche SEO-Strategien vor, die speziell f\u00fcr Headless-WordPress-Konfigurationen entwickelt wurden.<\/p>\n

Wir werden dar\u00fcber sprechen, wie du sicherstellst, dass Suchmaschinen deine Seite richtig crawlen k\u00f6nnen, wie du Meta-Tags optimierst und vieles mehr. Egal, ob du die Website programmierst oder Marketingstrategien entwickelst, du bekommst praktische Tipps, um deine SEO-F\u00e4higkeiten zu verbessern.<\/p>\n

Los geht’s.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Wie du Headless-WordPress-Websites crawlbar machst<\/h2>\n

Headless WordPressWebsites crawlbar zu machen, stellt dich vor einige einzigartige Herausforderungen, die bei herk\u00f6mmlichen Websites nicht auftreten. Die gr\u00f6\u00dfte H\u00fcrde besteht darin, dass die Inhalte von Headless-Websites clientseitig mit JavaScript<\/a> gerendert werden, was in der Vergangenheit f\u00fcr Suchmaschinen-Bots Schwierigkeiten beim Crawlen und Indexieren mit sich brachte.<\/p>\n

Mit modernen Techniken wie dem dynamischen und dem serverseitigen Rendering ist es jedoch viel einfacher geworden, diese Probleme zu l\u00f6sen.<\/p>\n

Dynamisches Rendering<\/h3>\n

Dynamisches Rendering<\/a> dient als Br\u00fccke zwischen JavaScript-lastigen Inhalten und den Crawlern von Suchmaschinen. Dabei wird den Suchmaschinen ein statischer HTML-Schnappschuss<\/a> des Inhalts deiner Website pr\u00e4sentiert, w\u00e4hrend die Nutzer\/innen weiterhin die dynamische, interaktive Version sehen.<\/p>\n

Dadurch wird sichergestellt, dass die Crawler den Inhalt deiner Website indexieren k\u00f6nnen, ohne JavaScript<\/a> ausf\u00fchren zu m\u00fcssen, was die Sichtbarkeit und die SEO-Leistung sofort verbessert.<\/p>\n

Um dynamisches Rendering in einer Headless-WordPress-Umgebung zu implementieren, verwendest du normalerweise eine L\u00f6sung wie prerender.io<\/a> oder entwickelst einen eigenen serverseitigen Rendering-Mechanismus, m\u00f6glicherweise mit Node.js<\/a>.<\/p>\n

\"Du
Prerender<\/figcaption><\/figure>\n

Hier ist eine konzeptionelle Aufschl\u00fcsselung:<\/p>\n

1. Erkennung von User Agents<\/h4>\n

Du musst zwischen Anfragen von Nutzern (Browsern) und solchen von Crawlern (wie Googlebot) unterscheiden. Das kannst du tun, indem du den User Agent in den HTTP-Headern eingehender Anfragen \u00fcberpr\u00fcfst.<\/p>\n

2. Statische Inhalte f\u00fcr Bots bereitstellen<\/h4>\n

Wenn ein Crawler erkannt wird, leitet dein Server die Anfrage zu einer statischen HTML-Version der angeforderten Seite um, die bereits gerendert wurde, anstatt die \u00fcblichen JavaScript-lastigen Inhalte zu liefern. Dazu kannst du entweder einen Prerender-Dienst nutzen oder auf deinem Server ein Pre-Rendering-Setup einrichten, das statische HTML-Seiten deines Inhalts im laufenden Betrieb oder aus einem Cache generiert.<\/p>\n

3. So richtest du es mit WordPress ein<\/h4>\n

Dienste wie prerender.io bieten eine Middleware, die in deinen Server integriert werden kann. Diese Middleware f\u00e4ngt eingehende Anfragen ab, pr\u00fcft, ob sie von Crawlern stammen, und wenn ja, liefert sie eine vorgerenderte Seite aus dem Cache von prerender.io oder l\u00f6st eine neue Seite aus, wenn sie nicht im Cache liegt.<\/p>\n

Wenn du eine benutzerdefinierte L\u00f6sung erstellst, w\u00fcrdest du normalerweise Puppeteer<\/a> in einer Node.js-Umgebung verwenden, um Seiten vorzurechnen. Wenn deine WordPress-API Inhalte an deinen Node.js-Server liefert, pr\u00fcft sie den User Agent. Wenn es sich um einen Crawler handelt, rendert Puppeteer die Seite, speichert das statische HTML und liefert diese Version aus.<\/p>\n

Dieser Prozess kann optimiert werden, indem die statischen Seiten zwischengespeichert werden, damit sie nicht bei jeder Crawler-Anfrage gerendert werden.<\/p>\n

Server-seitiges Rendering<\/h3>\n

Beim serverseitigen Rendering<\/a> hingegen wird der Inhalt der Seite auf dem Server gerendert, bevor er den Client erreicht. Das hei\u00dft, wenn ein Suchmaschinen-Bot eine Seite anfordert, erh\u00e4lt er eine vollst\u00e4ndig gerenderte HTML-Seite, so dass sie sofort indexierbar ist.<\/p>\n

Du kannst das serverseitige Rendering mit verschiedenen JavaScript-Frameworks und -Bibliotheken wie React<\/a> und Node.js<\/a> umsetzen, um Inhalte direkt auf dem Server zu rendern. Dieser Ansatz tr\u00e4gt nicht nur dazu bei, Inhalte f\u00fcr Suchmaschinen zug\u00e4nglicher zu machen, sondern verbessert auch das allgemeine Nutzererlebnis, indem er die Ladezeiten der Seite verk\u00fcrzt.<\/p>\n

F\u00fcr das serverseitige Rendering k\u00f6nnen Frameworks wie Next.js<\/a> in Kombination mit der REST-API von WordPress<\/a> oder GraphQL<\/a> den Prozess rationalisieren.<\/p>\n

Ein typisches Beispiel ist das Abrufen von Daten mit GraphQL und das Rendering von Seiten auf dem Server mit Next.js, so dass die Inhalte vor der Auslieferung aufgef\u00fcllt werden.<\/p>\n

Konfigurieren von kanonischen URLs<\/h2>\n

Die Konfiguration kanonischer URLs f\u00fcr eine Headless-WordPress-Website ist eine weitere M\u00f6glichkeit, die SEO-Integrit\u00e4t zu wahren, insbesondere wenn die Inhalte \u00fcber ein entkoppeltes Frontend wie Gatsby<\/a> oder Next.js bereitgestellt werden.<\/p>\n

Kanonische URLs<\/a> helfen dabei, Probleme mit doppelten Inhalten zu vermeiden, indem sie den Suchmaschinen signalisieren, welche Version einer Inhaltsseite die prim\u00e4re oder „kanonische“ Version ist. Dies ist in einer Headless-Umgebung notwendig, in der Inhalte \u00fcber mehrere Routen oder Endpunkte zug\u00e4nglich sein k\u00f6nnen.<\/p>\n

Warum kanonische URLs wichtig sind<\/h3>\n

In einer Headless-Umgebung von WordPress erh\u00f6ht sich das Risiko der Vervielf\u00e4ltigung von Inhalten, da das Frontend vom WordPress-Backend getrennt ist. Kanonische URLs mindern dieses Risiko, indem sie die Suchmaschinen dazu bringen, die bevorzugte URL<\/a> zu indexieren. Dadurch wird sichergestellt, dass der SEO-Wert auf der kanonischen Seite konsolidiert wird und nicht durch mehrere Versionen desselben Inhalts verw\u00e4ssert wird.<\/p>\n

Wenn du dir die Zeit nimmst, kanonische URLs einzurichten, wird auch klar, welche Version des Inhalts in den Suchergebnissen angezeigt werden sollte.<\/p>\n

Wie man kanonische URLs einrichtet<\/h3>\n

Die Implementierung kanonischer URLs in einer Headless WordPress-Umgebung kann mit Hilfe des Yoast SEO-Plugins und WPGraphQL, das die Daten von Yoast SEO mit deinem Headless-Setup verbindet, effizient verwaltet werden.<\/p>\n

Hier ist ein \u00dcberblick \u00fcber einen Prozess, den der Webentwickler Andrew Kepson<\/a> sehr detailliert beschreibt und der einige beliebte Plugins beinhaltet:<\/p>\n