Smartcat Website Translator: Vad det gör och hur det fungerar

Smartcats Website Translator är ett skriptbaserat lokaliseringsverktyg som översätter din webbplats utan att ändra CMS, backend eller kodbasen.

I stället för att skapa separata språkversioner av en webbplats med flera olika webbadresser fungerar det direkt på den renderade sidan i webbläsaren. Du lägger till ett kort JavaScript-snippet på webbplatsen, väljer målspråk, och dina sidor översätts och visas automatiskt för internationella besökare.

Det översatta innehållet lagras på ett CDN och hämtas dynamiskt när besökare laddar webbplatsen.

Eftersom översättningen sker direkt på den redan renderade webbplatsen istället för i backend-systemet kan den oftast implementeras utan större tekniskt arbete. Kort sagt kan innehålls- och marknadsföringsteamen själva sköta översättningen med hjälp av Smartcat.

Smartcats översättning kan sammanfattas som – att översätta det som användarna ser i sin webbläsare.

När någon besöker din webbplats renderar webbläsaren sidan utifrån HTML, CSS och JavaScript, som tillsammans bildar det slutliga visuella resultatet.

Denna renderade sida existerar som en struktur som kallas DOM ( Document Object Model ), och det är det som översättaren arbetar med.

Ett litet JavaScript-snippet som lagts till på webbplatsen körs när sidan laddas. Det känner av besökarens språkinställningar, hämtar relevanta översättningar från Smartcats CDN och ersätter den synliga texten på sidan. Användarna kan byta språk manuellt, och deras val sparas när de navigerar vidare på webbplatsen.

Eftersom hela översättningssystemet fungerar på webbläsarnivå spelar webbplatsens backend-arkitektur ingen roll här. Det spelar ingen roll om webbplatsen är byggd med WordPress, Shopify, Webflow, React-frontend eller till och med äldre system. Så länge webbplatsen visas i en webbläsare fungerar översättningsverktyget.

Skriptet avbryts inte heller efter den första sidladdningen. Moderna webbplatser laddar inte allt på en gång. Det kan dyka upp modalfönster efter klick, rullgardinsmenyer som fylls i från API:er och/eller valideringsmeddelanden som visas efter att formulär har skickats in.

I stället för att skanna sidan en gång och sedan sluta, övervakar skriptet kontinuerligt om nya textnoder dyker upp i DOM och översätter dem allteftersom de renderas.

Smartcats installationsprocess går snabbare än du tror.

Ett projekt startar så snart du anger webbplatsens URL och väljer målspråk. Smartcat skapar sedan en förhandsgranskningsversion av webbplatsen i sitt eget gränssnitt genom att fungera som proxy för de renderade sidorna och översätta dem.

Därefter kan innehållsteamet granska de översatta sidorna, göra ändringar och godkänna den slutgiltiga versionen.

När översättningarna har godkänts publicerar Smartcat dem som kompakta JSON-filer på sitt CDN. Därefter behöver du bara lägga till ett enda JavaScript-kodavsnitt i sidhuvudet på din webbplats för att översättningen ska aktiveras på den live-publicerade webbplatsen.

Därefter hämtas det översatta innehållet från CDN:et och visas för besökaren på dennes önskade språk varje gång denne besöker webbplatsen.

Du kan läsa mer på steg-för-steg-guide för installation här.

Smartcats arkitektur erbjuder flera viktiga fördelar jämfört med traditionella översättningsmetoder. Dessa inkluderar:

En av de största nackdelarna med traditionella verktyg för webbplatsöversättning är deras täckning. Innehållet på startsidan översätts, men interaktiva element gör det ofta inte.

Formulären behåller sitt ursprungliga språk, modala fönster visas som de är, och rullgardinsmenyer samt valideringsmeddelanden förblir oöversatta. För en besökare ser webbplatsen ut att vara endast delvis översatt.

Eftersom Smartcats översättare arbetar direkt på det renderade DOM-objektet, kan den fånga upp innehåll som visas efter den första sidladdningen. Detta omfattar dynamiskt renderade gränssnittselement som modalfönster, popup-fönster, meddelanden, rullgardinsmenyer och alla komponenter som renderas av JavaScript-ramverk efter att sidan har blivit interaktiv.

I stället för att översätta en statisk ögonblicksbild av sidan övervakar skriptet kontinuerligt om ny text dyker upp i gränssnittet och översätter den samtidigt som den visas.

Smartcat levererar de publicerade översättningarna via ett CDN istället för direkt från sina egna servrar.

Detta innebär att översättningsresurserna är lätta, lagras i cache och levereras från edge-servrar nära besökaren, vilket gör leveransen snabb även på stora flerspråkiga webbplatser.

Det innebär också driftsäkerhet. När översättningarna väl har publicerats fortsätter de att fungera även om Smartcat är nere och tillfälligt inte är tillgängligt.

Systemet kräver inte heller att varje sida översätts i förväg.

När en besökare hamnar på ett icke-översatt innehåll kan skriptet generera översättningen på begäran, lagra den i cacheminnet och återanvända den vid framtida besök. På så sätt får alla efterföljande besökare omedelbart den cachade versionen. Smartcat kallar denna mekanism för ”crowding.”

Den enda nackdelen är en liten fördröjning, det vill säga en fördröjning i översättningen, vid första besöket på nytt eller uppdaterat innehåll.

Smartcat stöder flera översättningstjänster, däribland Google, DeepL, Gemini, ChatGPT, Claude, Apple, Amazon och Microsoft, och använder sin egen logik för att välja den bästa tjänsten för varje språkkombination.

Webbplatser använder ofta specifika termer, varumärkesspecifika namn och branschjargong som måste användas på ett enhetligt sätt. Dessa termer kan ofta gå förlorade i översättningen.

Smartcat hanterar översättningsminnen och gör det möjligt för dig att återanvända specifika termer på ett enhetligt sätt mellan olika språk. Du kan också finjustera översättningen med hjälp av anpassade instruktioner för LLM-motorer när det gäller ton och stil.

Webbplatser har återkommande avsnitt som sidhuvuden, sidfötter, navigeringsmenyer och banners som visas på alla sidor.

Attributet st-shared-section gör det möjligt för team att definiera delade avsnitt så att återkommande element översätts en gång och återanvänds på ett enhetligt sätt överallt.

Förutom den synliga brödtexten erbjuder Smartcat även möjligheten att översätta element som påverkar SEO.

Webbplatsens metadata, såsom sidrubriker, beskrivningar, alt-attribut för bilder, platshållartext, ARIA-etiketter och hreflang-taggar, översätts också.

Vissa webbplatser kan innehålla personuppgifter eller känslig information som inte bör översättas.

För att hantera detta gör Smartcat det möjligt för webbplatsägare att uttryckligen undanta delar av sidan från översättning.

Element som är markerade med attributet st-ignore hoppas över helt av översättningssystemet, tillsammans med innehållet inuti dem. Detta ger teamen möjlighet att isolera kontodata, betalningsuppgifter, interna verktyg eller andra känsliga gränssnittsområden från översättningsflödena.

Webbplatser som vill ha bättre kontroll över datahanteringen kan också inaktivera översättning på begäran helt och hållet och enbart använda förpublicerade översättningsresurser.

Varje översättningsmodell innebär vissa avvägningar. Smartcats skriptbaserade metod har flera fördelar som vi har diskuterat ovan, men den har också vissa begränsningar, främst på grund av den webbläsarmiljö där den används.

Ett av de största hindren är iframes mellan olika domäner.

Om en webbplats har ett inbäddat bokningsverktyg från tredje part, ett betalningsformulär, inbäddade schemaläggningsverktyg eller externa widgets, förhindrar webbläsarens säkerhetsregler att skriptet får åtkomst till innehållet inuti.

Denna begränsning gäller alla webbläsarbaserade översättningssystem. Den enda lösningen är att installera ett översättningsskript separat inuti iframe-rutan, vilket endast är möjligt om du även har kontroll över den inbäddade källan.

Layout är ett annat vanligt specialfall, särskilt för språk som skrivs från höger till vänster, såsom arabiska eller hebreiska. Smartcat kan ändra sidoriktningen med hjälp av webbläsarens inbyggda stöd för RTL, men kan inte skriva om webbplatsens CSS.

Layouter som bygger på behållare med fast bredd, hårdkodad placering eller antaganden om vänster- och högerjustering slutar ofta att fungera när det gäller längre översatt text eller speglade gränssnitt.

Samma problem uppstår vid textutvidgning på språk som tyska eller franska. Redigeringsverktyget i sammanhanget hjälper till att upptäcka dessa problem under granskningen, men att åtgärda den underliggande layouten ligger utanför Smartcats ansvarsområde. Webbplatsägaren eller teknikteamet måste ta itu med layouten.

När en besökare hamnar på innehåll som ännu inte har översatts genererar systemet översättningen och lagrar den i cacheminnet innan den visas.

Efterföljande besökare får omedelbart den cachade versionen, men det kan uppstå en kort fördröjning vid det första besöket.

Botskyddssystem som Cloudflare blockerar ibland laddningen av Smartcats förhandsgranskning under installationen, eftersom förfrågningarna kommer från AWS-IP-adresser och ser ut som automatiserad trafik. Lösningen är att lägga till Smartcats statiska IP-adresser i vitlistan.

Enkelsidiga applikationer som byggts med ramverk som React kan ibland drabbas av renderingskonflikter om den översatta HTML-strukturen inte bevaras korrekt.

Webbläsartillägg som infogar innehåll i DOM kan också skapa störningar som översättningslagret försöker hantera. Smartcat har filter för kända tillägg och funktioner för att identifiera källspråket för att minska detta problem.

Smartcat Website Translator är inte avsett för alla webbplatser.

Det är särskilt användbart för team som behöver hantera flera språk utan att behöva bygga om sin befintliga infrastruktur.

Det kan handla om SaaS-produkter riktade till internationella användare, innehållsrika webbplatser och företag som expanderar till nya marknader utan att vilja koppla lokaliseringen till tekniska release-cykler.

För mindre webbplatser med bara ett fåtal sidor eller ett eller två målspråk räcker det ofta med ett enklare CMS-plugin eller ett manuellt arbetsflöde.

Fördelarna med ett översättningssystem som fungerar direkt i webbläsaren, såsom Smartcat, blir tydliga när mängden innehåll, antalet språk och uppdateringsfrekvensen ökar.

Så, om du letar efter ett översättningsverktyg för din webbplats och vill slippa besväret med att ändra koden eller hantera dubbla webbadresser, kolla in Smartcat Website Translator .