Publicar conteúdo encontrável em vários idiomas

Uma página só existe para o buscador e para o assistente de IA quando o servidor entrega o texto pronto, e cabeçalho e corpo dizem a mesma coisa. Indexar é isso: o robô do Google ou do ChatGPT lê o texto da página e o guarda numa lista de onde tira as respostas.

Quem decide a tecnologia do site e quer ser citado escolhe a montagem de cada página, preenche os quatro metadados e escreve a frase que o assistente copia.

Três caminhos entregam o conteúdo pronto para quem rastreia, e você escolhe página por página. A geração estática grava o arquivo pronto antes de alguém pedir, e serve o mesmo texto a todos. É o certo para blog e ficha de produto que muda pouco.

A montagem no servidor refaz a página a cada pedido, o certo quando preço ou estoque muda o dia inteiro. O oposto disso é a página montada só no navegador, a tal SPA. Nela o servidor manda um arquivo quase vazio e o texto só aparece depois, quando o robô já foi embora.

Site de conteúdo sem área logada sai mais leve no Astro, que manda quase zero JavaScript ao navegador. Site novo com área logada começa no Next.js, o conjunto de ferramentas prontas que monta o site e já entrega o texto pelo servidor.

O teste que resolve a dúvida em dez segundos: abra a página, desligue o JavaScript nas configurações do navegador e recarregue. Se o texto sumiu da tela, ele também some do índice do Google e da resposta do assistente.

Buscador e assistente só conseguem citar um endereço. Aba, filtro e página de resultado que vivem só na memória do navegador não têm endereço, e o link copiado volta para a tela inicial. Guarde esse estado na URL, com o nuqs em React, e cada combinação de filtro vira uma página citável.

Preparar a página para ser encontrada, o que se chama SEO técnico, esbarra na rolagem infinita. O rastreador não rola, o leitor de tela não alcança o rodapé e a pessoa não consegue voltar ao item 40. Paginação numerada, com endereço próprio para cada página, resolve os três de uma vez.

A Speculation Rules API, a lista, no HTML, dos endereços que o navegador busca antes do clique, pré-carrega a ficha do produto enquanto a pessoa lê a lista. O manual a recomenda para menus e paginação. Cada endereço listado gasta dado do celular de quem talvez nunca clique, por isso liste só o destino mais provável.

No arquivo da rota fica a função generateMetadata, o código que preenche título, descrição e endereço oficial da página. Ela devolve um objeto que o Next.js transforma nas linhas do cabeçalho, e a descrição fica entre 150 e 160 caracteres.

Se a rota responde em /blog/artigo e o endereço preferido declarado no rel=canonical diz /blog/artigo/, com barra no fim, o Google trata as duas como cópia. A página sai do índice sem aviso, por isso o endereço declarado precisa casar barra por barra com o que o site serve.

O JSON-LD, um bloco de texto dentro da página, no vocabulário schema.org, dizendo o que ela é, descreve autor, data e organização. Preencha só o que a página mostra de verdade: marcar algo que não aparece no texto visível é motivo declarado de penalidade nas diretrizes do Google.

Por hora investida, o que rende mais é a cápsula de resposta, a frase curta que responde direto à pergunta do título, logo no início da seção. Abra cada seção com a pergunta real como título e responda na primeira frase, em texto que se sustente sozinho fora da página.

Antes de publicar uma página nova, desligue o JavaScript do navegador e recarregue. Se o texto sumir da tela, ele some do índice e da resposta do assistente; troque a montagem antes de seguir adiante.

Depois escreva o título como a pergunta que a pessoa faz e responda na primeira linha, com número e condição: R$ 420 o casal, com café da manhã. É essa frase que o assistente copia, e é por ela que a pousada aparece na resposta em vez do concorrente.

Deu certo quando o texto continua na tela com o JavaScript desligado e a primeira linha de cada seção responde sozinha, fora da página.

Publicar o mesmo site em vários idiomas sem duplicar o código

A página já é encontrável e citável em um idioma, e o texto preso no código impede que ela exista nos outros sem reescrita.

Levar o produto para outro idioma é dois trabalhos: o de engenharia, feito uma vez, e o de conteúdo, repetido a cada mercado. O custo do segundo quase iguala o do primeiro, porque cada tela precisa ser reaberta à mão.

Preparar o site para receber outros idiomas tem nome, internacionalização, e é o trabalho de engenharia. Quem decide expandir estima o prazo pelo catálogo de chaves, pela formatação entregue ao navegador e pelo critério entre quatro bibliotecas.

Quem mistura os dois trabalhos cola lógica de tradução dentro do componente, a peça de tela que se repete, e a conta aparece no segundo idioma. A saída é uma indireção simples: cada texto recebe um identificador, a chave, e o produto pede o texto por essa chave.

A tradução vive num catálogo por idioma, um pt-BR.json e um en-US.json com as mesmas chaves preenchidas, e acrescentar um idioma vira entregar mais um arquivo.

Vale uma regra barata: nunca monte frase traduzida juntando pedaços. A ordem das palavras muda de idioma para idioma. Em alemão o verbo vai para o fim, em japonês o objeto vem antes do verbo, em árabe a frase corre ao contrário. O operador de soma congela a ordem do português dentro do código, onde nenhuma tradução consegue consertá-la.

Cada chave leva a frase inteira com marcador de variável, como t("inbox", { total }), e o catálogo guarda "Você tem {total} mensagens". Quando a frase varia por quantidade, a variação entra nela mesma, no formato ICU: "{total, plural, one {# mensagem} other {# mensagens}}". O tradutor passa a controlar a frase toda, incluindo a posição da variável.

Data, número, moeda e plural têm formatação nativa em todos os navegadores relevantes, pela API Intl, a interface que o navegador expõe para formatar valores por idioma. Monte o preço à mão e você erra separador, posição do símbolo e casa decimal. O real sai R$ 1.234,56, o dólar inverte ponto e vírgula, e o iene não tem casa decimal.

O Intl.PluralRules resolve o plural: o árabe tem seis categorias, o russo quatro, o polonês três, e o navegador informa qual categoria uma quantidade ativa. A direção de leitura também sai de graça, pelo CSS. Margem e alinhamento escritos em início e fim da linha, como margin-inline-start e text-align: start, espelham o layout sozinhos em árabe e hebraico.

A biblioteca junta catálogo, roteamento por idioma e formatação, e o critério de escolha é onde a mensagem é resolvida. O Paraglide JS e o Lingui resolvem no build, a etapa que gera os arquivos do site antes de publicar. Cada chave vira uma função, o navegador recebe só o idioma pedido e nada sobra para carregar.

O next-intl segue como padrão para o Next.js, porque integra com o endereço por prefixo de idioma e funciona no servidor. O react-i18next fica para a base antiga que já o usa, porque migrar catálogo que funciona sai mais caro que o ganho.

Escreva o nome escolhido dentro do pedido ao agente, porque pedido sem nome de biblioteca volta com uma opção que ninguém no time conhece. Para o next-intl, instale, crie os arquivos de mensagem de cada idioma com as mesmas chaves, e crie o arquivo que devolve as mensagens do idioma ativo.

Mova as páginas para a pasta do idioma e acrescente o redirecionamento da raiz para o idioma padrão, para que quem chega sem escolher caia no português.

Antes de publicar a segunda versão, abra a mesma tela nos dois endereços de idioma e confira se preço, data e plural mudam de formato sozinhos. Se não mudarem, a chamada ainda está escrita à mão, e o texto solto precisa virar chave.

O sinal mais barato de que falta chave é o preço. Formatado à mão, um aluguel de R$ 2.500,00 sai igual em espanhol, e a frase montada por soma erra o plural.

Deu certo quando você troca o idioma no endereço e a mesma tela mostra moeda, data e plural no formato do país, sem ninguém tocar no código.

Guia prático: o template de página única chega sem metadados, e o vídeo pode virar texto encontrável

Todos os 51 templates de site medidos em 07/10/2026 são feitos com Vite, e quase todos montam a página no navegador. O que eles trazem no cabeçalho mostra o trabalho que sobra para quem publica:

Há ainda o endereço que quebra. Trinta templates usam BrowserRouter, o roteador que cria endereços limpos como /cardapio. Num host estático sem regra de reescrita, quem abre esse link direto ou recarrega a página recebe erro 404, e o arquivo de instruções do template promete que o site sobe "sem configuração extra". No Netlify, a regra é uma linha no arquivo _redirects que entrega o index.html com status 200; no Vercel, uma reescrita no vercel.json.

O vídeo é a outra metade. A transcrição com tempo por palavra, que a edição já produz, vira três ativos encontráveis: os capítulos na descrição do YouTube, com o primeiro em 00:00, pelo menos três capítulos e cada um com 10 segundos ou mais; a transcrição publicada na página do vídeo, em HTML; e os títulos dos capítulos como subtítulos dessa página. O que estava só na fala passa a ser texto que buscador e assistente leem.

Guia prático: dizer a cada robô o que ele pode ler e quando a página mudou

A aula ensinou a entregar o texto pronto e a descrever a página. Falta a conversa com quem rastreia: cada empresa de IA manda robôs diferentes para buscar, para atender um pedido no chat e para treinar modelo, e cada um obedece a uma linha própria do robots.txt (o arquivo na raiz que diz o que cada robô pode ler). Você sai deste guia separando busca de treino, com data verdadeira no sitemap e um llms.txt gerado do mesmo catálogo.

Aplicar os recursos ao projeto