Guide: Erfolgreiche Migration von WordPress zu Webflow

Einfache Schritt-für-Schritt Anleitung, wie dir die Migration von WordPress zu Webflow gelingt und welche Vorteile Webflow bietet.

WordPress Migration zu Webflow.

Warum von WordPress zu Webflow wechseln?

Immer wieder erreichen mich Anfragen von Kunden, die mit ihrer Website und dem System WordPress nicht zufrieden sind. Die Gründe können dabei ganz unterschiedlich sein:

  • Zu hoher Pflegeaufwand
  • Hohe Schwierigkeit Inhalte zu aktualisieren
  • Unzufriedenheit mit dem Layout/Design
  • Sicherheitsprobleme
  • Schlechte Performance/hohe Ladezeiten

Je nach Unternehmen und Marketingzielen kann Webflow dabei eine passende Lösung sein. Die Migration von WordPress zu Webflow ist ein entscheidender Schritt hin zu mehr Gestaltungsfreiheit und einfacher Pflege der Website.

Schritt-für-Schritt-Anleitung zur Migration zu Webflow

Webflow University.

1. Einarbeitung in Webflow

Jedes neue Tool benötigt Einarbeitung. Nimm dir also genug Zeit, dich mit der Bedienung & den Funktionen von Webflow vertraut zu machen. Der beste Ort, um Webflow zu lernen, ist die Webflow-University. Dort werden alle Themen mit anschaulichen Videos & ausführlichen Dokumentationen erklärt. Ebenfalls hilfreich ist das Webflow Forum, indem von der Community alle aufkommenden Fragen geklärt werden.

Datensicherung von WordPress.

2. Datensicherung der aktuellen Website

Als ersten Schritt solltest du die Daten deiner WordPress-Website als ein Backup sichern. Dafür eignen sich Plugins wie “UpdraftPlus” oder “Backup & Staging - BlogVault”. Alternativ ist es möglich, die Daten per FTP-Programm zu sichern. Es ist immer gut, eine Sicherheitskopie deiner alten Seite zu haben, denn so kannst du später Inhalte wie Texte, Bilder oder Videos direkt in Webflow hochladen.

3. Projekt bei Webflow anlegen

Als Erstes musst du dich bei Webflow registrieren und ein Projekt für deine Website anlegen. Um deine Website später veröffentlichen zu können, benötigst du den passenden Webflow-Preisplan. Bei Webflow gibt es Preispläne für deinen Workspace und für deine Website. In der Regel reicht der kostenlose Plan für dein Workspace. Bei deiner Website kannst du erstmal mit dem Basic-Plan oder CMS-Plan starten. (Du kannst den Siteplan jederzeit später noch upgraden)

Webflow Layout Aufbau.

4. Aufbau deiner Website in Webflow

Bei diesem Punkt gibt es mehrere Wege und du solltest dir sorgfältig überlegen welchen du gehen willst.

Website selbst aufbauen

Mit genug Vorwissen kannst du deine Seite selbst in Webflow aufbauen. Dafür solltest du im Vorfeld genug Zeit einplanen, um dich in Webflow einzuarbeiten. Dieser Weg benötigt die wenigsten Kosten aber die meiste Zeit.

Webflow Template nutzen

Webflow Templates sind quasi fertig erstellte Website-Vorlagen. Sie bieten den Vorteil, dass du vorhandenen Aufbau nutzen und nur durch deine Inhalte ersetzen musst. Um dir möglichst viel Arbeit zu ersparen, solltest du ein Template wählen, dass nahe an deine Vorstellung vom Design & Aufbau kommt. So musst hast du am Ende weniger Aufwand das Webflow-Template anzupassen. Bei diesem Weg empfehle ich dir, dich trotz Template genug in Webflow einzuarbeiten. Templates liegen in einer Preisspanne von 30€ – 130€.

Webdesigner engagieren

Natürlich kannst du für den Aufbau auch einen Designer oder eine Agentur engagieren. So stellst du sicher, dass deine Website professionell nach deinen Vorstellungen erstellt wird. Dieser Weg geht am schnellsten, benötigt aber am meisten Budget.

Wenn du dich entscheidest, deine Seite selbst aufzubauen, empfehle ich dir folgende Vorgehensweise:

  • Anlegen der Seitenstruktur (Sitemap)
  • Anlegen eines Styleguides für Elemente wie Schriften, Farben, Icons etc
  • Layouterstellung der einzelnen Seiten
  • Einpflege der Inhalte wie Texte, Bilder etc.
  • Anpassen der Breakpoints für responsives Verhalten
  • Projekt- und SEO-Einstellungen (Meta-Title, Meta-Description etc.)
  • Finaler Check (Prüfen ob alles richtig angezeigt wird und Links funktionieren)

Webflow CMS anpassen.

5. Webflow-CMS anlegen

Je nachdem, wie viele Inhalte wie z.B. Blogartikel auf deiner alten Website hattest, macht es Sinn das Webflow-CMS zu nutzen. Dafür benötigst du den CMS-Preisplan. Im CMS kannst du deine alten WordPress Daten als CSV-Datei importieren. Beim Upload kannst du die Datenfelder der CSV-Datei den Daten-Feldern im CMS zuordnen. Bilder musst du separat einzeln hochladen.

Webflow SEO Einstellungen.

6. SEO-Einstellungen

Meta-Tags übertragen

Achte darauf, dass du wichtige SEO-Elemente wie Meta-Title, Meta-Description, Alt-Tags & Open-Graph-Images für deine Seiten angibst. Die Einstellungen dazu findest du auf dem “Zahnrad-Icon” der jeweiligen Projekt-Seiten. Das ist entscheidend dafür, dass deine Website auch weiterhin gut in Suchmaschinen gefunden wird.

301-Weiterleitungen einrichten

Es ist sehr wahrscheinlich, dass sich die URLs von deiner alten WordPress zur neuen Website unterscheiden. Damit bestehende Sumaschinen-Rankings & Backlinks nicht verloren gehen, benötigst du 301-Weiterleitungen. Die Weiterleitungen kannst du in Webflow in deinen Projekt-Einstellungen unter dem Reiter “Publishing” anlegen. Alternativ gibt es eine Chrome-Erweiterung von Finsweet, mit der du die Weiterleitungen als Tabelle hochladen kannst.

SEO-Einstellungen in Webflow

In Webflow-Projekteinstellungen gibt es den Reiter “SEO”. Dort gibt es die Möglichkeit, die Indexierung der webflow.io Subdomain zu verhindern (empfohlen) und die Möglichkeit, automatisch eine Sitemap zu generieren (empfohlen). Bei Bedarf könntest du auch eine die Sitemap deiner Website manuell angeben.

7. Testing & Bugfixing

Wenn deine Website fertig aufgebaut ist, solltest du sie noch einmal gründlich prüfen. Mögliche Punkte wären:

  • Werden alle Inhalte richtig dargestellt?
  • Hast du alle Inhalte der alten Website übernommen?
  • Funktionieren alle Verlinkungen?
  • Wird die Website auf kleinere Geräten (Tablet, Smartphone) ordentlich angezeigt?
  • Wird die Website schnell geladen?

Alternativ kannst du auch eine hilfreiche Pre-Launch Checkliste verwenden, damit du keine wichtigen Themen vergisst.

8. Verbinden deiner Domain

Nun ist es an der Zeit, endlich mit deiner Website live zu gehen! Dafür musst deine Domain mit deinem Webflow-Projekt verbinden. Navigiere hierzu bei den Projekteinstellungen zum Reiter “Publishing”. Sobald du deinen Domain-Namen eingegeben hast, müssen noch die DNS-Einstellungen bei deinem Domain-Anbieter aktualisiert werden. Falls du auf Probleme stößt, gibt es gute Tutorials auf der Webflow-University zu diesem Thema.

Abschlussgedanken

Die Umstellung von WordPress auf Webflow kann erstmal als eine Herausforderung wirken. Mit der richtigen Vorbereitung und Planung kann dieser Prozess aber möglichst reibungslos gestaltet werden. Manche Funktionen & Plugins von WordPress lassen sich noch nicht direkt in Webflow umsetzen. Dies lässt sich aber meistens mit ein wenig Kreativität und individueller Entwicklung lösen. Mit der ständigen Erweiterung seiner Funktionen ist Webflow nicht nur ein modernes Website-Tool, sondern bieten Unternehmen viel kreativen Wachstum & innovative Technik.

Kontaktiere mich gerne, falls du Fragen zu den einzelnen Schritten hast, mehr über Webflow erfahren möchtest oder Hilfe bei deiner Migration brauchst.

Portrait von Lukas Rudrof, Webflow Designer aus Nürnberg.
Lukas Rudrof
August 12, 2024