So migrieren Sie eine WordPress-Site zu Gatsby, ohne die SEO-Qualität zu verlieren

Die Migration einer WordPress-Site zu einem anderen Anbieter mag wie eine Handvoll erscheinen, aber immer mehr Blogs entgleisen dem, was früher das beliebteste Content-Management-System im Internet war. Mit dem Wachstum neuer Technologien wachsen auch die Optionen, und in den letzten Jahren hat sich WordPress einem fairen Anteil an Konkurrenten gestellt, von denen der vielversprechendste Gatsby ist.

Obwohl die Funktionsweise relativ ähnlich ist, gibt es verschiedene Gründe, warum viele Websitebesitzer Gatsby gegenüber WordPress bevorzugen.

Von Funktionalität und Service bis hin zu Leistungsqualität und verfügbaren Vorteilen, hier ist ein genauerer Blick auf WordPress und Gatsby, gefolgt von einer detaillierten Anleitung, wie man eine WordPress-basierte Website sicher auf das Gatsby-Framework migriert, ohne dabei an SEO-Qualität zu verlieren .

WordPress definieren

Seit Jahrzehnten ist WordPress das Content-Management-System Nummer eins. Als Open-Source-Modell lieferte WordPress im Laufe der Jahre weiterhin qualitativ hochwertigen Service für Tausende von Blogs und Websites und bot gleichzeitig eine Fülle von kostenlosen Content- und SEO-Management-Tools wie Plugins und Erweiterungen.

Statistiken zeigen, dass rund 29 % der Websitebesitzer immer noch WordPress verwenden, was die Plattform zu einer offensichtlichen ersten Wahl macht. Die Gründe, warum WordPress von vielen Benutzern bevorzugt wird, sind das vereinfachte Hochladen von Inhalten und die Präzision bei der Änderung aller Aspekte des Inhalts und seiner SEO. WordPress verfügt über eine großzügige Galerie von Plugins, sowohl kostenlos als auch kostenpflichtig, aber die meisten Benutzer finden letzteres eine viel funktionalere Option.

Allerdings sind auch die Nachteile der Verwendung von WordPress offensichtlich. Zum einen ist das System PHP-basiert und kommt mit umfangreichem Legacy-Code, was den Optimierungsprozess erschwert. Aufgrund seiner verschiedenen Anwendungsfälle macht WordPress eine einfach zu konfigurierende Website, aber keine schnelle, und wie Sie wissen, je langsamer eine Website ist, desto weniger Verkehr treibt sie. Nicht nur das, sondern das wichtigste Ranking-Kriterium von Google, abgesehen von qualitativ hochwertigen Inhalten, ist die Ladegeschwindigkeit einer Website.

Einige der anderen Gründe, warum Benutzer WordPress meiden, sind:

Problematischer Content-Manager

WordPress brauchte einige Zeit, um seinen Inhaltseditor zu überarbeiten, und trotzdem konnten sie sich nicht auszeichnen. Der neue Inhaltsmanager (Gutenberg) trennt Inhalte nach Blöcken, was viele Benutzer als schwierig empfanden, da die Benutzererfahrung alles andere als ideal war. Nun, ich weiß nicht – ich finde es wirklich gut – wann man sich daran gewöhnt.

Die meisten Benutzer installieren das klassische Editor-Plugin, um bei dem zu bleiben, was sie wissen.

PHP schreiben

Um eine WordPress-Site zu ändern, müssen Änderungen in PHP geschrieben werden. Während es in WordPress benutzerdefinierte Modifikationen gibt, empfinden viele Benutzer diese als zu anspruchsvoll und zeitaufwändig. Und da PHP nicht die beliebteste Sprache ist, abgesehen von WordPress-Sites, fühlt sich der Umgang damit irgendwie überflüssig an.

Einige Benutzer bevorzugen die Verwendung von Seitenerstellern, mit denen das Design einer Website ohne Codeverwendung einfach angepasst und geändert werden kann. Aber dennoch können Sie mit WordPress nicht ALLE Funktionen der Welt haben oder eine Traumseite mit so vielen Funktionen erstellen, wie Sie möchten. Eine komplexere Website wird es wahrscheinlich schwer haben, WordPress als Frontend zu verwenden.

Definition von GatsbyJS

Viele halten WordPress für eine veraltete Technologie, aber als die Konkurrenz aufstieg, wurde GatsbyJS zu einer der am besten geeigneten Alternativen. Die meisten Website-Ersteller und Benutzer greifen auf Websites zurück, die Sprachen wie JavaScript und React.js verwenden, und genau das bringt Gatsby auf den Tisch. Im Gegensatz zur Open-Source-Natur von WordPress ist GatsbyJS ein statischer Site-Generator, der hauptsächlich in React integriert ist.

Wenn Benutzer eine Gatsby-basierte Website besuchen, rendert die Plattform keine Seiten. Stattdessen generiert GatsbyJS Seiten bei der Kompilierung und verschiebt sie dann alle online. Das System erfordert keine Server oder deren Wartung und ist mit statischen Dateien wie JS, HTML und CSS kompatibel. Schließlich verwendet Gatsby überhaupt kein PHP, was für ehemalige WordPress-Benutzer eine große Erleichterung darstellt.

Die Plattform ist nicht ohne Nachteile, von denen einer die Unfähigkeit ist, das Ergebnis von Seitenänderungen, die Sie vornehmen, direkt zu sehen, da bei Gatsby alles zuerst kompiliert werden muss. Um bei diesem Problem zu helfen, verlassen sich viele jedoch auf Gitlab CI/CD-Pipelines, um zuerst eine Website zu kompilieren und sie als nächstes online zu bringen. Gatsby ermöglicht es Benutzern, Blog-Post-Vorlagen zu erstellen und alle Inhalte in Markdown zu schreiben.

Hier sind weitere wichtige Vorteile der Verwendung von Gatsby:

• Null Nachladen

Als Single-Page-App oder SPA benötigt Gatsby keine angeklickte Site-Seite, um eine brandneue Ressource zu laden.

• Bildverfeinerung

Alle auf der Plattform verwendeten Bilder werden automatisch von externen Spuren wie Metadaten gefiltert und sofort in der Größe angepasst, komprimiert, optimiert und verzögert geladen.

• Ressourcen vorab abrufen

Gatsby hat die Fähigkeit, alle auf einer bestimmten Seite verfügbaren Links zu erkennen und die Daten in den Site-Cache zu laden.

• Code-Alternativen

Mit Gatsby wird der verwendete Code vereinfacht, gebündelt, minimiert und leider ausgeliefert.

Migration von WordPress-Daten zu Gatsby Framework

Wenn Sie erwägen, Ihren gesamten Inhalt von WordPress zu Gatsby zu verschieben, ist der wichtigste Aspekt, den Sie berücksichtigen sollten, Ihren bestehenden SEO-Wert nicht zu verlieren.

Glücklicherweise macht Gatsby den Empfang von Inhalten anderer Plattformen ziemlich einfach.

Das erste, was Sie zum Übertragen Ihrer Inhalte benötigen, ist ein Quell-Plugin. Ein Quell-Plugin hilft Gatsby, seinen Graphql-Speicher nahtlos und automatisch zu füllen, während es Ihnen Zugriff auf alle Eingabeinformationen gewährt. Das Quell-Plugin kann an Ihre Bedürfnisse angepasst werden und Ihre Plattform sogar Open-Source statt statisch machen.

Graphql stellt eine raffinierte Lösung zum Erfassen von API-Daten dar und unterscheidet sich erheblich von seinem Vorgänger, der REST-API. Graphql ist ein ergänzendes Asset zur Gatsby-Plattform, das als Teil des Systems selbst verwendet werden soll. Das vollständige Umgehen von Graphql ist möglich, wird jedoch als Option nicht berücksichtigt, da Sie dadurch keinen Zugriff auf verschiedene wichtige Funktionen erhalten.

Der nächste Schritt besteht darin, den Schreibprozess zu erleichtern und alles nach Markdown zu verschieben. Markdown- oder .md-Dateien ermöglichen es Benutzern, einfachen und einfachen Text zu schreiben, der dann einfacher in HTML konvertiert werden kann. Darüber hinaus liefert Markdown alle .md-Dateien zusammen mit dem Github-Code der Website und macht den Prozess versionierbar. Einige Benutzer könnten Gatsby Advanced Started (GAS) ebenfalls nützlich finden, da dieses Projekt die Erstellung von SEO-orientierten Gatsby-Sites ermöglicht.

So übertragen Sie WordPress-Beiträge in Markdown

Zuallererst müssen Sie alle funktionsfähigen WordPress-Artikel exportieren. Sobald dies erledigt ist, müssen Sie diese in Klartext oder Markdown konvertieren. Dafür gibt es ein Tool namens WordPress Export to Markdown. Mit diesem Tool können Sie alle WordPress-Inhalte, ihre Tags, Kategorien und wesentlichen SEO-Aspekte extrahieren. Das Tool unternimmt einen zusätzlichen Schritt, um nicht nur Artikelinhalte, sondern auch Postbilder zu konvertieren.

Nach dem Erhalt sind die Dateien bereit, im Projektinhaltsordner zu landen. Wenn Sie Gatsby das nächste Mal ausführen, werden Sie nur eine Ahnung von Artikeln bemerken, aber sobald Sie die Site erstellt haben, werden alle Inhalte als erworben dargestellt.

So erstellen Sie Beiträge und Seiten mit Gatsby

Die Leistung von Gatsby ähnelt der von PHP, das in WordPress verwendet wird. Da Gatsby React jedoch vollständig verwendet, platziert es die Sprachverbindungen unter den Ordnern der Seiten und wandelt sie so automatisch in Site-Seiten um. Diese Funktion ist ideal für eindimensionale Seiteninhalte wie „Index“ und „Über mich“.

In Bezug auf dynamische Inhalte wie Kategorien oder Blogposts können sich Benutzer gerne auf Gatsbys fertige Vorlagen zum Erstellen bestimmter Seiten verlassen. Diejenigen, die GAS verwenden, haben bereits die Beitragsvorlagen mit ihren Tags und Kategorien zur Hand. Schätzen Sie Ihre Inhalte gerne noch einmal ein, gestalten Sie sie dynamischer und damit kompatibler mit Gatsby. Alle Änderungen, die Sie vornehmen, werden sofort in Ihrem Browser angezeigt, was Gatsby für eine schnelle Iteration recht freundlich macht.

Denken Sie daran, dass die Essenz von Gatsby in seiner Datei gatsby-node.js liegt. Hier können Sie sowohl das Vorlagen- als auch das Seitenverhalten sowie den Slug und die zu verwendenden Elemente und zusätzlichen Daten abschätzen. Die Datei ist auch nachteilig, da sie Ihnen hilft, die Knoten zu füllen, oder mit anderen Worten, die Daten werden in Ihrem GraphQL gespeichert.

So stylen Sie eine Gatsby-Site

In Bezug auf das Schreiben von Website-Stilen bietet Gatsby viele praktikable Optionen, wie z. B. .css-Dateien, Sass, CSS-in-JS und mehr. Hier sind ein paar Tipps zur Gestaltung Ihrer Gatsby-Website:

• Erkunden Sie verfügbare Designressourcen wie Ant, MaterialUI und Materialise.
• Seien Sie einsatzbereit! Statische Websites wie Gatsby machen die Bereitstellung von Websites supereinfach und erschwinglich. Sie können dazu gerne eine Reihe kostenloser und schneller Tools wie Netlify, AWS Amplify, Now und Surge verwenden.
• Optimieren, optimieren, optimieren! Die Verwendung von Gatsby bedeutet, eine schnellere Website zu haben, und Sie können die Plattform jederzeit verwenden, um sie noch schneller, SEO-gestärkt und zugänglich zu machen. Eines der besten Optimierungstools ist Lighthouse, da es alles automatisch erledigt: Audits, Metriken, Webpraktiken, detaillierte Daten und sogar hilfreiche Links. Sie können Ihr Lighthouse-Audit über Google, Firefox oder die Lighthouse-CLI-Option ausführen.

Wie Sie dafür sorgen, dass Ihre Gatsby-Website schnell funktioniert

Sobald alle Inhalte migriert wurden, können Sie Ihre Gatsby-Site schneller machen, indem Sie:

• Verarbeitung aller Gatsby-Daten durch GraphQL.
• Vermeiden Sie die Verwendung umfangreicher Bibliotheken wie moment.js, da diese die Website verlangsamen können.
• Vertrauen Sie darauf, dass Ihr Server Daten ändert, diese Daten an Ihre Seiten sendet und andere schwere Aufgaben erledigt.
• Verwalten Sie weniger Daten mit GraphQL. Auf diese Weise greifen Sie nur auf die Daten zu, die Sie benötigen, und vermeiden, dass versehentlich übermäßige Datenmengen angehäuft werden.
• Machen Sie es zugänglich. Ihre Benutzer werden nicht wie Sie mit Ihrer Website interagieren. Stellen Sie daher sicher, dass die Website alle Kategorien von Benutzern abdeckt, indem Sie eine Qualitätsa11y integrieren, die auch zu verbessertem HTML und optimierten SEO-Ergebnissen führen kann. Um alle Probleme zu beheben, können Sie entsprechende Tools wie Axe verwenden.

Wie man qualitativ hochwertiges SEO aufrechterhält

Wenn Sie die Grundlagen verstehen, wie Google Websites bewertet, werden Sie in der Lage sein, Ihre Gatsby-Website ins Rollen zu bringen. Beachten Sie dazu folgende Aspekte:

• Herausragende und relevante Inhalte
• Bessere Zugänglichkeit für Benutzer
• Eine schneller laufende Website
• Erstellen von Links oder Präsentieren Ihrer Website auf anderen Domains

Eine vereinfachte Anleitung zur Migration von WordPress zu Gatsby

Um den Vorgang zusammenzufassen und zu vereinfachen, finden Sie hier eine Schritt-für-Schritt-Anleitung zur vollständigen Migration Ihrer Website von WordPress zu GatsbyJS.

• Laden Sie das XML von WordPress herunter, zu finden unter Tools > Export.
• Verwenden Sie ein Tool, um das XML in Markdown oder reinen Text zu konvertieren, was manchmal mehr als die Hälfte der Konvertierung von Blog-Posts erledigt.
• Laden Sie alle Bilder und Serverinhalte herunter. Ziehen Sie die Bilder aus den WordPress-Uploads in einen Bildordner.
• Korrigieren Sie defekte Listen und rücken Sie Codeblöcke ein, um sie an den Gatsby-Stil anzupassen.
• Speichern Sie Miniaturansichten und verschieben Sie sie zur Wiederverwendung in einen entsprechenden Ordner.
• Stellen Sie eine Verbindung zu Netlify her, um die automatische Bereitstellung einzurichten. Wenn Sie in JavaScript geschrieben sind, migrieren Sie es zu Typoskript, um es zu aktivieren.
• Ändern Sie die Gestaltungsoptionen, damit sie CSS-in-JS verwenden können. Aktualisieren Sie den Stil und das Layout.
• Führen Sie Aktualisierungen durch, damit der Blog-Inhalt in die Kategorie „/blog/“ fällt.
• Verwenden Sie die Weiterleitung für alle URLs.
• Verwenden Sie die React Context API als Wrapper, um einen Nachtmodus zu erstellen.
• Migrieren Sie WordPress-Kommentare mit einem manuellen oder automatisierten Importprogramm zu Gatsby.

Sobald alle diese Schritte abgedeckt sind, müssen Sie nur noch die Seiten erstellen, GraphQL beherrschen, die richtigen Abfragen durchführen und bei Bedarf kleine Unordnung beseitigen.

Wie lange dauert der Migrationsprozess?

Die Migration aller Inhalte von WordPress zu Gatsby hängt von der Inhaltsmenge ab, die Ihnen zur Verfügung steht, sowie von Ihren persönlichen Bemühungen. Idealerweise sollten Sie alle Inhalte in maximal zwei Wochen übertragen können. Denken Sie jedoch daran, dass Sie, wenn Sie neu bei React sind, Zeit brauchen werden, um sich daran zu gewöhnen.

Sobald Sie den Dreh raus haben, werden Sie die Vorteile von Gatsby genießen, wie z. B. weniger HTML-Chaos in Ihrer MySQL-Datenbank und Dateien, die einfach zugänglich sind, verwaltet, bearbeitet, gelesen, gesichert und mit anderen geteilt werden können.

Eine letzte Sache…

Während die Verwaltung von Gatsby eine Reihe von Fähigkeiten und einen Hintergrund in CSS, HTML, JavaScript, Node.js, React, ES6 und GraphQL erfordert, um nur einige zu nennen, beginnen Sie langsam und lernen Sie jede Technologie, wie sie kommt.

Auch wenn der Prozess eine Herausforderung darstellt, können Sie dem Gatsby Getting Started Tutorial folgen, um eine noch detailliertere Anleitung zum Migrationsprozess zu erhalten.

Lassen Sie uns codieren, sollen wir?