hreflang no Webflow passo a passo: guia para não perder tráfego

Tem o seu site Webflow traduzido para vários idiomas e tudo parece perfeito. Mas abre o Google a partir da França e continua a aparecer a versão em espanhol. Ou pior: o Google mistura as suas páginas e mostra a francesa a alguém que pesquisa em espanhol. O problema quase sempre é o mesmo: falta o hreflang.

O hreflang é a etiqueta que diz ao Google qual versão da tua página mostrar, de acordo com o idioma e o país de cada pessoa. Sem ela, o teu esforço de tradução fica a meio caminho, porque o motor de busca não sabe conectar as versões entre si. Neste guia explico, passo a passo, como adicionar hreflang num site Webflow, que opções tens e como evitar os erros que arruínam o posicionamento.

Resumo rápido

• O hreflang indica ao Google qual o idioma e país correspondente a cada URL, para que mostre a versão correta em cada pesquisa.
• No Webflow podes colocá-lo manualmente (com Localization ou código no <head>) ou automático com uma ferramenta externa como o Lantis.
• Cada página deve apontar para todas as suas versões, incluída ela própria, e as etiquetas devem ser recíprocas (se A faz link para B, B faz link para A).
• Um hreflang mal configurado (códigos inventados, URLs quebradas, sem autorreferência) é pior do que não tê-lo: confunde o Google.
• Com Lantis o hreflang é gerado sozinho para cada idioma, sem tocar no código nem rever etiquetas uma por uma.

O que é o hreflang e porque é que o seu site precisa dele

O hreflang é um atributo HTML que marca a relação entre as diferentes versões linguísticas de uma mesma página. Na prática, é uma linha de código que vive no <head> de cada página e diz algo como: "este URL é a versão em francês, e aqui tens a versão em espanhol, em inglês e em alemão".

A resposta curta para "por que preciso disso": sem hreflang, o Google pode indexar os seus idiomas como páginas duplicadas ou mostrar o idioma errado aos seus visitantes. E isso custa-lhe tráfego e vendas.

Pense no percurso de uma pessoa que pesquisa em francês a partir de Paris. O Google tem a sua página em francês e a sua página em espanhol, com conteúdo equivalente. Se não houver nenhum sinal que as conecte, o motor de busca pode:

• Mostrar a versão em espanhol para aquela pessoa francesa (que sairá imediatamente).
• Considerar que as duas páginas competem entre si e repartir a força de posicionamento.
• Escolher por conta própria que versão indexar, sem ter em conta o idioma do utilizador.

Com o hreflang, ao contrário, você dá ao Google um mapa claro. Cada versão sabe quais são suas "irmãs" e o buscador pode ensinar a correta a cada pessoa. Segundo o Google, o hreflang é uma sinal, não uma ordem, mas é o sinal mais importante que tem para o SEO internacional.

O hreflang não melhora o ranking por si só. O que faz é garantir que a pessoa correta vê a página correta. E uma pessoa que aterra no seu idioma fica, lê e converte muito mais.

Como é um hreflang bem feito

Antes de mexer no Webflow, convém entender o resultado que procuramos. Para um site em espanhol, inglês e francês, cada página deve incluir na sua <head> um bloco parecido a este:

<link rel="alternate" hreflang="es" href="https://tuweb.com/" />
<link rel="alternate" hreflang="en" href="https://tuweb.com/en/" />
<link rel="alternate" hreflang="fr" href="https://tuweb.com/fr/" />
<link rel="alternate" hreflang="x-default" href="https://tuweb.com/" />

Atente-se a três detalhes que marcam a diferença entre um hreflang que funciona e um que quebra as coisas:

1. Autorreferência: a página em espanhol também se inclui a si mesma na lista. Não é opcional.
2. URLs absolutos: sempre com https:// e o domínio completo, nunca rotas relativas.
3. O x-default: marca a versão que é mostrada quando não há correspondência de idioma. Geralmente aponta para o teu idioma principal ou para um seletor.

Os códigos de idioma seguem o padrão ISO 639-1 (es, en, fr, de…). Pode adicionar o país com um hífen: es-MX para o México ou en-GB para o Reino Unido. Mas só use o código de país se realmente tiver conteúdo distinto por país. Caso contrário, fique apenas com o idioma.

Opção A: hreflang manual no Webflow

O Webflow tem a sua função nativa, Localização do Webflow, que nos seus planos superiores gera hreflang de forma automática quando cria versões traduzidas das suas páginas. Se já usa Localization, boa parte do trabalho está feito: verifique se as etiquetas aparecem no código publicado e se cada URL está correta.

O problema é que o Localization é um complemento pago com um custo que aumenta rapidamente, como conto no guia sobre preços e limites da Webflow Localization. Se não o usas, tens de montar o multilingue e o hreflang tu mesmo.

Colocando o código manualmente

Se você gere os idiomas com páginas ou pastas separadas dentro do Webflow (por exemplo, uma pasta /en/ e outra /fr/), podes injetar o hreflang manualmente:

1. Vá para Page Settings de cada página.
2. Abre o separador Código Personalizado e localize o campo Inside <head> tag.
3. Cole o bloco de <link rel="alternate" hreflang=...> com as URLs de todas as versões dessa página.
4. Repete para cada página e cada idioma, ajustando as URLs.
5. Publica e verifica o resultado.

Aqui está o problema: num site pequeno de 5 páginas e 3 idiomas, falamos de 15 páginas e 15 blocos de código, cada um diferente. Num site médio, torna-se um trabalho interminável e muito fácil de quebrar. Sempre que adicionar uma página, terá de atualizar o hreflang de todas as outras. É viável, mas pesado e frágil.

Opção B: hreflang automático com Lantis

A alternativa é deixar que uma ferramenta externa gere idiomas e hreflang por ti, sem depender do plano do Webflow nem de colar código página por página. É o que faz Lantis: cola um pequeno snippet na configuração do seu site, escolhe os idiomas e a Lantis encarrega-se do resto.

No que toca ao hreflang, Lantis:

• Cria uma Own URL per language (/es/, /fr/, /en/…), que é exatamente o que o Google precisa para indexar cada versão separadamente.
• Gera as tags hreflang automaticamente em todas as páginas, com autorreferência e x-default incluídos.
• Mantém um sitemap por idioma, para que o motor de busca descubra todas as versões.
• Atualiza-se sozinho quando adicionas páginas ou idiomas: não tens de voltar a tocar no código.

Aqui tem as duas opções lado a lado:

Além disso, a Lantis não coloca apenas o hreflang: traduz o conteúdo com IA (podes escolher o motor do teu site: Gemini por defeito, Claude, DeepL ou DeepSeek) e serve mais de 70% das traduções instantaneamente a partir da sua própria cache, para que o site não fique lento. Podes começar grátis e ver o hreflang a funcionar antes de pagar nada.

Erros de hreflang que arruínam o SEO

Um hreflang mal colocado confunde o Google mais do que a ausência total de tags. Estes são os erros mais habituais que vejo em sites de Webflow:

• Falta a autorreferência. Se a página em francês não se incluir a si mesma, o Google pode ignorar todo o grupo de etiquetas.
• Tags não recíprocas. Se a página em espanhol aponta para a francesa, mas a francesa não aponta de volta para a espanhola, a ligação quebra-se.
• Códigos de idioma inventados. es-ES está bem; spa, sp o castellano não existem para hreflang.
• URLs relativas ou com erros. O hreflang exige a URL completa com domínio. Um link quebrado invalida a tag.
• Misturar idioma e país sem necessidade. Usar es-MX quando na realidade tem um só espanhol para todos cria segmentações que não acrescentam nada.

Se quiseres aprofundar, tenho um guia dedicado aos erros de SEO internacional que carrega os seus idiomas. A vantagem de automatizar o hreflang é precisamente esta: elimina de uma vez quase todos estes erros, porque as etiquetas são geradas sempre corretamente.

Como verificar se o seu hreflang funciona

Não confie que "deveria estar bem". Verifique:

1. Inspeciona o código. Vê o código-fonte da tua página publicada (clique direito → Ver código-fonte) e procura hreflang: devem aparecer todas as versões.
2. Use o Search Console. O relatório de Segmentação internacional do Search Console foi retirado em 2022; use a inspeção de URLs do Search Console ou um rastreador como o Screaming Frog para detectar etiquetas sem retorno ou mal formatadas.
3. Teste a partir de outro país. Mudando o idioma do navegador, verifica se o Google te mostra a versão correta.

Se usares o Lantis, este passo simplifica-se: como as tags são geradas automaticamente e de forma recíproca, o normal é que a Search Console não reporte erros.

Perguntas frequentes

O Webflow coloca o hreflang automaticamente?

Apenas se usares Localização do Webflow, a função multilingue nativa do Webflow disponível nos seus planos de pagamento superiores: nesse caso, gera as etiquetas hreflang por si. Se gere os idiomas com páginas ou pastas separadas, ou com uma ferramenta externa, terá de adicionar o hreflang você mesmo ou deixar que essa ferramenta o faça. Alternativas como a Lantis geram o hreflang automaticamente sem depender do plano do Webflow.

O que acontece se o meu site não tiver hreflang?

Sem hreflang, o Google pode mostrar o idioma errado aos seus visitantes ou tratar as suas versões traduzidas como conteúdo duplicado, repartindo a força de posicionamento entre elas. O conteúdo continua a existir, mas perde tráfego porque o motor de busca não sabe que versão mostrar em cada país. É uma das razões mais comuns pelas quais um site traduzido não recebe visitas internacionais.

O hreflang melhora o posicionamento?

O hreflang não aumenta o teu ranking diretamente: é um sinal para que o Google mostre a versão correta a cada utilizador, não um fator de posicionamento como os links ou o conteúdo. O seu efeito real é indireto, mas potente: ao mostrar a cada pessoa a página no seu idioma, as métricas de permanência e conversão melhoram, e isso sim reforça a tua posição a médio prazo.

Conclusão

O hreflang é a peça invisível que faz com que o seu site multilingue do Webflow funcione verdadeiramente no Google. Pode montá-lo à mão — viável em sites pequenos, tedioso em grandes — ou deixar que seja gerado automaticamente.

Se preferires não te chatear com código em cada página nem rever tags uma a uma, Lantis traduza o seu site Webflow com IA, atribui um URL próprio a cada idioma e gera automaticamente o hreflang e os sitemaps, a partir de $3,50/mês por idioma. Cole o snippet, escolha os idiomas e deixe o Google mostrar a cada pessoa a sua versão. Você pode testar gratuitamente hoje mesmo.