O Lovable virou, em 2025 e 2026, a ferramenta mais procurada por quem quer um site moderno sem programar: a pessoa descreve o que quer, a plataforma gera um projeto de código real (React e Tailwind), mostra a prévia, aceita ajustes por conversa e publica com um clique. A diferença para os construtores tradicionais é que o código é seu e pode ser exportado para o GitHub e hospedado em qualquer lugar.
Este tutorial segue a ordem certa para um site de empresa: planejar antes do prompt, gerar, ajustar, estruturar as páginas por busca, pedir o SEO, publicar com domínio próprio, exportar e medir. No fim, os limites que o Lovable tem para sites de conteúdo e como contorná-los.
O que é o Lovable e para que tipo de site ele serve
O Lovable é um gerador de aplicações e sites por IA. A partir de uma conversa, cria um projeto completo com páginas, componentes, estilos e, quando necessário, banco de dados (via Supabase). Serve muito bem para sites institucionais modernos, landing pages, portfólios e aplicações simples. Serve menos bem para sites com dezenas de artigos e páginas de conteúdo, em que ferramentas voltadas a conteúdo ou HTML puro costumam ser mais leves.
| Serve bem para | Serve menos para |
|---|---|
| Site institucional de 5 a 15 páginas | Blog com dezenas ou centenas de artigos |
| Landing page de campanha | Site que precisa de edição por pessoa sem conta no Lovable |
| Portfólio com visual moderno | Projetos com orçamento zero para ajustes (créditos) |
| Aplicação simples com formulário e área logada | Quem quer HTML puro sem build |
Planos e créditos
O Lovable trabalha com créditos: cada geração e cada ajuste consomem uma parte. O plano gratuito permite experimentar com limite diário; os pagos liberam mais créditos, domínio próprio e projetos privados. Os valores mudam com frequência; a lógica é fixa: ajustes repetidos custam créditos, por isso planejar antes economiza.
Antes de abrir o Lovable: planejar as páginas por busca
O Lovable faz exatamente o que o prompt pede. Se o prompt pede "um site para minha clínica", entrega uma página bonita e genérica. Se pede seis páginas com nomes e objetivos, entrega seis páginas. O planejamento é o que define o resultado.
- Listar as buscas que trazem clientes (uma por serviço principal).
- Definir uma página para cada uma, com URL e H1.
- Reunir dados reais: anos, registros, equipe, endereço, horários, fotos.
- Definir a ação principal (WhatsApp com mensagem por página).
- Escolher referências visuais: fontes, cores, ritmo, uma ou duas páginas de inspiração.
O método de planejamento é o mesmo de como fazer um site com IA.
Passo 1: criar o projeto e escrever o prompt no Lovable
- Acessar lovable.dev e criar a conta (Google ou e-mail).
- Na tela inicial, escrever o prompt no campo principal. Não começar com "crie um site"; começar com o contexto.
- Enviar e aguardar a geração (um a três minutos). A prévia aparece à direita; o chat, à esquerda.
Modelo de prompt para site de empresa
"Site institucional para a [Empresa], [segmento] em [cidade]. Público: [descrição]. Serviços: [lista]. Diferenciais verificáveis: [lista com números reais]. Páginas (uma rota para cada): Home (/), [Serviço 1] (/servico-1), [Serviço 2] (/servico-2), Sobre (/sobre), Contato (/contato). Cada página de serviço tem H1 com a busca exata, uma resposta direta no primeiro parágrafo, seção 'como funciona', 'para quem é', perguntas frequentes e botão de WhatsApp com mensagem que identifica a página. Botão de WhatsApp fixo no canto inferior direito em todas as páginas: https://wa.me/55[número]?text=[mensagem]. Visual: fundo claro, fontes [títulos] e [texto], cor de destaque [#hex] só em botões e detalhes, sem gradientes, seções alternando claro e uma escura, animações sutis ao rolar. Use apenas os dados fornecidos; não invente números nem depoimentos. Imagens: use espaços reservados que eu vou substituir por fotos reais."
Erro comum
Prompt de uma linha. O Lovable preenche o que falta com o padrão: hero com gradiente, três cards, depoimentos inventados. Cada ajuste depois custa créditos que um prompt completo teria economizado.
Passo 2: revisar e ajustar o site no Lovable
A primeira geração nunca é a final. O ajuste é feito por conversa, uma mudança por mensagem, ou pelo modo de edição visual, que permite clicar em um elemento e alterar texto e estilo sem gastar créditos de geração.
- Textos: conferir cada dado; substituir qualquer número ou depoimento inventado; cortar clichês.
- Estrutura: confirmar que cada página de serviço existe na rota pedida e tem H1 próprio.
- Imagens: enviar as fotos reais (arrastar para o chat ou para o gerenciador de arquivos do projeto) e pedir a substituição.
- WhatsApp: clicar em todos os botões na prévia e conferir o número e a mensagem.
- Celular: alternar a prévia para a largura de celular e testar.
Como pedir ajustes que funcionam
Mensagens curtas e específicas: "Na página /implante-dentario, troque o H1 para 'Implante dentário em Sorocaba' e mova o botão de WhatsApp para logo abaixo do primeiro parágrafo." Pedidos vagos ("deixe mais profissional") gastam créditos e mudam o que não devia mudar.
Quando algo quebra
O Lovable mantém histórico: é possível voltar a uma versão anterior pelo painel. Antes de pedidos grandes, anotar o número da versão atual.
Passo 3: pedir o SEO do site no Lovable
Por padrão, projetos React têm um único title e nenhuma meta description por página. Para o Google, isso é um site de uma página só. É preciso pedir explicitamente.
- "Adicione, em cada página, title único de até 60 caracteres começando com a busca-alvo, meta description de até 155 caracteres, tag canonical com a URL final e um único H1."
- "Garanta que o conteúdo das páginas esteja no HTML renderizado, não só carregado depois por JavaScript." (O Lovable pode usar pré-renderização ou geração estática; pedir explicitamente evita páginas vazias para o Google.)
- "Crie um sitemap.xml com todas as rotas e um robots.txt que o aponte."
- "Adicione dados estruturados JSON-LD do tipo LocalBusiness no layout e FAQPage nas páginas de serviço."
- "Todas as imagens com atributo alt descritivo contendo o serviço e a cidade."
- "URLs em minúsculas, com hífen, sem acento; a página 404 deve retornar o status correto."
Como validar cada item depois de publicado está em como fazer SEO em um site feito por IA.
Passo 4: publicar o site do Lovable e conectar o domínio próprio
- Clicar em "Publish" (Publicar) no canto superior direito. O site vai ao ar em um endereço do tipo nome-do-projeto.lovable.app.
- Testar o endereço publicado em celular e computador; a prévia e a publicação às vezes diferem.
- Em Settings › Domains (Configurações › Domínios), adicionar o domínio próprio (recurso de plano pago).
- No painel do registrador do domínio (Registro.br ou outro), criar os registros DNS indicados pelo Lovable: em geral um registro A para o domínio raiz e um CNAME para www.
- Aguardar a propagação (minutos a 48 horas) e a emissão automática do SSL.
- Definir a versão principal (com ou sem www) e conferir o redirecionamento.
- Voltar ao Lovable e republicar depois de cada ajuste; a publicação não é automática.
O passo a passo do DNS para qualquer ferramenta está em como colocar domínio em um site feito por IA; a visão geral de publicação, em como colocar no ar um site feito com IA.
Passo 5: exportar o código do Lovable para o GitHub
A exportação é o que torna o Lovable diferente de um construtor: o projeto passa a existir fora da plataforma.
- No projeto, abrir o menu do GitHub e conectar a conta.
- Criar o repositório; o Lovable envia o código e mantém sincronizado nas duas direções.
- A partir daí, o site pode ser hospedado na Vercel, na Netlify, no Cloudflare Pages ou em uma hospedagem comum (depois do build), independentemente do Lovable.
- Guardar o repositório como backup mesmo que a publicação continue no Lovable.
Por que exportar mesmo sem sair
Se a empresa um dia parar de pagar o Lovable, o site continua existindo. Se um desenvolvedor precisar fazer uma alteração fina, consegue. É a diferença entre alugar e ter.
Passo 6: instalar medição no site do Lovable
- Criar a propriedade GA4 e o contêiner GTM na conta Google da empresa.
- Pedir ao Lovable: "Adicione o código do Google Tag Manager com o ID GTM-XXXXXXX no index.html: o primeiro trecho no head e o noscript no body."
- Pedir: "Em todos os botões de WhatsApp, execute dataLayer.push({event: 'whatsapp_click', page_path: window.location.pathname}) antes de abrir o link."
- No GTM, criar a tag do GA4 e o evento whatsapp_click; marcar como evento-chave.
- Verificar o domínio no Search Console e enviar o sitemap.
Os detalhes estão em como instalar o Google Tag Manager no site e como rastrear cliques no WhatsApp no Google Analytics.
Prompts prontos para as etapas mais comuns no Lovable
Os pedidos abaixo cobrem as situações que mais aparecem depois da primeira geração. Copiar, ajustar os colchetes e enviar um por vez.
| Situação | Prompt |
|---|---|
| Criar uma página de serviço nova | "Crie a rota /[slug] com H1 '[busca exata]', primeiro parágrafo respondendo o que é e para quem é, seções 'Como funciona', 'Para quem é indicado', 'Perguntas frequentes' (6) e botão de WhatsApp com a mensagem 'Olá! Vim da página [serviço] e quero agendar'. Use o mesmo header, footer e estilos da home. Adicione o link no menu." |
| Corrigir um texto inventado | "Na página /sobre, remova o depoimento e o número '+500 pacientes'. Substitua por: '[texto real]'. Não altere mais nada." |
| Trocar imagens por fotos reais | "Substitua a imagem do hero da home pela foto que enviei (fachada.jpg), com alt 'Fachada da [empresa] em [cidade]'. Mantenha as dimensões." |
| Pedir o SEO de todas as páginas | "Para cada rota, adicione title (≤60 caracteres, começando pela busca da página), meta description (≤155), canonical com a URL final e um único H1. Garanta que o conteúdo seja renderizado no HTML servido (pré-renderização). Gere sitemap.xml e robots.txt." |
| Instalar o Tag Manager | "Adicione o Google Tag Manager com o ID GTM-XXXXXXX no index.html: o script no head e o noscript no body. Em todos os links de WhatsApp, antes de abrir, execute dataLayer.push({event: 'whatsapp_click', page_path: window.location.pathname})." |
| Ajustar o celular | "Na largura de 390px, o H1 da home está quebrando em 5 linhas. Reduza para 32px e mantenha o botão de WhatsApp visível sem rolar." |
| Mudar a direção visual | "Troque a fonte dos títulos por [fonte] e a do texto por [fonte]. Remova gradientes. Use #F8F7F5 de fundo, #1C1C1C no texto e [#hex] só em botões. Alterne seções claras e uma escura antes do rodapé." |
Como economizar créditos
- Agrupar pedidos pequenos da mesma página em uma mensagem numerada.
- Usar o modo de edição visual para trocar textos e cores sem gerar código.
- Escrever os textos fora do Lovable e colar prontos.
- Evitar pedidos subjetivos; cada "deixe mais bonito" é um crédito sem direção.
Limites do Lovable para sites de empresa e como contornar
| Limite | Por que acontece | Como contornar |
|---|---|---|
| Créditos acabam em ajustes | Cada mensagem gera código | Prompt completo; edição visual para textos; agrupar pedidos |
| Blog com muitos artigos fica pesado | Cada artigo vira componente ou rota | Blog em HTML estático separado, ou pedir geração estática por arquivo markdown |
| Google pode ver página vazia | Renderização só no navegador | Pedir pré-renderização / geração estática e conferir no Search Console (Inspeção de URL) |
| Padrão visual reconhecível | Regressão à média | Direção de fontes, cores, ritmo; fotos reais |
| Dependência da plataforma para publicar | Publicação pelo Lovable | Exportar para o GitHub e publicar na Vercel/Netlify |
| Textos genéricos | Falta de briefing | Textos escritos antes, com dados, colados no prompt |
Exemplo
Um escritório de engenharia fez o site no Lovable em um fim de semana: seis páginas por tipo de projeto, visual moderno, domínio próprio. Dois meses depois, nenhuma página aparecia no Google. A inspeção de URL no Search Console mostrava páginas sem conteúdo: a renderização só acontecia no navegador. Com a pré-renderização pedida e o sitemap enviado, as páginas foram indexadas em duas semanas e começaram a aparecer no terceiro mês.
Erros mais comuns ao fazer um site no Lovable
- Prompt curto e genérico.
- Aceitar depoimentos, números e logotipos de clientes inventados.
- Uma página só com todos os serviços.
- Não pedir title, description, H1 e canonical por página.
- Publicar só no subdomínio lovable.app.
- Não exportar para o GitHub.
- Esquecer de republicar depois dos ajustes.
- Não testar no celular publicado.
- Não instalar GTM, GA4 e Search Console.
- Gastar créditos com "deixe mais bonito" em vez de direção concreta.
Perguntas sobre fazer um site no Lovable
Como fazer um site no Lovable
Criando um projeto com um prompt completo (negócio, páginas, dados reais, visual, WhatsApp), ajustando por conversa e edição visual, pedindo o SEO por página, publicando, conectando o domínio próprio e instalando a medição.
O Lovable é gratuito
Tem plano gratuito com créditos limitados por dia. Domínio próprio, projetos privados e mais créditos ficam nos planos pagos.
Site feito no Lovable aparece no Google
Aparece quando cada página tem title, description, H1 e canonical, o conteúdo está no HTML renderizado e o sitemap foi enviado. Nada disso vem por padrão; é preciso pedir.
Como colocar domínio próprio no Lovable
Em Settings › Domains, adicionar o domínio e criar no registrador os registros A e CNAME indicados; o SSL é emitido automaticamente.
Posso exportar o site do Lovable
Pode: o projeto sincroniza com um repositório no GitHub e pode ser hospedado na Vercel, Netlify, Cloudflare Pages ou outra hospedagem.
O Lovable serve para blog
Serve para poucos artigos. Para dezenas ou centenas, um blog em HTML estático separado costuma ser mais leve e barato.
Como instalar o Google Analytics no Lovable
Pedindo no chat para inserir o código do Google Tag Manager no index.html e, pelo GTM, publicar a tag do GA4 e os eventos.
Quanto custa um site no Lovable
O plano gratuito permite experimentar; os pagos ficam em faixa média mensal por créditos, mais o domínio. Ajustes repetidos consomem créditos.
Resumo · como fazer um site no Lovable
- Planejar antes: páginas por busca, dados reais, ação principal, referências visuais.
- Prompt completo com rotas, H1, seções, WhatsApp e direção visual.
- Ajustar uma mudança por mensagem; edição visual para textos; histórico de versões.
- SEO: title, description, canonical, H1, pré-renderização, sitemap, JSON-LD, alt.
- Publicar: Publish, domínio próprio por DNS, republicar após ajustes.
- Exportar para o GitHub: o site passa a ser seu.
- Medir: GTM no index.html, dataLayer no WhatsApp, GA4, Search Console.
- Limites: créditos, blog pesado, renderização, padrão visual.
O Lovable é a ferramenta mais capaz da sua família, e ainda assim o resultado no Google e nos contatos depende do que se decide antes e depois da geração. Para quem prefere receber esse sistema pronto, o Grupo KOP descreve seu método em desenvolvimento de sites. O próximo passo é como fazer um site com IA na Hostinger, a alternativa com hospedagem inclusa.
