So migrieren Sie von Wordpress zu Webflow [+ Checkliste]

Dies ist die erste Version unseres Artikels zur Migration von Webflow zu WordPress. Da das Thema sehr umfangreich ist, ist er noch lange nicht perfekt. Wir werden ihn im Laufe der Zeit aktualisieren, um dir die beste Schritt-für-Schritt-Anleitung zu bieten, die du finden kannst. Wenn du Unstimmigkeiten oder unklare Erklärungen findest, kannst du uns gerne kontaktieren, und wir werden sie umgehend korrigieren.

Die Migration von WordPress zu Webflow ist weniger eine automatisierte „Migration“ als vielmehr eine strukturierte Inhaltsverschiebung plus einen vollständigen Neuaufbau der Website in Webflow. Sie prüfen Ihre bestehende WordPress-Website, exportieren Inhalte über ein Tool wie WP All Export, bauen das Design im Webflow Designer neu auf, importieren die Inhalte in Webflow CMS Collections und richten 301-Weiterleitungen ein, um Ihr SEO zu erhalten. Richtig durchgeführt, kann der Umzug laut dokumentierten Fallstudien den organischen Traffic um 30 % oder mehr steigern, während der Plugin- und Sicherheitsaufwand entfällt, der die meisten WordPress-Websites ausbremst. Dieser Leitfaden zur WordPress-zu-Webflow-Migration erläutert genau, wie wir bei magier Migrationen angehen, einschließlich der Fehler, die wir gelernt haben zu vermeiden.

In diesem Leitfaden behandeln wir:

• Ob die Migration für Ihre Website sinnvoll ist (und wann Sie bei WordPress bleiben sollten)
• Wie Sie die Migration planen, einschließlich Content-Audits und realistischer Zeitplanerwartungen
• Wie Sie Inhalte exportieren, zuordnen und in Webflow CMS Collections importieren
• Die SEO-Schritte, die Ihre Rankings erhalten, einschließlich 301-Weiterleitungen, Metadaten und Sitemap-Einreichung
• Welche WordPress-Plugins keine Webflow-Äquivalente haben und die jeweiligen Workarounds
• Die fünf größten Fehler, die Migrationen zum Scheitern bringen, und wie Sie diese vermeiden können
• Eine Checkliste für den Launch-Tag und was in den Wochen danach zu überwachen ist

Wenn Sie lieber ein Video anstelle dieses Artikels ansehen möchten, können Sie dieses von uns erstellte Video ansehen:

TL;DR: WordPress-zu-Webflow-Migration in 60 Sekunden

• Eine WordPress-zu-Webflow-Migration ist teils Inhaltsverschiebung, teils vollständiger Website-Neuaufbau. Webflow verfügt über keinen automatischen Importer für Design, Themes oder Plugins.
• Beginnen Sie mit einem vollständigen Audit Ihrer WordPress-Website: Seiten, Beiträge, benutzerdefinierte Beitragstypen, Plugins, Formulare und URL-Struktur.
• Kategorisieren Sie jede URL vor der Migration in Performance, Schwach oder Tot. Migrieren Sie keinen Ballast.
• Exportieren Sie WordPress-Inhalte als XML (über WP All Export), konvertieren Sie sie in CSV und ordnen Sie Felder Webflow CMS Collections zu.
• Webflow CMS verarbeitet bis zu 10.000 Elemente pro Collection in Business- und Enterprise-Plänen.
• Richten Sie 301-Weiterleitungen für jede URL ein, die sich ändert. Dies ist der wirkungsvollste SEO-Schritt.
• Rechnen Sie mit 1 bis 3 Tagen für eine kleine Broschüren-Website, 2 bis 4 Wochen für eine Marketing-Website mit über 100 Beiträgen und 4 bis 8+ Wochen für große Content-Websites.
• Dokumentierte Migrationsstudien zeigen bei gut durchgeführter Migration eine Steigerung der Seitenaufrufe um bis zu 34 % und eine Reduzierung der Absprungrate um 20 %.
• Die meisten Ranking-Verluste sind auf nicht eingerichtete Weiterleitungen, fehlende Metadaten oder Designänderungen zurückzuführen, die die Core Web Vitals beeinträchtigen.

Die Grundlagen

Der Vergleich, den wir gleich anstellen werden, ist eine David-gegen-Goliath-Geschichte. WordPress betreibt derzeit 43 % aller Websites weltweit, während Webflow bei etwa 0,7 % liegt. Die Akzeptanzlücke ist riesig, aber die Entwicklung ist entscheidend: Laut Cloudflare Radar ist Webflow mittlerweile das zweitgrößte CMS weltweit, nur hinter WordPress.

Das bedeutet, Sie werden wesentlich mehr Inhalte finden, die jeden Aspekt der WordPress-Software abdecken, und mindestens zehnmal mehr Personen, die Plugins oder Templates für WordPress entwickelt haben.

Um es ganz deutlich zu sagen, Man kann auf beiden Plattformen großartige Websites erstellen.

Dennoch ist Webflow auf dem Vormarsch, und jede Website, die wir seit 2020 erstellt haben, wurde mit Webflow realisiert.

Über WordPress

Die erste Version von WordPress wurde 2003 von Matt Mullenweg und Mike Little veröffentlicht. Es ist ein Open-Source-Content-Management-System (CMS) und hat die Art und Weise, wie Websites erstellt und verwaltet werden, zweifellos revolutioniert.

Anfangs begann WordPress als einfache Blogging-Plattform, doch im Laufe der Zeit wurden immer mehr Funktionen hinzugefügt, die es zum beliebtesten CMS der Welt machten. WordPress ist bekannt für seine Anpassbarkeit und wird gleichermaßen von kleinen Blogs bis hin zu großen Unternehmen genutzt.

Der Kern von WordPress sind die Funktionen, die es Ihnen ermöglichen, Inhalte zu erstellen und zu veröffentlichen. In den letzten 20 Jahren haben Hunderttausende von Entwicklern und Designern Plugins und Themes für WordPress erstellt, die einfach installiert werden können.

WordPress kann auf eigenen Servern installiert oder über einen Managed-Hosting-Anbieter (z. B. WordPress selbst oder praktisch jeder andere Hosting-Dienst) betrieben werden.

Über Webflow

Webflow wurde 2013 mit dem Ziel gegründet, den besten Website-Builder auf dem Markt zu entwickeln. Die Idee war, sich auf Designer zu konzentrieren, die Webflow als SaaS-Tool nutzen konnten, um individuelle Websites ohne umfangreiche Programmierkenntnisse zu erstellen.

Webflow gewann schnell an Popularität durch seine Fähigkeit, den Schwerpunkt auf visuelles Design zu legen, gepaart mit leistungsstarker Funktionalität (z. B. durch den visuellen Editor). Während Designer das Tool nutzen, generiert Webflow automatisch HTML, CSS und Javascript.

Gemeinsamkeiten zwischen WordPress & Webflow

Der Grund, warum Sie diesen Artikel lesen, ist, dass Sie ein Tool benötigen, um Ihre Website zu erstellen und zu betreiben. Sicher, Sie könnten es auch selbst programmieren, aber es gibt unzählige Gründe, warum Sie das nicht tun sollten.

Die größte Gemeinsamkeit zwischen Webflow und WordPress ist das Content-Management-System (CMS). Beide ermöglichen es Ihnen, Inhalte einfach einzugeben und zu speichern (sodass es auch Personen ohne technische Kenntnisse tun können) und sie visuell ansprechend darzustellen.

Gleichzeitig bieten beide Tools visuelle Designfunktionen. WordPress ermöglicht es Nutzern mit seinem klassischen Editor und Page Buildern wie Elementor und WPBakery, Websites ohne Programmierung zu gestalten. Ähnlich bietet Webflow einen visuellen Editor, mit dem Designer responsive Websites per Drag-and-Drop-Oberfläche erstellen können. Beide Plattformen können sowohl von Laien als auch von Profis genutzt werden.

Sowohl WordPress als auch Webflow können durch Plugins und Erweiterungen erweitert werden. Besonders bei WordPress gibt es ein riesiges Repository an Plugins, die von SEO-Optimierung über Social-Media-Integration bis hin zur Umwandlung Ihrer WordPress-Website in einen vollwertigen E-Commerce-Shop reichen. Webflow bietet zwar keine so große Auswahl an Erweiterungen, aber die grundlegende Funktionalität kann durch benutzerdefinierten Code erweitert werden. Zusammenfassend lässt sich sagen, dass beide Plattformen an die spezifischen Anforderungen Ihres Projekts angepasst werden können.

Nicht zuletzt profitieren sowohl WordPress als auch Webflow von aktiven Communities. WordPress verfügt über eine riesige globale Community mit unzähligen Foren, Tutorials und Ressourcen von Drittanbietern. Webflow hat, obwohl neuer, schnell eine eigene Community aufgebaut, die eine umfangreiche Online-Universität, Foren und Community-Events umfasst.

Unterschiede zwischen WordPress & Webflow

Bevor wir ins Detail gehen, hier ein kurzer Überblick, wo sich die beiden Plattformen unterscheiden:

‍

Einer der Hauptunterschiede zwischen den Plattformen ist die Hosting-Umgebung. Webflow ist eine vollständig verwaltete, gehostete Lösung. Das bedeutet, dass Webflow sich um alles kümmert, was Sicherheit, Backups, Updates und das Hosting selbst betrifft.

Es fungiert als normale SaaS (Software as a Service)-Lösung. Im Vergleich dazu kann WordPress selbst gehostet werden, was Ihnen die volle Flexibilität, aber auch die Verantwortung für Ihre Website gibt. Das bedeutet, Sie können buchstäblich alles anpassen, aber gleichzeitig erfordert es mehr technische Verwaltung (Anmerkung: Es gibt auch Anbieter, die einen Managed WordPress Service anbieten).

Der Einstieg ist mit WordPress wahrscheinlich einfacher, da es viel mehr Themes, Plugins und Tutorials gibt. WordPress wird oft für Anfänger und diejenigen empfohlen, die eine einfache Inhaltsverwaltung gegenüber Designflexibilität bevorzugen. Webflow hingegen wurde für professionelle Designer entwickelt. Es erfordert ein gutes Verständnis von Webtechnologie und Designprinzipien. Die Benutzeroberfläche kann daher anfangs etwas überwältigend sein.

Ein weiterer großer Unterschied ist die Preisstruktur. WordPress ist eine Open-Source-Software, die kostenlos genutzt werden kann. Wenn Sie es selbst betreiben, fallen natürlich Kosten für Hosting, Plugins und Premium-Themes an, die Sie kaufen. Meistens gilt es immer noch als kostengünstiger für einfache Websites. Webflow arbeitet mit einem Abonnementmodell, bei dem Sie eine monatliche oder jährliche Gebühr zahlen, die Hosting und die Nutzung der Plattform beinhaltet. Die Funktionen unterscheiden sich jedoch je nach gewähltem Plan.

Obwohl beide Plattformen viele Anpassungsmöglichkeiten bieten, unterscheiden sie sich in der Art. WordPress bietet tiefe Anpassungsmöglichkeiten, insbesondere im Bereich der Funktionalität, durch Tausende von kostenlosen und kostenpflichtigen Plugins und Themes. Es verfügt über ein riesiges Ökosystem, das es Benutzern ermöglicht, die Funktionalität nahezu unbegrenzt zu erweitern. Webflow konzentriert sich hauptsächlich auf robuste Design-Anpassungstools direkt im Browser. Es gibt nur wenige Drittanbieter-Erweiterungen, die die Funktionalität erweitern.

Ein weiterer großer Unterschied ist das erforderliche technische Wissen. Webflow ist im Allgemeinen weniger auf Codierung angewiesen, obwohl Kenntnisse in HTML, CSS und JavaScript die Anpassungsmöglichkeiten eines Benutzers verbessern können. WordPress ist zwar auf grundlegender Ebene benutzerfreundlich, erlaubt und erfordert aber oft tiefere Entwicklungsfähigkeiten, insbesondere für die Entwicklung benutzerdefinierter Themes und Plugins. Die Verwendung von PHP als Backend-Sprache in WordPress eröffnet auch mehr Möglichkeiten zur Integration komplexer serverseitiger Prozesse.

Sollte ich von WordPress zu Webflow migrieren?

Das ist wahrscheinlich die Hauptfrage, die Ihnen durch den Kopf geht. Und ich verspreche, am Ende dieses Artikels wird es eine Antwort geben. Aber lassen Sie uns unsere Reise mit einigen Gedanken darüber beginnen, warum es überhaupt sinnvoll ist, von WordPress zu Webflow zu migrieren.

Und es muss langfristig gute Gründe geben, da der gesamte Migrationsprozess Zeit, Mühe und in den meisten Fällen Geld kosten wird.

Gründe für den Wechsel von WordPress zu Webflow

1. Bessere Designflexibilität: Der visuelle Builder von Webflow bietet eine überlegene Designkontrolle, die kreativere und anspruchsvollere Designs ohne zusätzliche Programmierkenntnisse ermöglicht. Es gibt auch Page Builder für WordPress, aber die meisten bieten nicht das gleiche Maß an Flexibilität. Darüber hinaus wird es viel einfacher sein, Animationen auf Ihrer Website zu verwenden.
2. Einfachere Benutzeroberfläche: Die gesamte Benutzeroberfläche von Webflow ist intuitiver zu bedienen – egal ob Sie Designer, Entwickler oder Endbenutzer sind.
3. Responsives Design von Anfang an: Webflow bietet benutzerfreundliche Tools, um ein responsives Design zu erstellen, das für alle Bildschirmgrößen funktioniert, sodass Ihre Website auf jedem Gerät, vom Mobiltelefon bis zum Desktop, großartig aussieht.
4. Keine Plugins nötig: Was mir an WordPress am meisten missfällt, ist, dass man Unmengen an Plugins für zusätzliche Funktionen benötigt. Jedes Plugin birgt nicht nur ein Sicherheitsrisiko (da sie oft von Drittanbietern entwickelt werden), sondern macht die Website auch langsamer und mit der Zeit schwieriger zu verwalten.
5. Kein Plugin-Ärger: Stellen Sie sich vor, Sie haben mehr als 20 Plugins installiert, die regelmäßig aktualisiert und auch überprüft werden müssen, ob sie mit den neuesten WordPress-Installationen funktionieren.‍
6. Bessere Performance: Es ist ziemlich einfach, dass Ihre WordPress-Website recht träge wird. Die meisten Webflow-Websites sind das Gegenteil, da Webflow sauberen Code generiert und es keine Drittanbieter-Plugins gibt. Darüber hinaus kümmert sich das Team von Webflow um viel Optimierungsarbeit, wenn es um Dinge wie Server und Website-Geschwindigkeit geht. Webflows statische HTML-über-CDN-Architektur erzielt zudem tendenziell merklich bessere Ergebnisse bei den Core Web Vitals (LCP, INP, CLS), die direkte Google-Ranking-Faktoren sind.
   In einer dokumentierten Migrations-Fallstudie verzeichnete das Team nach dem Wechsel zu Webflow einen Anstieg der Seitenaufrufe um 34 %, einen Anstieg der Sitzungen um 26 % und die durchschnittliche Verweildauer auf der Seite verdoppelte sich fast von 42 auf 83 Sekunden. Wie Domenic Effertz es ausdrückte: „Eine gute Benutzererfahrung ist gutes SEO.“ Webflows Hosting-Setup auf einem globalen CDN mit integrierter Bildoptimierung ist ein wichtiger Grund für diesen Aufschwung.
7. ‍Besseres SEO: Webflow verfügt über eine Vielzahl integrierter SEO-Tools, die es Ihnen leicht machen, Ihre Websites für Suchmaschinen zu optimieren – und letztendlich mehr Nutzer auf Ihre Seite zu bringen. In WordPress würden die meisten Websites dafür wahrscheinlich auf Yoast SEO zurückgreifen.‍
8. Verbesserte Sicherheit und keine Notwendigkeit für regelmäßige Updates: Alle Webflow-Websites werden von Webflow gehostet – was bedeutet, dass sie sich um fast alle Sicherheitsmaßnahmen kümmern, im Vergleich dazu, dass Sie es selbst in Ihrer WordPress-Installation tun müssten.‍
9. Mehr Sicherheit: Darüber hinaus erfordert WordPress regelmäßige Updates für Themes, Plugins und das WordPress-Kernsystem. Das kann zeitaufwendig sein und bei unsachgemäßer Verwaltung zu einem Sicherheitsrisiko führen. Webflow verwaltet diese Updates automatisch im Hintergrund.‍
10. CMS, das von jedem genutzt werden kann: Das CMS von Webflow ist hochgradig anpassbar, dennoch sehr benutzerfreundlich, bietet verschiedene Rollen und eine optimiertere Benutzererfahrung im Vergleich zum komplexeren CMS von WordPress.‍
11. Geld sparen: Die meisten würden sagen, Webflow ist teurer als eine WordPress-Website, aber ich rate Ihnen, auch die langfristigen Kosten für WordPress-Plugins, Wartungsarbeiten und zusätzliche Entwicklerstunden zu berücksichtigen.
12. Möglichkeit für ein Barrierefreiheits-Audit: Eine Migration ist einer der wenigen Momente, in denen Sie eine alte Website realistisch auf WCAG-Standards bringen können. Der Designer von Webflow erleichtert die Durchsetzung konsistenter Kontrastverhältnisse, Fokus-Zustände und Alt-Text-Anforderungen in Ihrem gesamten Designsystem.

Wie Sie sehen können, gibt es unzählige Gründe, Webflow statt WordPress zu wählen.

Gründe, bei WordPress zu bleiben

Aber wie immer im Leben gibt es auch einige Gründe, die dafür sprechen, bei WordPress zu bleiben.

1. 100%ige Datenhoheit: WordPress ist Open Source und kann auf Ihren eigenen Servern gehostet werden. Das bedeutet, dass Sie die volle Kontrolle über jeden Prozess und jede gespeicherte Daten haben.
2. Flexibilität dynamischer Anwendungen: Webflow ist darauf ausgelegt, „Content“-Websites und grundlegende dynamische Funktionalitäten (wie Formulare, Filter etc.) zu erstellen. Es ist nicht die beste Wahl, wenn Sie größere Anwendungen erstellen möchten (Sie können diese jedoch auch mit Webflow und Tools wie Wized erstellen). Anfangs war WordPress ähnlich – es begann als Blog-CMS. Doch mit über 20 Jahren Geschichte begannen die Leute, alle möglichen verrückten Dinge mit WordPress zu bauen. Von E-Commerce-Shops über Communities bis hin zu Apps.
3. Riesige Community: Wenn Sie ein WordPress-Problem oder eine Idee haben, besteht eine fast 100%ige Chance, dass jemand bereits eine Lösung dafür gefunden hat. Die Community ist riesig, und es gibt unzählige Themes, Plugins und Tutorials. Auch bei Webflow gibt es eine Community, diese ist jedoch noch deutlich kleiner.

Ihren Plan erstellen – Die Bereiche der Migration

Sie haben sich entschieden, Ihre Website umzuziehen. Großartig! Also, legen wir los.

Bevor es an die praktische Umsetzung geht, hier ist eine grobe Einschätzung des Aufwands, abhängig von der Art der Website, die Sie migrieren:

‍

Sichern Sie Ihre aktuelle WordPress-Website

Als sehr wichtigen ersten Schritt sollten Sie Ihre gesamte WordPress-Website sichern. Falls etwas schiefgeht, können wir schnell zu einem Zeitpunkt zurückkehren, an dem die Website funktionierte, ohne zu viel Zeit mit dem Wiederherstellen der Daten zu verlieren.

1. Es gibt verschiedene Möglichkeiten, Ihre WordPress-Website zu sichern. Aus Gründen der Einfachheit verwenden wir die UpdraftPlus Plugin hier.

2. Auf Backup klicken

3. Das Backup auf Ihrem Computer speichern

Ihre aktuelle Website benchmarken

Ein weiterer wichtiger Schritt ist es, die Leistung Ihrer aktuellen Website zu bewerten. Unser Hauptaugenmerk liegt hier auf den SEO-Rankings (= auf welcher Position in den Suchergebnissen Ihre Website für ein bestimmtes Keyword angezeigt wird). Sie möchten sicherstellen, dass Sie durch Ihre Migration nicht zu viel Ihres organischen Traffics verlieren.

Randnotiz: Wenn wir eine Website 1:1 mit allen Unterseiten, Bildern und (am wichtigsten) denselben URLs migrieren, solltest du keine SEO-Rankings verlieren. Häufig müssen wir jedoch einige URLs auf eine neue Struktur weiterleiten. In diesem Fall teilen wir Google die URL-Änderungen mit. Es kann sein, dass du kurzzeitig einige Positionen verlierst, aber die Rankings sollten sich langfristig wieder erholen.

‍

Die SEO-Seite Ihrer Website-Migration ist eine der wichtigsten, da sie oft die Hauptursache für Probleme ist. Doch trotz aller Risiken gibt es auch zahlreiche Vorteile, und Sie werden sogar durch eine gesteigerte Leistung profitieren.

SEO-Leistung im SEO-Tool

Eine Möglichkeit, Ihre aktuelle Website zu bewerten, ist die Verwendung bekannter SEO-Tools wie Semrush oder Ahrefs. Im Tool selbst können Sie folgende Dinge tun.

1. Führen Sie ein Site-Audit durch, um zu sehen, wie Ihre Website insgesamt abschneidet
2. Exportieren Sie die Keywords, für die Ihre Website rankt (exportieren Sie einfach eine .csv- oder .xls-Datei und speichern Sie diese ab)
3. Aktivieren Sie ein Positionstracking (Sie können eine Liste wichtiger Keywords hochladen, die Sie verfolgen möchten, und das Tool benachrichtigt Sie, wenn es signifikante Änderungen in der Position dieses Keywords gibt, z.B. wenn ein Link defekt ist, wird Google die Position Ihres Keywords herabsetzen und das SEO-Tool weist Sie auf das potenzielle Problem hin).

Richtig durchgeführt, können die SEO-Vorteile einer Webflow-Migration erheblich sein. Eine dokumentierte Migration zeigte einen Anstieg der organischen Keyword-Anzahl von 406 auf 528 (eine Steigerung von 30 %) und eine Reduzierung der Absprungrate um 20 %. Diese Erfolge stellen sich nicht automatisch ein; sie erfordern eine disziplinierte Weiterleitungszuordnung und Inhaltserhaltung, was der Rest dieses Leitfadens behandelt.

Search Console & Google

Das zweite Tool, das wir zur Bewertung unserer aktuellen SEO-Leistung nutzen können, ist Googles eigene Search Console. In der Search Console schlage ich Ihnen zwei Dinge vor.

A) Sie können die Gesamtleistung der letzten 30-60-90 Tage als Screenshot festhalten, um ein Gefühl dafür zu bekommen, wie viele Impressionen und Klicks Sie über die Suchmaschine erhalten.

B) Sie können zu den Suchergebnissen gehen und die Abfragen dann als .csv-Datei exportieren. Mit dieser Datei können Sie leicht sehen, für welche Keywords Ihre Website rankt, wie viele Impressionen Sie erhalten und wie viele Personen auf Ihrer Website landen, weil sie auf das Suchergebnis klicken.

Migrieren Sie Ihr Webdesign von Wordpress zu Webflow

Der erste große Bereich der Vorbereitung ist Ihr Webdesign. Hierfür gibt es im Grunde nur zwei Optionen, die wir kurz erwähnen werden, ohne zu sehr ins Detail zu gehen, da dies ein eigener Artikel sein könnte.

1) Beibehaltung Ihres aktuellen Designs

Wenn Sie sich entschieden haben, Ihr aktuelles Design beizubehalten, müssen Sie das Design, das Sie in Wordpress haben, in Webflow neu entwickeln. Je nach Art des Designs kann dies recht aufwendig sein, da es fast so ist, als würden Sie es von Grund auf neu entwickeln. Und wenn Sie nicht allzu vertraut damit sind, wie das geht, empfehle ich Ihnen, mit einem Webflow-Entwickler zu sprechen, der Ihnen helfen kann.

2) Neues Design

Wenn Sie sich entscheiden, Ihrer Marke ein Design-Update zu verpassen, können Sie entweder ganz neu anfangen und jedes Element einzeln entwickeln, oder Sie verwenden eine Vorlage aus dem Webflow-Template-Marktplatz. Beachten Sie, dass die Komplexität des Projekts umso höher wird, je mehr Elemente Sie ändern.

Das heißt: Wenn Sie die Website mit dem gleichen Design einfach von Wordpress zu Webflow übertragen, ist das recht unkompliziert. Wenn Sie jedoch von Wordpress zu Webflow wechseln und gleichzeitig das gesamte Design ändern, können dabei viele weitere Dinge schiefgehen.

Vorbereitung Ihres Wordpress-Contents für die Migration

Der wichtigste Teil Ihrer Migration wird der Content sein. Wir möchten sicherstellen, dass alles, was auf der alten Website existiert, auch auf der neuen Website vorhanden ist.

Im Allgemeinen lässt sich Content in zwei Gruppen unterteilen:

1) Statische Seiten

Die meisten Seiten Ihrer Website sind wahrscheinlich statische Seiten. Dies sind Seiten, die Sie einmal mit Inhalten füllen und die sich dann nicht oft ändern. Die meisten dieser statischen Seiten unterscheiden sich im Layout je nach den Besonderheiten der Seite.

Beispiele für statische Seiten:

• Startseite
• Über-uns-Seite
• Datenschutzerklärung

All diese Seiten müssen Sie manuell übertragen – „Ja. Das bedeutet, Sie müssen jedes einzelne Inhaltselement anfassen.“

2) Dynamische Seiten & Dynamische Sammlungen

Neben diesen statischen Seiten gibt es einige Seiten und Elemente, die dynamischer sind. In Wordpress werden diese dynamischen Elemente oft als Posts bezeichnet – in Webflow würden wir sie als Collection Lists bezeichnen. Diese dynamischen Elemente sind in ihrer Struktur sehr ähnlich (z. B. Blogartikel, Teammitglied).

Beispiele:

• Blogartikel
• Teammitglieder
• Fallstudien

Zum Glück können wir uns viel Zeit sparen, indem wir sie aus Wordpress exportieren und in Webflow importieren („Niemand möchte 200 Blogartikel manuell kopieren“).

Wie bereits erwähnt, werden diese Elemente in Webflow in den CMS-Sammlungen gespeichert. Eine beispielhafte CMS-Sammlung wäre der Blog, und das CMS-Element selbst wäre der einzelne Inhalt „Wie man zu Webflow migriert“.

Bei der Vorbereitung der CMS-Sammlungen für Webflow ist es ratsam, auch darüber nachzudenken, wo Sammlungen sinnvoll wären. Zum Beispiel könnten Sie derzeit alle Ihre Teammitglieder auf einer statischen Seite haben. Da sie sich jedoch häufig ändern und Sie sie möglicherweise auf mehreren Seiten anzeigen möchten, ist es sinnvoller, sie in eine Webflow-Sammlung zu verschieben.

Wann ist der Einsatz einer CMS-Sammlung sinnvoll?

• Inhalte, die häufig bearbeitet werden
• Inhalte, die regelmäßig neue Elemente erhalten (z. B. Veranstaltungen)
• Inhalte, die auf verschiedenen Unterseiten verwendet werden (z. B. Fallstudien)
• Inhalte mit ähnlicher Struktur (z. B. Blogartikel)
• Inhalte, die von verschiedenen Personen bearbeitet werden (Sie können bis zu XYZ Content-Editoren zu Ihrem Webflow-Plan einladen)

Randnotiz: Du musst das CMS theoretisch nie benutzen, und alles lässt sich auch ohne aufbauen. Aber wenn du es nicht nutzt, lässt du ein riesiges Potenzial von Webflow ungenutzt auf dem Tisch liegen.

‍

Eine Seitenliste vorbereiten

Um einen Überblick über alle statischen und dynamischen Inhalte zu erhalten, über die wir gerade gesprochen haben, möchten wir ein Google Sheet mit allen Seiten einrichten.

Ressource: Du kannst dir unser WordPress-zu-Webflow-Migrations-Sheet als Teil unseres Migrations-Guides kopieren.

Unser Ziel ist es, dieses Sheet während der gesamten Migration als unsere einzige Quelle der Wahrheit zu nutzen. Unsere konkreten Schritte sind:

A) Alle Seiten auflisten, die wir derzeit auf der Website haben

B) Markieren, welche davon statisch und welche dynamisch sind

C) Markieren, welche Seiten migriert werden und welche nicht (manchmal bietet eine Migration eine gute Gelegenheit, Ihre Website aufzuräumen)

D) Seiten markieren, deren URL sich ändert und die daher eine Weiterleitung benötigen

E) Die aktuellen Meta-Beschreibungen und Titel zur Seite hinzufügen

Entscheiden Sie, was migriert, konsolidiert oder entfernt werden soll

Eine Migration ist einer der seltenen Momente, in denen Sie einen guten Grund haben, aufzuräumen. Bevor Sie jede URL standardmäßig migrieren, kategorisieren Sie jede Seite in eine von drei Stufen:

• Performance-Seiten: Hoher Traffic, viele Conversions oder Backlinks. So wie sie sind migrieren und die URL beibehalten.
• Schwache Seiten: Etwas Traffic oder thematische Relevanz, aber unterdurchschnittliche Leistung. In stärkere Seiten konsolidieren oder aktualisieren und migrieren.
• Tote Seiten: Kein Traffic, keine Backlinks, veraltet. Auf die nächstgelegene relevante Seite weiterleiten oder sie 410 lassen.

Wie Crystal Scott anmerkt: „Migrieren Sie nicht um des Migrierens willen.“ Wenn dieser Audit übersprungen wird, bauen die meisten Teams am Ende 200 URLs neu auf, die zu 40 hätten zusammengeführt werden sollen.

Holen Sie sich Ihre Seitenliste über Ihre Sitemap:

Der einfachste Weg, eine Liste aller Seiten Ihrer Website zu erhalten, ist die Sitemap. Im Allgemeinen ist eine Sitemap eine Liste aller Seiten Ihrer Website, die der Google-Crawler verwendet, um die Struktur Ihrer Website zu verstehen und alle Seiten zu indexieren. In den meisten Fällen wird die Sitemap automatisch vom Content-Management-System generiert – in unserem Fall WordPress.

Hinweis 1: In WordPress generiert meistens das SEO-Plugin die Sitemap (z. B. Yoast, All-in-One SEO), sodass sie von außen etwas anders aussehen können.

Hinweis 2: Sitemaps haben ein XML-Format und können Sub-Sitemaps enthalten. In diesem Beispiel sind alle Blogbeiträge eine separate Sitemap, ebenso wie alle statischen Seiten.

Hinweis 3: In 99 % der Fälle können Sie die Haupt-Sitemap Ihrer Website öffnen, indem Sie „sitemap.xml“ zur URL hinzufügen (z. B. https://magier.com/sitemap.xml).

‍

Wir können all diese Informationen schnell per „Copy + Paste“ oder mit einem beliebigen XML-zu-CSV-Konverter aus der XML-Datei in unser Google Sheet übertragen.

Finden Sie die Ranking-Seiten über „Google SERP“

Ein weiterer Lifehack, den ich erwähnen wollte, ist die GOOGLE SERP-Websitesuche. Mit dieser Suche finden Sie alle einzelnen Seiten Ihrer Website, die sich derzeit im Google-Index befinden, indem Sie den Befehl site:” verwenden.YOURDOMAIN.COM“. In unserem Beispiel sind 24 Seiten indexiert. Diese Information ist sehr hilfreich, da dies die Seiten sind, die wir unbedingt weiterleiten möchten, damit kein Nutzer versucht, eine Seite aufzurufen und auf einer 404-Fehlerseite landet (eine 404-Seite erscheint, wenn ein Nutzer versucht, auf eine nicht existierende Website zuzugreifen).

Hinzufügen der Meta-Beschreibungen und Titel

Ein Inhaltselement, das viele Leute vergessen, sind die Meta-Titel und -Beschreibungen. Beide helfen der Suchmaschine zu verstehen, worum es auf Ihrer Website geht, und leiten Besucher, die nach Ihrer Website suchen, da sie in den Suchergebnissen angezeigt werden.

Wir möchten die aktuellen Titel + Meta-Beschreibungen für jede Seite in unser Seiten-Sheet übertragen, damit wir sie später einfach zu unserer neuen Website hinzufügen können.

Wenn Ihr WordPress SEO-Plugin nicht die Möglichkeit bietet, alle zu exportieren, empfehle ich dringend „Screaming Frog“. Geben Sie einfach die URL der Website ein, und die Software liefert Ihnen alle relevanten Informationen in einem übersichtlichen Format zurück.

Bilder finden, die für die Migration relevant sind

Im Allgemeinen speichert WordPress Ihre Bilder in der Mediathek – im Vergleich dazu werden sie in Webflow im Assets-Panel gespeichert.

Aus visueller Sicht werden Sie die meisten Bilder während der Gestaltung Ihres Designs in Webflow übertragen, indem Sie die statischen Inhalte manuell importieren oder die dynamischen Inhalte über die Importfunktion, über die wir später sprechen werden, einfügen.

Ein Aspekt, der bei Migrationen jedoch oft übersehen wird, sind die Quellen, die auf Ihre Bilder verweisen.

Zum Beispiel zeigt Google oft Bilder in den SERPs (Suchmaschinenergebnisseiten) an, um die Benutzererfahrung zu verbessern. Stellen Sie sich vor, Sie haben einen Artikel über die Wettbewerbsfolie in einem Pitch Deck geschrieben und einige coole Beispielfolien erstellt. Google wird auf diese Bilder verlinken, wie im obigen Bild gezeigt, und es könnten auch andere Websites auf Ihr Bild verlinken.

Das bedeutet, dass Sie in einem idealen Szenario sicherstellen würden, dass Sie Google für die relevanten Bilder mitteilen, dass Sie das Bild auf Ihre neue Website verschoben haben.

Eine Möglichkeit, die relevanten Bilder zu finden, ist die Verwendung der Search Console. Wenn Sie in der linken Navigation zu den Suchergebnissen gehen, können Sie oben den „Suchtyp-Filter: Bild“ verwenden, und die Ergebnisse zeigen, dass unsere Bilder eine signifikante Anzahl von Impressionen und eine anständige Anzahl von Klicks erhalten.

Hinweis: Je größer die Website und je höher die Reichweite, desto höher werden hier natürlich die Zahlen sein.

Im Tab „Seiten“ können Sie dann die Artikel finden, auf denen sich die Bilder befinden, und entscheiden, ob Sie sie weiterleiten möchten.

Hinweis 2: In einer idealen Welt würden Sie natürlich jedes einzelne Bild weiterleiten, aber das ist manuell nicht sehr „einfach zu bewerkstelligen“. Wenn Sie also eine dieser Seiten haben, kontaktieren Sie uns für weitere Informationen, wie Sie dies automatisch mit einem Skript tun können.

Es ist eine gute Idee, alle Bild-URLs, die Sie weiterleiten möchten, in Ihr Google Sheet einzutragen, um den Überblick zu behalten und die Weiterleitungen später zu initiieren. Das Einrichten von 301-Weiterleitungen von Ihren alten Bild-URLs zu den neuen URLs ermöglicht es Ihnen, den SEO-Wert zu nutzen, den die Bilder im Laufe der Zeit angesammelt haben.

Hinweis 3: In diesem Artikel werden wir nicht behandeln, wie Sie herausfinden, ob Ihre Bilder auch Backlinks von anderen Websites haben. Dafür können Sie Tools wie Ahrefs verwenden, und die sorgfältige Handhabung dieser Bild-Weiterleitungen hilft Ihnen auch, ihren Wert nicht versehentlich zu verlieren.

Dateien

Etwas Ähnliches, das uns oft begegnet ist, sind Dateien, die auf WordPress hochgeladen und mit Ihrer Website (oder sogar Ihrem Newsletter) verknüpft wurden. Dabei handelt es sich oft um PDFs, die verloren gehen, sobald die WordPress-Website offline geht.

Um diese Dateien zu finden, müssen Sie in die WordPress-Medienbibliothek gehen und nach Dateityp suchen. Anschließend können Sie die Liste manuell durchgehen und die Dateien markieren, die Aufmerksamkeit erfordern (Hinweis: Alle diese Dateien wurden bereits im Backup-Schritt dieses Leitfadens heruntergeladen). Fügen Sie sie Ihrem Google Sheet hinzu, um sich daran zu erinnern, die Weiterleitung einzurichten, sobald Sie die Webflow-Website aufsetzen.

Funktionalität (z.B. Formulare)

Ein weiterer wichtiger Schritt bei der Migration Ihrer Website ist es, auf dynamische Funktionalitäten, Skripte und Formulare zu achten.

Formulare

Beginnen wir mit den Formularen. Zuerst müssen Sie eine Liste aller Formulare auf Ihrer Website erstellen (in unserem Google Sheet). Notieren Sie, wo sich das Formular befindet, wie es erstellt wurde (z.B. Einbettung über einen Drittanbieter wie Mailchimp) und was mit der Übermittlung geschieht.

Beispiel:

• Kontaktformular: Das WP Forms Plugin wird verwendet, um ein Formular zu erstellen, in dem der Website-Besucher eine Nachricht hinterlassen kann, die per E-Mail an den Website-Betreiber gesendet wird.
• Demo-Buchungsformular: Ein Calendly-Embed wird verwendet, um dem Besucher die Buchung einer Demo zu ermöglichen.
• Newsletter-Anmeldung: Ein Formular des E-Mail-Newsletter-Tools (z.B. Mailchimp) ist eingebettet und jede Übermittlung wird an das Newsletter-Tool weitergeleitet.

In Webflow können Sie diese Formulare entweder A) nativ erstellen oder B) die Skripte der Drittanbieter-Tools einbetten.

Die Vorteile nativer Webflow-Formulare sind unbegrenzte Styling-Optionen, schnellere Ladezeiten und die Reduzierung externen Codes auf Ihrer Website. Der Nachteil ist, dass Sie die Formularübermittlung selbst verwalten müssen.

Die Vorteile eingebetteter Formulare sind, dass der Drittanbieter die Formularübermittlungen handhabt und diese direkt in seinem Tool verwendet. Der Nachteil ist, dass die Styling-Optionen begrenzt sind und Ihre Website dadurch langsamer wird.

Tracking-Funktionalität / Skripte

Für eine ordnungsgemäße Migration müssen wir auch alle eingerichteten Trackings überprüfen. Meistens sprechen wir von Tracking-Pixeln wie Meta, Google usw. Sie haben diese entweder über Ihr Google Tag Manager-Konto oder direkt in WordPress (oder einem beliebigen Drittanbieter-Plugin) eingerichtet.

Die häufigsten Skripte, die Sie auf einer Website finden werden, sind wahrscheinlich Google Analytics, Cookie-Banner und jede Art von Social Media Tracking (für Meta-Anzeigen).

Ein klassisches Beispiel ist das Tracking einer Formularübermittlung, damit Sie wissen, ob ein Lead über eine soziale Anzeige kam oder nicht.

Neben den Tracking-Pixeln enthalten die meisten Websites auch externe Skripte. Dies können Dinge wie Google Analytics oder ein Cookie-Banner sein.

Notieren Sie alle Skripte und Trackings, die Sie in Ihrem Google Sheet haben, damit Sie diese im Migrationsprozess nicht vergessen.

Weitere Funktionalitäten

Auf vielen Websites gibt es auch andere Arten von dynamischen Elementen. Das können Listen, eingebettete Bewertungen, Rechner usw. sein. Gehen Sie Ihre Website durch und listen Sie alle davon in Ihrem Google Sheet auf, damit Sie den Überblick behalten und später über Lösungen für deren Übertragung nachdenken können.

Es ist auch eine gute Idee, die Plugin-Liste in WordPress zu überprüfen, um sicherzustellen, dass Ihnen nichts fehlt (da diese dynamische Funktionalität meist über Plugins in WordPress hinzugefügt wird).

WordPress-Plugins und -Funktionalitäten, die in Webflow nicht verfügbar sind (und was zu tun ist)

Webflow hat nicht für jedes WordPress-Add-on ein 1:1-Plugin-Äquivalent. Hier sind die häufigsten Lücken, die wir bei Migrationen sehen, und die entsprechenden Workarounds:

‍

Wenn Ihre WordPress-Website stark auf einem dieser Elemente basiert, sollten Sie die Zeit für die Problemumgehung und eventuelle Abonnementkosten in Ihren Migrationsplan einbeziehen.

Technisches SEO (301-Weiterleitungen)

In den vorherigen Abschnitten haben wir viel über Weiterleitungen gesprochen, um sicherzustellen, dass sowohl Ihre Website-Besucher als auch die Google-Crawler auf den erwarteten Seiten landen.

Weiterleitungen sind wahrscheinlich das Wichtigste, was man bei einer vollständigen Website-Migration verstehen muss. Deshalb möchte ich etwas Zeit darauf verwenden, sie im Detail zu erklären.

Jede Seite Ihrer Website hat eine spezifische URL (z.B. https://yourdomain.com/blog-article-1), die aus zwei Dingen besteht. 1) Ihrer Top-Level-Domain (TLD) (https://yourdomain.com) und 2) dem URL-Slug („blog-article-1“).

Wichtiger Hinweis 1: Für die meisten nicht-technischen Personen etwas schwer zu verstehen, aber wichtig zu wissen ist, dass yourdomain.com und www.yourdomain.com nicht dasselbe sind. In 99 % der Domain-Setups gibt es eine Standard-Domain, und die andere leitet immer darauf um (z.B. www → ohne www). Wichtig, weil Google nur die Hauptversion sehen wants.

Warum ist das für uns wichtig?

Während der Migration können zwei Dinge passieren. Im ersten Fall bleibt Ihre Domain (mit oder ohne www) gleich, oder im zweiten Fall ändert sich die Standard-Domain (meistens hängt dies von Ihrem Domain-Anbieter und dessen Zusammenspiel mit den Webflow-Einstellungen ab).

Bezüglich des URL-Slugs versuchen wir, diesen auf der neuen Website (z.B. war die URL auf WordPress https://yourdomain.com/blog-article-1 und bleibt auf Webflow https://yourdomain.com/blog-article-1) wie auf der alten gleich zu halten. Es besteht jedoch die Möglichkeit, dass dies aus technischen Gründen nicht immer machbar ist.

Beispiel: Statt https://yourdomain.com/blog-article-1 lautet die neue URL https://yourdomain.com/blog/blog-article-1. In diesem Fall möchten wir sicherstellen, dass wir Google und jeden Besucher über die Änderung informieren. Und das können wir mithilfe von 301-URL-Weiterleitungen tun.

Was bewirken sie?

Immer wenn jemand versucht, auf https://yourdomain.com/blog-article-1 zuzugreifen, leiten wir ihn zu https://yourdomain.com/blog/blog-article-1 weiter mit der zusätzlichen Information, dass die Domain dauerhaft verschoben wurde.

Was schiefgehen kann

Wie Sie bereits sehen, ist der Umzug von WordPress zu Webflow nicht das Einfachste und es gibt unzählige Dinge, die Sie berücksichtigen müssen. Je größer die Website, desto mehr kann schiefgehen.

Die häufigsten Herausforderungen bei der Migration von WordPress zu Webflow lassen sich in fünf Bereiche einteilen, und wir haben bei allen schon selbst Fehler gemacht. Hier ist, worauf Sie achten sollten, damit Sie unsere Fehler nicht wiederholen:

1. SEO-Fehler und Besucher landen im Niemandsland

Unsere oberste Priorität bei der Migration ist es, sicherzustellen, dass alle Besucher, die auf unsere Website kommen möchten, an der richtigen Stelle landen. Was meine ich damit? Wenn jemand einen bestimmten Blogartikel Ihrer Website als Lesezeichen gespeichert hat, möchten wir, dass er nach der Migration auf demselben Blogartikel landet. Dasselbe gilt für andere Websites, die auf Ressourcen Ihrer Website verlinken.

Und am wichtigsten ist Google als größte Suchmaschine und Traffic-Treiber. Stellen wir uns vor, ein Nutzer sucht nach einem bestimmten Keyword und einer Ihrer Artikel rankt hoch in den SERPs. Bleibt die URL gleich, ist alles in Ordnung, da der Nutzer auf Ihrer neuen Website den identischen Inhalt sehen wird.

Die Wahrscheinlichkeit ist jedoch hoch, dass sich ein Teil Ihrer URL-Struktur bei der Migration ändern wird, und daher müssen wir Google mitteilen, wo der neue Artikel zu finden ist (z.B. yourdomain.com/article-1 → yourdomain.com/category/article-1).

Wenn wir hier unsere Arbeit nicht richtig machen, könnten Sie viel (oder sogar den gesamten) Traffic von Google verlieren, da Ihre Nutzer auf einer nicht existierenden Seite landen und einen Fehler erhalten könnten. Google wird dies als Zeichen sehen, Ihre Website aus den Suchergebnissen zu entfernen.

2. Fehlende Inhalte oder abweichende Inhaltsstruktur

Ein weiteres Problem, das bei der Migration einer Website regelmäßig auftritt, sind Inhalte, die verschwinden, ohne dass Sie es merken. Dies können Blogartikel, bestimmte Bereiche der Website oder ganze Seiten sein. Deshalb ist es sehr wichtig, vorab eine vollständige Liste der zu migrierenden Inhalte zu haben und danach zu überprüfen, ob alles geklappt hat.

Es ist auch ratsam, potenzielle Fehler in der Google Search Console zu überwachen, um zu sehen, ob Nutzer auf einer Seite landen, die nicht mehr existiert.

3. Fehlende Funktionalität

Ich bin sicher, Sie werden irgendwann auf eine Funktionalität stoßen, die Sie zuvor hatten und die in Webflow nicht existieren wird. Dies könnte etwas Einfaches sein wie die interne Verlinkung in Ihren Blogbeiträgen (das geht auch mit Webflow, aber nicht so einfach) oder die Möglichkeit, ein Plugin zu installieren, um schnell etwas zu erledigen.

Wenn Sie auf einen solchen Moment stoßen, bedenken Sie immer, dass A) dies langfristig auch Vorteile für Sie haben kann (anstatt einfach ein Plugin zu installieren, das Ihre gesamte Website aufbläht, müssen Sie vielleicht eine sauberere Lösung dafür finden) und B) es unzählige Workarounds gibt, um zum gleichen Ergebnis zu kommen.

Seien Sie sich einfach bewusst, dass es niemals eine 1:1-Funktionalität in beiden CMS geben wird.

4. Probleme bei der Nutzerakzeptanz

Die rein technische Einrichtung der Website zu betrachten, ist das eine – haben wir alle Seiten, Bilder und funktionieren alle Formulare und Skripte. Aber der Wechsel des CMS bedeutet auch eine Änderung der Benutzeroberfläche für die Nutzung einer Website aus der Editor-Ansicht. Es kann sein, dass Sie Personen in Ihrem Team haben, die lange Zeit an die Arbeit in WordPress gewöhnt waren.

Und von einem Tag auf den anderen sollen sie ein völlig anderes Tool verwenden. Sorgen Sie für eine angemessene Schulung Ihres Teams, damit sie nicht nur verstehen, wie sie ihre Arbeit im neuen CRM erledigen, sondern auch die grundlegenden Gemeinsamkeiten, Unterschiede und Prinzipien von Webflow und WordPress verstehen.

5. Nicht alles funktioniert zu 100%

Ich stelle mir vor, dass Ihre vorherige Website Monate oder Jahre lief, bevor Sie sich zur Migration entschlossen haben. Das bedeutet, dass Tausende, wenn nicht Hunderttausende von Besuchern sie genutzt haben. Einschließlich derer, die versuchten, potenzielle Probleme und Fehler zu beheben.

Sicherlich werden Sie auch einige Funktionstests mit Ihrer neuen Website durchführen, um sicherzustellen, dass sie wie beabsichtigt funktioniert, und das responsive Design überprüfen, um sicherzustellen, dass alles auf allen Geräten gut aussieht. Aber es ist immer noch eine neue Website, und nicht alles wird von Anfang an perfekt sein.

Behalten Sie also auch nach der Migration die Augen offen, um sicherzustellen, dass eventuelle Probleme im Laufe der Zeit behoben werden.

Die Migration von Wordpress zu Webflow

Nachdem wir einen Großteil der Vorbereitungsarbeiten erledigt haben, sind wir endlich bereit für die eigentliche Migration. Laden Sie unbedingt unsere Migrations-Checkliste herunter, die Sie dabei unterstützen wird.

Inhalte aus Wordpress exportieren

Wie bereits erwähnt, können wir nicht alle Inhalte automatisch übertragen. Die meisten statischen Seiten müssen einzeln übertragen werden. Glücklicherweise können wir jedoch einige der dynamischen Inhalte (wie Beiträge) in einer CSV-Datei exportieren.

Dazu benötigen wir ein Plugin namens WP All Export.

Sie können Ihre Exporte im Plugin nach Belieben anpassen und auch Daten einschließen, die andere Plugins zur Datenbank hinzufügen (z.B. Meta-Beschreibungen).

Für den einfachsten Export können Sie einfach „Post“ auswählen und dann auf die Schaltfläche „Migrate Posts“ klicken, da alle relevanten Informationen enthalten sein werden.

Einrichtung der CMS-Struktur

Als Nächstes müssen wir alle CMS-Sammlungen einrichten, die wir in Webflow benötigen. Dazu müssen Sie wissen, welche Sammlungslisten Sie benötigen und welche Eigenschaften jede einzelne hat.

Gehen wir das Beispiel des Blogartikels durch. Jeder unserer Blogartikel sollte die folgenden Informationen enthalten:

• Name
• Slug (/blog/)
• Kurzbeschreibung oder Zusammenfassung
• Autor
• Erstellungsdatum
• Inhalt
• Hauptbild

In Webflow können Sie diese Eigenschaften einfach im CMS erstellen und die entsprechenden Felder auswählen. Wenn Sie mehr darüber erfahren möchten, wie Sie Ihre CMS-Sammlungen einrichten, haben wir hier ein Video erstellt.

Als weiteres Beispiel können wir die Liste unserer Teammitglieder mit den folgenden Eigenschaften haben:

• Name
• Titel
• Bild
• Beschreibung
• LinkedIn URL
• E-Mail-Adresse

Wie Sie sehen können, ist dies ein ziemlich manueller Schritt, aber es führt kein Weg daran vorbei.

CMS-Inhalte hochladen (Zuordnung)

Im nächsten Schritt möchten wir alle Beiträge, die wir zuvor aus Wordpress exportiert haben, in Webflow importieren. Dazu gehen Sie zum Webflow CMS und klicken oben rechts auf Importieren. Anschließend ziehen Sie die .csv-Datei hinein und eine neue Benutzeroberfläche erscheint.

Ihre Aufgabe ist es, die Spalten/Felder der alten Struktur mit der neuen abzugleichen.

Ein Hinweis zur Reihenfolge: Wenn Ihre Sammlungen aufeinander verweisen (zum Beispiel Blogbeiträge, die auf Autoren und Kategorien verweisen), importieren Sie zuerst die unabhängigen Sammlungen. Autoren und Kategorien vor Blogbeiträgen. Andernfalls werden die Referenzfelder nicht korrekt zugeordnet und Sie müssen sie erneut bearbeiten.

Zum Beispiel:

• Slug ⇒ Slug
• Inhalt ⇒ Beitragsinhalt
• Datum ⇒ Datum
• ….

In den meisten Fällen werden Sie wahrscheinlich nur einige der Felder zuordnen und nicht alle, da der Export viele nutzlose Informationen enthält.

Tipp: Die gleichen Schritte funktionieren auch für andere Inhaltstypen abseits von Blogbeiträgen. Schau dir Webflows Anleitung an, um zu erfahren, wie du CMS-Collection-Inhalte importieren und exportieren kannst.

‍

Inhalt / Bilder etc. hinzufügen.

Nachdem Sie die CMS-Inhalte migriert haben, ist es an der Zeit, Ihre weiteren Inhalte von der Website zu migrieren. Wie bereits erwähnt, müssen Sie im Webflow Designer einen 1:1-Neuaufbau vornehmen. Höchstwahrscheinlich haben Sie dies bereits während der Designphase der Website-Gestaltung erledigt.

On-Page SEO (Meta …)

Ein weiterer Schritt ist das Hinzufügen Ihrer Meta-Beschreibungen und Seitentitel zu Webflow. Sie können dafür das von uns vorbereitete Google Sheet verwenden und diese einfach in die entsprechenden Felder in Webflow einfügen.

Wenn Sie etwas Zeit übrig haben, können Sie die Gelegenheit auch nutzen, um diese zu verbessern.

Webflow Best Practices

Nach dem Launch gibt es einige Dinge, die Sie tun können, um die Website zu optimieren.

Favicon

Stellen Sie sicher, dass Sie in den Webflow-Einstellungen das Favicon für Ihre Websites hochladen. Es ist das kleine Symbol, das in der Navigationsleiste und der Lesezeichenleiste jedes Browsers angezeigt wird. Dies können Sie ganz einfach in den Webflow-Projekteinstellungen erledigen.

Sitemap

Im Zuge der Migration sind wir mehrmals auf die Sitemap gestoßen. Für unsere neue Webflow-Website möchten wir sicherstellen, dass wir ebenfalls eine haben und es Google letztendlich leicht machen, die Struktur unserer Website zu verstehen.

Sie können die automatische Generierung Ihrer Sitemap in den Webflow-Einstellungen einrichten. Sie listet nicht nur alle Seiten, Blogartikel und CMS-Sammlungselemente auf Ihrer Website auf, sondern aktualisiert sich auch, sobald Sie etwas Neues hinzufügen.

Sie finden die Sitemap unter der folgenden URL (yoururl.com/sitemap.xml), und nachdem Sie die Migration abgeschlossen haben, ist es sehr sinnvoll, die Sitemap bei der Google Search Console einzureichen, um Google über die erfolgte Migration zu informieren.

Bilder komprimieren

Zunächst können Sie Ihre Bilder komprimieren, falls Sie dies nicht bereits während des Designprozesses getan haben. Die Größe Ihrer Bilder ist entscheidend, wenn Sie eine hervorragende Benutzererfahrung durch schnelle Ladezeiten bieten möchten.

Besonders auf Mobilgeräten können riesige Dateigrößen Ihre Website drastisch verlangsamen und sogar Ihre Rankings bei Google negativ beeinflussen.

Rich Snippets / Strukturierte Daten

Eine weitere tolle Sache, die Sie tun können, ist das Hinzufügen von strukturierten Daten zu Ihrer Website. Strukturierte Daten und Rich Snippets sind Konzepte, die hauptsächlich im Kontext von Suchmaschinen und SEO (Search Engine Optimization) verwendet werden. Sie verbessern die Art und Weise, wie Webinhalte in den Suchergebnissen dargestellt werden.

Wenn Sie also Suchergebnisse bei Google sehen, wie das oben gezeigte, ist es sehr wahrscheinlich, dass die Website Rich Snippets verwendet hat. Die am häufigsten verwendeten sind:

• Bewertungen: Zeigt Sternebewertungen und die Anzahl der Rezensionen an.
• Veranstaltungen: Enthält Informationen zu bevorstehenden Veranstaltungen, wie z. B. Daten, Orte und Ticketverfügbarkeit.
• Produkte: Bietet Daten zu Preis, Verfügbarkeit und Produktbewertungen.
• Breadcrumbs: Zeigt einen Navigationspfad für die Webseite an.

Wenn Sie mehr darüber erfahren möchten, sehen Sie sich bitte unser YouTube-Video hier an.

CSS & JS minimieren

Ein weiterer kleiner Trick zur Verbesserung der Ladezeiten Ihrer Website ist die Minimierung von HTML, CSS und Javascript. Webflow verfügt über eine Funktion, die dies automatisch erledigt, und Sie können sie einfach nutzen, indem Sie zu den Einstellungen > Publishing-Tab gehen.

Webflow-Subdomain von der Indexierung ausschließen

Im nächsten Schritt sollten Sie auch die Indexierung für Ihre Staging-Domain in den Einstellungen deaktivieren. Die Staging-Domain ist eine separate Domain in Webflow, die für Test- und Entwicklungszwecke verwendet wird. Sie können Ihre Website dort live schalten, bevor Sie sie auf die Hauptdomain deployen, um alle Ihre Tests durchzuführen.

Aber natürlich möchten Sie nicht, dass diese Domain bei Google erscheint, deshalb deaktivieren Sie die Indexierung für die Domain.

Externe Skripte hinzufügen

Das Nächste, was migriert werden muss, sind Ihre externen Skripte. Da Sie alle an einem Ort haben (Ihr Google Sheet), ist es ziemlich einfach, zu den Webflow-Einstellungen zu gehen und sie dort einzufügen.

Hinweis: Sie können Ihre Skripte entweder direkt einfügen oder den Google Tag Manager verwenden. Mit dem Tag Manager können Sie Ihre externen Skripte verwalten und einen einheitlichen Code erstellen, den Sie in Webflow einbetten können. Beide Wege sind in Ordnung, der Google Tag Manager ist jedoch Best Practice.

Tracking

Im Rahmen der Skripte werden Sie sicherlich an Tracking denken. Es gibt Dinge, die durch die Implementierung der Skripte automatisch eingerichtet werden (z. B. das Seitenaufruf-Tracking), aber Sie hatten möglicherweise zuvor andere Ereignisse auf Ihrer WordPress-Website ausgelöst. Für Webflow müssen Sie diese manuell erneut einrichten.

Wie das geht, würde den Rahmen dieses Artikels sprengen, aber behalten Sie es im Hinterkopf.

Die Domain migrieren

Wie bereits mehrfach erwähnt, ist das größte Problem, das bei jeder Migration auftreten kann, ein Fehler bei der Domain-Migration.

Da wir uns aber gut vorbereitet haben, sollte der Prozess für uns reibungslos verlaufen.

Im ersten Schritt möchten wir alle potenziellen Weiterleitungen zum Webflow-Projekt hinzufügen. Gehen Sie dazu zum Tab „Publishing“ in den Projekteinstellungen.

Da wir die Weiterleitungen bereits in unserem Google Sheet vorbereitet haben, können wir den alten und neuen Pfad einfach nacheinander einfügen.

Wenn zum Beispiel die alte URL (https://yoururl.com/old-blog) und die neue (https://yoururl.com/new-blog) lautet, würden wir für die alte URL „/old-blog“ und für die neue „/new-blog“ eingeben.

Der letzte Schritt ist nun, die Domain von Ihrem Domain-Anbieter zu verbinden. Da die Domain derzeit auf den WordPress-Server zeigt, müssen wir sie zuerst entkoppeln.

1. Machen Sie einen Screenshot Ihrer alten Einträge als Backup.
2. Stellen Sie die Nameserver Ihrer Domain auf die Standard-Nameserver ein Ihres Registrars oder DNS-Hosts, falls sie auf benutzerdefiniert eingestellt sind. Für Unterstützung wenden Sie sich an den Helpdesk Ihres Registrars oder lesen Sie dessen Hilfedokumentation zu Nameservern.
3. Entfernen Sie alle A-Einträge auf der Root-Domain (Host @ oder yourdomain.com)
4. Entfernen Sie alle CNAME-Einträge auf der vollständigen Domain (Host www oder www. Oder www.yourdomain.com)
5. Entfernen Sie alle CNAME-Einträge auf jeder Subdomain, die Sie auf Webflow verweisen möchten (z.B. Host blog oder blog. Oder blog.yourdomain.com)

Anschließend können Sie die Domain auf die Webflow-Website verweisen.

1. Gehen Sie zu „Publishing“ und klicken Sie auf die Schaltfläche „Add a custom domain“.
2. Stellen Sie die A-Records und CNAMEs auf die richtigen Werte ein, die jetzt angezeigt werden.
3. Legen Sie die Standarddomain fest (entweder mit oder ohne .www) ⇒ Wichtig: Verwenden Sie dieselbe Version wie zuvor.
4. Veröffentlichen Sie Ihre Webflow-Website.

Hinweis: Es kann ein paar Minuten (oder theoretisch sogar bis zu 24 Stunden) dauern, bis die Domainänderung sichtbar wird.

Damit sind Sie fertig und Ihre Webflow-Website ist nun unter der echten Domain erreichbar. Sie können auch alle eingerichteten Weiterleitungen testen, indem Sie einfach die alte URL eingeben und prüfen, ob sie Sie auf die neue umleitet.

Prüfen Sie auf potenzielle Probleme

Wenn bis hierher alles reibungslos verlaufen ist, glänzt Ihre Website nun in Webflow. Dennoch möchten wir sicherstellen, dass wir alle potenziellen Probleme erkennen, die wir zuvor übersehen haben könnten.

404-Fehler

Unser erster Hinweis sind 404-Fehlermeldungen. Ein 404-Fehler, auch bekannt als „404 Not Found“, ist ein HTTP-Statuscode, der anzeigt, dass der Server eine angeforderte Ressource nicht finden konnte. Dies bedeutet in der Regel, dass die Webseite, auf die ein Benutzer zugreifen möchte, auf dem Server nicht existiert.

Sie können die 404-Fehler Ihrer Website in Ihrer Google Search Console einsehen. Als kleiner Hinweis am Rande: Ein 404-Fehler kann auch angezeigt werden, wenn ein Benutzer die falsche URL eingegeben hat. Stellen Sie also sicher, dass es sich wirklich um einen Fehler (z. B. eine fehlende Weiterleitung) handelt und nicht um eine Fehleingabe.

URLs prüfen

Eine weitere sehr einfache, aber effektive Methode, um zu prüfen, ob Weiterleitungen nicht funktionieren, ist, einfach das Google Sheet mit allen URLs zu öffnen, die Sie zuvor auf der Website hatten, und diese einzeln durchzuklicken, um zu sehen, ob Sie auf der richtigen Seite landen.

Die vollständige Wordpress zu Webflow Migration

Ich hoffe, dieser Artikel hat Ihnen gefallen und Sie können einige Fehler vermeiden, die ich im Laufe der Jahre gemacht habe. Wenn Sie bereit sind, Ihre eigene Website zu migrieren, können Sie unsere vollständige Wordpress zu Webflow Migration Checkliste unten herunterladen.

‍