Webflow SEO: So richten Sie Ihre Webflow-Website für Google ein

Eine Webflow-Website sieht schnell gut aus. Ob Google sie findet, liegt aber an Einstellungen, Inhalten und Struktur. Ein Plugin brauchen Sie für Webflow SEO nicht, weil die wichtigsten Einstellungen eingebaut sind. Einiges erfordert allerdings Custom Code, und manche Fehler passieren gerade deshalb, weil vieles automatisch läuft. Wir gehen der Reihe nach durch, wo Sie was einstellen, worauf Sie bei CMS-Vorlagen achten und wo die Grenzen liegen.

Ist Webflow gut für SEO?

Webflow bietet eine solide technische Grundlage. Der Designer erzeugt schlanken HTML- und CSS-Code, die Website läuft über HTTPS, und die Auslieferung erfolgt laut Webflow über die Content Delivery Networks von Amazon CloudFront und Fastly. Seitentitel, Beschreibungen, URLs, Weiterleitungen, Sitemap und robots.txt lassen sich ohne Zusatzsoftware pflegen.

Diese Grundlage ersetzt aber keine Suchmaschinenoptimierung. Ob eine Seite rankt, hängt davon ab, ob sie eine Suchanfrage besser beantwortet als die Konkurrenz, wie sie intern verlinkt ist und ob andere Websites auf sie verweisen. Das gilt für Webflow genauso wie für jedes andere System.

Die SEO-Einstellungen in Webflow im Überblick

Webflow unterscheidet zwischen Einstellungen für die ganze Website (Site Settings) und Einstellungen für einzelne Seiten (Page Settings). Da viele Anleitungen die englischen Bezeichnungen verwenden, nennen wir sie mit. Die Seiteneinstellungen erreichen Sie im Designer über den Bereich Pages.

Meta-Titel und Beschreibung

Für jede statische Seite legen Sie in den Seiteneinstellungen einen Titel und eine Beschreibung für Suchmaschinen fest. Webflow zeigt dazu eine Vorschau des Suchergebnisses. Der Titel sollte das wichtigste Suchwort möglichst weit vorn enthalten und zum Inhalt der H1 passen. Die Beschreibung ist kein direkter Rankingfaktor, entscheidet aber mit darüber, ob jemand auf Ihr Ergebnis klickt.

In denselben Einstellungen finden Sie die Angaben für Open Graph. Sie bestimmen, mit welchem Titel, Text und Bild eine Seite erscheint, wenn jemand den Link in sozialen Netzwerken oder Messengern teilt.

Überschriften vergeben Sie im Designer direkt am Element, von H1 bis H6. Das Aussehen steuern Sie getrennt davon über Klassen. So kann eine H2 wie eine H1 aussehen, ohne die Gliederung zu verfälschen. Jede Seite sollte genau eine H1 haben.

Mit CMS-Vorlagen viele Seiten auf einmal optimieren

Bei Seiten aus dem CMS, etwa Blogartikeln oder Referenzen, stellen Sie Titel und Beschreibung nicht einzeln ein, sondern in der Vorlage der Sammlung. Dort setzen Sie Platzhalter für Felder ein. Aus „Feld Name + Firmenname“ wird für jeden Eintrag ein eigener Titel.

Für die Sammlungen ist dieses Vorgehen sinnvoll:

• Legen Sie in jeder Sammlung eigene Felder für SEO-Titel und SEO-Beschreibung an, statt einfach den Namen oder den Anreißer zu übernehmen.
• Begrenzen Sie die Zeichenzahl dieser Felder, damit Titel und Beschreibung im Suchergebnis nicht abgeschnitten werden.
• Sehen Sie ein eigenes Feld für das Open-Graph-Bild vor, wenn das Titelbild dafür ungeeignet ist.
• Planen Sie ein Feld für den Alt-Text wichtiger Bilder, damit Redakteure ihn pflegen können.
• Verknüpfen Sie Einträge über Verweisfelder mit Leistungs- oder Kategorieseiten. So entsteht interne Verlinkung, die Google die Zusammenhänge zeigt.

Auch Webflow selbst empfiehlt, Meta-Angaben aus CMS-Feldern zu füllen und Zeichenlimits zu setzen. Achten Sie außerdem darauf, dass jeder Eintrag genug eigenen Inhalt hat. Viele fast gleiche CMS-Seiten mit wenig Text bringen selten Rankings und können sich gegenseitig Konkurrenz machen.

Sprechende URLs

Die Adresse einer statischen Seite legen Sie in den Seiteneinstellungen über den Slug fest, bei Ordnern entsteht daraus ein Pfad wie /leistungen/webdesign. CMS-Einträge liegen unter dem Pfad ihrer Sammlung, also etwa /blog/artikelname. Der Slug eines Eintrags wird aus dem Namen erzeugt und lässt sich anpassen.

Gute URLs sind kurz, verständlich und enthalten das Thema der Seite. Umlaute und Füllwörter lassen Sie besser weg. Planen Sie die Pfade der Sammlungen vor dem Start: Wird der Slug einer Sammlung später geändert, ändern sich die Adressen aller Einträge, und jede alte Adresse braucht eine Weiterleitung.

301-Weiterleitungen

Wenn Sie eine Seite löschen, verschieben oder umbenennen, leiten Sie die alte Adresse per 301 auf die passende neue Seite weiter. In Webflow tragen Sie dazu in den Website-Einstellungen den alten Pfad und das neue Ziel ein und veröffentlichen die Website. So landen Besucher und Suchmaschinen nicht auf einer Fehlerseite, und die Signale der alten Seite gehen auf die neue über.

Besonders wichtig ist das bei einem Umzug von WordPress oder einem anderen System zu Webflow. Dann braucht jede alte URL ein Ziel. Wie Sie dabei vorgehen, erklären die Artikel zur 301-Weiterleitung und zum Umzug von WordPress zu Webflow. Welche Folgen gebündelte Alt-URLs für die Sichtbarkeit haben können, zeigt unser Projektbericht GEBRA-IT. Das Projekt lief nicht auf Webflow, das Prinzip ist aber bei jedem System dasselbe.

Sitemap, robots.txt und Indexierung

Webflow erzeugt automatisch eine XML-Sitemap unter /sitemap.xml und aktualisiert sie bei jeder Veröffentlichung. In den Seiteneinstellungen können Sie einzelne Seiten aus der Sitemap ausschließen. Wer eine eigene Sitemap braucht, kann die automatische deaktivieren.

Die robots.txt bearbeiten Sie in den Website-Einstellungen im Bereich SEO. Beachten Sie den Unterschied: Die robots.txt steuert, welche Bereiche Suchmaschinen crawlen dürfen. Sie verhindert nicht zuverlässig, dass eine Seite im Index landet. Soll eine Seite nicht in den Suchergebnissen erscheinen, setzen Sie ein noindex über ein Meta-Robots-Tag im Head-Bereich der Seite und sperren die Seite nicht gleichzeitig in der robots.txt, sonst sieht Google das noindex nicht.

Ein häufiger Fehler betrifft die Testadresse auf webflow.io. Sie ist eine vollständige Kopie Ihrer Website. Deaktivieren Sie in den SEO-Einstellungen die Indexierung dieser Subdomain, spätestens zum Livegang, damit Google nicht zwei Versionen derselben Inhalte findet.

Melden Sie die Website anschließend in der Google Search Console an. Die Bestätigung funktioniert per DNS-Eintrag oder per Meta-Tag, das Sie im Head-Code der Website einfügen. Danach reichen Sie dort die Sitemap ein.

Alt-Texte, Bilder und Ladezeit

Alternativtexte beschreiben Bilder für Menschen, die Screenreader nutzen, und für Suchmaschinen. In Webflow hinterlegen Sie den Alt-Text in der Asset-Verwaltung, er lässt sich am einzelnen Bild überschreiben. Bilder, die nur schmücken, markieren Sie als dekorativ, sie bekommen dann einen leeren Alt-Text. Webflow AI kann fehlende Alt-Texte vorschlagen. Prüfen Sie diese Vorschläge trotzdem, denn nur Sie wissen, was ein Bild im Zusammenhang aussagen soll. Wie gute Alt-Texte aussehen, zeigt der Artikel Alt-Text.

Für die Ladezeit übernimmt Webflow einiges automatisch: Bilder werden in mehreren Größen für verschiedene Bildschirme ausgeliefert, und Lazy Loading ist voreingestellt. Einige Punkte bleiben Ihre Aufgabe:

• Laden Sie Bilder in sinnvoller Größe und komprimiert hoch, möglichst in modernen Formaten wie WebP oder AVIF.
• Schalten Sie Lazy Loading beim ersten großen Bild im sichtbaren Bereich aus. Sonst verzögert es den Largest Contentful Paint.
• Setzen Sie Animationen und Interaktionen sparsam ein, vor allem im ersten sichtbaren Bereich.
• Prüfen Sie jedes eingebundene Skript, etwa für Chat, Tracking oder Karten. Externe Skripte kosten oft viel Ladezeit.
• Laden Sie nur die Schriftschnitte, die Sie wirklich verwenden.

Was die gemessenen Werte bedeuten, erklärt der Artikel zu den Core Web Vitals. Allgemeine Tipps für schnelle Seiten finden Sie unter Website-Ladezeit.

Canonical-Tags

Ein Canonical-Tag sagt Suchmaschinen, welche Adresse die maßgebliche Version einer Seite ist. In den SEO-Einstellungen der Website hinterlegen Sie dafür Ihre Basis-URL, zum Beispiel mit https und der gewünschten Schreibweise der Domain. Webflow erzeugt daraus für jede Seite ein Canonical-Tag, das auf die Seite selbst zeigt.

Soll eine einzelne Seite auf eine andere Adresse verweisen, fügen Sie im Head-Bereich der Seiteneinstellungen ein eigenes Tag ein:

<link rel="canonical" href="https://www.example.com/zielseite/">

Bei CMS-Vorlagen können Sie dafür ein Feld anlegen und in den Code einsetzen. Achten Sie darauf, dass das Feld bei jedem Eintrag befüllt ist. Ein leeres Feld erzeugt ein leeres Canonical-Tag im Quelltext.

Strukturierte Daten per Custom Code

Strukturierte Daten beschreiben Inhalte in einer maschinenlesbaren Form, etwa als Artikel, Organisation, Veranstaltung oder FAQ. Sie helfen Google und KI-Systemen, Ihre Inhalte richtig einzuordnen. Eine eigene Oberfläche zum Zusammenklicken gibt es in Webflow nicht. Sie fügen die Daten als JSON-LD im Custom Code der Seite oder der CMS-Vorlage ein. Webflow AI kann dabei helfen, den Code zu erzeugen, und es gibt Apps, die das übernehmen.

In einer CMS-Vorlage setzen Sie Felder als Platzhalter in den Code ein. Vereinfacht sieht das für Blogartikel so aus:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "[Feld: Name]",
  "datePublished": "[Feld: Veröffentlicht am]",
  "image": "[Feld: Titelbild]",
  "author": { "@type": "Person", "name": "[Feld: Autor]" }
}
</script>

Die Platzhalter in eckigen Klammern stehen für die CMS-Felder, die Sie in Webflow per Klick einfügen. Prüfen Sie nach dem Veröffentlichen mit dem Test für Rich-Suchergebnisse von Google, ob alle Werte korrekt ausgegeben werden, auch Datumsangaben und Bildadressen. Welche Typen sinnvoll sind, erklärt der Artikel zu strukturierten Daten. Wie Sie in Antworten von KI-Systemen vorkommen, lesen Sie unter Generative Engine Optimization.

Grenzen von Webflow SEO

Webflow deckt die Grundlagen gut ab. An einigen Stellen ist es aber weniger flexibel als ein System, bei dem Sie Server und Code selbst kontrollieren:

• Manches nur per Code: Canonical-Tags für einzelne Seiten, noindex und strukturierte Daten setzen Sie per Custom Code. Das ist nicht schwer, aber fehleranfällig, wenn Redakteure ohne Code-Kenntnisse daran arbeiten.
• Kein Zugriff auf den Server: Serverkonfiguration, eigene Header oder Logdateien stehen Ihnen nicht zur Verfügung. Für typische Unternehmenswebsites ist das selten ein Problem, bei großen Projekten schränkt es die technische Analyse ein.
• Feste Pfade im CMS: Einträge liegen unter dem Pfad ihrer Sammlung. Die URL-Struktur müssen Sie deshalb früh festlegen.
• Weniger Erweiterungen: Für WordPress gibt es umfangreiche SEO-Plugins. In Webflow ist die Auswahl an Apps kleiner, vieles erledigen Sie von Hand.
• Automatik ist kein Konzept: Webflow erzeugt Sitemap und Canonical-Tags automatisch. Welche Seiten es geben sollte, welche Suchbegriffe sie bedienen und wie sie verlinkt sind, entscheidet das System nicht für Sie.

Das Audit-Panel im Designer hilft beim Aufräumen. Es weist zum Beispiel auf fehlende Alt-Texte oder eine unlogische Überschriftenstruktur hin, bevor Sie veröffentlichen. Eine vollständige SEO-Analyse ersetzt es nicht.

Checkliste: Webflow SEO vor und nach dem Livegang

• Jede Seite hat einen eigenen Meta-Titel und eine eigene Beschreibung
• CMS-Vorlagen nutzen eigene SEO-Felder mit Zeichenlimit
• Pro Seite gibt es genau eine H1, die Überschriften sind logisch gegliedert
• URLs sind kurz, sprechend und ohne Umlaute
• Für jede alte oder geänderte Adresse gibt es eine 301-Weiterleitung
• Die automatische Sitemap ist aktiv, unwichtige Seiten sind ausgeschlossen
• Die robots.txt sperrt nichts, was in den Index soll
• Die Indexierung der webflow.io-Adresse ist deaktiviert
• Die Basis-URL für Canonical-Tags ist hinterlegt
• Alle inhaltlichen Bilder haben Alt-Texte, dekorative sind markiert
• Das erste große Bild wird ohne Lazy Loading geladen
• Strukturierte Daten sind eingebunden und mit dem Google-Test geprüft
• Open-Graph-Titel, Beschreibung und Bild sind gesetzt
• Eine hilfreiche 404-Seite mit Links zu wichtigen Bereichen ist gestaltet
• Die Website ist in der Google Search Console bestätigt, die Sitemap eingereicht
• Ladezeit und Core Web Vitals sind gemessen, externe Skripte geprüft

Die meisten dieser Punkte sind nicht Webflow-spezifisch. Den Vergleich mit WordPress finden Sie im Artikel Webflow oder WordPress, eine Einführung in die Plattform unter Was ist Webflow?

Häufige Fragen