Inhaltsverzeichnis
Webflow Lokalisierung: Ein Leitfaden zum Erstellen mehrsprachiger Websites
Webflow hat native Lokalisierungsunterstützung eingeführt, die es Designern und Marketingfachleuten ermöglicht, mehrsprachige Websites direkt im Webflow Designer zu erstellen. Diese Funktion beseitigt die Notwendigkeit von Drittanbieter-Übersetzungs-Plugins oder dem Duplizieren ganzer Projekte für jede Sprache.
Dieser Leitfaden behandelt, wie die Webflow-Lokalisierung funktioniert, ihre Möglichkeiten und Einschränkungen, die SEO-Handhabung und wie sie in einen umfassenderen Lokalisierungs-Workflow passt.
Wie die Webflow-Lokalisierung funktioniert
Webflows Lokalisierungsfunktion verwendet ein gebietsschemabasiertes System, bei dem Sie ein primäres Gebietsschema (Ihre Ausgangssprache) definieren und sekundäre Gebietsschemata für jede weitere Sprache hinzufügen.
Schlüsselkonzepte
- Primäres Gebietsschema — Ihre Standardsprache. Alle Inhalte werden zunächst im primären Gebietsschema erstellt.
- Sekundäre Gebietsschemata — Zusätzliche Sprachen. Jedes sekundäre Gebietsschema kann beliebige Texte, Bilder oder die Sichtbarkeit von Elementen des primären Gebietsschemas überschreiben.
- Gebietsschema-Unterordner — Webflow generiert URLs mit Gebietsschema-Präfixen:
example.com/fr/about,example.com/de/about. - Gebietsschema-Umschalter — Eine integrierte Komponente, die Besuchern ermöglicht, zwischen Sprachen zu wechseln.
Gebietsschemata einrichten
- Öffnen Sie Ihre Webflow-Projekteinstellungen
- Navigieren Sie zum Tab Locales
- Fügen Sie sekundäre Gebietsschemata hinzu, indem Sie eine Sprache und Region auswählen
- Konfigurieren Sie Anzeigenamen und URL-Präfixe für jedes Gebietsschema
Webflow unterstützt eine breite Palette von Sprach-Region-Kombinationen gemäß den BCP 47-Standards (z. B. en-US, fr-FR, pt-BR).
Inhalte übersetzen
Statische Inhalte
Für statische Seiteninhalte (Überschriften, Absätze, Schaltflächen) bietet Webflow eine kontextbezogene Bearbeitungserfahrung:
- Wechseln Sie über den Gebietsschema-Umschalter im Designer zu einem sekundären Gebietsschema
- Klicken Sie auf ein beliebiges Textelement — der Text des primären Gebietsschemas erscheint als Referenz
- Geben Sie den übersetzten Text direkt im Designer ein
- Visuelle Formatierung und Gestaltung bleiben gebietsschemaübergreifend konsistent
Dieser Inline-Ansatz bedeutet, dass Designer und Übersetzer genau sehen können, wie der übersetzte Text im endgültigen Layout erscheinen wird, und Überlauf- oder Layoutprobleme sofort erkennen.
CMS-Inhalte
Webflow-CMS-Kollektionen unterstützen gebietsschemaspezifische Inhalte:
- Jedes CMS-Feld kann gebietsschemaspezifische Werte haben
- Kollektionsseiten generieren automatisch gebietsschema-präfixierte URLs
- Rich-Text-Felder, Bilder und andere Feldtypen sind alle lokalisierbar
- Referenz- und Mehrfachreferenzfelder können lokalisiert werden, um auf gebietsschemagerechte verwandte Inhalte zu verweisen
Ein Blog-Post-Collection kann beispielsweise für jedes Gebietsschema unterschiedliche Titel, Textinhalte und Hauptbilder haben, während dieselbe Slug-Struktur geteilt wird.
Elemente, die Sie lokalisieren können
- Textinhalt — Beliebiges Textelement (Überschriften, Absätze, Links, Schaltflächen)
- Bilder und Alt-Text — Bilder pro Gebietsschema austauschen (nützlich für Screenshots mit lokalisierter Benutzeroberfläche)
- Element-Sichtbarkeit — Bestimmte Elemente pro Gebietsschema anzeigen oder ausblenden
- Link-URLs — Link-Ziele pro Gebietsschema ändern (z. B. gebietsschemaspezifische Dokumentation)
- Formularfelder — Platzhaltertext und Beschriftungen lokalisieren
- CMS-Inhalte — Alle CMS-Feldtypen unterstützen gebietsschemaspezifische Werte
Gemeinsam genutzte Elemente
- Layout und Struktur — Das Seitenlayout wird über alle Gebietsschemata geteilt
- Stile und Klassen — CSS-Styling ist global
- Interaktionen und Animationen — Auslöser und Animationen gelten für alle Gebietsschemata
- Benutzerdefinierter Code — Eingebettete Skripte werden geteilt (die Spracherkennung müssen Sie selbst handhaben)
SEO und mehrsprachige Handhabung
Webflows Lokalisierungsfunktion übernimmt automatisch mehrere SEO-Anforderungen.
hreflang-Tags
Webflow generiert automatisch hreflang-Tags im <head> jeder Seite:
<link rel="alternate" hreflang="en" href="https://example.com/about" /> <link rel="alternate" hreflang="fr" href="https://example.com/fr/about" /> <link rel="alternate" hreflang="de" href="https://example.com/de/about" /> <link rel="alternate" hreflang="x-default" href="https://example.com/about" />
Diese Tags teilen Suchmaschinen mit, welche Sprachversion Nutzern in verschiedenen Regionen angezeigt werden soll.
Sitemap
Die generierte sitemap.xml enthält alle Gebietsschema-Varianten jeder Seite und hilft Suchmaschinen dabei, alle Sprachversionen zu entdecken und zu indexieren.
Gebietsschemaspezifische Meta-Tags
Sie können gebietsschemaspezifische Werte für folgende Felder festlegen:
- Seitentitel (
<title>) - Meta-Beschreibung
- Open Graph-Titel und -Beschreibung
- Open Graph-Bild
Dadurch wird sichergestellt, dass jedes Gebietsschema ordnungsgemäß optimierte Metadaten für Suchmaschinen und Social Sharing hat.
Einschränkungen
Keine maschinelle Übersetzung
Webflow enthält keine integrierte maschinelle Übersetzung. Alle Übersetzungen müssen manuell über den Designer eingegeben oder über die Webflow-API importiert werden. Dies ist eine bewusste Designentscheidung, die Qualität priorisiert, bedeutet aber, dass der anfängliche Übersetzungsaufwand vollständig beim Nutzer liegt.
Layout-Einschränkungen
Da alle Gebietsschemata dasselbe Layout teilen, kann Text, der in bestimmten Sprachen erheblich länger oder kürzer ist, zu Layoutproblemen führen. Deutscher Text ist oft 30-40 % länger als Englisch; Chinesischer und Japanischer Text kann kompakter sein. Testen Sie Layouts mit Ihrer längsten Zielsprache, um sicherzustellen, dass Container Überlauf elegant handhaben.
Keine Pluralisierung oder Variablen
Webflows Lokalisierung unterstützt kein ICU MessageFormat, keine Pluralregeln oder Variableninterpolation. Jede Textvariante muss eine separate, vollständige Zeichenkette sein. Für dynamische Inhalte, die von Zählungen oder Nutzerdaten abhängen, wäre benutzerdefiniertes JavaScript erforderlich.
Nur API-basierte Massenoperationen
Es gibt keinen integrierten Massenimport/-export für Übersetzungen im Webflow Designer. Für große Sites mit Hunderten von Seiten ist das manuelle Übersetzen über den visuellen Editor zeitaufwendig. Die Webflow-API unterstützt programmatisches Content-Management und ermöglicht die Integration mit externen Übersetzungstools.
Integration mit externem TMS
Für Teams, die Übersetzungen in großem Maßstab verwalten, ermöglicht die Integration von Webflow mit einem Translation Management System (TMS) über die API:
- Export — Ausgangssprachinhalt aus Webflow über die CMS-API abrufen
- Übersetzen — Professionelle Übersetzer arbeiten im TMS mit Translation Memory, Glossaren und Kontext
- Import — Fertige Übersetzungen über die API zurück in Webflow übertragen
Dieser Workflow ist besonders wertvoll für:
- Sites mit mehr als 50 Seiten oder CMS-Einträgen
- Teams, die mit professionellen Übersetzern oder Agenturen arbeiten
- Organisationen, die Translation Memory zur Wahrung der Konsistenz benötigen
- Projekte, die Terminologiemanagement über Webflow und andere Plattformen hinweg erfordern
Best Practices
Für die längste Sprache designen
Berücksichtigen Sie bei der Erstellung von Layouts die Texterweiterung. Ein Container, der „Sign Up" auf Englisch aufnimmt, muss auch „Registrieren" auf Deutsch oder „Inscription" auf Französisch unterbringen. Verwenden Sie flexible Container (Flexbox, Auto-Höhe) anstelle fester Abmessungen.
CMS für wiederholende Inhalte verwenden
Wenn derselbe übersetzte Text auf mehreren Seiten erscheint (Testimonials, Feature-Beschreibungen, FAQ-Einträge), speichern Sie ihn in einer CMS-Kollektion. Dadurch übersetzen Sie ihn einmal, und er wird überall aktualisiert, anstatt denselben Text auf jeder Seite separat zu übersetzen.
Gebietsschema-Struktur frühzeitig planen
Lokalisierung zu einer bestehenden Webflow-Site hinzuzufügen ist möglich, aber von Anfang an zu planen ist einfacher. Berücksichtigen Sie Ihre URL-Struktur, die Platzierung des Gebietsschema-Umschalters und das Fallback-Verhalten, bevor Sie mit dem Erstellen beginnen.
Bilder mit Text lokalisieren
Wenn Ihre Bilder Text enthalten (Hero-Banner, Infografiken, Social Proof), erstellen Sie gebietsschemaspezifische Versionen. Webflows gebietsschemabezogener Bildaustausch macht dies unkompliziert.
Häufig gestellte Fragen
Wie viel kostet die Webflow-Lokalisierung?
Webflow-Lokalisierung ist auf bestimmten Workspace-Plänen verfügbar. Die Anzahl der enthaltenen Gebietsschemata variiert je nach Planstufe. Aktuelle Details finden Sie auf Webflows aktueller Preisseite.
Kann ich Subdomains statt Unterordner verwenden?
Webflows native Lokalisierung verwendet unterordnerbasierte URLs (/fr/, /de/). Subdomain-basierte Lokalisierung (fr.example.com) erfordert ein anderes Setup mit separaten Webflow-Projekten oder benutzerdefiniertem Hosting.
Funktioniert die Webflow-Lokalisierung mit Webflow Ecommerce?
Ab 2025 bietet Webflows Lokalisierungsfunktion eingeschränkte Unterstützung für Ecommerce. Produktinhalte können lokalisiert werden, aber Preisgestaltung, Checkout und transaktionale E-Mails haben Einschränkungen. Den aktuellen Stand der Ecommerce-Lokalisierung finden Sie in Webflows Dokumentation.
Wie gehe ich mit Rechts-nach-Links (RTL)-Sprachen um?
Webflow unterstützt die RTL-Textrichtung über die Gebietsschema-Einstellungen. Wenn ein Nutzer ein RTL-Gebietsschema aufruft, werden Textausrichtung und Leserichtung angepasst. Ein vollständiges Layout-Spiegeln (Flexbox-Richtung, Randpositionen) kann jedoch benutzerdefinierte CSS-Überschreibungen erfordern.
