SEO no Astro: como posicionar um site Astro no Google e ser citado pelas IA

Quiz rápido

O SEO é para você, e como começar?

Pergunta 1 de 425%

As pessoas buscam no Google o que você vende?

Sim, acho que simNão, é novo ou muito de nichoNão sei

SEO no Astro é o trabalho de transformar esse HTML limpo em páginas que se posicionam. O guia do Google sobre os princípios básicos de SEO para JavaScript explica que sites JavaScript são processados em três fases (rastreamento, renderização, indexação) e afirma que a renderização no servidor ou a pré-renderização continua sendo uma ótima ideia, porque nem todos os bots executam JavaScript. O Astro já parte dessa posição. Este guia cobre o resto, configuração por configuração, com cada comportamento conferido na documentação oficial do Astro. A propósito, o site sorank.com que você está lendo roda em Astro.

O Astro é bom para SEO?

Sim, no aspecto técnico. O Astro renderiza os componentes em HTML durante o build e remove o JavaScript que frameworks como React ou Vue normalmente enviariam ao navegador. Assim evita os problemas clássicos descritos no nosso guia de SEO para JavaScript: cascas HTML vazias, conteúdo que só aparece depois da renderização, links que não são tags de âncora reais. Também evita as armadilhas de roteamento de uma aplicação de página única, já que cada rota do Astro é uma URL real com seu próprio arquivo HTML.

O que o Astro não faz importa tanto quanto. Não há plugin de SEO integrado, nem meta description automática, nem tag canônica automática, nem dados estruturados. A tabela separa o que você ganha de graça do que precisa construir.

Renderização estática ou no servidor: qual modo é melhor para SEO?

A documentação do Astro sobre renderização sob demanda é clara: por padrão, páginas, rotas e endpoints de API são pré-renderizados no build como páginas estáticas. Para SEO, a saída estática é a escolha mais segura: cada URL é um arquivo HTML pronto, servido por uma CDN, rápido e idêntico para cada visitante e cada bot.

A renderização sob demanda (no servidor) exige um adaptador para a sua hospedagem (Node, Netlify, Vercel ou Cloudflare, por exemplo). Depois você tira uma rota específica da pré-renderização com export const prerender = false, ou muda o projeto inteiro com output: 'server' e reativa as páginas estáticas uma a uma. Os dois modos produzem HTML completo, então o Google vê a mesma coisa. As diferenças estão em outro lugar:

• Velocidade: um arquivo estático é servido na hora; uma página renderizada no servidor depende do tempo de resposta dele, que pesa no Largest Contentful Paint.
• Atualização: a renderização no servidor serve para páginas que mudam o tempo todo (estoque, preços, resultados de busca), em que refazer o build seria lento demais.
• Ferramentas: algumas integrações, como o sitemap, não enxergam rotas dinâmicas do servidor (veja abaixo).

A regra prática: mantenha estáticas as páginas comerciais, os artigos do blog e a documentação, e renderize sob demanda só as rotas que precisam de dados ao vivo. A documentação do Astro recomenda o mesmo: manter o modo estático padrão até que a maioria das páginas precise de renderização sob demanda.

Como configurar meta tags e URLs canônicas no Astro?

Crie um único componente de SEO (muitas vezes chamado BaseHead ou Seo) e inclua-o no head de cada layout. Ele recebe um título, uma descrição, uma imagem opcional e um indicador noindex opcional, e gera:

1. a tag title, única por página, com a palavra-chave principal perto do início;
2. a meta description, escrita à mão para cada página (é o seu snippet nos resultados);
3. a tag canônica, montada como URL absoluta a partir de Astro.url.pathname e do valor site da configuração;
4. as tags Open Graph e sociais (título, descrição, imagem, URL) para as prévias de links;
5. uma meta tag robots quando uma página deve ficar fora do índice.

Defina primeiro a opção site em astro.config.mjs: a canônica, o sitemap e as tags sociais dependem dela. Depois escolha uma regra trailingSlash ('always' ou 'never') e siga-a, para que /blog/artigo e /blog/artigo/ nunca concorram como duas versões da mesma página. Tire os parâmetros de consulta da canônica para que parâmetros de rastreamento de campanhas não criem duplicatas.

Como gerar o sitemap e o robots.txt com o Astro?

Use a integração oficial documentada na página do @astrojs/sitemap. O comando npx astro add sitemap instala a integração e a adiciona à configuração. Ela exige a opção site e, no build, grava um arquivo sitemap-index.xml que aponta para arquivos numerados (sitemap-0.xml e outros em sites grandes). Cada arquivo comporta até 45.000 entradas por padrão, valor definido pela opção entryLimit. Se o formato for novo para você, nosso verbete do glossário sobre o sitemap XML explica o que o Google faz com ele.

Três configurações importam para o SEO:

• filter: uma função que recebe a URL de cada página; retorne false para páginas de agradecimento, busca interna, rascunhos ou qualquer coisa com noindex, para que o sitemap liste só URLs indexáveis.
• i18n: associa as pastas de idioma a códigos de idioma e acrescenta alternativas hreflang a cada entrada.
• customPages: adiciona URLs que a integração não consegue descobrir sozinha.

Para o robots.txt, um arquivo estático na pasta public basta na maioria dos sites. Se o conteúdo muda entre homologação e produção, gere-o a partir de um endpoint (src/pages/robots.txt.ts). Nos dois casos, inclua uma linha Sitemap apontando para sitemap-index.xml e teste o resultado com um verificador de robots.txt antes do lançamento. A mesma técnica gera um arquivo llms.txt; nosso guia para instalar um arquivo llms.txt detalha o conteúdo.

Como lidar com hreflang e sites multilíngues no Astro?

O roteamento i18n integrado do Astro cuida da parte das URLs. Na configuração você declara uma defaultLocale e uma lista de locales, e escolhe se o idioma padrão também recebe prefixo (prefixDefaultLocale). Funções como getRelativeLocaleUrl montam links localizados, e Astro.currentLocale informa a cada página em que idioma ela está.

O guia de roteamento não trata das tags hreflang no head, então planeje escrevê-las você mesmo no componente de SEO: para cada página, um link alternativo por versão de idioma mais um x-default, tudo em URLs absolutas, e cada versão deve listar todas as outras (links de retorno). Gerá-las a partir da mesma lista de idiomas do roteamento evita o erro mais comum, uma alternativa apontando para uma página que não existe. Para conferir a lógica em algumas URLs, nosso gerador de hreflang produz o conjunto completo de tags de uma página. Depois ative a opção i18n do sitemap como segundo sinal.

Como imagens e ilhas afetam a velocidade e as Core Web Vitals?

A velocidade é onde o Astro mais ganha terreno, e isso aparece nas Core Web Vitals. O guia de imagens do Astro descreve o componente Image do astro:assets: ele otimiza imagens locais, converte o formato, adiciona carregamento lento e decodificação assíncrona e deduz as dimensões da imagem para evitar o Cumulative Layout Shift. O atributo alt é obrigatório nele, o que impõe uma regra básica de SEO de imagens. O componente Picture vai além e serve AVIF ou WebP com um fallback.

Dois hábitos completam o quadro. Guarde em src as imagens que precisam de otimização (os arquivos de public são servidos como estão, sem processamento). E não adie o carregamento da imagem principal no topo da página: carregue-a de imediato para não atrasar o Largest Contentful Paint.

A arquitetura de ilhas mantém o JavaScript sob controle. Um componente é HTML estático até você adicionar uma diretiva de cliente: client:load o hidrata na hora, client:idle quando o navegador fica livre, client:visible só quando ele entra na área visível. Reservar client:load ao que precisa reagir de imediato (um menu, um carrinho) é o jeito mais simples de proteger o Interaction to Next Paint. As ilhas de servidor (server:defer) carregam um bloco personalizado depois da página em cache, sem atrasar o conteúdo principal.

Como adicionar dados estruturados a um site Astro?

O Astro não tem um recurso de schema, o que deixa você com controle total. Monte um objeto JavaScript por tipo de página (Article, Product, Organization, BreadcrumbList, FAQPage) e coloque-o numa tag script do tipo application/ld+json, com a diretiva set:html e JSON.stringify para que o JSON não seja escapado. Alimente-o com os mesmos dados de frontmatter ou de coleção da página visível: assim a marcação sempre corresponde ao que os usuários veem, uma exigência das diretrizes do Google sobre marcação schema.

Para redigir o JSON de um novo tipo de página, nosso gerador de schema gratuito oferece um bloco inicial válido, que você transforma em modelo. Valide uma amostra de páginas geradas com o teste de pesquisa aprimorada do Google após cada mudança no modelo.

Como lidar com redirecionamentos ao migrar para o Astro?

Migrações a partir de WordPress ou Next.js são o momento mais arriscado para um site Astro. Mantenha cada URL com tráfego ou backlinks e associe as demais, uma a uma, ao equivalente mais próximo com redirecionamentos permanentes, como explica nosso guia de redirecionamentos para SEO.

A configuração do Astro aceita um objeto redirects que associa caminhos antigos a novos. Com um adaptador, eles viram redirecionamentos HTTP de verdade. Num build puramente estático, o Astro grava no lugar uma página HTML com meta refresh, que o Google segue mas trata como sinal mais fraco que um 301 no servidor. Para um site estático, declare os redirecionamentos no formato da sua hospedagem (um arquivo _redirects na Netlify ou no Cloudflare Pages, um arquivo vercel.json na Vercel) para que os rastreadores recebam um 301 real.

Como o Astro ajuda no SEO e no GEO?

Ser citado pelo ChatGPT, Perplexity ou Gemini começa por ser legível. Muitos rastreadores de IA baixam o HTML bruto sem executar JavaScript, então um site que entrega todo o texto na primeira resposta, como o Astro faz por padrão, remove uma barreira que os sites renderizados no cliente ainda têm. Intertítulos claros, parágrafos que respondem logo de cara, dados estruturados e um arquivo llms.txt tornam cada página mais fácil de citar.

Depois do lançamento, meça em vez de adivinhar. O painel GEO e SEO da Sorank reúne seus dados do Search Console e suas visitas vindas de assistentes de IA, para você ver se o novo site mantém as posições.

A qualidade técnica só rende com conteúdo para posicionar. O gerador de artigos de blog com IA da Sorank escreve e publica artigos otimizados para o Google e para as IA, e se conecta por webhook a um site sob medida, como um projeto Astro.

O Astro entrega por padrão um HTML rápido e rastreável; o posicionamento continua dependendo das tags head, do sitemap, do hreflang, dos dados estruturados e dos redirecionamentos que você adiciona. Configure primeiro o componente de SEO compartilhado e o sitemap, e depois percorra a tabela acima antes do lançamento.