Como criar um site para um negócio local com IA, otimizado e que converta

Já aconteceu a todos nós que criamos sites.

Falamos com um potencial cliente que tem um negócio local — daqueles em que os clientes vão às instalações ou que prestam serviços num raio limitado de quilómetros — e ele sai-se com esta: “Um site simplesinho, para me poderem ligar ou mandar uma mensagem pelo WhatsApp”.

Simplesinho. Pois.

Obviamente, uma loja online com milhares de produtos ou um SaaS são muito mais complexos, mas se um negócio quer conquistar clientes através do site (e normalmente gastando pouco ou nada em publicidade), garanto-te que de simplesinho não tem nada.

Porque, antes de começar, é preciso perceber o que a empresa oferece, descobrir como os clientes procuram esses serviços, decidir que páginas são necessárias, escrever textos, escolher imagens, criar formulários, medir leads e verificar que tudo funciona num telemóvel.

Se, além disso, quiseres publicá-lo em vários idiomas, o número de decisões multiplica-se.

Já fiz bastantes. E todos, todos, todos, absolutamente todos superaram os objetivos e conseguiram mais leads do que os inicialmente previstos. Por isso, sei do que estou a falar.

Até agora tinha um sistema, que incluía o marketing indispensável e que era quase sempre implementado em WordPress, por razões óbvias.

Mas agora chegou a IA. E facilita tarefas que antes demoravam muito tempo, eram praticamente impossíveis de gerir ou simplesmente não compensavam. Agora já compensam. E foi por isso que o último site que criei, para a empresa de transportes Rondabus, foi feito sem CMS, recorrendo a uma framework de desenvolvimento, Astro, que eu não conhecia, mas que o ChatGPT me recomendou quando lhe expliquei o que pretendia.

E acho que foi uma excelente escolha, porque aposta em algo que sempre defendi: para sites institucionais que passam meses quase sem alterações e não são usados para publicar novos conteúdos, o HTML estático tem três vantagens claras:

1. Mais rápido.
2. Mais seguro.
3. Não requer alojamento pago.

Mais à frente, quando falar da stack tecnológica, explicarei melhor, caso a terceira te tenha surpreendido.

A verdade é que ter um site empresarial com tudo o que é preciso para gerar leads (formulário, email, telefone e WhatsApp), pagando apenas os cerca de 3 a 10 € anuais do domínio, parece bom demais.

E é mesmo.

Neste guia explico-te tudo passo a passo para poderes reproduzir o processo. Além do domínio, só precisas de uma subscrição paga do ChatGPT para analisar, estruturar, escrever, traduzir e rever, enquanto o Codex trabalha no código..

Claro que podes substituir estas ferramentas por outras. Digo-o sobretudo se também pagas o Claude, porque a combinação de ChatGPT como analista e Claude como programador ainda é melhor.

Esclarecidas as necessidades, vamos ao passo a passo.

1. Compreende o projeto e define tudo antes de começar

Primeiro, o cliente tem de te explicar:

1. Em que consiste o negócio.
2. Que serviços oferece.
3. A quem se dirige.
4. Em que zonas presta realmente serviços.
5. Quem são os seus concorrentes.
6. O que o distingue deles.
7. Que provas pode apresentar.
8. Que ações queres que uma pessoa realize ao entrar no site. Ou seja, como é que o canal digital vai gerar negócio para a empresa.

Juntamente com estas informações, serão definidos (por ti, pelo cliente ou pelos dois):

• O domínio.
• Canais de contacto (telefone, WhatsApp, email, formulário…)
• Idiomas previstos.
• Redação dos textos.
• Fotografias ou imagens.
• Se haverá ou não produção regular de conteúdos.

Tanto tu como a IA vão precisar de tudo isto.

Aqui distinguimos três tipos de decisões:

1. As de negócio determinam o que se vende e a quem.
2. As de conteúdo e design determinam o que se comunica e como se apresenta.
3. As técnicas determinam como o site é implementado, publicado e mantido.

Depois de definires tudo isto, regista essas decisões num briefing e num documento de requisitos (PRD) antes de começares a construir as páginas. Ao entregar esses documentos ao ChatGPT, evitamos ter de lhe explicar em cada conversa qual era o domínio correto, que páginas tinham sido aprovadas ou de onde vinham o telefone e o email.

Por agora, a tecnologia é indiferente. Esta metodologia serve para WordPress, Astro ou qualquer outro sistema: mantém um local claro para as decisões e outra fonte para os dados do negócio.

Entregável

Um briefing curto e um PRD completo, com aprovações, decisões pendentes, objetivos de conversão, materiais disponíveis e responsáveis.

Sempre que uma decisão mudar, atualiza tu próprio o PRD ou pede ao Codex para o fazer.

2. Cria mockups para definir o design

Antes de pedires ao Codex que programe alguma coisa, é melhor preparar duas ou três propostas que permitam comparar abordagens. Não precisam de ser três sites completos; geralmente basta a página inicial ou uma página de serviço de cada proposta para perceberes o aspeto geral do projeto.

Mas convém mostrar também a versão móvel para evitar surpresas.

É a primeira coisa que vamos pedir ao Codex.

Para começar, exploramos três conceitos para uma página de serviço. Podem ser claros ou escuros, ou variar nas cores e nos estilos. Aquilo que consideres mais adequado ao projeto, mas pede três. Dois é pouco e quatro ou cinco já começa a ser demais.

Depois de reunires as alternativas, verifica se cada proposta inclui os módulos necessários, se os textos estão corretos (os teus ou os criados pelo ChatGPT), se apresenta o telefone ou WhatsApp como deve ser, se o formulário só pede o essencial, se as imagens representam bem o serviço, etc. Ou seja, se cumpre os requisitos básicos de CRO..

Depois de fazeres os ajustes necessários, podes mostrar as propostas ao cliente, recolher a sua opinião e explicar qual te parece a melhor das três. Mas tem atenção: aquilo que lhe mostras deve aproximar-se o mais possível do design final, e não ser apenas uma aproximação vaga. O cliente não tem de estar habituado ao mesmo nível de abstração que tu quando se trata de criar sites.

Entregável

Mockup com a direção visual aprovada, versões para computador e telemóvel, lista de padrões comuns (cabeçalho, rodapé, ícones, secção principal com formulário…) e detalhes a respeitar durante a implementação.

3. Faz uma análise de mercado de guerrilha

Não precisas de um estudo de cem páginas para decidir a estrutura inicial de um site local. Precisas de dados suficientes para não escolher as páginas por intuição. Nem pela tua nem, pior ainda, pela do cliente. A análise tem duas partes: procura e concorrência..

Análise da procura: o quê, quanto e onde pesquisam os utilizadores

Primeiro, é preciso descobrir se existe procura pelo que o teu cliente oferece ou se é necessário criá-la. E, sobretudo em negócios locais, qual é o volume de procura na sua área de atuação..

Para isso, tens aqui um artigo completo, passo a passo, sobre o estudo da procura para lojas online, mas a seguir vou resumi-lo e adaptá-lo a um site de negócio local.

Cria uma lista inicial de serviços usando as palavras que um cliente utilizaria. Acrescenta variantes, necessidades e modificadores geográficos. Um exemplo do meu caso:

• Aluguer de autocarros.
• Aluguer de autocarros em Ronda.
• Transporte para casamentos.
• Autocarro para casamento em Ronda.
• …

Percebe-se, certo?

Depois, verifica quais as pesquisas que revelam intenção de contratar, quais procuram informação e quais misturam serviços que devem partilhar a mesma página. Por exemplo, “aluguer de autocarro para casamentos”, “autocarro para convidados de casamento” e “transporte para uma celebração” correspondem a necessidades semelhantes. Não precisas de três páginas só porque existem três expressões. Em contrapartida, “transporte escolar” e “transfer para o aeroporto” implicam públicos, condições e dúvidas suficientemente diferentes para justificarem páginas próprias.

Nesta fase inicial, para criares a estrutura do site, fica apenas com as pesquisas de intenção comercial. As restantes ficam para o blogue, se algum dia existir.

Usa o Planeador de Palavras-chave do Google Ads para as estimativas, delimitando a área geográfica. Isso dar-nos-á uma ideia do tráfego que podemos alcançar, sabendo que o volume de pesquisas não corresponde ao total de visitas orgânicas que receberemos, mas apenas a uma parte. Com esses dados e uma taxa de conversão estimada, podemos calcular quantos leads conseguiremos captar por mês.

Concorrência: com quem disputas os clientes

Mais uma vez, tens aqui um artigo onde explico em detalhe como fazer uma análise da concorrência no e-commerce. Embora já tenha alguns anos e certas coisas tenham mudado, os princípios continuam os mesmos.

Adaptando-o a um negócio local, deves pesquisar como faria um cliente nas zonas relevantes e registar que empresas aparecem nos resultados orgânicos e locais. Observa os seguintes aspetos:

• Serviços.
• Textos comerciais, CTAs e conteúdos.
• Estrutura do site.
• Cobertura geográfica.
• Chamadas à ação.
• Formas de contacto.
• Reputação online (classificação em diretórios como Google Maps ou Trustpilot).
• Lead magnet, se tiverem (normalmente não, porque não fazem email marketing).
• Preços.

Não se trata de copiar o primeiro da lista. A comparação deve ajudar-te a detetar perguntas sem resposta nos teus conteúdos, a clarificar as tuas propostas de valor e a identificar oportunidades que o teu negócio consiga realmente aproveitar.

Se não tens acesso a dados financeiros de um concorrente, não os inventes. Pergunta ao ChatGPT, talvez recorrendo a Deep research..

Entregável

Dois:

Uma tabela com as palavras-chave, agrupadas por possível URL de destino (normalmente a página inicial e as páginas de serviço), âmbito geográfico se aplicável, prioridade comercial, concorrentes visíveis e conclusões. Serve para tomar decisões sobre o site, a sua estrutura e os conteúdos (sobretudo títulos) de cada página.

Além disso, juntaremos um documento com todas as boas ideias dos concorrentes que possam ser aplicadas ao meu negócio e ao site.

4. Define a estrutura do site e de cada URL a partir da procura

Agora transforma os grupos provisórios de palavras-chave num mapa real de páginas. Para cada URL proposta, regista:

• Que necessidade resolve, a quem se destina e que serviço representa.
• Que ação deve provocar (formulário, clique no telefone ou WhatsApp, marcação de reunião…).
• De que conteúdos precisa.
• Se consigo obter testemunhos reais ou não.
• De onde virão os links internos.
• A que área geográfica se destina (pode ser apenas uma, mas pode fazer sentido repetir a página de serviço se conseguir clientes em dois países ou cidades diferentes).

Decide também que páginas devem ser indexadas. Ou melhor, o contrário: quais não devem ser indexadas. Por exemplo, as páginas legais e as que duplicam conteúdos (sobre mim e página inicial).

Também é importante para os conteúdos que, se o negócio tiver um Perfil de Empresa no Google, os dados nele apresentados (nome, serviços, contactos, horários e zonas reais) sejam exatamente iguais aos do site.

Entregável

Mapa com:

• URL.
• Palavras-chave a que se dirige.
• Decisões específicas sobre o conteúdo da página.
• Indexação: sim ou não.

5. Fecha os requisitos e escolhe a tecnologia adequada

Antes de começar o desenvolvimento, precisamos de transformar todas as decisões tomadas num documento de trabalho, uma versão nova e completa do PRD inicial. O documento deve permitir que outra pessoa — ou a IA, neste caso — perceba o que construir e como saberemos que está concluído.

Normalmente, será mais cómodo reunir toda esta informação num projeto do ChatGPT e pedir-lhe que redija um rascunho, fazendo perguntas sobre quaisquer dados necessários que ainda não estejam incluídos. Depois basta rever e editar. É muito mais rápido.

Com toda esta informação reunida, chegou a hora de escolher a tecnologia. Para este tipo de sites, proponho que avalies duas soluções: a framework Astro (aqui estão as suas vantagens e desvantagens) ou WordPress. Neste artigo tens uma comparação direta entre ambas, para perceberes porque é que, neste momento, prefiro Astro para estes projetos.

A combinação vencedora é a que eu próprio utilizo e é a que vou seguir neste tutorial::

• Astro para gerar o site.
• GitHub como repositório de código.
• Cloudflare para publicar (não é indispensável, mas facilita as coisas se também tiveres comprado lá o domínio)
• Zoho Mail para o email profissional e a API do formulário.

Claro que, num negócio cuja equipa precise de editar frequentemente muitos conteúdos num painel de administração, WordPress pode ser a melhor opção.

Além de escolheres a tecnologia, chegou a altura de organizar as fontes. Para isso, cria uma pasta no computador com várias subpastas, por exemplo:

• Materiais originais do cliente.
• Materiais teus (estudo da procura, mockups, PSD, textos…)
• Código.
• Recursos finais necessários ao site (aquilo que será enviado para Cloudflare: sobretudo HTML, CSS, JS e imagens).
• Segredos (palavras-passe) de produção.

Nem todo este material será enviado para o repositório, apenas o indispensável para reconstruir o site, sem palavras-passe nem documentos originais enormes que guardamos somente como material de trabalho.

Depois de criares esta estrutura, chegou a hora de criar um projeto no Codex, diferente daquele que já temos no ChatGPT. São dois projetos distintos que partilham materiais como o PRD. A partir daqui, imagina que tens duas pessoas a trabalhar para ti:

1. ChatGPT: o analista, que vai desenhar o sistema de acordo com as tuas especificações e propor soluções.
2. Codex: o programador, que vai construir o site seguindo as instruções propostas pelo analista.

Para criar o projeto no Codex, basta:

1. Criar um novo na aplicação.
2. Dar-lhe um nome.
3. Partilhar a pasta raiz do projeto que criámos no computador.
4. Explicar onde está o PRD e pedir que avalie tudo antes de começar.

Para concluir esta etapa, só falta definir os últimos aspetos anteriores ao desenvolvimento:

• Como serão revistas as alterações antes da publicação (queres que o Codex o faça ou preferes rever manualmente?)
• Como será feita a publicação (o Codex faz commit no GitHub e daí para Cloudflare ou fazes tu manualmente?)
• Se o site terá vários idiomas e por qual começaremos.

Quando estiver tudo decidido, pede-lhe que acrescente essas decisões ao PRD. Como tem autorização para escrever na pasta, fará as alterações necessárias no documento. A partir de agora, o método de trabalho que vamos seguir é este:

1. Tu pensas no que precisas. És o dono (owner) do projeto.
2. Explicas ao ChatGPT e avaliam juntos cada ponto e as eventuais dúvidas.
3. Quando tudo estiver esclarecido, pedes ao ChatGPT que prepare o prompt para o Codex.
4. Colas esse prompt no Codex, que o executará.
5. Avalias o trabalho do Codex e fazes ajustes, se necessário.
6. Passas à etapa seguinte do desenvolvimento.

A partir de agora, o teu trabalho é exclusivamente pensar, decidir e definir. O analista e o programador encarregam-se de construir o site.

Entregáveis

• PRD pré-desenvolvimento aprovado (poderá mudar à medida que o projeto avançar).
• Pasta com a estrutura do repositório.
• Plano de publicação e de testes.

6. Escreve os textos

Se ainda não o fizeste, agora que tens a estrutura do site e o projeto preparados, é altura de começar a criar os conteúdos de cada URL.

A página inicial deve explicar a oferta geral e encaminhar para os serviços. Cada página de serviço deve explicar o que é oferecido, para quem, em que situações, quais as dúvidas habituais dos clientes e como contactar. Aqui, os textos SEO não substituem os textos úteis para pessoas: quando ambos são bem pensados, complementam-se.

Usa a IA para preparar rascunhos contextualizados. Explica-lhe:

• O serviço.
• A tua proposta de valor única.
• Público-alvo.
• Área geográfica.
• Tom.
• Perguntas frequentes reais.
• Testemunhos disponíveis. Se existir um Perfil de Empresa no Google, talvez consigamos aproveitar boas avaliações de lá.

Vai ajustando e editando os resultados até teres algo publicável. Depois pensa em como distribuir o conteúdo por diferentes módulos ou pede ao ChatGPT que proponha soluções. Podem surgir módulos repetidos em todo o site (formulário, mapa, benefícios gerais). Não te preocupes já com isso; vamos tratar do assunto na próxima etapa.

Deixo-te um exemplo de prompt para um rascunho de página de serviço:

Redige a página de [servicio] para [negocio] em [zona]. Proposta de valor única: [propuesta]. Público: [audiencia]. Intenção principal: [necesidad]. Testemunhos: [lista]. Dúvidas habituais: [lista]. CTA: [acción]. Mantém um tom [tono]. Propõe estrutura, textos, metadados SEO e schema. Assinala qualquer afirmação que precise de provas e não inventes números, avaliações, veículos nem zonas de cobertura.

Cria os conteúdos de todas as páginas, uma de cada vez.

Entregável

Fichas de páginas aprovadas com os conteúdos: textos, CTA, metadados, provas e materiais visuais. Podes construir primeiro a página inicial e uma página de serviço representativa para verificar se o sistema funciona antes de o alargares aos restantes serviços e à página de contacto.

7. Separa os componentes reutilizáveis

Com os mockups e as fichas das páginas à frente, identifica o que realmente se repete: cabeçalho, navegação, rodapé, botões, formulário, cartões de benefícios, blocos com imagens, CTAs finais e avisos…

A ideia é utilizar componentes reutilizáveis, para que, se mudares o telefone, só precises de alterá-lo no componente e a mudança seja aplicada a todas as URLs. Claro que o cabeçalho e o rodapé são reutilizáveis, mas provavelmente há mais elementos.

Além disso, talvez queiras que todas as páginas de serviço partilhem o mesmo design ou estrutura. Por isso, separa a estrutura dos dados. Exemplos:

• Um modelo de página de serviço pode apresentar blocos comuns sem impor o mesmo texto a todas as páginas.
• Mais concretamente: um componente de benefícios pode manter a apresentação enquanto o título, a explicação e o ícone mudam.

Faz um teste prático antes de replicares o padrão: pede ao ChatGPT o prompt para que o Codex construa a página inicial e uma página de serviço, compara-as com os mockups e ajusta tanto os conteúdos individuais como os componentes partilhados.

Testa o aspeto em Desktop e Mobile. Quando tudo estiver correto, aplica o sistema às restantes páginas.

Entregável

Página inicial e uma página de serviços com o layout implementado.

Inventário de componentes, dados recebidos por cada um e páginas que os utilizam.

8. Prepara as imagens para produção

Vá, depois dos textos é altura de definir as imagens.

Idealmente, o cliente ter-te-á enviado imagens decentes. Na prática, isso raramente acontece. Felizmente, se não te entendes com Photoshop, o ChatGPT é teu amigo e o seu sistema de criação e edição de imagens é mesmo muito, muito bom. Portanto, mãos à obra.

Não compliques demasiado: entre uma e três imagens por URL deverá ser suficiente. E é provável que algumas se repitam. Idealmente, a primeira, a imagem de cabeçalho, deve ser diferente em cada página.

Guarda os originais do cliente e, quando criares uma nova imagem, mantém um ficheiro-mestre de boa qualidade em pastas que não serão enviadas para o repositório.

Depois pede ao ChatGPT que diga ao Codex para adaptar cada imagem ao lugar que ocupa no site e, para isso:

• Gerar versões com dimensões e formatos adequados, geralmente .webp para fotografias e SVG para ícones.
• Definir tamanhos responsive e evitar enviar para o telemóvel ficheiros pensados para preencher um ecrã grande.
• Reservar o espaço da imagem para evitar que a página salte durante o carregamento. A imagem principal pode precisar de prioridade de descarga, enquanto uma fotografia muito mais abaixo pode esperar.
• Um bom texto alternativo descreve a informação da imagem; se conseguir incluir uma palavra-chave adequada, melhor ainda.

Entregável

Imagens finais para o site.

9. Cria os ícones

Provavelmente é a parte mais difícil de otimizar em sites com muitos ícones (mais de 20 ou 30).

É que é difícil criar variantes de todos eles com o mesmo estilo, sobretudo no mesmo painel de ícones. Acabas por ter de trabalhar um a um, o que leva tempo.

E depois, ainda mais difícil: transformá-los em SVG e conseguir que fiquem bem. Por isso, se tiveres de recorrer a PNG recortados manualmente ou extraídos de um painel criado em Photoshop, força. Não chegarás aos 100% de otimização possível, mas pouparás imenso tempo. Falo por experiência.

Por exemplo, na Rondabus experimentei várias soluções porque os primeiros desenhos se afastavam das referências: alguns eram demasiado simples e outros tinham uma escala visual diferente, apesar de ocuparem o mesmo espaço. Cheguei a experimentar recortes e PNG das pranchas aprovadas, mas a solução escolhida para a versão 2.0 foram os SVG originais com um tamanho de apresentação maior..

Para realizar o processo:

1. Identifica primeiro onde aparece cada ícone e o que significa.
2. Agrupa os que se repetem.
3. Guarda um ficheiro-mestre por desenho ou painel de ícones.
4. Prepara uma pré-visualização nos contextos reais: hero, módulo de cartões de serviços, módulo de lista de benefícios, contacto…
5. Ajusta o tamanho ótico sem deformar as formas: dois ícones com a mesma largura de ficheiro podem parecer muito diferentes por causa das margens do desenho.
6. Valida uma amostra numa página importante (inicial ou serviços) antes de tentares alterar todas as páginas. Se uma tentativa não reproduzir o estilo do mockup, volta à referência e descarta-a.
7. Aplica a solução às restantes páginas.
8. O formato do ficheiro é uma decisão de implementação, enquanto a qualidade visual e a consistência são aquilo que o utilizador vai avaliar. E isso é o mais importante.

Entregável

Conjunto de ícones e ficheiros-mestre aprovados.

10. Constrói o site por etapas

Depois de aprovares a página inicial e o modelo das páginas de serviço, constrói as restantes e revê cada uma individualmente. Partilharem o mesmo modelo não significa que funcionem todas visualmente: mudam a extensão dos títulos, as fotografias, o número de benefícios, os textos dos botões e as necessidades do público.

Revê a versão para computador e vários tamanhos de ecrã de telemóveis e tablets. Olha para cada página como um utilizador, compara-a com o mockup e verifica aquilo que um design estático não consegue mostrar:

• Menu suspenso.
• Links.
• Validação do formulário no front end.
• Imagens e ícones a carregar corretamente.
• Conteúdo extenso
• Quebras de linha nos títulos.
• …

Convém guardar pontos de controlo do código quando uma etapa com várias alterações for aprovada. Pede ao ChatGPT que o faça enquanto aperfeiçoas os detalhes.

Entregável

Páginas completas no front end (falta validar o formulário, se existir).

Ponto de controlo do front end concluído: site versão V1 (um idioma). Se consideras que o site já está concluído nesta fase, salta para o passo 17 para o publicar online.

11. Cria um formulário e outras formas de contacto

Se leste os meus artigos sobre Astro, duas coisas já devem estar claras:

1. Publicas ficheiros HTML.
2. Num servidor sem linguagem do lado do servidor (PHP, Python).

Isto tem muitas vantagens e um inconveniente: não podes enviar formulários diretamente.

Existem várias soluções, entre elas:

• Utilizar serviços pagos da Cloudflare.
• Utilizar um fornecedor de email (gratuito ou pago) e integrar o serviço através de uma API.

No meu caso, como nestes projetos costumo também configurar o sistema de email e utilizo a versão gratuita do Zoho Mail, prefiro recorrer a esse serviço para enviar as mensagens dos formulários em vez de acrescentar mais um fornecedor.

É um pouco complicado e exige várias etapas que terás de realizar manualmente, por isso pede ao ChatGPT que te oriente passo a passo. E, sobretudo, não envies os secrets para o repositório do GitHub. A Cloudflare disponibiliza um local próprio para os guardar.

Quando estiver tudo pronto, preenche o formulário corretamente e com erros para confirmar que tanto a validação como o envio funcionam.

Se ainda não o fizeste, também é uma boa altura para testar o link do telefone e do WhatsApp num telemóvel real, caso os tenhas adicionado, como quase de certeza deverias.

Entregável

Formulário testado e a funcionar de ponta a ponta.

Ponto de controlo: site versão V1.5 (concluído com formulário e um idioma).

Com isto, faltando apenas publicar o site (passo 17), já teríamos tudo o que é indispensável para qualquer site de negócio local. Mas os passos seguintes são ALTAMENTE RECOMENDÁVEIS se quisermos mesmo conquistar clientes.

12. Mede os contactos e configura o consentimento

Começamos os passos opcionais com algo básico: medir.

O que queremos medir? O essencial:

• Eventos de conversão.
• Tráfego.

Para quê?

Para perceber de onde vêm as vendas, sobretudo se pensas investir em publicidade para conseguir os primeiros clientes (devias mesmo considerar isso).

Por isso, o primeiro passo é definir o plano de análise que incluirá os eventos de negócio antes de instalar seja o que for. E serão muito claros:

• Contacto por telefone.
• Por WhatsApp.
• Por email.
• Por formulário.
• Marcação de compromissos na agenda.
• Subscrição (de uma newsletter, se existir).
• Clique para ver a morada no Google Maps.

E provavelmente estes são todos os eventos que precisas de medir neste tipo de site.

Decide quais se aplicam ao teu caso e pede ao ChatGPT que te devolva:

• O nome do evento segundo a nomenclatura recomendada pelo Google, porque sugiro usar Google Analytics 4 para fazer esta medição.
• Condição que desencadeia o evento.
• Parâmetros secundários (quando aplicável).

O sistema funciona assim:

O utilizador do site executa um evento > Google Tag Manager recolhe-o > GA4 armazena-o para poderes consultar os dados.

Cria contas no GA4 e no GTM com a tua conta Google e, já agora, também no GSC, que utilizaremos mais à frente para questões de SEO.

Se o negócio está na União Europeia, a medição também depende das decisões de privacidade. Por isso, pede ao ChatGPT que implemente o Google Consent Mode v2 avançado, com uma opção para reabrir as preferências. Irá criar o habitual banner de cookies.

Com isto definido, pede ao ChatGPT que solicite ao Codex o ficheiro JSON com o contentor para importar no GTM. A IA pedir-te-á os identificadores das tuas contas GA4 e GTM e fornecerá um ficheiro com tudo pronto a importar.

Depois só falta testar cada evento no modo de pré-visualização do GTM, antes de publicar o contentor e começar a recolher dados reais do site.

Entregável

Plano de medição e implementações funcionais de GTM e GA4, com o consentimento testado quando aplicável.

13. Conclui o SEO técnico e publica a primeira versão

Se estás a trabalhar SEO local, como devias, é altura de executar o Screaming Frog e verificar os erros. Pede ao ChatGPT que te ajude a corrigi-los.

Liga o site ao Perfil de Empresa no Google que tiveres. Revê nome, categorias, morada ou área de serviço, telefone, horário, fotografias e serviços, sem inventar localizações.

Além disso, no GSC (Google Search Console), envia o sitemap gerado. Se não souberes a URL, pergunta diretamente ao Codex. Passados alguns dias, verifica se as páginas importantes podem ser rastreadas e indexadas.

Entregável

Um site sem erros técnicos de SEO, com URLs e sitemap verificados e domínio canónico correto.

Poderíamos chamar-lhe versão V2..

14. Decide se vale a pena acrescentar outros idiomas ao site

Chegamos à última parte do processo: traduzir o site para outros idiomas.

Antes de decidires, confirma:

• Que públicos queres atrair.
• Em que idioma os vais atender.

Não é o mesmo oferecer massagens a um norueguês em Málaga sem falar a língua ou prestar serviços jurídicos. Também podes atrair japoneses à procura de táxi em Ronda, desde que deixes claro que só os atendes em inglês.

Além disso, um novo idioma implica traduzir conteúdos, menus, formulários, metadados, schema e atualizações futuras; não é apenas acrescentar um botão com uma bandeira.

Quando souberes que idiomas queres no site, define com o ChatGPT:

• O idioma de origem, que já está publicado no teu site.
• Os idiomas para os quais vais traduzir.
• As páginas traduzíveis, que não são todas (por exemplo, a página de erro 404 ou as páginas legais)
• A política de URLs. Decide se os slugs serão traduzidos, como se ligam as páginas equivalentes e o que acontece quando falta uma tradução.

A arquitetura deve identificar cada página através de um código estável independente do idioma, para que o seletor consiga levar à página equivalente e o site possa gerar relações hreflang sem ter de adivinhar a partir do título apresentado.

Tudo isto deve estar decidido antes da tradução.

Entregável

Plano de tradução.

15. Separa exportação, tradução e integração

O processo que melhor funciona comigo é dividir o trabalho.

1. O Codex analisa o projeto e prepara um pacote de textos com identificadores estáveis, texto de origem, contexto, idioma de destino, marcadores, links e termos protegidos. Normalmente, será um pacote JSON ou XML.
2. O ChatGPT traduz esses pacotes, revê os valores e devolve os ficheiros traduzidos.
3. O Codex integra esses ficheiros e valida as páginas.

Esta divisão permite mudar de tradutor (até recorrer a uma pessoa) sem lhe exigir que compreenda o código nem obrigar o programador a adivinhar o sentido de cada frase. Claro que a revisão do ChatGPT não substitui uma revisão linguística feita por um tradutor certificado.

Prompt para exportar:

Analisa o projeto e prepara um inventário traduzível para [idiomas]. Inclui texto visível, navegação, formulários, metadados e slugs. Para cada unidade, fornece um ID estável, texto de origem, contexto, marcadores, links e termos protegidos. Não traduzas nem alteres ainda as páginas. Indica expressões ambíguas e conteúdos sem equivalente.

Prompt para traduzir:

Traduz apenas os valores do pacote para [idioma y variante]. Público: [audiencia]. Tom: [tono]. Glossário: [términos]. Preserva IDs, estrutura, ordem, placeholders, nomes próprios, links e código. Assinala fora do pacote as frases que necessitem de uma decisão de negócio ou revisão por um falante nativo.

Prompt para integrar:

Importa estas traduções aprovadas para o projeto. Verifica IDs, marcadores, termos protegidos, slugs e caminhos equivalentes. Não publiques um idioma com textos obrigatórios em falta. Executa a auditoria de traduções, as verificações do projeto e o build; comunica qualquer diferença antes de fazer o deploy.

Entregável

Site multilingue ainda não revisto.

16. Audita cada idioma como um site completo

Depois de integrares as traduções, abre as páginas: um ficheiro válido pode originar um menu que ultrapassa os limites, um CTA demasiado comprido ou um aviso a tapar o formulário. Revê cada URL de cada idioma tanto no computador como no telemóvel.

Na parte de SEO, verifica (tu ou o ChatGPT):

• <html lang>.
• Título.
• Descrição.
• URL localizada.
• Canonical próprio.
• Relações hreflang entre páginas equivalentes.
• Sitemap de URLs indexáveis.
• O seletor deve manter a página atual quando se muda de idioma, se existir uma equivalente.
• Verifica também os links do rodapé.
• Formulários e mensagens de erro.
• Textos alternativos das imagens.
• Dados estruturados que incluam texto ou URLs.

Faz os ajustes necessários até tudo ficar impecável.

Entregável

Site multilingue completo, versão V3.

17. Publica uma versão identificável e verifica a produção

Quer seja após o passo 10 (V1), o 11 (V1.5), o 13 (V2) ou o anterior (V3), temos um site montado num ambiente de testes. Falta colocá-lo em produção. É isso que vamos fazer agora.

Aqui vamos pedir ao ChatGPT que diga ao Codex para publicar o build na Cloudflare.

Para isso, o Codex:

1. Iniciará sessão na nossa conta GitHub.
2. Pedir-nos-á que selecionemos ou criemos o repositório adequado.
3. Iniciará sessão na nossa conta Cloudflare.
4. Perguntar-nos-á em que domínio deverá publicar.
5. Publicará a versão mais recente do site.

E nós só teremos de verificar que tudo se apresenta como na versão de testes.

E teremos terminado o site.

Entregável

Versão completa do site publicada.

18. Transforma o projeto num método repetível

Isto é ainda mais opcional, mas muito recomendável se quiseres aplicar o processo a outro site de outro negócio.

Só tens de pedir ao ChatGPT que crie uma Skill com todo o processo que seguiram. Assim, não tens de te lembrar de cada passo da última vez nem de voltar aqui para consultar o tutorial. O ChatGPT terá tudo guardado e o Codex terá a Skill instalada.

Dessa forma, o próximo site que criares para outro negócio local ficará pronto muito mais depressa.

Fixe, não é?