Smartcat Website Translator: O que faz e como funciona

O Website Translator da Smartcat é uma ferramenta de localização baseada em script que traduz seu site sem alterar o CMS, o backend ou a base de código.

Em vez de criar versões em diferentes idiomas de um site com vários URLs, ele atua diretamente na página exibida no navegador. Basta adicionar um pequeno trecho de JavaScript ao site, escolher os idiomas de destino e suas páginas serão traduzidas e exibidas automaticamente para visitantes internacionais.

O conteúdo traduzido é armazenado em uma CDN e é gerado dinamicamente quando os visitantes carregam o site.

Como a tradução é feita diretamente no site já renderizado, e não no backend, geralmente pode ser implementada sem grande envolvimento da equipe de engenharia. Em resumo, com o Smartcat, as equipes de conteúdo e marketing podem cuidar da tradução.

A tradução da Smartcat resume-se a - traduzir o que os usuários veem no navegador.

Quando alguém visita seu site, o navegador renderiza a página a partir de HTML, CSS e JavaScript, que, juntos, formam o resultado visual final.

Esta página renderizada existe como uma estrutura chamada DOM ( Modelo de Objetos de Documento ), e é com isso que o tradutor trabalha.

Um pequeno trecho de JavaScript adicionado ao site é executado quando a página é carregada. Ele detecta as configurações de idioma do visitante, busca as traduções relevantes na CDN da Smartcat e substitui o texto visível na página. Os usuários podem alternar entre os idiomas manualmente, e sua preferência é mantida enquanto navegam pelo site.

Como todo o sistema de tradução funciona na camada do navegador, a pilha de back-end do site não faz diferença neste caso. Não importa se o site foi criado com WordPress, Shopify, Webflow, front-ends React ou mesmo sistemas legados mais antigos. Desde que o site seja exibido em um navegador, o tradutor funciona.

O script também não para após o carregamento inicial da página. Os sites modernos não carregam tudo de uma vez. Podem surgir janelas modais após cliques, menus suspensos preenchidos a partir de APIs e/ou mensagens de validação exibidas após o envio de formulários.

Assim, em vez de analisar a página uma vez e parar, o script fica constantemente atento aos novos nós de texto que aparecem no DOM e os traduz à medida que são renderizados.

O processo de configuração do Smartcat é mais rápido do que você imagina.

Um projeto é iniciado assim que você insere a URL do site e seleciona os idiomas de destino. Em seguida, o Smartcat gera uma versão de pré-visualização do site dentro de sua própria interface, atuando como proxy das páginas renderizadas e traduzindo-as.

Em seguida, a equipe de conteúdo pode revisar as páginas traduzidas, fazer edições e aprovar a versão final.

Assim que as traduções forem aprovadas, a Smartcat as publica como arquivos JSON leves em sua CDN. Depois, basta adicionar um único trecho de código JavaScript ao cabeçalho da página do seu site para que a tradução seja ativada no site ao vivo.

A partir daí, sempre que um usuário visita o site, o conteúdo traduzido é obtido da CDN e exibido ao visitante no idioma de sua preferência.

Você pode conferir o guia de configuração passo a passo aqui.

A arquitetura da Smartcat oferece várias vantagens importantes em relação às abordagens tradicionais de tradução. Entre elas estão:

Uma das maiores frustrações das ferramentas tradicionais de tradução de sites é a sua abrangência. O conteúdo da página principal é traduzido, mas os elementos interativos muitas vezes não são.

Os formulários permanecem no idioma original, os verbos modais aparecem como estão, e os menus suspensos e as mensagens de validação continuam sem tradução. Para um visitante, o site parece estar apenas parcialmente traduzido.

Como o Smartcat Translator trabalha diretamente no DOM renderizado, ele consegue capturar o conteúdo que aparece após o carregamento inicial da página. Isso inclui elementos da interface do usuário renderizados dinamicamente, como janelas modais, pop-ups, notificações, menus suspensos e quaisquer componentes renderizados por frameworks de JavaScript depois que a página se torna interativa.

Assim, em vez de traduzir um instantâneo estático da página, o script monitora continuamente o texto novo que aparece na interface e o traduz à medida que é exibido.

A Smartcat disponibiliza as traduções publicadas por meio de uma CDN, em vez de diretamente de seus servidores.

Como resultado, os recursos de tradução são leves, armazenados em cache e fornecidos a partir de locais de borda próximos ao visitante, o que torna a entrega rápida mesmo em grandes sites multilíngues.

Isso também significa resiliência. Depois que as traduções são publicadas, elas continuam funcionando mesmo que o Smartcat esteja fora do ar e temporariamente indisponível.

O sistema também não exige que todas as páginas sejam traduzidas antecipadamente.

Quando um visitante acessa um conteúdo não traduzido, o script pode gerar a tradução sob demanda, armazená-la em cache e reutilizá-la em visitas futuras. Assim, todos os visitantes a partir daí recebem a versão em cache instantaneamente. A Smartcat chama esse mecanismo de "crowding."

A única desvantagem é um pequeno custo de latência, ou seja, um atraso na tradução, nas primeiras visitas a conteúdos novos ou atualizados.

O Smartcat é compatível com vários provedores de tradução, incluindo Google, DeepL, Gemini, ChatGPT, Claude, Apple, Amazon e Microsoft, e aplica sua lógica para selecionar o melhor para cada par de idiomas.

Os sites costumam utilizar terminologias específicas, nomes próprios de marcas e jargões do setor que precisam ser reutilizados de forma consistente. Esses termos muitas vezes podem se perder na tradução.

O Smartcat lida com memórias de tradução e permite que você reutilize termos específicos de forma consistente entre os idiomas. Você também pode ajustar a tradução com instruções personalizadas para os motores LLM no que diz respeito ao tom e ao estilo.

Os sites possuem seções que se repetem, como cabeçalhos, rodapés, menus de navegação e banners, que aparecem em todas as páginas.

O st-shared-section atributo permite que as equipes definam seções compartilhadas para que elementos recorrentes sejam traduzidos uma única vez e reutilizados de forma consistente em todos os lugares.

Além do corpo do texto visível, a Smartcat também oferece a opção de traduzir elementos que afetam o SEO.

Os metadados do site, como títulos de páginas, descrições, atributos alt de imagens, texto de preenchimento, rótulos ARIA e tags hreflang, também são traduzidos.

Alguns sites podem conter informações pessoais ou confidenciais que não devem ser traduzidas.

Para resolver isso, o Smartcat permite que os proprietários de sites excluam explicitamente seções da página da tradução.

Os elementos marcados com o st-ignore atributo são totalmente ignorados pelo sistema de tradução, juntamente com o conteúdo dentro deles. Isso permite que as equipes isolem dados de conta, detalhes de pagamento, ferramentas internas ou outras áreas sensíveis da interface dos fluxos de trabalho de tradução.

Os sites que desejam um controle mais rigoroso sobre o tratamento de dados também podem desativar totalmente a tradução sob demanda e recorrer apenas a recursos de tradução pré-publicados.

Todo modelo de tradução envolve compromissos. A abordagem baseada em scripts da Smartcat apresenta várias vantagens que discutimos acima, mas também tem limitações, principalmente decorrentes do ambiente do navegador em que opera.

Um dos maiores obstáculos são os iframes entre domínios.

Se um site incorporar uma ferramenta de reservas de terceiros, um formulário de pagamento, ferramentas de agendamento incorporadas ou widgets externos, as regras de segurança do navegador impedem que o script acesse o conteúdo dentro.

Essa limitação se aplica a qualquer sistema de tradução baseado em navegador. A única solução alternativa é instalar um script de tradução dentro do iframe separadamente, o que só é possível se você também controlar a fonte incorporada.

O layout é outro caso de exceção comum, especialmente para idiomas que seguem a direção da direita para a esquerda (RTL), como o árabe ou o hebraico. O Smartcat pode alterar a direção da página usando o suporte nativo do navegador para RTL, mas não consegue reescrever o CSS do site.

Layouts baseados em contêineres de largura fixa, posicionamento codificado ou suposições de alinhamento à esquerda/direita costumam apresentar falhas quando se trata de textos traduzidos mais longos ou interfaces espelhadas.

O mesmo problema ocorre com a expansão de texto em idiomas como o alemão ou o francês. O editor contextual ajuda a identificar esses problemas durante a revisão, mas corrigir o layout subjacente está além das capacidades do Smartcat neste caso. O proprietário do site ou a equipe de engenharia precisa resolver a questão do layout.

Quando um visitante acessa um conteúdo que ainda não foi traduzido, o sistema gera e armazena a tradução em cache antes de exibi-la.

Os visitantes subsequentes recebem a versão em cache instantaneamente, mas na primeira visita pode ocorrer um breve atraso.

Sistemas de proteção contra bots, como o Cloudflare, às vezes impedem que a visualização do Smartcat seja carregada durante a configuração, pois as solicitações são originadas de endereços IP da AWS e parecem tráfego automatizado. A solução é colocar os endereços IP estáticos do Smartcat na lista de permissões.

Aplicativos de página única criados com frameworks como o React podem, ocasionalmente, apresentar conflitos de renderização se a estrutura HTML traduzida não for preservada corretamente.

As extensões de navegador que inserem conteúdo no DOM também podem gerar ruído que a camada de tradução tenta processar. O Smartcat possui filtros para extensões conhecidas e detecção do idioma de origem para mitigar esse problema.

O Smartcat Website Translator não é adequado para todos os sites.

É muito útil para equipes que precisam oferecer suporte a vários idiomas sem precisar reformular sua infraestrutura existente.

Podem ser produtos SaaS voltados para usuários internacionais, sites com grande volume de conteúdo e empresas que estão se expandindo para novos mercados, mas não querem que a localização fique vinculada aos ciclos de lançamento de versões de engenharia.

Para sites menores, com apenas algumas páginas ou um ou dois idiomas de destino, um plugin de CMS mais simples ou um fluxo de trabalho manual costuma ser suficiente.

As vantagens de um sistema de tradução integrado ao navegador, como o Smartcat, tornam-se evidentes à medida que o volume de conteúdo, o número de idiomas e a frequência das atualizações aumentam.

Então, se você está procurando uma ferramenta de tradução para o seu site e não quer se preocupar com alterações no código-fonte ou com o gerenciamento de URLs duplicadas, confira o Smartcat Website Translator .