Hochwertigen Content zu schreiben und gut zu bewerben ist eine hervorragende Strategie, um den Such-Traffic Ihrer Website zu steigern, besonders über einen Zeitraum von 6 bis 12 Monaten oder länger. Wir bei DelightChat wollten jedoch etwas Mutiges ausprobieren, um schnellere Ergebnisse zu sehen.
Durch umfangreiche Keyword-Recherche hatten wir einen wahren Schatz von über 300 Long-Tail-Keywords rund um die Phrase „beste Shopify-Apps“ entdeckt, nach denen unserer Meinung nach die Zielgruppe von DelightChat – E-Commerce-Shop-Betreiber:innen, die die Shopify-Plattform nutzen – suchte.
Der übliche Weg, diese Keywords zu bedienen, wäre gewesen, die Daten zu sammeln, den Content jeder Landingpage zu schreiben und alle über 300 Seiten über mehrere Monate hinweg zu veröffentlichen. Wir wollten jedoch schnell vorankommen und einen Weg finden, dieses Projekt in 1 Woche umzusetzen. Wir entwickelten einen Weg, unsere Engineering-Fähigkeiten zu nutzen, um das Internet nach Rohdaten zu durchsuchen, die wir dann manuell kategorisieren, taggen und wo nötig sogar umschreiben konnten.
Diese Methodik nennt sich Programmatic SEO, und so generieren Unternehmen wie Tripadvisor, Thomas Cook, Nomad List und andere Tausende Landingpages, die auf Long-Tail-Keywords abzielen. Wenn Sie mehr erfahren möchten, hier ist eine detaillierte Fallstudie von Marketing Examples.
Das Endergebnis? Werfen Sie einen Blick auf die Startseite des Best-Shopify-Apps-Projekts, die alle 324 Landingpages enthält, die wir in diesem Projekt erstellt haben.
Warum wir uns für dieses Projekt für Webflow entschieden haben
Die DelightChat-Website läuft auf Webflow. Unser erster Gedanke war, dieses Programmatic-SEO-Projekt mit Code umzusetzen, doch wir entschieden uns, tiefer zu graben und einen Weg zu finden, es mit Webflow zu machen.
Es gab zahlreiche Vorteile, weiterhin Webflow zu nutzen, doch folgende stachen für mich besonders hervor:
- Ein konsistentes Design und Erlebnis für Website-Besucher:innen
- Die Möglichkeit für unser Marketingteam, das Design der Projektseiten zu ändern, ohne die Hilfe des Engineering-Teams zu benötigen
Wie sich herausstellte, verfügt Webflow über eine leistungsstarke CMS-API und eine umfangreiche Dokumentation, die leicht zu navigieren ist. Unsere Anforderungen waren:
- Neue CMS-Collection-Elemente mit einem definierten Slug erstellen
- Verschiedenen Content wie Textfelder, Rich Text und Bilder zu jedem Element hinzufügen
- Die Multi-Reference-Funktion nutzen, um zwei separate CMS-Collections zu verbinden (aus Gründen, die im nächsten Abschnitt erklärt werden)
Nach kurzem Durchlesen wussten wir, dass wir das Projekt mit Webflow einwandfrei umsetzen konnten.
Die CMS-Collection präzise für unser Projekt strukturieren
Bevor wir Daten an Webflow senden konnten, mussten wir zunächst die richtige CMS-Collection-Struktur für unser Projekt erstellen.
Unser Projekt hatte zwei Schlüsselkomponenten:
1. Einzelne Shopify-Apps und ihre zugehörigen Daten – „Apps“
2. Landingpages, die eine oder mehrere Shopify-Apps enthalten würden – „Best Shopify Apps“
Die Informationen zu jeder App und den Landingpages in einer einzigen Collection zu speichern, erwies sich als umständlich.
Glücklicherweise verfügt Webflows CMS über ein Element namens Multi-Reference-Feld, mit dem Sie schnell auf Elemente aus einer anderen CMS-Collection verweisen und all deren Daten innerhalb der übergeordneten Collection anzeigen können.
Wir erstellten 2 Collections, die wir dann mithilfe der Multi-Reference-Feld-Funktion verbinden konnten.
Die erste Collection, genannt Apps, enthält alle Daten der einzelnen Shopify-Apps. Die zweite Collection, genannt Best Shopify Apps, enthält Listicles mit mehreren Shopify-Apps, indem sie auf die Apps-Collection verweist.
Seiten mit der Webflow-CMS-API generieren
Das Durchlesen der CMS-API-Dokumentation war einfach und unkompliziert. Der Code, den wir in unserem Projekt verwendeten, unterscheidet sich nicht sehr von den Beispiel-Code-Snippets auf der Dokumentationsseite. Das liegt daran, dass wir Webflows Beispielcode kopiert und eingefügt und nur wo nötig angepasst haben. Einfach, oder?
Ein neues CMS-Collection-Element erstellen
Wir nutzten die Code-Snippets aus Webflows API-Dokumentationsseite, passten den Code leicht an und begannen in kürzester Zeit, neue Collection-Elemente zu erstellen.
Derselbe API-Aufruf wurde genutzt, um alle Collection-Felder in jedem Element zu befüllen, und wir konnten alle Arten von Daten senden, etwa eine Zahl im Feld „Durchschnittsbewertung“ oder Text im Feld „Kurzbeschreibung“. Ein Bild hochzuladen ist so einfach wie das Angeben einer Bild-URL im Feld „App-Bild“.
Es war für uns entscheidend, den Slug für jede URL zu definieren, was wir mithilfe des Slug-Felds in der API tun konnten.
Multi-Reference-Elemente in jedem Collection-Element hinzufügen
Wie zuvor erklärt, hatte unser Projekt zwei Schlüsselkomponenten. Wir mussten die beiden mithilfe eines Multi-Reference-Felds in den Best-Shopify-Apps-Collection-Elementen verknüpfen.
Das war mit der API sehr einfach. Um eine Referenz hinzuzufügen, brauchten wir nur die eindeutige Element-ID des Apps-Collection-Elements.
Unser Engineering-Team stellte fest, dass die Nutzung von Webflows CMS-API schnell und einfach war. Die umfangreiche Dokumentation erleichterte den Einstieg. Wir konnten 8 CMS-Collection-Elemente pro Sekunde hochladen, was bedeutet, dass man theoretisch 4.800 Seiten in 10 Minuten generieren kann.
Die Landingpages im Webflow Editor erstellen
Sobald wir alle Daten am richtigen Platz hatten, war das Erstellen des Designs der Landingpages der einfachste Schritt im Prozess.
Der Webflow-Marketplace bietet Dutzende hochwertige Vorlagen sowie großartige Tutorials, wie man mit Webflow beeindruckende Websites baut. Deshalb gehen wir nicht tief auf den eigentlichen Design-Teil ein.
Wir zeigen Ihnen jedoch, wie einfach es war, alle benötigten Daten auf die Seite zu holen – sogar die Daten aus verknüpften Elementen im Multi-Reference-Feld.
Zunächst entschieden wir uns für ein einfaches Design, das die Best-Shopify-Apps-Landingpages wie Blogbeiträge aussehen ließ. Es war einfach, die Seite mit Daten aus den Collection-Feldern zu befüllen. Wir mussten nur das Collection-Feld auswählen.
Ebenso unkompliziert war es dann, Daten aus dem Multi-Reference-Feld „Verknüpfte Apps“ abzurufen, das in unserem Fall alle Daten abrief, die wir zu einzelnen Apps benötigten. So einfach ist das!
Da das Hauptziel unseres Projekts darin bestand, bei der Google-Suche zu ranken, war es entscheidend, den Meta-Titel und die Meta-Beschreibung für jede Seite so festzulegen, dass sie zur Suchintention der Nutzer:innen passten.
Webflow macht das extrem einfach, indem es Ihnen erlaubt, CMS-Collection-Felder in den Metadaten zu referenzieren. Das bedeutet, dass jede Landingpage einen eindeutigen Meta-Titel und eine eindeutige Beschreibung hatte. Bazinga!
Ein CMS, das Programmatic SEO unterstützt
Unsere Erfahrung mit Webflow war phänomenal. Ohne die CMS-API hätten wir nicht in der Lage sein können, über 300 Seiten in nur 1 Woche zu veröffentlichen. Wie Sie vielleicht bereits wissen, sind Webflow-Seiten schnell und SEO-optimiert. Das half uns, in nur 6 Wochen auf 6.000 tägliche Such-Impressionen zu wachsen.
Wenn Sie planen, Programmatic SEO zu nutzen und Ihre organischen Wachstumsbemühungen zu skalieren, ist Webflows CMS eine überzeugende Option.
