Webflow & SEO: Der Guide für mehr Sichtbarkeit

Suchmaschinenoptimierung ist kein Hexenwerk - vor allem nicht mit Webflow. Das No-Code-Tool überzeugt mit einer breiten Palette an Funktionen, um nachhaltig Sichtbarkeit aufzubauen. Verabschiede dich von kostenpflichtigen SEO-Plug-ins wie bei anderen Content Management Systemen, bei Webflow ist bereits alles integriert. Dieser Guide soll dir zeigen, welche Möglichkeiten du hast, deine Website für die Suchmaschinen dieser Welt zu optimieren.

Veröffentlicht am
23
.
January
2023
Aktualisiert am
.
Lesedauer
38 Minuten
Kategorie
SEO
Darum gehts
  • Webflow bietet einen großen Umfang an Möglichkeiten, um SEO zu betreiben, besonders im direkten Vergleich mit anderen Systemen
  • sowohl im Webflow-Designer als auch in den Projekteinstellungen finden sich interessante Einstellungen
  • Du kannst deine Seiten kostenlos optimieren, eine kostenpflichtige SEO-Suite beschleunigt den Recherche-Prozess jedoch gewaltig

Warum ist SEO wichtig?

Als Betreiber einer kommerziellen Website möchtest du natürlich, dass Menschen auf dich und dein Produkt aufmerksam werden. Damit Kunden dich online finden, ist eine Suchmaschinenoptimierung unerlässlich. Ziel ist es, dass deine Internetseite für bestimmte Suchbegriffe (sogenannte "Keywords") möglichst weit oben in den gängigen Suchmaschinen platziert wird.

Beispiel: Ich bin ein Webdesigner aus Oldenburg. Zwar biete ich meine Dienstleistung überregional an, jedoch kommt ein Großteil meiner Kunden aus dem Stadtbezirk. Sucht jemand bei Google mit dem Suchbegriff "Webdesigner Oldenburg" nach einem Dienstleister, so erscheint meine eigene Website relativ weit oben. Ideal ist die erste Position, da hier die höchste Klickrate zu erwarten ist.

Im direkten Vergleich zu anderen Marketing-Maßnahmen ist SEO eindeutig langfristig aufgebaut. Du wirst Erfolge nicht sofort erkennen, sondern erst nach einigen Monaten - im schlimmsten Fall dauert es sogar Jahre. Das ist stets von den eigenen Inhalten, aber auch von der direkten Konkurrenz abhängig. Einen großen Player wie Amazon wirst du allgemein betrachtet mit deinem Onlineshop nur schwer besiegen können. Mit einer sehr genauen Spezialisierung deiner Waren hast du schon weitaus höhere Chancen auf ordentliche Rankings.

Auf der anderen Seite kannst du dich langfristig über mehr Traffic freuen, was bei einer cleveren Strategie mit mehr Umsatz einhergeht. Natürlich ist dein Platz an der Sonne nicht in Stein gemeißelt, denn deine Konkurrenz wird stets alles versuchen, um dir diesen streitig zu machen. Halte deinen Content allzeit aktuell und nehme - wenn nötig - Anpassungen vor, um die Nutzererfahrung weiter zu verbessern.

Lohnt sich der Aufwand, SEO zu betreiben, dann überhaupt? Auf jeden Fall! Die Sichtbarkeit ist nur ein Teil des Erfolges, welchen du mit der Suchmaschinenoptimierung angehst. Erstellst du hochwertigen und hilfreichen Content, wirst du in deiner Zielgruppe als Experte wahrgenommen - vorausgesetzt, du bleibst am Ball. Dadurch können neue Partnerschaften oder Einladungen zu Vorträgen entstehen.

Webflow & SEO

Webflow bietet seinen Kunden umfangreiche Möglichkeiten, um aktiv Suchmaschinenoptimierung zu betreiben. Anders als bei anderen Content Management System wie WordPress musst du keine Erweiterung für viel Geld kaufen, sondern kannst direkt loslegen. Alle bedeutsamen Faktoren sind Teil des Webflow-Paketes. Dies ist besonders wichtig, da es für Webflow keine Plug-ins wie bei WordPress gibt. Dank API-Schnittstelle musst du bei Webflow jedoch auf nichts verzichten.

In den Projekteinstellungen kannst du einige SEO-Einstellungen vornehmen:

  • Website mit einem Passwort schützen - ideal, um beim Aufbau der Seite den neugierigen Crawler zu stoppen
  • 301 Redirects (Weiterleitung) einrichten
  • Komprimierung von HTML, CSS und JavaScript-Dateien aktivieren
  • SSL-Einstellungen
  • das Crawling der Webflow-Subdomain deaktivieren
  • Sitemap aktivieren
  • Google Site Verification
  • Globalen Canonical Tag setzen
  • Implementierung von Google Analytics & Optimize
  • Einbindung von Custom Code, um beispielsweise andere Tools in die Website zu integrieren

Und auch der Designer kleckert nicht beim Umfang der SEO-Funktionen:

  • Seitentitel
  • Meta Description
  • Open Graph

Kurz gesagt: Du kommst voll auf deine Kosten. Der Funktionsumfang war damals ein Grund für den endgültigen Umstieg von WordPress zu Webflow. Zwei Jahre später habe ich diesen Schritt nicht bereut - ganz im Gegenteil.

SEO im Webflow-Designer

Der Webflow-Designer bietet dir einige Möglichkeiten, um Suchmaschinenoptimierung zu betreiben. Die meisten dieser Maßnahmen lassen sich optisch im Designer begutachten.

Seitentitel & Meta Description

Für viele Suchenende sind Seitentitel und Meta Description das erste, womit sie bei deiner Website in Berührung kommen. Sie werden neben der URL in den SERPs (Search Engine Result Page) angezeigt und sollen den Nutzer zum Seitenklick animieren. Auch Google schaut bei der Wahl des <title>-Tags ganz genau hin. Erscheint der gewählte Seitentitel nicht optimal passend zum Content auf der Webseite, so wird dieser kurzerhand von Google angepasst.

Ein attraktiver Seitentitel und Seitenbeschreibung können die Klickrate erhöhen. Im schlimmsten Fall erstellt Google jedoch einen eigenen Page Title & Meta Description.

Grund hierfür ist das Title Tag Update, welches im August 2021 ausgerollt ist. Selbiges geschieht übrigens auch bei der Meta Description der Seite. Google kann die hinterlegte Beschreibung übernehmen, jedoch auch verwerfen und eine eigene Variante in den Suchergebnissen anzeigen.

Seitentitel- und Beschreibung haben den Sinn, den Nutzer auf die Inhalte auf der Webseite vorzubereiten, ihm zu zeigen, dass er bei dir an der richtigen Adresse ist. Ein attraktiver Seitentitel ist auch für Google ein Rankingfaktor, sodass dieser relevante Keywords enthält, die den Seiteninhalt beschreiben.

Tipps für einen guten Seitentitel & Meta Description

  • kurz und prägnant, sodass nicht gekürzt wird
  • relevante Keywords einbeziehen
  • zeige dem User, was er auf dieser Webseite zu erwarten hat, ....
  • halte dieses Versprechen auch, um hohe Absprungraten und kurze Verweildauern zu vermeiden
  • einzigartig (verwende den gleichen Seitentitel nicht auf anderen Seiten)
  • integriere einen Call-to-Action in die Seitenbeschreibung

Den Title-Tag und die Meta Description kannst du in den Page-Einstellungen jeder Seite ändern. Du erhältst sofort eine Live-Vorschau, wie dein Eintrag im Idealfall aussehen könnte. Meine Empfehlung: Nutze parallel einen Snippet Generator, um Kürzungen durch Google zu vermeiden.

In den Seiteneinstellungen kannst du Seitentitel & Meta Description individuell anpassen und erhältst gleichzeitig eine Vorschau, wie deine Website in den Suchergebnissen aussehen könnte.

Arbeitest du mit Webflow-Collections, kannst du Seitentitel und die Beschreibung nicht einfach in der Collection-Page-Vorlage bearbeiten, da diese sich auf jede der angelegten Seiten in der Collection auswirken würde. Ich empfehle dir, in der Collection zwei einfache Textfelder anzulegen: Title Tag & Meta Description und diese in den Page-Settings zu verlinken. Alternativ kannst du auch den Namen des angelegten CMS-Items für deinen Seitentitel verwenden.

Dank der Custom Fields kannst du dein Webflow CMS unendlich nach oben skalieren und um weitere Funktionen erweitern.

Die erstellten Custom Fields werden in den Seiteneinstellungen der CMS-Basisseite eingepflegt, sodass sie sich die Inhalte individuell ziehen.

Überschriften

Überschriften dienen dem Leser und den Suchmaschinen deine Seite besser interpretieren zu können. Viele Menschen haben weder Zeit noch Lust, sich alle Inhalte deiner Website durchzulesen und scannen diese innerhalb weniger Sekunden einmal durch. Dabei hangeln sie sich von Headline zu Headline, um die für sich optimale Passage zu finden. Allein deswegen ist es wichtig, dass du aussagekräftige Überschriften in deinen Texten - besonders aber in Blog- oder Newsartikeln - einpflegst, um die Suche möglichst einfach zu gestalten.

Um Überschriften in HTML auszuzeichnen, verwenden wir das h-Tag. Dieses hat folgende Elemente:

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

In den meisten Projekten werden die Überschriften 1-4 verwendet, danach macht der Einsatz nur in sehr wenigen Fällen Sinn. Solltest du also ernsthaft eine h6-Überschrift benötigen, so schreibst du entweder einen tiefgehenden wissenschaftlichen Text oder kannst deine Inhalte nicht sauber strukturieren.

Nicht nur hierarchisch haben die einzelnen Überschriften einen Sinn, auch optisch gibt es Unterschiede. Während die h1 die mit Abstand auffälligste auf der Seite ist, kann die h6 schnell übersehen werden. Aber keine Sorge: Du kannst in Webflow alle Stylings individualisieren. Worauf zu idealerweise verzichten solltest: die kleinen Überschriften als Styling-Element zu verwenden.

Wie bereits erwähnt sind Headlines wichtig, um Inhalte schneller scannen zu können. In der Suchmaschinenoptimierung sind sie ebenfalls von großer Bedeutung, um dem Crawler den folgenden Kontext zu liefern. Daher sollte deine Überschrift nicht nur kurz und prägnant sein, sondern auch relevante Keywords enthalten.

Für eine saubere Seitenstruktur verwendest du die Überschriften in der entsprechend richtigen Reihenfolge. Bedeutet, dass du mit der h1 anfängst, anschließend nicht die h4 folgt, sondern die h2-Überschrift.

Open Graph

Vielleicht kennst du folgende Szene: Du teilst einen Link in einem sozialen Netzwerk und dieses erstellt daraus eine Art Karte mit einem Bild, Seitentitel der und der Meta Description. Dieses 2010 von Facebook eingeführte Protokoll nennt sich Open Graph und soll die Art und Weise standardisieren, wie Inhalte in Social Media dargestellt werden.

Als Webmaster kannst du deiner Website ohne großen Aufwand Meta-Daten einfüge, welche beim Teilen abgerufen und gerendert werden.

Die drei Standard-Komponenten bestehen aus Bild, Titel und Beschreibung. Sie können über folgenden Code eingefügt werden:

<meta content="Seitentitel" property="og:title"/>

<meta content="Seitenbeschreibung" property="og:description"/>

<meta content="link-zum-vorschaubild" property="og:image"/>

Es gibt aber noch viele weitere Meta-Daten von Open Graph, die du unbedingt einmal auf der offiziellen Website anschauen solltest. Die Integration in Webflow ist einfacher, als du denkst, denn du musst keine Zeile Code schreiben. In den Seiteneinstellungen ist die Sektion "Open Graph Settings". Du hast hier zwei Optionen:

  1. Du definierst einen neuen Seitentitel und / oder Seitenbeschreibung (Meta Description)
  2. Du greifst auf den bereits festgelegten Page Title und die Meta Description zurück, welche du in den Seiteneinstellungen unter SEO Settings angegeben hast

Wie in anderen sozialen Netzwerken spielt auch bei Open Graph das verwendete Seitenbild eine wichtige Rolle. Ich empfehle, ein spannendes und hochwertiges Bild auszuwählen, um möglichst viel Aufmerksamkeit zu generieren. Besonders in Social Media überfliegen wir die Inhalte nur für wenige Millisekunden, ehe uns bereits der nächste Post ins Gesicht springt.

So sieht es aus, wenn in Social Media eine Website mit Open Graph Metadaten geteilt wird.

Vergleichen lässt sich dies hervorragend mit YouTube. Professionelle Content Creator setzen auf attraktiv gestaltete Thumbnails, also Vorschaubilder, die dir angezeigt werden. Nahezu jeder professionelle Produzent wird bestätigen können, dass ein hochwertiges Vorschaubild die Klickrate massiv ansteigen lässt.

Im Feld "Open Graph Image URL" trägst du den Link zum Vorschaubild ein, welches mindestens die Maße 1200x630 Pixel besitzt. Höhere Auflösungen sind kein Problem, solange du beim Seitenverhältnis von 1.91:1 bleibst. Das Bild deiner Wahl kannst du bequem über den Dateimanager von Webflow hochladen und dir dort den Link kopieren, diesen schließlich in den Open Graph-Einstellungen einbinden.

Wenn du mit dem CMS arbeitest, wirst du einen kleinen Zwischenschritt einlegen müssen. Entweder greifst du - wie oben beschrieben - auf Seitentitel und Meta Description zurück und erstellt für diese eigene Felder in deiner Collection.

Verzichtest du auf die Verwendung von Open Graph Parametern, beispielsweise weil du es in der Seitenerstellung vergisst, ist dies kein Beinbruch. Deine Webseite wird dann beim Teilen in Social Media unter Umständen etwas zerpflückt aussehen. Ich empfehle daher mindestens die Einbettung eines Open Graf Images.

Gegenteil: Immer noch haben viele Websites keine Open Graph Metadaten eingebunden. In diesem Beispiel sieht man, wie eine geteilte Website aussieht.

Webflow Audit Panel

Der Audit-Check hilft dir dabei, die Performance und Usability deiner Website zu optimieren. Auch wird geprüft, ob der generierte HTML-Code valide ist. Da viele Menschen mit Einschränkungen einen Screenreader für das Surfen im Internet verwenden, solltet du sicherstellen, dass deine Bilder sogenannte Alt-Texte haben. Diese Geräte können Bilder nicht interpretieren, sondern ausschließlich die vorhanden Meta-Daten vorlesen.

Alt-Texte haben zudem den Vorteil, dass der hinterlegte Text angezeigt wird, sobald eine Bilddatei nicht mehr verfügbar ist. Navigiere in den Webflow Assets-Manager und klicke dort eine Bilddatei an, um im Input-Field den Alt-Text einzutragen. Handelt es sich um eine rein dekorative Grafik wie Icons oder optische Trennelemente, kannst du dieses als "Decorative" markieren.

Das Audit-Tool kann aber noch viel mehr: Die Headings auf deiner Seite sollten stets in der korrekten Reihenfolge gebracht werden. Sprich: Starte nicht mit einer h4 Überschrift, sondern mit einer h1, ehe die h2 in den Text einfließt.

Ganz ehrlich: Wenn du dich an die Reihenfolge hältst - super! Jedoch wirst du für einen Regelbruch nicht aus dem Google-Index fliegen. Vergewissere dich, dass du wirklich nur eine einzige Hauptüberschrift (h1) auf deiner Unterseite hast. Setze jede Überschrift sinnvoll und aussagekräftig ein, um den Leser einen gewissen Kontext und Navigationshilfe zu geben.

Verlinkte Inhalte prüft Webflow Audits ebenfalls. Die Logik dahinter ist durchaus sinnvoll, denn viel zu oft werden Textausschnitte ohne Kontext verlinkt, sodass die Crawler Probleme bei der Interpretation haben. Beispiel:

  • "Weiterlesen"
  • "Hier klicken"
  • "Mehr dazu"

Werde stattdessen etwas kreativer und gebe deinem Besucher ebenfalls einen Anreiz, den Link zu klicken. Baue eine entsprechende Erwartungshaltung an, sodass er im Vorfeld weiß, was ihn mit dem Klick auf der nächsten Seite erwartet:

  • "Erfahre mehr über mich"
  • "Whitepaper kostenlos downloaden"
  • "Kostenlosen Account erstellen"

Der User weiß sofort, was Sache ist und was von ihm erwartet wird. Gerade bei kommerziellen Landingpages solltest du Klartext reden und glasklare Call to Actions verwenden.

Der Audit-Manager sollte idealerweise immer fehlerfrei sein.

URL-Struktur

Wenn du vor Webflow mit WordPress gearbeitet hast, wirst du vielleicht noch die alte Standard-URL-Struktur kennen:

www.domain.de/?p=1234

Dass diese Linkstruktur nicht unbedingt State of the Art ist, kannst du dir sicherlich denken. Eine gute URL zu erstellen ist dabei überhaupt nicht schwer. Stelle dir deine Website wie ein Buch vor, welches in verschiedene Kapitel unterteilt werden kann. In diesem Beispiel nehme ich meine eigene Internetseite.

Ich habe einige Einzelseiten, die sich nicht wirklich in sinnvolle “Kapitel” einsortieren lassen:

  • Startseite
  • Kontakt
  • Projektanfrage
  • Impressum
  • ...

Nun gibt es jedoch auch Unterseiten, welche perfekt in eine sinnvolle Struktur passen würden. Da wären zum Beispiel die Seiten zu meinen einzelnen Leistungen:

  • Webdesign
  • Suchmaschinenoptimierung
  • User Experience Design
  • Webflow

Um eine klare Struktur zu erschaffen, habe ich den Ordner "Leistungen" in den Seitenbaum integriert und organisiere meine Leistungsseiten in diesem. Dadurch entsteht folgende Änderung an der URL:

Vorher: wyreframe.de/webdesign

Nachher: wyreframe.de/leistungen/webdesign

Sowohl Leser als auch Suchmaschinen wissen sofort, dass es sich hierbei um eine kommerzielle Ausrichtung handelt, da ich am Ende des Tages meine Dienstleistung verkaufen möchte.

SEO in den Webflow-Projekteinstellungen

In den Projekteinstellungen innerhalb deines Webflow-Projekts lassen sich Einstellungen vornehmen, die meist Einfluss auf die Performance und Technik deiner Website haben. Bevor du dein Projekt mit der Welt teilen möchtest, solltest du hier einige wichtige Änderungen durchführen.

301-Weiterleitungen

Manches im Leben ändert sich einfach. So auch in der digitalen Welt. Im Laufe der Zeit kommen neue Dienstleistungen hinzu, andere verschwinden. Damit die Besucher deiner Website nicht vor verschlossenen Toren stehen, solltest du dringend Redirects anlegen, wenn du die URL von Unterseiten änderst. Diese Weiterleitung führt den User als auch den Crawler zur neuen Seite.

Verzichtest du auf diesen Schritt (keine Empfehlung!), sorgst du nicht nur für eine schlechte Nutzererfahrung in Form eines "404 Seite nicht gefunden"-Fehlers. Auch Suchmaschinen sind keine Fans von nicht mehr auffindbaren Inhalten, die den Index vollmüllen. Google & Co. sind besonders daran interessiert, dem Nutzer die möglichst perfekte Lösung für sein Problem zu präsentieren. Eine nicht mehr abrufbare Webseite gehört eher nicht dazu.

Die wichtigste Weiterleitung, die du kennen musst, ist die "301 Moved Permanently". Sie kommt am häufigsten vor und ist auch bei Webflow die Einzige, die derzeit unterstützt wird. Dabei wird die alte und neue URL angegeben, um eine nahtlose Weiterleitung zu gewährleisten. Du findest diese Einstellungen in den Projekteinstellungen unter "Publishing".

Besonders große Websites mit vielen URL's müssen bei einem Relaunch viele Redirects eintragen, um Fehlermeldungen zu vermeiden. Webflow jedoch bietet nur eine manuelle Handhabung an. Du kannst von Haus aus keine Excel-Tabelle oder Ähnliches hochladen, sondern musst diese händisch eintragen. Gerade bei Tausenden von Links eine wahre Qual.

Das dachten sich auch die Jungs von Finsweet und entwickelten kurzerhand eine Browser-Erweiterung für Google Chrome. Diese macht den Import einer CSV-Datei möglich, sodass alles vollautomatisch abläuft.

Apropos viele Links und Weiterleitungen: Verzichte bei deinen Redirects auf lange Ketten. Idealerweise gibt es eine einzige Weiterleitung auf das neue Ziel - Ende. Uncool ist es, wenn du deinen Nutzer auf eine endlos lange Reise von Weiterleitungen schickst. Dies mögen Suchmaschinen überhaupt nicht und auch die Performance deiner Website wird drastisch darunter leiden, denn mit jeder Weiterleitung erhöht sich die Ladezeit. Der Crawler wird seine Arbeit nach einer bestimmten Anzahl von Redirects abbrechen.

Habe also eine gut gepflegte Liste mit all deinen Weiterleitungen parat und prüfe mit jedem neuen Eintrag, ob du damit eine neue Weiterleitungskette erschaffen würdest. Mit einem kostenlosen Redirect-Checker kannst du übrigens kontrollieren, ob und wie viele Weiterleitungen bereits vorhanden sind.

In diesem Fall gibt es keine einzige Weiterleitung - der Blogartikel kann sofort aufgerufen werden.

Andere Arten von Status Codes wie beispielsweise 302 (Temporary Redirect) oder 410 (Gone) gibt es bei Webflow leider noch nicht. Hast du also ein Dokument oder eine Seite, die definitiv keinen Nutzen mehr hat, kannst du lediglich auf den 301-Redirect zurückgreifen und die URL auf eine ähnliche Alternative leiten, um einen 404-Fehler zu vermeiden. Auch wenn dadurch kein Nachteil entsteht, hoffe ich, dass Webflow zumindest irgendwann den Status Code 401 einführt.

Sitemap

Die Sitemap dient den Suchmaschinen als eine Art Telefonbuch. Dort werden alle Links, die die Website zu bieten hat, sauber hinterlegt und aufgelistet. Bei der Datei handelt es sich um ein XML-File, welches du dir problemlos auf deinem PC oder Mac anschauen und sogar bearbeiten kannst. Das macht dann Sinn, wenn Links in deiner Sitemap gelistet werden, die nicht für den Besucher oder die Suchmaschine sichtbar sein sollen.

Alternativ kannst du diese Seiten in Webflow mit einem Passwort schützen. Solche Webseiten werden nicht in die Sitemap eingetragen. Das Dokument kannst du übrigens über den URL-Zusatz "sitemap.xml" aufrufen, vorausgesetzt, sie ist in den Projekteinstellungen aktiviert.

Damit der Suchmaschinen-Crawler das Maximale aus deinem Crawl-Budget holt, macht es Sinn, die Sitemap in der Google Search Console zu hinterlegen. Gerade frisch gelaunchte Internetseiten haben das Problem, dass sie nicht gefunden werden. Teilst du Google mit, dass diese Seite nun online ist und über eine entsprechende Sitemap verfügt, wird der Spider zukünftig die Inhalte deiner Website crawlen und ggf. indexieren. Fortan bist du in der Suchmaschine zu finden.

Google selbst empfiehlt Webmastern von großen Websites eine Sitemap in der Search Console einzureichen. Der Umfang einer "großen Website" wird hier mit 500 Unterseiten beziffert. Bei Webflow gelten auch einzeln angelegte CMS-Seiten (zum Beispiel ein Blogartikel) als Unterseite.

Bei besonders großen Websites erleichtert eine gut gepflegte Sitemap den Suchmaschinen-Crawlern die Arbeit.

Core Web Vitals

Bei den Core Web Vitals handelt es sich um Metriken, um die technische Performance einer Website zu messen. Google nimmt sich die Nutzererfahrung einer Website sehr zu Herzen und ist daran interessiert, dass diese stets positiv ausfällt. Lange Ladezeiten einer Seite sind kein Teil davon, sodass die Performance seit 2021 ein relevanter Faktor bei der Rankingvergabe ist.

Wie es um die Leistung deiner Internetseite steht, kannst du ganz einfach mit dem kostenlosen Tool PageSpeed Insights von Google herausfinden. Dieses gibt dir nützliche Optimierungsvorschläge und geht dabei auch ausreichend ins Detail, um diese nachvollziehen zu können.

Grundsätzlich empfehle ich immer die Verwendung eines zweiten Tools, um noch mehr Informationen zu erhalten. Hier kann ich dir das kostenfreie GTmetrix ans Herz legen. Du solltest deine eigene Website mit denen deiner Wettbewerber vergleichen, um immer auf dem aktuellsten Stand zu sein.

Hier gibt es noch ein wenig zu tun: Besonders die Ladezeit ist deutlich zu hoch.

Glücklicherweise handelt es sich bei Webflow um ein performantes System. Das liegt daran, dass nur der Code geladen wird, welcher tatsächlich notwendig ist. Bei anderen Content Management Systemen werden auch die Codeschnippsel geladen, die überhaupt keine Verwendung auf der gesamten Website finden. Mit jeder Erweiterung wird die Seite langsamer, sodass die Richtlinien der Core Web Vitals im schlimmsten Fall nicht eingehalten werden.

In den Webflow-Projekteinstellungen kannst du unter "Publishing" die "Advanced Publishing Options" konfigurieren:

  • SSL-Zertifikat: Ist standardmäßig aktiviert und sollte nicht angerührt werden, da dies eine Fehlermeldung beim Seitenaufruf auflöst ("Diese Seite ist nicht geschützt")
  • Minify HTML, CSS, Javascript: Ein Minifier streicht unnötige Zeichen aus dem Quellcode, sodass sich die Größe der Datei reduziert und somit schneller geladen wird. Der Code lässt sich nach dem Prozess in der Anzeige schlechter lesen, was für dich jedoch keinen Nachteil hat. Du kannst diese Funktionen also bedenkenlos aktivieren.

Unterhalb dieser Einstellungen kannst du auch eigene Sicherheitszertifikate für deine Website in Webflow einbinden. Das automatisch ausgestellte SSL-Zertifikat von Webflow ist das weitverbreitete Let's Encrypt.

Ebenfalls weit verbreitet sind überdimensionierte Bilddateien. Besonders Webmaster ohne Erfahrung laden Bilder in ihrer vollen Größe hoch, was sich nicht nur auf die Auflösung, sondern auch auf die Dateigröße bezieht. So muss der Browser erst einmal ein drei Megabyte großes Bild herunterladen, ehe er es korrekt anzeigen kann.

Du solltest deine Grafiken stets in der richtigen Größe und komprimiert hochladen. Ein gutes Komprimierungstool ist TinyPNG, mit dem du pro Vorgang bis zu 20 Bilder á 5 MB hochladen und komprimieren lassen kannst.

Wichtig zu wissen: Eine technisch einwandfreie Website mit Bestnoten wird dir allein nicht zu den Top-Positionen bei Google verhelfen. Es ist lediglich ein kleiner Teil einer großen Kette und kann im direkten Vergleich eine Hebelwirkung auslösen, wenn dein Konkurrent hier schlechtere Leistungen erbringt. Am Ende muss dein Content überzeugen und qualitativ hochwertig sein.

Best Practices für dein Webflow-Projekt

Inhaltsverzeichnis

Betreibst du mit deinem Webflow-Projekt einen eigenen Blog, solltest du dir Gedanken über ein Inhaltsverzeichnis machen. Gerade längere Beiträge werden nur schnell überflogen, auf der Suche nach dem passenden Abschnitt. Um deinen Leser an die richtige Stelle zu leiten, kannst du ihm ein Inhaltsverzeichnis an die Hand geben.

Meine ersten Blogartikel waren noch vergleichsweise kurz und dadurch schnell gelesen. Dies änderte sich im Laufe der Zeit, denn ich veröffentlichte immer mehr tiefgehende Inhalte. Mit der Implementierung eines Inhaltsverzeichnisses konnte ich die Verweildauer auf meinen Artikeln um 92 Prozent erhöhen. Der Leser kann sofort entscheiden, ob er weiterliest oder nur zu einem bestimmten Thema springen möchte.

Für das Inhaltsverzeichnis greife ich auf das Rich Text Element in Webflow zurück und verlinke die einzelnen Abschnitte (Beispiel: #linkadresse). Damit der Link auch erkannt wird, musst du vor der verlinkten Überschrift ein wenig Custom Code einsetzen:

<a name="linkadresse"></a>

Die Erstellung dauert maximal fünf Minuten, bringt dem Leser jedoch enorm viel Mehrwert.

Leistungsseiten

Bietest du deinen Kunden Dienstleistungen an, möchtest du für verschiedene Suchbegriffe bei Google & Co gefunden werden. Bei meiner täglichen Arbeit sehe ich immer wieder Websites, die ihr gesamtes Leistungsportfolio auf die Startseite klatschen, nach dem Motto "Ist drauf, passt schon!".

Stell dir persönlich die Frage, welche Seitenstruktur der Suchmaschinencrawler wohl präferiert? Eine einfache Startseite mit Keyword-Listen oder dedizierte Webseiten, auf denen noch einmal tiefer auf das Thema eingegangen wird?

Beispiel: Ein SHK-Handwerksbetrieb hat deutlich bessere Chancen für relevante Keywords zu ranken, wenn entsprechende Unterseiten erstellt werden. Der SHK (Sanitär - Heizung - Klima) erstreckt sich über viele Bereiche, die noch einmal in Unterkategorien heruntergebrochen werden können. Statt alle Leistungen auf die Startseite zu schreiben, sind informative Einzelseiten die bessere Wahl.

Webseiten mit Fokus auf eine bestimmte Dienstleistung haben bessere Chancen für dieses zu ranken.

Schreibe zuerst für den Menschen, dann für die Suchmaschine

Bei meiner durchgeführten Konkurrenzanalyse ist mir eine Sache besonders häufig aufgefallen: Lokale Dienstleister, die aber in anderen Städten für bestimmte Keywords ranken möchten. Dafür wird eine eigene Unterseite angelegt und möglichst alle Überschriften mit "Dienstleistung + Ort" zugepflastert.

Beispiele:

  • "Unsere SEO-Agentur-Leistungen für Oldenburg im Überblick"
  • "Weshalb ist lokale Sichtbarkeit in Oldenburg wichtig?"
  • "Was Unternehmen mit SEO Oldenburg erreichen"

Schaut man sich anschließend das Impressum an, stellt man begeistert fest, dass diese Dienstleister alles sind - nur keine Oldenburger. Das Ziel solcher Aktionen ist glasklar: Man möchte Besucher aus diesem Ort für die eigene Dienstleistung auf die Website locken und optimiert die Inhalte aufs Maximale.

Es ist offensichtlich, dass der Content hier nicht für den Leser geschrieben wurde, sondern für die Suchmaschine. Mein Tipp daher: Erstelle deinen Content für den Besucher, nicht für den Crawler. Verzichte auf Keyword-Stuffing (übermäßige Verwendung eines Suchbegriffs) in einem kontextlosen Zusammenhang (siehe oben). Liefere stattdessen Mehrwert. Deine Leser werden es dir danken.

Interne Verlinkung

Links können entweder intern oder extern sein. Interne Links verbinden eine Webseite mit einer anderen Unterseite oder aber mit einem Dokument, während externe Verlinkungen zu einer fremden Internetseite leiten. Links sind wichtig, da sie sowohl den Webseitenbesuchern als auch den Suchmaschinen die Navigation vereinfachen. Crawler können sich nur über Anker von Seite zu Seite bewegen, sodass sie ihre Arbeit bei Sackgassen beenden.

Mit einer sauberen internen Verlinkung kannst du wichtige Inhalte stärken, zum Beispiel indem du aus einem Blogartikel auf deine Leistungsseite verweist. Zudem kannst du in Artikeln auf bereits bestehenden Content oder auf externe Quellen verlinken, um die Absprungrate zu reduzieren.

Besonders lösungsorientierte Artikel kämpfen oftmals mit einer hohen Absprungrate, da das Problem am Ende des Beitrags hoffentlich gelöst wurde. Das ist völlig normal, lässt sich jedoch durch ein paar Kniffe optimieren. So kannst du am Ende des Artikels ähnliche Beiträge teasern.

Idealerweise beziehst du die interne Verlinkung bereits in deine Content-Planung ein, um die Gewichtung relevanter Seiten zu stärken.

Strukturierte Daten

Damit Suchmaschinen den Inhalt deiner Website besser interpretieren und verstehen können, kannst du sog. strukturierte Daten verwenden. So kannst du bestimmte Elemente deiner Internetseite beispielsweise als FAQ, Rezept, Stellenanzeige oder Event auszeichnen. Google kann diese in den Suchergebnissen zu deiner Seite einbinden.

Strukturierte Daten können für eine attraktivere Darstellung deiner Webseite in den Suchergebnissen und somit für eine höhere Klickrate sorgen.

Im Screenshot oben siehst du, was passiert, wenn ich nach einem Rezept für Pfannkuchen suche. Neben den Bewertungen (4.7 & 4.8) enthält das Suchergebnis von Chefkoch zudem Informationen über das eigentliche Rezept. Welche Zutaten werden benötigt, wie lange braucht es, um dieses umzusetzen. Nahezu alle Kochen und Backen-Websites haben mindestens die Bewertungen als strukturierte Daten integriert.

Der Suchende kann hier sofort eine Vorauswahl treffen. In der Regel befassen wir uns mit Websites, die wir entweder schon einmal gehört oder konsumiert haben, oder die sehr gute Bewertungen vorweisen können. Im Screenshot oben treffen für die meisten von uns beide Szenarien ein: Chefkoch ist in Deutschland sehr bekannt, die Bewertung stimmt mit 4.7 ebenfalls.

Ein weiterer beliebter Einsatzzweck von strukturierten Daten sind "Häufig gestellte Fragen". Diese finden immer regelmäßiger ihren Weg in die Suchergebnisse, da sie dem User eine schnelle Antwort auf seine Frage liefert.

Alle wichtigen Daten und ähnliche Inhalte auf einem Blick: Der große Vorteil von strukturierten Daten.

Verantwortlich für diese Auszeichnungen ist die schema.org-Community, welche von verschiedenen Unternehmen der Tech-Branche gegründet wurde. Ziel war es, eine möglichst einheitliche Auszeichnungssprache zu entwickeln, die von vielen Suchmaschinen verstanden und akzeptiert wird.

Der Einbau der strukturierten Daten in Webflow ist schnell erledigt und erfolgt mit JSON-LD in den Body der Webseite (Custom Code-Felder in den Seiteneinstellungen). Möchtest du deine Blogartikel oder News mit strukturierten Daten füttern, musst du in den CMS-Seiteneinstellungen die Schaltfläche "Add Field" nutzen, um dynamische Inhalte einfließen lassen zu können.

Beispiel-Code, um Structured Data in dein Webflow-Projekt einzubinden.

Nach dem Update deiner Webflow-Website kannst du den implementierten Code auf Gültigkeit prüfen. Dafür nutze ich das kostenlose Google-Tool "Test für Rich-Suchergebnisse". Ein weiteres nützliches Tool ist ein JSON Validator, mit dem du den erstellten Quellcode prüfen und ggf. anpassen kannst.

Wichtig zu wissen: Suchmaschinen sind nicht dazu verpflichtet, deine strukturierten Daten tatsächlich in ihren Suchergebnissen zu verwenden. Weitere Informationen und eine umfangreiche Dokumentation mit Anwendungsbeispielen und vorgefertigten Codes findest du auf der offiziellen schema.org-Website.

Umfangreiche Keyword-Recherche

Viele Unternehmen schreiben Ratgeber oder Blogartikel, ohne im Vorfeld eine Keyword-Recherche durchgeführt zu haben. Mitunter werden viele Stunden in diese Arbeiten investiert, um dann ernüchternd feststellen zu müssen, dass der Artikel keinen Anklang bei der Leserschaft findet oder im schlimmsten Fall nicht einmal indexiert wird. Die Gründe für so einen Rohrkrepierer können unterschiedlicher Natur sein:

  • die Qualität ist zu niedrig
  • Duplicate Content
  • kein wirkliches Suchvolumen

Bevor du dich ans Werk machst, solltest du stets eine entsprechende Keyword-Recherche durchführen. Dafür nutze ich eine SEO-Suite, in meinem Fall die von SEMrush. Ich konzentriere mich dabei auf folgende Metriken:

  • Suchvolumen (wie oft wird dieser Suchbegriff durchschnittlich im Monat gesucht?)
  • welche Suchintention steckt in dieser Suchanfrage (transaktional, informationsorientiert etc.)
  • wie schwer ist es für dieses Keyword gut ranken zu können (Keyword Difficulty)
  • welche SERP-Funktionen gibt es (Local Packs, Videos, FAQ, Unternehmensprofile etc.)

Anschließend schaue ich mir ähnliche Suchanfragen an, beschäftige mich mit den typischen W-Fragen und werfe einen genaueren Blick auf bereits bestehende Inhalte im Internet. Ich möchte möglichst viel über den Suchenden und seine Probleme verstehen, um darauf basierend die für ihn beste Lösung bereitzustellen.

Für eine möglichst professionelle Keyword-Recherche empfehle ich den Einsatz einer SEO-Suite, auch wenn diese eine monatliche Gebühr kostet. Mit dieser kannst du nicht nur Suchbegriffe recherchieren, sondern außerdem Audits und weitere hilfreiche Analysen durchführen.

Professionelle SEO-Tools wie SEMrush oder ahrefs erleichtern dir die Suchmaschinenoptimierung enorm, indem sie transparente Zahlen liefern.

Möchtest du kein Geld ausgeben, solltest du dir den Keyword Planner von Google anschauen. Diesen findest du in Google Ads und gibt dir - je nach monatlichem Ausgabenvolumen deiner Anzeigen - genaue Daten zu Suchvolumen, Konkurrenz und durchschnittliche Kosten für bezahlte Werbeanzeigen. Du kannst das Tool auch kostenlos verwenden, musst dann aber mit schwammigen Daten vorliebnehmen.

Anders als bei einer bezahlten SEO-Suite erhältst du beim Keyword Planner nur einen groben Richtwert. Genaue Zahlen bekommst du erst, wenn du einen bestimmten Betrag in Google Ads investierst.

SEO-Tools

Möchtest du mit der Suchmaschinenoptimierung den nächsten großen Schritt machen und diese ambitioniert angehen, wirst du langfristig nicht um eine SEO-Suite herumkommen. Solche Tools erleichtern dir die Arbeit der Keyword-Recherche, Wettbewerbsanalyse und Audits enorm. Zudem lassen sich relevante Keywords dauerhaft beobachten, dass du sofort handeln kannst, wenn sich etwas verändern sollte.

Die Kosten für eine gute Suite liegen bei rund 50 - 250 Euro im Monat, unterschieden sich in ihren Funktionen häufig nur minimal. So ziemlich alle Anbieter können im Vorfeld für mindestens eine Woche unverbindlich getestet werden, ehe du dich für ein Abo entscheidest.

Die bekanntesten SEO-Suites auf dem Markt sind:

  • SEMrush
  • Ahrefs
  • mangools
  • Ubersuggest
  • Moz
  • Searchmetrics

Legst du Wert auf ein Tool aus Deutschland, kann ich dir folgende empfehlen:

  • SISTRIX
  • PageRangers
  • XOVI

Meine Empfehlung: Schaue dir alle Suiten einmal in Ruhe an, finde Gemeinsamkeiten, aber auch Unterschiede, um später abwägen zu können, welches Tool für dich infrage kommt.

Unabhängig von diesen Tools solltest du dringend die kostenlos von Google bereitgestellte Search Console in dein Projekt einbinden. In dieser kannst du die Leistung deiner Website nachvollziehen und optimieren. Zudem erhältst du Informationen über Fehlermeldungen, beispielsweise wenn der Google-Crawler auf 404-Fehler gestoßen ist. In der Search Console hinterlegst du übrigens deine generierte Sitemap.

Interessant ist der Leistungsbereich in der Konsole. Du hast hier die Möglichkeit einzusehen, für welche Suchbegriffe deine Website angezeigt (Impressionen) und wie oft sie geklickt (Click-through-Rate) wurde. Diese Berichte solltest du dir in regelmäßigen Abständen anschauen, um Veränderungen zu kontrollieren.

Damit du die Search Console nutzen kannst, musst du zwingend die Inhaberschaft deiner Website bestätigen. Du kannst entweder eine spezifische Adresse oder gleich die gesamte Domain integrieren. In der Regel gehe ich den einfachsten Weg und verifiziere die ganze Domain mit allen vorhandenen Subdomains. Für diesen Schritt ist eine Bestätigung über einen DNS-Eintrag notwendig.

Deine Website kannst du entweder über die gesamte Domain oder aber über einen bestimmten URL-Präfix in die Search Console implementieren.

DNS-Einträge werden in der Domainverwaltung bei deinem Provider angelegt. Das ist kinderleicht und in wenigen Sekunden erledigt. Je nach Anbieter kann es durchaus ein wenig dauern, ehe die DNS-Server aktualisiert wurden. Für gewöhnlich ist das Thema jedoch innerhalb weniger Sekunden erledigt, sodass du die Verifizierung anstoßen kannst.

Bei erfolgreicher Bestätigung hast du vollumfänglichen Zugriff auf die Search Console. Ab sofort werden Daten gesammelt und ausgewertet. Dies dauert ein paar Tage, da diese nicht nachträglich erfasst werden können.

Häufig gestellte Fragen

Wie lange dauert es, bis ich bei SEO erste Erfolge sehe?

Leider gibt es keine pauschale Antwort auf diese Frage, da zu viele externe Faktoren in diese Rechnung eingebracht werden müssen. Neben der eigenen Qualität spielt der Wettbewerb eine große Rolle. In meinen bisherigen SEO-Projekten stellte sich nach rund sechs Monaten eine deutlich verbesserte Sichtbarkeit in den Suchmaschinen ein. Je nach Branche kann es auch flotter gehen - oder eben länger dauern.

SEO ist definitiv kein schnelles Instrument, um Traffic zu generieren, sondern vielmehr in langfristiges Investment. Umso wichtiger ist es, eine klare Strategie in der Hand zu haben.

Benötige ich zwingend ein Analyse-Tool für meine Website?

Tools wie Google Analytics oder Fathom sind kein Muss, erleichtern das Leben jedoch enorm. Du erfährst mehr über deine Webseitenbesucher und deren Vorlieben, da verschiedene Parameter getrackt werden. Die wichtigsten sind beispielsweise:

  • Verweildauer auf den einzelnen Seiten
  • Absprungrate (der Nutzer verlässt die Website ohne einen weiteren Seitenaufruf wieder)
  • Conversion-Tracking
  • Verweise von anderen Websites (Referrals)
  • teilweise demografische Daten (Geschlecht, Herkunft, usw.)
  • technische Informationen (verwendetes Endgerät, Browser, Auflösung des Displays, etc.)

Mit Hilfe solcher Daten kannst du deinen Content immer weiter verbessern und Besuchern eine bessere User Experience liefern. Merkst du, dass eine Seite eine besonders hohe Absprungrate hat, kannst du in die Analyse einsteigen und herausfinden, wie du diese beheben kannst.

Natürlich spielt auch das Thema Datenschutz immer eine wichtige Rolle, denn es werden eine Menge sensibler Daten über den User erfasst. Daher ist es essenziell, dass du einen Cookie-Banner auf deine Website einrichtest. Dieser fragt den Nutzer, ob er mit der Speicherung von Cookies einverstanden ist. Erst danach darf ein Tool wie Google Analytics die Arbeit aufnehmen und Daten sammeln.

Eine sichere Alternative ist hier Fathom. Das Tool kommt ohne Cookies aus, hat jedoch weitaus weniger Informationen über den Nutzer. Die für mich wichtigsten Daten werden dagegen vollständig abgedeckt. Im Gegensatz zu Google Analytics ist Fathom kostenpflichtig (14 US-Dollar im Monat). Dafür kannst du bis zu 50 Projekte in deinen Account einbinden und verwalten.

Wie schlägt sich Webflow im Vergleich zu anderen CMS'?

Ich habe vorher zehn Jahre mit WordPress gearbeitet und wurde zunehmend frustrierter über den Funktionsumfang. Selbst für einfachste SEO-Einstellungen musste ich ein Plug-in installieren. Umfangreiche Tools kosten rund 100 Euro im Jahr, was natürlich keine große Investition ist. Jedoch sollte so ein mächtiges Werkzeug wie WordPress ein gewisses Maß an Grundfunktionen mitbringen, schließlich handelt es sich dabei um eine Blogsoftware.

Wix und Squarespace bieten deutlich mehr Basisfunktionen an, sodass eine ernsthafte Suchmaschinenoptimierung möglich ist. Positiv überrascht war ich, als ich Webflow das erste Mal aus der SEO-Perspektive getestet habe. Keine Plug-ins, alles im Preis inkludiert und selbst für Anfänger sofort umsetzbar.

Lesetipp: Was kostet Webflow? Preise und Pakete im Überblick!

Zusammengefasst: Webflow braucht sich vor der Konkurrenz nicht verstecken, hat eine Menge Umfang, um SEO zu betreiben und setzt dabei auf Einfachheit für den Nutzer.

In einem anderen Blogartikel gehe ich tiefer auf die Unterschiede zwischen WordPress, Wix, Squarespace und Webflow ein.

Was ist besser: SEO oder SEA?

Diese beiden unterschiedlichen Marketing-Methoden haben ein gemeinsames Ziel: Die digitale Sichtbarkeit erhöhen - entweder kostenlos oder durch bezahlte Werbeanzeigen. Eine umfangreiche Suchmaschinenoptimierung kann für langfristig erhöhte Sichtbarkeit sorgen, erfordert jedoch ein gewisses Maß an Zeit und Arbeit, welche in die Erstellung von attraktiven und problemlösenden Inhalten investiert wird.

SEA (Search Engine Advertising) hingegen ist deutlich schnelllebiger. Theoretisch kannst du dein Produkt oder Dienstleistung in wenigen Minuten für alle interessierte Kunden sichtbar machen. Ist dein Budget jedoch aufgebraucht, wird auch der Traffic auf deiner Seite mit sofortiger Wirkung zurückfahren.

Beide Methoden haben ihre Daseinsberechtigung und sind für unterschiedliche Ziele geeignet. Möchtest du langfristig und vor allem nachhaltig mehr Menschen auf deine Seite locken, so entscheidest du dich für SEO. Kurzfristiger Traffic wird über Anzeigenschaltung realisiert. Idealerweise hast du sowohl SEO als auch SEA in deinem Maßnahmenportfolio, sodass du von beidem profitieren kannst.

Wie kann ich selbst SEO erlernen?

Das ist gar nicht so schwer, wie du vielleicht denkst! Du hast viele Möglichkeiten, um dir die Grundlagen anzueignen. Es gibt verschiedene Onlinekurse, Schulungen und Workshops und Ausbildungen im Schnelldurchlauf (6 Wochen bei Vollzeit, berufsbegleitend sind es sechs Monate).

Bevor du jetzt viel Geld in die Weiterbildung investierst, empfehle ich dir, dich einmal mit dem kostenlosen Programm von Google auseinanderzusetzen. Dieser ist sehr umfangreich und gibt dir ein breites Grundlagenwissen an die Hand. Du kannst in diesem Kurs prüfen, ob das ganze Thema wirklich etwas für dich ist und anschließend immer noch investieren.

SEM ist Teil des klassischen Onlinemarketings, sodass du dich langfristig auch mit diesem Bereich befassen wirst.

Fazit

Vielen Dank, dass du bis hierhin gelesen hast! Ich hoffe, dass ich dir zeigen konnte, dass die Suchmaschinenoptimierung keine Raketenwissenschaft ist und du schon mit einfachen Mitteln große Erfolge erzielen kannst. Besonders dank der umfangreichen Funktionen von Webflow, für die du keinen einzigen Cent zahlen musst, macht die Umsetzung auch richtig Spaß.

Setze dich mit SEO auseinander und habe einen Blick auf alle Themen. Vermeide es unbedingt, dich auf ein einziges Gebiet zu versteifen und alles andere aus den Augen zu lassen. Wenn du deinem Webseitenbesucher die beste Erfahrung in Form von tollen Inhalten lieferst, hast du schon gewonnen.

Steve von wyreframe
Webdesigner
* Um den Lesefluss nicht zu beeinträchtigen wird zwar nur die männliche Form genannt, stets aber die weibliche Form gleichermaßen mitgemeint. Menschen jeglichen Geschlechts sind mir als Leser*innen herzlich willkommen 🌈❤️

Ähnliche Artikel

Dir gefällt was du siehst?

Du möchtest in eine neue Website investieren und bist auf der Suche nach einem professionellen Webdesigner? Lass uns unverbindlich über deine Probleme, Wünsche und Projektziele reden. Sende mir einfach eine Projektanfrage und wir gehen es an!