Smartcat Website Translator: Was er leistet und wie er funktioniert

Der Website Translator von Smartcat ist ein skriptbasiertes Lokalisierungstool, das Ihre Website übersetzt, ohne das CMS, das Backend oder den Code zu verändern.

Anstatt separate Sprachversionen einer Website mit mehreren URLs zu erstellen, arbeitet es direkt auf der gerenderten Seite im Browser. Sie fügen ein kleines JavaScript-Snippet zur Website hinzu, wählen die Zielsprachen aus, und Ihre Seiten werden automatisch übersetzt und internationalen Besuchern angezeigt.

Der übersetzte Inhalt wird auf einem CDN gespeichert und dynamisch gerendert, wenn Besucher die Website aufrufen.

Da die Übersetzung auf der gerenderten Website und nicht im Backend erfolgt, kann sie in der Regel ohne größeren technischen Aufwand bereitgestellt werden. Kurz gesagt: Mit Smartcat können Content- und Marketing-Teams die Übersetzung selbst übernehmen.

Die Übersetzung von Smartcat läuft darauf hinaus, das zu übersetzen, was die Nutzer in ihrem Browser sehen.

Wenn jemand Ihre Website besucht, rendert sein Browser die Seite aus HTML, CSS und JavaScript, die zusammen die endgültige visuelle Darstellung ergeben.

Diese gerenderte Seite existiert als eine Struktur namens DOM ( Document Object Model ), und damit arbeitet der Übersetzer.

Ein kleines JavaScript-Snippet, das der Website hinzugefügt wurde, wird beim Laden der Seite ausgeführt. Es erkennt die Spracheinstellungen des Besuchers, ruft die entsprechenden Übersetzungen vom CDN von Smartcat ab und ersetzt den sichtbaren Text auf der Seite. Benutzer können die Sprache manuell wechseln, und ihre Einstellung bleibt erhalten, während sie sich auf der Website bewegen.

Da das gesamte Übersetzungssystem auf Browserebene funktioniert, spielt der Backend-Stack der Website hier keine Rolle. Ganz gleich, ob die Website mit WordPress, Shopify, Webflow, React-Frontends oder sogar älteren Altsystemen erstellt wurde. Solange die Website im Browser dargestellt wird, funktioniert der Übersetzer.

Das Skript wird auch nach dem ersten Laden der Seite nicht beendet. Moderne Websites laden nicht alles auf einmal. Es können nach Klicks Modalfenster erscheinen, Dropdown-Menüs, die Daten aus APIs abrufen, und/oder Validierungsmeldungen, die nach dem Absenden von Formularen angezeigt werden.

Anstatt also die Seite einmal zu scannen und dann anzuhalten, überwacht das Skript kontinuierlich, ob neue Textknoten im DOM erscheinen, und übersetzt diese während der Darstellung.

Die Einrichtung von Smartcat dauert weniger lang, als Sie vielleicht denken.

Ein Projekt beginnt, sobald Sie die URL der Website eingeben und die Zielsprachen auswählen. Smartcat erstellt dann eine Vorschauversion der Website innerhalb seiner eigenen Benutzeroberfläche, indem es die gerenderten Seiten über einen Proxy abruft und übersetzt.

Anschließend kann das Content-Team die übersetzten Seiten überprüfen, Änderungen vornehmen und die endgültige Version freigeben.

Sobald die Übersetzungen freigegeben sind, veröffentlicht Smartcat sie als kompakte JSON-Dateien auf seinem CDN. Anschließend müssen Sie lediglich ein einziges JavaScript-Snippet in den Kopfbereich Ihrer Website einfügen, damit die Übersetzung auf der Live-Seite aktiviert wird.

Von dort aus wird der übersetzte Inhalt bei jedem Besuch der Website vom CDN abgerufen und dem Besucher in seiner bevorzugten Sprache angezeigt.

Hier finden Sie die Schritt-für-Schritt-Anleitung zur Einrichtung hier.

Die Architektur von Smartcat bietet gegenüber herkömmlichen Übersetzungsansätzen mehrere wesentliche Vorteile. Dazu gehören:

Einer der größten Kritikpunkte an herkömmlichen Tools zur Website-Übersetzung ist deren Abdeckung. Der Inhalt der Hauptseite wird zwar übersetzt, interaktive Elemente jedoch oft nicht.

Die Formulare bleiben in der Originalsprache, Modalfenster werden unverändert angezeigt, und Dropdown-Menüs sowie Validierungsmeldungen bleiben unübersetzt. Für einen Besucher wirkt die Website nur teilweise übersetzt.

Da der Smartcat Translator direkt auf dem gerenderten DOM arbeitet, kann er Inhalte erfassen, die nach dem ersten Laden der Seite erscheinen. Dazu gehören dynamisch gerenderte UI-Elemente wie Modals, Popups, Benachrichtigungen, Dropdown-Menüs und alle Komponenten, die von JavaScript-Frameworks gerendert werden, nachdem die Seite interaktiv geworden ist.

Anstatt also eine statische Momentaufnahme der Seite zu übersetzen, überwacht das Skript kontinuierlich, ob neuer Text in der Benutzeroberfläche erscheint, und übersetzt diesen während der Darstellung.

Smartcat stellt die veröffentlichten Übersetzungen über ein CDN bereit und nicht direkt von seinen Servern.

Dadurch sind die Übersetzungsinhalte schlank, werden zwischengespeichert und von Standorten in der Nähe des Besuchers bereitgestellt, was die Bereitstellung selbst auf großen mehrsprachigen Websites beschleunigt.

Das bedeutet auch Ausfallsicherheit. Sobald Übersetzungen veröffentlicht sind, bleiben sie auch dann verfügbar, wenn Smartcat ausfällt und vorübergehend nicht erreichbar ist.

Das System verlangt zudem nicht, dass jede Seite im Voraus übersetzt wird.

Wenn ein Besucher auf nicht übersetzte Inhalte stößt, kann das Skript die Übersetzung bei Bedarf generieren, zwischenspeichern und bei zukünftigen Besuchen wiederverwenden. So erhält jeder nachfolgende Besucher die zwischengespeicherte Version sofort. Smartcat bezeichnet diesen Mechanismus als „Crowding“

Der einzige Nachteil ist ein geringer Latenzverlust, d. h. eine Verzögerung bei der Übersetzung, beim ersten Aufruf neuer oder aktualisierter Inhalte.

Smartcat unterstützt mehrere Übersetzungsanbieter, darunter Google, DeepL, Gemini, ChatGPT, Claude, Apple, Amazon und Microsoft, und wählt anhand seiner eigenen Logik für jedes Sprachpaar den besten Anbieter aus.

Websites verwenden häufig spezifische Fachbegriffe, markenspezifische Bezeichnungen und Branchenjargon, die einheitlich wiederverwendet werden müssen. Diese Begriffe gehen bei der Übersetzung oft verloren.

Smartcat verwaltet Übersetzungsspeicher und ermöglicht es Ihnen, bestimmte Begriffe sprachübergreifend einheitlich wiederzuverwenden. Außerdem können Sie die Übersetzung mithilfe benutzerdefinierter Vorgaben für LLM-Engines hinsichtlich Tonfall und Stil optimieren.

Websites enthalten sich wiederholende Abschnitte wie Kopf- und Fußzeilen, Navigationsmenüs und Banner, die auf allen Seiten erscheinen.

Das st-shared-section Attribut ermöglicht es Teams, gemeinsame Abschnitte zu definieren, sodass wiederkehrende Elemente nur einmal übersetzt und überall einheitlich wiederverwendet werden.

Neben dem sichtbaren Fließtext bietet Smartcat auch die Möglichkeit, Elemente zu übersetzen, die sich auf die Suchmaschinenoptimierung (SEO) auswirken.

Die Metadaten der Website, wie Seitentitel, Beschreibungen, Alt-Attribute von Bildern, Platzhaltertext, ARIA-Labels und hreflang-Tags, werden ebenfalls übersetzt.

Einige Websites können persönliche oder sensible Informationen enthalten, die nicht übersetzt werden sollten.

Um dies zu bewerkstelligen, bietet Smartcat Website-Betreibern die Möglichkeit, bestimmte Abschnitte der Seite ausdrücklich von der Übersetzung auszuschließen.

Elemente, die mit dem st-ignore Attribut gekennzeichnet sind, werden vom Übersetzungssystem vollständig übersprungen, ebenso wie der darin enthaltene Inhalt. Dies bietet Teams die Möglichkeit, Kontodaten, Zahlungsdetails, interne Tools oder andere sensible Bereiche der Benutzeroberfläche von den Übersetzungsworkflows zu isolieren.

Websites, die eine strengere Kontrolle über den Umgang mit Daten wünschen, können die Übersetzung auf Abruf auch vollständig deaktivieren und sich ausschließlich auf vorab veröffentlichte Übersetzungsinhalte stützen.

Jedes Übersetzungsmodell bringt Vor- und Nachteile mit sich. Der skriptbasierte Ansatz von Smartcat bietet mehrere Vorteile, die wir oben bereits erörtert haben, unterliegt jedoch auch Einschränkungen, die hauptsächlich auf die Browserumgebung zurückzuführen sind, in der er ausgeführt wird.

Eines der größten Hindernisse sind domänenübergreifende Iframes.

Wenn eine Website ein Buchungstool, ein Zahlungsformular, integrierte Terminplanungs-Tools oder externe Widgets eines Drittanbieters einbindet, verhindern die Sicherheitsregeln des Browsers, dass das Skript auf die Inhalte innerhalb von zugreifen kann.

Diese Einschränkung gilt für alle browserbasierten Übersetzungssysteme. Die einzige Abhilfe besteht darin, ein Übersetzungsskript separat innerhalb des iframe zu installieren, was jedoch nur möglich ist, wenn Sie auch die eingebettete Quelle kontrollieren.

Das Layout ist ein weiterer häufiger Sonderfall, insbesondere bei Sprachen mit Rechts-nach-links-Schriftlauf wie Arabisch oder Hebräisch. Smartcat kann die Seitenausrichtung mithilfe der nativen RTL-Unterstützung des Browsers umschalten, kann jedoch das CSS der Website nicht umschreiben.

Layouts, die auf Containern mit fester Breite, fest programmierten Positionierungen oder Annahmen bezüglich der Ausrichtung nach links oder rechts basieren, versagen oft bei längeren übersetzten Texten oder gespiegelten Benutzeroberflächen.

Das gleiche Problem tritt bei der Textersetzung in Sprachen wie Deutsch oder Französisch auf. Der In-Context-Editor hilft dabei, diese Probleme bei der Überprüfung aufzudecken, doch die Behebung des zugrunde liegenden Layouts liegt hier außerhalb der Möglichkeiten von Smartcat. Der Website-Betreiber oder das Entwicklerteam muss sich um das Layout kümmern.

Wenn ein Besucher auf Inhalte stößt, die noch nicht übersetzt wurden, generiert das System die Übersetzung und speichert sie im Cache, bevor sie bereitgestellt wird.

Nachfolgende Besucher erhalten die zwischengespeicherte Version sofort, doch beim ersten Besuch kann es zu einer kurzen Verzögerung kommen.

Bot-Schutzsysteme wie Cloudflare blockieren manchmal das Laden der Smartcat-Vorschau während der Einrichtung, da die Anfragen von AWS-IP-Adressen stammen und wie automatisierter Datenverkehr aussehen. Die Lösung besteht darin, die statischen IP-Adressen von Smartcat auf die Whitelist zu setzen.

Bei Single-Page-Anwendungen, die mit Frameworks wie React erstellt wurden, kann es gelegentlich zu Darstellungskonflikten kommen, wenn die übersetzte HTML-Struktur nicht korrekt beibehalten wird.

Browser-Erweiterungen, die Inhalte in das DOM einfügen, können ebenfalls Störsignale erzeugen, die die Übersetzungsschicht zu verarbeiten versucht. Smartcat verfügt über Filter für bekannte Erweiterungen und eine Erkennung der Ausgangssprache, um dies zu minimieren.

Der Smartcat Website Translator ist nicht für jede Website geeignet.

Es ist besonders nützlich für Teams, die mehrere Sprachen unterstützen müssen, ohne ihre bestehende Infrastruktur neu aufbauen zu müssen.

Dazu zählen SaaS-Produkte für internationale Nutzer, inhaltsreiche Websites sowie Unternehmen, die in neue Märkte expandieren, ohne dass die Lokalisierung an die Release-Zyklen der Entwicklung gebunden sein soll.

Für kleinere Websites mit nur wenigen Seiten oder ein bis zwei Zielsprachen reicht oft ein einfacheres CMS-Plugin oder ein manueller Arbeitsablauf aus.

Die Vorteile eines browserbasierten Übersetzungssystems wie Smartcat werden umso deutlicher, je größer das Inhaltsvolumen, die Anzahl der Sprachen und die Häufigkeit der Aktualisierungen sind.

Wenn Sie also auf der Suche nach einem Übersetzungstool für Ihre Website sind und sich den Aufwand ersparen möchten, den Code zu ändern oder doppelte URLs zu verwalten, schauen Sie sich den Smartcat Website Translator an.