Como construir um blog com oito idiomas

Montar as rotas de um site multilíngue é a parte mais documentada do problema. A parte difícil vem depois: manter oito versões de um blog vivo, com artigos novos toda semana, sem que nenhuma página misture idiomas ou publique tradução ruim.

Este tutorial trata dessa segunda parte: modelo de conteúdo, textos de interface, revisão, idiomas com escrita diferente e verificação antes de publicar. A estrutura de URLs com Astro está no texto como criar um site internacional com Astro, e as anotações de idioma para buscadores, em internacionalização e hreflang em projetos Astro.

Os exemplos vêm do próprio Token & Tech, que tem oito idiomas na arquitetura. Descrevemos apenas o que está no código do projeto.

Passo 1: escolha um idioma original

Antes de qualquer código, decida qual é a língua em que os textos nascem. As outras serão traduções dela.

Isso parece burocracia, mas resolve três problemas práticos:

• Correções. Quando um dado muda, você corrige o original e marca as traduções como desatualizadas, em vez de descobrir qual versão está certa.
• Revisão. O revisor de cada idioma compara com uma única referência.
• Prioridade. Se faltar tempo, o original sai primeiro e as traduções seguem quando estiverem prontas.

No Token & Tech, o português do Brasil é o idioma original e fica na raiz do domínio. Em src/lib/routes.ts, a função prefix devolve um caminho vazio para o idioma padrão e /<idioma> para os demais. Por isso este texto está em /desenvolvimento-e-ia-aplicada/..., e uma tradução em inglês ficaria sob /en/.

Na hora de nomear os idiomas, use etiquetas no padrão BCP 47 (o formato de códigos como pt-BR e en). A orientação do W3C sobre como escolher uma etiqueta de idioma tem uma regra de ouro: mantenha a etiqueta tão curta quanto possível e só acrescente a região quando ela trouxer informação necessária. Português do Brasil e de Portugal diferem bastante na escrita, então pt-BR se justifica. Para inglês, en costuma bastar.

Passo 2: separe o artigo das traduções

O erro clássico é ter um arquivo por artigo com campos titulo_en, titulo_es, titulo_fr… Com oito idiomas, esse arquivo vira uma planilha impossível de revisar.

O modelo que escala separa duas coisas:

1. O registro do artigo, que não depende de idioma: tipo, categoria, autoria, fontes, data de publicação.
2. Uma tradução por idioma, com título, descrição, slug (o trecho final da URL) e corpo do texto.

No Token & Tech, isso aparece em src/content.config.ts. O artigo fica em src/content/articles/<id>.yaml, e cada versão em src/content/article-translations/<id>/<idioma>.md. A coleção de traduções tem um campo status com quatro valores: draft, translation-pending, translation-review e published. Também registra quem traduziu, quem revisou o texto localizado e se uma máquina fez o primeiro rascunho (machineAssisted).

A vantagem é que cada idioma anda no próprio ritmo. Um artigo pode estar publicado em português e em inglês e, ao mesmo tempo, em revisão em alemão, sem que a versão alemã apareça no site.

Se você ainda está decidindo onde guardar esse conteúdo, o texto Markdown, MDX ou CMS headless compara as opções. O mecanismo de coleções tipadas está em Content Collections do Astro.

Passo 3: traduza a interface com chaves iguais em todos os idiomas

Além dos artigos, um blog tem dezenas de textos fixos: menu, rodapé, botões, mensagens de erro, rótulos de data. Esses textos ficam em dicionários, um por idioma.

A regra que evita buracos é exigir que todos os dicionários tenham as mesmas chaves. Em TypeScript, isso sai quase de graça: você declara o formato uma vez e faz cada dicionário obedecer a ele. Se faltar uma chave em japonês, o projeto não compila.

No Token & Tech, os dicionários ficam em src/i18n/ui/, um arquivo por idioma, todos tipados pelo mesmo tipo UI. Os segmentos fixos de URL (como a página de tópicos ou de autores) ficam em src/i18n/segments.ts. Um comentário nesse arquivo registra uma decisão útil: idiomas de escrita latina ganham segmentos traduzidos, enquanto japonês e árabe usam os segmentos em inglês, porque endereços em ASCII são mais fáceis de digitar e compartilhar. O conteúdo e os metadados dessas páginas continuam traduzidos.

Datas e números não vão no dicionário. Use a API Intl do JavaScript. O Intl.DateTimeFormat formata datas de acordo com o idioma: a mesma data vira “08/10/2026” em português e “10/8/2026” em inglês dos Estados Unidos. Escrever esse formato à mão em oito idiomas é pedir erro.

Passo 4: tenha um interruptor por idioma

Esta é a decisão que mais protege um blog multilíngue: a arquitetura pode suportar oito idiomas, mas só os que estão prontos devem ser gerados e publicados.

Em src/i18n/locales.ts, cada um dos oito idiomas do Token & Tech (português, inglês, espanhol, francês, alemão, italiano, japonês e árabe) tem um campo enabled. Na data deste texto, só português e inglês estão ligados. A lista ENABLED_LOCALES alimenta o roteador, e idiomas desligados simplesmente não geram páginas. O comentário do arquivo registra a regra do projeto: um idioma só entra no ar depois que as páginas institucionais existem e foram revisadas por uma pessoa.

Há um motivo de qualidade e outro de busca para isso. A política de spam do Google trata como abuso de conteúdo em escala a geração de muitas páginas por “transformações automatizadas”, e cita a tradução entre elas. O texto se refere a conteúdo produzido sem valor para o leitor, não a toda tradução assistida, mas o recado é claro: publicar sete idiomas de tradução automática sem revisão é um risco.

O guia do Google sobre sites multilíngues acrescenta outro alerta: traduzir só o texto fixo (menu, rodapé) e deixar o conteúdo principal em outro idioma cria uma experiência ruim. O mesmo guia informa que o Google identifica o idioma de uma página pelo conteúdo visível, não pelo atributo lang.

Passo 5: decida o que acontece quando falta tradução

Em um blog de oito idiomas, quase todo artigo vai existir em menos idiomas do que o site tem. Você precisa de uma política para isso.

O roteamento nativo do Astro oferece um mecanismo de fallback (substituição): quando uma página não existe em um idioma, ele pode redirecionar para a versão em outro idioma (redirect, o padrão) ou exibir o conteúdo do outro idioma na URL pedida (rewrite).

Na avaliação da redação, o rewrite merece cautela em um blog: ele coloca texto em português numa URL marcada como inglesa, o tipo de mistura que o guia do Google desaconselha. A alternativa mais simples é não gerar a página. Se o artigo não tem versão em alemão, não existe URL alemã para ele, e o seletor de idiomas mostra só as versões reais.

É o que o Token & Tech faz. Em src/lib/content.ts, a lista de artigos publicados inclui apenas pares de artigo e tradução cujo status é published. O roteador gera uma página para cada par, e o seletor e o hreflang usam a mesma lista.

Outra decisão do mesmo tipo: não redirecione o visitante pelo idioma do navegador. O guia do Google recomenda evitar o redirecionamento automático entre versões de idioma. No Token & Tech, o componente LanguageSuggest.astro lê a preferência do navegador e apenas sugere a versão no idioma do leitor, com a opção de permanecer na página.

Passo 6: prepare árabe e japonês desde o início

Dos oito idiomas, dois mudam o layout e a busca.

Árabe é escrito da direita para a esquerda, o que se chama RTL (right-to-left). A orientação do W3C sobre marcação para textos da direita para a esquerda é direta: declare dir="rtl" no elemento html quando o documento todo for nessa direção, e nunca use CSS para definir a direção base. Também lembra que lang não define direção; os dois atributos são independentes. No Token & Tech, o layout src/layouts/Base.astro escreve lang e dir a partir da tabela de idiomas, e só o árabe tem dir: "rtl".

O complemento está no CSS. As propriedades lógicas descrevem o layout pelo fluxo do texto, e não por lados fixos. Em vez de margin-left, você escreve margin-inline-start, que vira a margem esquerda em português e a direita em árabe. Se o seu CSS está cheio de left e right, a versão árabe vai exigir uma folha de estilo paralela.

Japonês não separa palavras com espaços. Isso afeta a busca interna. O Pagefind, ferramenta de busca para sites estáticos, cria um índice separado por idioma a partir do atributo lang do html e carrega no navegador apenas o índice do idioma da página. Para chinês, japonês e coreano, ele segmenta o texto em palavras, mas a documentação informa que esses idiomas não têm stemming (a redução de palavras ao radical). A busca do Token & Tech usa Pagefind, como descrito em como implementar busca interna em um site Astro.

Passo 7: verifique o resultado antes de publicar

Com oito idiomas, revisar página por página deixa de ser viável. A verificação precisa ser automática e rodar sobre o site gerado, não sobre o código.

O Token & Tech tem um script, scripts/check-dist.mjs, que roda depois do build e falha se encontrar, entre outros problemas:

• página de idioma desligado ou link apontando para um idioma desligado;
• <html lang> diferente do idioma da URL;
• hreflang sem a própria página, sem x-default ou sem reciprocidade entre as versões.

O sitemap (src/pages/sitemap.xml.ts) é gerado a partir da mesma lista de rotas, com as versões alternativas de cada página. Assim, o que o leitor vê, o que o sitemap anuncia e o que o script confere vêm de uma única fonte. Para escalar esse tipo de checagem, veja como testar links internos e rotas automaticamente e como estruturar 5.000 páginas em um site estático.

O que levar deste texto

• Um blog com oito idiomas é um original com sete traduções, cada uma com estado e revisão próprios.
• Separe o registro do artigo das traduções e exija as mesmas chaves em todos os dicionários de interface.
• Tenha um interruptor por idioma e só ligue o que foi revisado por uma pessoa.
• Quando falta tradução, não gere a página. Não misture idiomas na mesma URL nem redirecione pelo navegador.
• Árabe pede dir="rtl" e CSS lógico; japonês pede busca que segmente palavras.
• Automatize a verificação sobre o site gerado: idioma declarado, links e hreflang.