30 de maio de 2026

Como criar um site com 99% de SEO em 12 minutos usando Astro e Claude Code

Construir um site que carregue rápido, marque 98% no PageSpeed Insights e ranqueie bem no Google sempre foi trabalhoso. A combinação Astro + Claude Code mudou esse jogo: hoje dá pra entregar um site profissional, com schema markup válido e deploy em produção em menos de 15 minutos — mesmo sem ser programador experiente.

Este guia explica por que essa stack funciona tão bem para SEO, mostra o passo a passo e lista as otimizações que fazem diferença real no ranking.

Por que Astro é a melhor escolha para SEO em 2026

Astro é um framework web focado em sites de conteúdo. Diferente de React, Vue ou Next.js, ele foi construído com uma filosofia simples: enviar zero JavaScript por padrão. O resultado é HTML estático limpo, pronto pra ser lido pelos crawlers do Google.

Os três motivos pelos quais Astro vence em SEO:

Zero JS por padrão — páginas carregam quase instantaneamente, melhorando Core Web Vitals (LCP, FID, CLS).
HTML limpo e indexável — o conteúdo está no source, não escondido atrás de hidratação client-side.
Arquitetura content-first — alinhada com o que o Google prioriza desde a atualização Helpful Content.

Em benchmarks públicos, sites em Astro atingem aprovação em Core Web Vitals em cerca de 66% dos casos, contra ~30% de sites Next.js — uma diferença enorme em escala.

O que é Claude Code e por que usar junto com Astro

Claude Code é a CLI oficial da Anthropic. Ele roda no seu terminal, lê e edita arquivos diretamente, executa comandos e mantém contexto ao longo da conversa. Na prática: você descreve o site que quer, e ele monta a estrutura, escreve componentes, gera conteúdo e faz deploy.

A combinação com Astro é poderosa porque:

Astro tem convenções claras que a IA entende bem (pastas src/pages/, src/content/, componentes .astro).
O output é HTML estático — Claude consegue prever exatamente o que vai pro browser.
Iteração é barata — você ajusta o prompt e regenera componentes sem quebrar nada.

Stack completa do projeto

Camada	Ferramenta	Função
Framework	Astro 6	Geração de HTML estático otimizado
IA	Claude Code	Build automatizado e iteração
Hospedagem	Cloudflare Pages	CDN global gratuita com edge em 330+ cidades
Imagens	WebP / AVIF	Otimização automática via integration `@astrojs/image`
SEO técnico	Schema.org JSON-LD	Dados estruturados para rich results

Passo a passo: do zero ao site no ar

1. Criar o projeto Astro

No terminal:

npm create astro@latest meu-site -- --template blog --typescript strict --install --git --yes
cd meu-site
npm run dev

Pronto — você já tem um blog rodando em http://localhost:4321/ com TypeScript strict e Git inicializado.

2. Abrir Claude Code na pasta do projeto

claude

A partir daqui, Claude tem acesso ao projeto inteiro. Descreva o que você quer construir com o máximo de detalhe possível:

“Quero um site para uma encanadora local em Salvador. Preciso de páginas de serviço (desentupimento, instalação, manutenção), páginas por bairro (Pituba, Barra, Itapuã) e schema markup de LocalBusiness. Use o framework Astro.”

3. Deixe Claude estruturar o projeto

Boa prática: dê o link da documentação oficial do Astro (https://docs.astro.build/) no prompt inicial. Isso garante que o código gerado siga as convenções atuais do framework, não versões antigas que estavam no treinamento.

Claude vai criar:

Layout base com <BaseHead>, navegação e rodapé
Páginas de serviço em src/pages/servicos/
Páginas por localização em src/pages/bairros/
Componentes reutilizáveis
Schema markup JSON-LD em cada página

4. Refine em ciclos curtos

Em vez de pedir o site inteiro de uma vez, trabalhe em iterações:

“Adicione uma seção de FAQ na home com schema FAQPage”
“Crie uma área de depoimentos com schema Review”
“Substitua o CTA por algo mais direto: ‘Ligue agora: (71) 9XXXX-XXXX’”

Cada ajuste leva segundos e Claude mantém o contexto entre eles.

5. Otimize as imagens

Astro tem suporte nativo a otimização de imagem via o componente <Image>. Peça pro Claude:

“Converta todas as imagens da pasta public/ para WebP usando o componente <Image> do Astro com lazy loading.”

Isso reduz tamanho de arquivo em 60-80% sem perda perceptível de qualidade, melhorando diretamente o LCP.

6. Deploy no Cloudflare Pages

npm run build
npx wrangler pages deploy ./dist

Cloudflare Pages é gratuito até 500 builds/mês e serve o site da edge mais próxima do visitante — latência típica de 50ms no mundo todo.

Checklist SEO técnico que faz a diferença

Marque cada item antes de publicar:

Conteúdo otimizado para IA Search (Google AI Overviews, Perplexity)

O jogo do SEO mudou. Além do Google clássico, agora ferramentas de IA precisam citar seu site. A técnica que mais funciona é o capsule content:

Responda a pergunta principal nas primeiras 40 a 60 palavras da seção
Use estrutura clara: pergunta no <h2>, resposta direta logo abaixo
Inclua dados, números e fontes
Marque com schema FAQPage ou Article

Modelos de linguagem extraem essas “cápsulas” com muito mais facilidade do que parágrafos longos e introdutórios.

Segurança: por que essa stack é mais segura que builders no-code

Plataformas drag-and-drop como Wix, Lovable e similares têm problemas conhecidos:

Bancos de dados expostos por configuração incorreta de Row-Level Security
Credenciais de API vazadas no client-side
Você não controla o código gerado

Com Astro + Claude Code, o output é HTML estático puro. Não há banco de dados, não há secrets no browser, não há superfície de ataque típica de aplicações dinâmicas. O site fica no seu repositório Git, sob seu controle total.

Resultados reais que essa stack entrega

Em estudos de caso documentados publicamente, sites construídos com essa abordagem alcançam:

PageSpeed Insights Desktop: 98-100
PageSpeed Insights Mobile: 90-95
GTmetrix Grade: A em todas as métricas
Schema validation: 100% válido em todos os tipos implementados
Tempo até o primeiro ranqueamento: 2-4 semanas para keywords de cauda longa

Erros comuns que você deve evitar

Pedir o site inteiro num único prompt — qualidade despenca. Quebre em fases.
Ignorar a documentação oficial — sempre passe o link docs.astro.build no prompt.
Não revisar o conteúdo gerado — Claude escreve bem, mas você precisa garantir tom de marca e precisão factual.
Esquecer do schema markup — sem dados estruturados, você perde rich results e citações em IA.
Não otimizar imagens — uma única imagem PNG de 2MB destrói o LCP de uma página inteira.

Perguntas frequentes (FAQ)

Preciso saber programar para usar Astro + Claude Code?

Não é obrigatório, mas ajuda. Você precisa entender o básico de terminal (cd, npm install, npm run dev) e ser capaz de ler o que Claude gera para validar se faz sentido. Sem nenhuma noção, fica difícil debugar quando algo falha.

Quanto custa essa stack?

Astro: grátis (open source)
Cloudflare Pages: grátis para uso normal
Claude Code: plano Pro da Anthropic (US$ 20/mês) ou pay-per-use via API
Domínio: ~R$ 40/ano

Total: cerca de US$ 20/mês + domínio.

Astro substitui WordPress?

Para sites de conteúdo (blogs, landing pages, sites institucionais, e-commerce simples), sim — com vantagens claras de performance e SEO. Para sites que precisam de área logada complexa, comentários em tempo real ou plugins de marketplace específicos, WordPress ainda faz sentido.

Como manter o site atualizado depois?

Você abre Claude Code na pasta do projeto e descreve a mudança. Para conteúdo recorrente (posts de blog), basta adicionar arquivos .md em src/content/blog/ — o Astro regenera tudo no próximo build.

Conclusão

Astro + Claude Code não é hype. É a primeira combinação que entrega, ao mesmo tempo, velocidade de desenvolvimento de no-code e qualidade técnica de código artesanal. Para quem trabalha com SEO local, agências, freelancers ou empreendedores construindo a própria presença digital, é uma vantagem competitiva difícil de ignorar.

Se você está começando agora, o melhor próximo passo é simples: criar um projeto Astro vazio, abrir o Claude Code e pedir pra ele construir uma versão da sua landing page atual. Em 15 minutos você compara o resultado com o que você tem hoje — e decide.

Fonte original: vídeo I Built a 99% SEO Website in 12 Minutes (Claude Code + Astro) no YouTube.