Lesezeit: ca. 12 Minuten | Niveau: Einsteiger bis Fortgeschrittene
Du hast eine schöne Webflow-Website – aber Google findet sie kaum? Dieser Guide zeigt dir Schritt für Schritt, wie du Webflow SEO richtig umsetzt: von den technischen Grundlagen bis zur vollständigen Checkliste.
Ist Webflow gut für SEO?
Wer sich mit No-Code-Tools und SEO beschäftigt, stösst schnell auf hartnäckige Mythen: No-Code sei schlecht für Suchmaschinen, der generierte Code sei aufgebläht, und richtige SEO funktioniere nur mit selbst geschriebenem Code. All das ist schlichtweg falsch – zumindest wenn es um Webflow geht.
Webflow erzeugt sauberen, semantisch korrekten HTML-Code und gibt dir gleichzeitig die volle Kontrolle über alle SEO-relevanten Elemente. Im direkten Vergleich mit WordPress + Elementor oder Wix schlägt Webflow in Sachen technischer SEO-Basis sogar deutlich häufiger die Konkurrenz.
Kurz gesagt: Webflow ist eine der SEO-freundlichsten Plattformen auf dem Markt – wenn man sie richtig nutzt. Genau das zeigt dir dieser Guide.
Die SEO-Vorteile von Webflow auf einen Blick
Bevor wir in die praktische Umsetzung einsteigen, lohnt es sich, die strukturellen Vorteile zu verstehen, die Webflow gegenüber anderen Plattformen bietet.
Sauberer Code ohne Ballast
Webflow schreibt keinen aufgeblähten Code. Im Gegensatz zu Page-Buildern wie Elementor, die dutzende leere Wrapper-Divs und unnötige Inline-Styles erzeugen, bleibt der Webflow-Output schlank und für Crawler leicht lesbar. Das bedeutet: Suchmaschinen-Bots finden und indizieren deine Inhalte schneller.
Hosting mit globalem CDN inklusive
Webflow-Hosting läuft auf Fastly, einem der schnellsten Content Delivery Networks der Welt. Deine Website wird von Servern ausgeliefert, die geografisch nah am Besucher liegen – das verbessert die Ladezeit und damit auch die Core Web Vitals.
Integrierte SEO-Tools
Meta-Tags, Sitemap-Generierung, Robots.txt, 301-Redirects, kanonische URLs und Bildoptimierung sind alle direkt in Webflow eingebaut – kein Plugin-Chaos wie bei WordPress.
Automatisches HTTPS
Jede Webflow-Seite läuft automatisch über HTTPS. Das ist nicht nur ein Ranking-Signal bei Google, sondern auch eine Grundvoraussetzung für modernes Web.
Grundeinstellungen: Webflow SEO richtig konfigurieren
Bevor du an deinen Inhalten arbeitest, müssen die technischen Grundeinstellungen stimmen. Diese findest du in den Site Settings deines Webflow-Projekts.
Sitemap automatisch generieren
Eine Sitemap ist wie eine Landkarte für Google: Sie zeigt dem Crawler, welche Seiten es auf deiner Website gibt und wie sie zueinander stehen. Webflow kann diese automatisch erstellen und aktuell halten.
📍 Navigation: Site Settings → SEO → Auto-generate Sitemap → aktivieren
.avif)
Nach der Aktivierung ist deine Sitemap unter deinedomain.com/sitemap.xml erreichbar. Diese URL trägst du später in der Google Search Console ein.
Code minifizieren für bessere Performance
Unter Hosting → Advanced Publishing Options findest du die Möglichkeit, HTML, CSS und JavaScript zu komprimieren (minifizieren). Aktiviere alle drei Optionen – das reduziert die Dateigrösse und beschleunigt das Laden deiner Website spürbar.
.avif)
Webflow.io-Subdomain von der Indexierung ausschliessen
Deine Webflow-Staging-URL (z. B. deinprojekt.webflow.io) ist öffentlich zugänglich. Wenn Google diese zusammen mit deiner echten Domain indexiert, hast du Duplicate Content – ein ernstes SEO-Problem.
📍 Navigation: Site Settings → SEO → Disable Webflow Subdomain Indexing → aktivieren
.avif)
Robots.txt konfigurieren
Mit der Robots.txt kannst du Suchmaschinen mitteilen, welche Bereiche deiner Website sie crawlen dürfen und welche nicht. In Webflow findest du diesen Editor unter Site Settings → SEO.
Typische Anwendungsfälle: Admin-Bereiche, Danke-Seiten nach Formularen oder interne Testseiten von der Indexierung ausschliessen.
User-agent: *
Disallow: /danke
Disallow: /intern
Allow: /
On-Page SEO in Webflow: Schritt für Schritt
Die Headline-Hierarchie: H1 bis H6 richtig einsetzen
Die Überschriftenstruktur ist eines der wichtigsten On-Page-SEO-Signale. Google liest die Überschriften-Hierarchie, um zu verstehen, worum es auf deiner Seite geht und wie die Inhalte zusammenhängen.
Die Grundregel: Jede Seite hat genau eine H1 – sie beschreibt das Hauptthema der Seite und enthält das primäre Keyword. Alle weiteren Abschnitte werden mit H2 eingeleitet, deren Unterabschnitte mit H3, und so weiter. Überschlagte Ebenen (z. B. direkt von H2 zu H4) sind zu vermeiden.

Wichtig in Webflow: Optik und Semantik trennen! Ein Heading-Element (H2, H3 etc.) bestimmt die SEO-Struktur, nicht die Grösse des Textes. Verwende CSS-Klassen, um Grössen unabhängig vom Heading-Level zu steuern – so kannst du beispielsweise einem H3 die visuelle Grösse einer H1 geben, ohne die semantische Struktur zu brechen.
Das Audits-Panel in Webflow (das Sechseck-Icon in der linken Sidebar des Designers) warnt dich, sobald du eine Überschrift übersprungen oder vergessen hast. Nutze dieses Tool vor jedem Publish.
.avif)
Meta Title & Meta Description: Die Visitenkarte in Google
Meta Title und Meta Description sind das Erste, was ein potenzieller Besucher in den Suchergebnissen von dir sieht. Sie entscheiden darüber, ob jemand klickt oder nicht.
Meta Title:
- Enthält das primäre Keyword (möglichst am Anfang)
- Maximal 60 Zeichen, sonst wird er in Google abgeschnitten
- Eindeutig pro Seite – nie denselben Title auf mehreren Seiten verwenden
Meta Description:
- 120–160 Zeichen
- Kein direktes Ranking-Signal, aber entscheidend für die Klickrate (CTR)
- Erklärt dem Nutzer klar, was ihn auf der Seite erwartet
- Enthält einen indirekten Call-to-Action
📍 Navigation im Webflow Designer: Seite auswählen → Seiten-Icon → Zahnrad-Icon neben dem Seitennamen → SEO Settings
.avif)
Für CMS-Collections (z. B. Blogartikel): Nutze dynamische Felder, um Meta Title und Description automatisch aus deinen CMS-Feldern zu befüllen. Du kannst eigene CMS-Felder speziell für SEO anlegen (z. B. „SEO Title“ und „SEO Description“) und diese mit den Meta-Feldern verknüpfen – so hast du maximale Kontrolle ohne manuellen Aufwand.
.avif)
URL-Struktur: Lesbare Slugs mit Keywords
Die URL deiner Seite ist ein wichtiges SEO-Signal. Ein gut strukturierter Slug zeigt Google auf einen Blick, worum es auf der Seite geht.
Gut: deinedomain.ch/blog/webflow-seo-guide
Schlecht: deinedomain.ch/p?id=4392
Regeln für gute Slugs:
- Nur Kleinbuchstaben, Wörter durch Bindestriche getrennt
- Das primäre Keyword enthalten
- So kurz wie möglich, aber präzise
- Keine Umlaute (ä → ae, ü → ue, ö → oe)
Bei übergeordneten Seiten bietet sich eine Ordnerstruktur an: /leistungen/webdesign oder /blog/seo-tipps. Das hilft Google, die Hierarchie deiner Website zu verstehen.
Alt-Texte für alle Bilder
Alt-Texte erfüllen zwei Aufgaben: Sie beschreiben Suchmaschinen den Bildinhalt (Google kann Bilder noch nicht zuverlässig „sehen“) und ermöglichen es Screenreadern, das Bild für sehbehinderte Menschen zu beschreiben.
Best Practice:
- Beschreibend und konkret: „Webflow SEO-Einstellungen im Designer“ statt „Screenshot“
- Das relevante Keyword natürlich einbauen, nicht erzwungen
- Dekorative Bilder in Webflow als „Decorative“ markieren (dann wird kein Alt-Text erwartet)
.avif)
Technisches SEO: Performance, Bilder & Core Web Vitals
Warum Page Speed so wichtig ist
Google hat Page Speed offiziell als Ranking-Faktor bestätigt – sowohl für Desktop als auch für Mobile. Noch wichtiger: Wenn eine Seite länger als 3 Sekunden braucht, um zu laden, verlässt ein Grossteil der Besucher die Seite, bevor sie den Inhalt auch nur gesehen hat. Das verschlechtert deine Bounce Rate und damit indirekt auch dein Ranking.
Die sogenannten Core Web Vitals sind Googles Messgrössen für die Nutzererfahrung:
- LCP (Largest Contentful Paint): Wie schnell lädt das grösste sichtbare Element? Ziel: unter 2,5 Sekunden
- INP (Interaction to Next Paint): Wie reaktionsschnell ist die Seite bei Interaktion? Ziel: unter 200ms
- CLS (Cumulative Layout Shift): Wie sehr „springt“ der Inhalt beim Laden? Ziel: unter 0,1
.avif)
Bilder optimieren in Webflow
Bilder sind in den meisten Fällen der grösste Performance-Killer auf einer Website. Webflow bietet integrierte Tools zur Optimierung:
Moderne Bildformate nutzen: WebP und AVIF sind deutlich kleiner als JPEG oder PNG bei gleicher Qualität. Webflow wandelt Bilder beim Upload automatisch um – stelle sicher, dass diese Funktion aktiv ist.
Bilder komprimieren: Lade Bilder nicht grösser hoch als notwendig. Ein Bild, das auf der Website 800px breit angezeigt wird, muss nicht mit 3000px hochgeladen werden. Tools wie TinyPNG oder Squoosh helfen bei der Vorkomprimierung.
Lazy Loading aktivieren: Bilder, die sich unterhalb des sichtbaren Bereichs (below the fold) befinden, sollten erst geladen werden, wenn der Nutzer dort hinscrollt. In Webflow aktivierst du das im Element-Panel unter „Loading“ → „Lazy“.
.avif)
Achtung: Das Hero-Bild (das erste sichtbare Bild, meist Above the fold) sollte nicht auf Lazy geladen werden – das würde deinen LCP-Wert verschlechtern. Setze dieses Bild auf „Eager“.
Interne Verlinkung & Navigation
Warum interne Links für SEO entscheidend sind
Interne Links verbinden deine Seiten untereinander. Für SEO sind sie aus zwei Gründen wichtig: Erstens helfen sie Google-Crawlern, alle Unterseiten deiner Website zu entdecken und zu indexieren. Zweitens verteilen sie sogenannte „Link Equity“ – wer viele externe Links auf seine Startseite hat, kann durch interne Links einen Teil dieser SEO-Kraft auf Unterseiten weitergeben.
Best Practices für interne Links:
- Ankertexte mit Bedeutung: Verlinke nie mit generischen Texten wie „hier klicken“ oder „mehr“. Verwende stattdessen beschreibende Texte: „Unsere Webflow-Leistungen entdecken“ oder „SEO-Checkliste herunterladen“.
- Logische Navigation: Deine Hauptnavigation sollte die wichtigsten Seiten verlinken. Google gewichtet Links in der Navigation höher als Links im Fussbereich.
- Breadcrumbs: Bei mehreren Hierarchieebenen helfen Breadcrumbs sowohl Nutzern als auch Suchmaschinen, die Struktur zu verstehen.
-
.avif)
Sitestruktur mit Webflow Pages organisieren
In Webflow kannst du Seiten in Ordner organisieren, was sich direkt in der URL-Struktur widerspiegelt. Eine klare, logische Seitenstruktur hilft Google zu verstehen, welche Seiten thematisch zusammengehören.
Google Search Console & Analytics einrichten
Google Search Console anbinden
Die Google Search Console (GSC) ist das wichtigste kostenlose SEO-Tool überhaupt. Sie zeigt dir, für welche Keywords du rankst, wie viele Klicks du erhältst und ob Google technische Probleme auf deiner Seite findet.
Einrichtung in 4 Schritten:
Schritt 1: Gehe auf search.google.com/search-console und füge deine Domain hinzu.
Schritt 2: Verifiziere die Inhaberschaft. Die einfachste Methode ist die DNS-Verifizierung über deinen Domain-Anbieter. Alternativ kannst du den HTML-Meta-Tag kopieren und in Webflow unter Site Settings → Custom Code → Head Code einfügen.
Schritt 3: Klicke im linken Menü der GSC auf „Sitemaps“ und gib deine Sitemap-URL ein: deinedomain.ch/sitemap.xml. Bestätige mit „Senden“.

Schritt 4: Warte 48–72 Stunden. Google beginnt dann mit dem Crawling und du siehst erste Daten in der GSC.
Kanonische URL in den GSC-Daten prüfen
Überprüfe regelmässig den Bericht „Abdeckung“ in der GSC. Dort siehst du, welche Seiten indexiert sind und welche Google aus verschiedenen Gründen ausgeschlossen hat. Fehler solltest du zügig beheben.
SEO-Migration zu Webflow: So verlierst du kein Ranking
Wenn du eine bestehende Website (z. B. von WordPress) zu Webflow migrierst, besteht das grösste Risiko darin, bestehende Rankings zu verlieren. Das passiert meistens durch fehlende Redirects – wenn eine alte URL (z. B. /news/artikel-1) nicht mehr existiert und auch nicht auf die neue URL (z. B. /blog/artikel-1) weiterleitet, sieht Google eine 404-Fehlerseite. Das zerstört das aufgebaute Ranking dieser Seite.
301-Redirects in Webflow anlegen
301-Redirects sagen Google: „Diese Seite ist permanent an eine neue Adresse umgezogen – übertrage bitte das Ranking dorthin.“
📍 Navigation: Site Settings → Hosting → 301 Redirects
.avif)
Vorgehensweise bei einer Migration:
- Exportiere alle bestehenden URLs deiner alten Website (z. B. mit Screaming Frog)
- Erstelle eine Mapping-Tabelle: Alte URL → Neue URL
- Trage alle Redirects in Webflow ein – du kannst diese als CSV importieren
- Überprüfe nach dem Launch mit der GSC, ob Google Crawl-Fehler meldet
Erweiterte SEO-Techniken
Kanonische URLs (Canonical Tags)
Wenn derselbe oder sehr ähnlicher Inhalt unter mehreren URLs erreichbar ist (z. B. durch Filter-Parameter oder mehrsprachige Seiten), entsteht Duplicate Content. Google mag das nicht und kann unklar werden, welche Version er indexieren soll.
Canonical Tags lösen dieses Problem: Sie sagen Google, welche URL die „offizielle“ Hauptversion ist. In Webflow setzt du Canonical Tags in den SEO-Einstellungen jeder Seite.
Open Graph für Social Media
Open Graph Tags bestimmen, wie deine Seite aussieht, wenn sie auf LinkedIn, Facebook oder anderen Plattformen geteilt wird. Ein optimiertes OG-Bild und ein prägnanter Titel steigern die Klickrate bei Social-Media-Beiträgen erheblich.
In Webflow findest du die Open-Graph-Einstellungen ebenfalls im SEO-Panel jeder Seite. Empfohlene Bildgrösse: 1200 × 630 Pixel.
.avif)
Strukturierte Daten (Schema.org)
Strukturierte Daten helfen Google, den Inhalt deiner Seite besser zu verstehen und ermöglichen sogenannte Rich Results – erweiterte Suchergebnisse mit Bewertungssternen, FAQ-Klappboxen, Breadcrumbs oder Veranstaltungsdaten.
In Webflow fügst du Schema.org-Markup als JSON-LD im Custom Code Bereich ein (Site Settings → Custom Code oder im Page-Code per Seite). Für Blogartikel empfiehlt sich das Article-Schema, für lokale Unternehmen LocalBusiness, für FAQs das FAQPage-Schema.
Beispiel für einen Blogartikel:
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Webflow SEO 2025: Der vollständige Guide",
"author": {
"@type": "Person",
"name": "Dein Name"
},
"datePublished": "2025-01-15"
}
Barrierefreiheit als SEO-Faktor
Barrierefreiheit (Accessibility) und SEO überschneiden sich stärker als die meisten denken. Suchmaschinen-Crawler verhalten sich ähnlich wie Screenreader: Beide sind auf Text und korrekte HTML-Struktur angewiesen.
Achte in Webflow auf:
- Ausreichende Farbkontraste (WCAG-Mindeststandard: 4,5:1 für normalen Text)
- ARIA-Labels für interaktive Elemente (Buttons ohne sichtbaren Text müssen ein Label haben)
- Fokus-Styles für Tastaturnavigation (nicht deaktivieren!)
- Sinnvolle Tab-Reihenfolge
Die komplette Webflow SEO-Checkliste
Nutze diese Checkliste beim Launch jeder neuen Webflow-Seite oder bei einem SEO-Audit.
Technische Grundlagen
- ☐ Auto-generate Sitemap aktiviert (Site Settings → SEO)
- ☐ Sitemap in Google Search Console eingetragen
- ☐ Webflow.io-Subdomain-Indexierung deaktiviert
- ☐ HTML, CSS und JS minifiziert (Hosting → Advanced Publishing Options)
- ☐ HTTPS aktiv (bei Webflow standardmässig der Fall)
- ☐ Robots.txt konfiguriert
On-Page SEO
- ☐ Jede Seite hat genau eine H1
- ☐ Heading-Hierarchie ist lückenlos (H1 → H2 → H3, keine Sprünge)
- ☐ Meta Title: Keyword enthalten, max. 60 Zeichen, einzigartig
- ☐ Meta Description: Prägnant, CTA enthalten, 120–160 Zeichen
- ☐ URL-Slugs: Lesbar, Keyword enthalten, keine Umlaute
- ☐ Alle Bilder haben Alt-Texte (ausser dekorative, die als solche markiert sind)
- ☐ Interne Links haben beschreibende Ankertexte
Performance & Core Web Vitals
- ☐ Hero-Bild auf „Eager“ gesetzt, alle anderen auf „Lazy“
- ☐ Bilder im WebP- oder AVIF-Format hochgeladen
- ☐ Google PageSpeed Insights-Score für Mobile > 80
- ☐ LCP < 2,5 Sekunden, CLS < 0,1
Erweiterte Massnahmen
- ☐ Open Graph Tags (Bild, Titel, Beschreibung) ausgefüllt
- ☐ Canonical Tags gesetzt (bei Duplicate-Content-Risiko)
- ☐ 301-Redirects für alle geänderten URLs eingerichtet
- ☐ Schema.org-Markup für relevante Seitentypen vorhanden
- ☐ Google Analytics (GA4) eingebunden
- ☐ Google Search Console eingerichtet und Sitemap eingereicht
- ☐ Webflow Audits-Panel vor jedem Publish gecheckt (0 Fehler)
- ☐ SEORCH oder Screaming Frog für externen Faktencheck genutzt
- ☐ 404-Seite individuell gestaltet und intern weiterleitend
.avif)
Fazit: Webflow SEO ist einfacher als du denkst – wenn du es systematisch angehst
Webflow nimmt dir viele technische SEO-Hürden ab, die auf anderen Plattformen aufwendige Plugins oder Entwicklerarbeit erfordern. Die integrierten Tools für Sitemap, Meta-Tags, Redirects und Bildoptimierung sind solide und gut zugänglich.
Der entscheidende Unterschied zwischen einer Webflow-Website, die in Google sichtbar ist, und einer, die kaum gefunden wird: Konsequente Umsetzung der Grundlagen. Heading-Hierarchie, beschreibende Meta-Tags, schnelle Ladezeiten und eine saubere interne Verlinkung – das sind keine Hexerei, sondern handwerkliches Können.
Nutze diese Checkliste bei jedem neuen Projekt und führe alle drei bis sechs Monate einen SEO-Audit mit der Google Search Console und einem externen Tool wie SEORCH durch. So stellst du sicher, dass deine Rankings langfristig stabil sind und wachsen.
Hast du Fragen zu Webflow SEO oder möchtest du wissen, wie deine Website aktuell abschneidet? Schreib uns – wir helfen dir gerne weiter.

.avif)


