Use minha conexão com o Opus Growth para isso. Se você não encontrar a ferramenta de que precisa, procure entre as ferramentas do Opus Growth (com search_tools, se estiver na sua lista); se não conseguir acessar as ferramentas de forma alguma, não adivinhe, me avise.
No meu servidor de hospedagem Opus Growth
[nome do servidor], crie uma única página de campanha para o tráfego de anúncios do Google Ads e da Meta, além de uma página de privacidade. Não há formulário; os visitantes entram em contato por telefone, WhatsApp ou um link de agendamento. Detalhes: empresa
[nome da empresa], serviço
[serviço], área
[bairros], telefone
[telefone], WhatsApp
[número], link de agendamento
[link ou "nenhum"], endereço
[endereço], horário
[horário de funcionamento], títulos dos anúncios e oferta principal
[títulos e oferta], contêiner do Tag Manager
[GTM-XXXXXXX], conta do Google Ads
[nome da conta], conta de anúncios da Meta
[nome da conta].
Coerência de mensagem: o h1 repete a promessa do título do anúncio com as mesmas palavras (serviço, área, oferta principal). Não coloque na página uma promessa que não esteja no anúncio, nem no anúncio uma que não esteja na página. Se os títulos do Google e da Meta forem diferentes, use o título do anúncio que mais investe e sugira como alinhar o outro anúncio à página. Em saúde, direito ou finanças, não prometa certeza ("garantido", "100%").
Estrutura da página: a barra superior tem apenas o nome da marca e um botão de ligar, sem menu, para que os visitantes não se dispersem. Hero: h1, descrição de uma frase, três botões (Ligar agora, Chamar no WhatsApp, Escolher um horário), quatro pontos curtos de segurança logo abaixo e uma imagem. Depois, o processo em três etapas, o que define o preço (resposta primeiro, se você não publicar preços), FAQ, uma chamada final para ação e um rodapé com nome, endereço, telefone e o link de privacidade. No celular, fixe uma barra de dois botões (Ligar, WhatsApp) na parte inferior da tela e dê ao corpo da página um espaçamento inferior da mesma altura, para que nada fique escondido embaixo dela e nada se desloque. O link do WhatsApp usa wa.me com uma mensagem pré-preenchida. Mantenha o visual simples e confiável: uma única família de fonte (por exemplo General Sans, dois pesos), um destaque de cor e um botão de WhatsApp verde-escuro com contraste de pelo menos 4,5:1 com o texto branco.
Regras de movimento e mensuração:
1. Movimento leve, sem bibliotecas: não carregue GSAP, Lenis nem Swiper. Transições de hover e de clique nos botões; nos cartões das etapas, uma pequena subida guiada pela rolagem que use apenas transform, dentro de `@supports (animation-timeline: view())` e somente para visitantes que não pedem movimento reduzido. Não use opacity: na demonstração, cartões esmaecidos abaixo da tela falharam no contraste e derrubaram a Acessibilidade para 96. Nada na primeira tela começa com animação de entrada.
2. Carregue a camada de mensuração como `assets/tag.js` com defer:
a. `window.dataLayer` e os padrões do Consent Mode v2: ad_storage, ad_user_data, ad_personalization e analytics_storage "denied", wait_for_update 500.
b. Dê a cada link de ação data-conv="phone", "whatsapp" ou "booking" e um data-conv-place com o nome da seção. Um único listener de clique os envia ao dataLayer como `{event: "phone_click" | "whatsapp_click" | "booking_click", conv_place, page_path}`.
c. Não coloque o snippet clássico do GTM no `<head>`; injete-o depois do evento load com requestIdleCallback, para que as tags nunca atrasem a primeira renderização.
d. Adicione uma pequena barra de consentimento fixa: Rejeitar e Aceitar como botões de mesmo peso, com a escolha guardada no navegador e enviada como atualização de consentimento. No celular, ela fica acima da barra de ação e baixa o suficiente para não cobrir o botão principal do hero.
3. Tag Manager: primeiro mostre o estado atual com list_gtm_containers, list_gtm_triggers e gtm_workspace_status. Proponha três gatilhos de Evento Personalizado com create_gtm_trigger (phone_click, whatsapp_click, booking_click). Encontre a conversão de contato e o valor de send_to dela no Google Ads com list_conversion_actions e get_conversion_tags. Para que uma pessoa que liga e também envia mensagem não seja contada duas vezes, proponha vincular telefone e WhatsApp a uma única conversão "Clique de contato" contada uma vez; se não existir, diga o que você criaria e aguarde minha aprovação. Proponha uma tag de conversão do Google Ads com create_gtm_tag (tag_type "sp"). Para a Meta, encontre o pixel com list_meta_pixels; se o código base do pixel não estiver no contêiner, proponha-o como uma tag HTML Personalizado em todas as páginas e, separadamente, as tags que enviam `fbq('track','Contact')` nos cliques e `fbq('track','Schedule')` no agendamento. Execute cada ferramenta primeiro com confirm=false, mostre a lista de alterações e crie-as após minha aprovação. Mostre publish_gtm_container primeiro com confirm=false, publique após minha aprovação e informe a versão que pode ser restaurada.
4. Plano de testes: escreva passo a passo como posso ver, no modo de visualização do GTM, qual tag dispara em cada um dos três botões e que nenhum cookie de publicidade é gravado quando o consentimento é rejeitado.
5. Depois de adicionar o GTM e as tags, execute core_web_vitals novamente, porque as tags podem reduzir a pontuação, e mostre a diferença em uma tabela. Para que a tag do Google não seja bloqueada por bloqueadores de anúncios, mostre a prévia do caminho de mensuração próprio com site_tag_gateway e configure-o após minha aprovação.
Configuração e armadilhas conhecidas (cada uma reduziu uma pontuação nas medições da demonstração, não pule nenhuma):
1. Se já houver um site no ar no servidor, avise-me primeiro, porque a configuração sobrescreve o index.html e a pasta assets. Mostre a prévia de scaffold_site com confirm=false e chame-o com confirm=true após minha aprovação. Depois leia site_design_guide e site_seo_guide. Antes de escrever código, coloque a direção de design (tipografia, cor, grade, elemento marcante, linguagem de movimento e as bibliotecas que NÃO serão carregadas) em um ART.md curto fora de assets e mostre-o para mim.
2. Compile o Tailwind em vez de carregá-lo pelo CDN. Instale-o com site_run_command e background=true: `npm i -D tailwindcss@3`, e acompanhe com site_command_status. Os caminhos de content em `tailwind.config.js` devem cobrir todos os arquivos HTML, os templates e qualquer arquivo JS que escreva nomes de classe. `_src/tw.css` contém a linha `@import "../assets/app.css";` e as três linhas `@tailwind`; compile-o em um único arquivo com `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify`. Remova o script cdn.tailwindcss.com e o tailwind.config inline de todas as páginas e vincule apenas `/assets/site.css`. Recompile após cada alteração no HTML.
3. Hospede as fontes você mesmo. Leia o CSS das famílias da Fontshare escolhidas, baixe o arquivo woff2 de cada peso para `assets/fonts/` com site_fetch e escreva as regras @font-face com `font-display: swap` em `assets/app.css`; o design-check procura uma fonte personalizada ali. Confira o nome da font-family no CSS que você baixou, porque a Fontshare pode devolver outra família quando um peso não existe. Faça o preload da fonte do título da primeira tela e da fonte do corpo em todas as páginas com `<link rel="preload" as="font" type="font/woff2" crossorigin>`; na demonstração isso eliminou o deslocamento de layout causado pela troca de fonte (CLS 0,024 para 0). A maioria das fontes da Fontshare não tem o glifo ₺, então escreva "TL" nos preços.
4. Faça o menu e o rodapé em HTML estático. Não carregue chrome.js nem site.config.js nas páginas. Escreva um pequeno `chrome-stamp.mjs` que leia a lista de navegação em site.config.js e carimbe `_src/header.tpl` e `_src/footer.tpl` entre os marcadores `<!-- nav:start --><!-- nav:end -->` e `<!-- footer:start --><!-- footer:end -->` de cada página, adicionando aria-current="page" ao link atual. Não dê aos templates a extensão .html e use marcadores como `
[[NAV]]` em vez de `{{...}}`, caso contrário o design-check e o seo-check os leem como páginas inacabadas. Construa o menu mobile sem JS usando `<details>`. Mantenha o nome da empresa, o endereço e o telefone no rodapé como texto simples.
5. Converta as imagens ao baixá-las com site_fetch: grave a mesma foto em arquivos separados com resize="480x", "800x" e "1200x", image_format="webp", quality=65. Dê a cada `<img>` srcset, sizes, width e height. A imagem principal da primeira tela recebe fetchpriority="high" e nunca é lazy; as demais recebem loading="lazy" decoding="async". Se a imagem principal ocupar a tela do celular, sirva um recorte mais largo e menor no mobile com `<picture>` (na demonstração, o hero mobile passou de 89 KB para 43 KB).
6. Crie um favicon PNG de 48 px a partir do logotipo com site_fetch e adicione `<link rel="icon">` a todas as páginas. Sem ele, o navegador registra um 404 e Best Practices cai para 96.
7. Regras do validador de HTML: comece todo documento com `<!DOCTYPE html>` em maiúsculas (os arquivos iniciais do kit usam minúsculas), use ` ` nos espaços do texto visível dos links tel:, nunca use o atributo style="" e dê a todo botão type="button".
SEO, AEO e GEO:
1. Use URLs de diretório com barra final (/gizlilik/). Preencha o bloco seo de site.config.js e execute `node seo-stamp.mjs`. Escreva o schema específico de cada página (na página de campanha, WebPage, um Service vinculado a #business como provider com areaServed, e FAQPage; na página de privacidade, WebPage e BreadcrumbList. Em site.config.js, use o subtipo de LocalBusiness mais específico, por exemplo HousePainter, Plumber, Dentist. A página de privacidade explica os cookies, as tags de mensuração e como alterar a escolha de consentimento) em blocos `<script type="application/ld+json">` separados e vincule-o ao grafo base com @id. Não esconda o BreadcrumbList dentro de um @graph; dê a ele um bloco próprio, porque é a única forma de o seo-check enxergá-lo.
2. Títulos de 48 a 60 caracteres (o seo-check sinaliza como erro qualquer um acima de 65), descrições de 145 a 158 caracteres, um h1 por página. Toda página precisa de pelo menos 150 palavras de conteúdo principal; páginas de contato e privacidade costumam ficar abaixo disso.
3. O primeiro parágrafo de cada página responde diretamente à pergunta da página. Escreva um FAQ específico da página com `<details>` e marque-o como FAQPage. Mostre a organização que publica e uma data de "Última atualização" com `<time>`.
4. No robots.txt, escreva sua decisão com o motivo para GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot e CCBot, e aponte para o sitemap. O sitemap.xml traz datas lastmod reais. O llms.txt contém um resumo preciso do site em duas frases e a lista das páginas principais.
5. Não invente nada: nenhuma avaliação, nota, prêmio, número de clientes, certificado, horário de funcionamento, coordenada ou preço, a menos que eu os forneça. Deixe os campos desconhecidos fora do schema.
Portões de verificação (em ordem; não diga que terminou até que todos passem):
1. Com site_run_command, execute `node chrome-stamp.mjs`, o build do Tailwind, `node seo-stamp.mjs`, `node seo-check.mjs` (0 erros, 0 avisos), `node design-check.mjs` (0 erros; justifique qualquer aviso restante) e `npx html-validate "**/*.html"` (0 erros).
2. Veja cada página com site_preview, view="mobile" e view="desktop". O site_preview captura a página com o movimento desligado (reduced-motion), então, se faltar conteúdo nessa imagem, o estado sem movimento está quebrado. Em capturas de página inteira, imagens lazy mais abaixo podem aparecer vazias; isso não é um erro, mas confira os caminhos delas.
3. Execute core_web_vitals para cada página com strategy="mobile" e strategy="desktop". Aprovado: no mobile, Performance de pelo menos 95 e Acessibilidade, Best Practices e SEO 100; no desktop, as quatro de pelo menos 95. Em uma página que falhar, use resources=true para encontrar o arquivo que a atrasa, corrija e meça de novo. Depois execute seo_audit na página inicial com strategy="mobile" e runs=2. A lista de requisições de rede não deve conter nenhum host além do seu próprio domínio.
4. Sem rolagem horizontal nas larguras de 360, 390, 768 e 1440 px, alvos de toque de pelo menos 44 px, sem erros no console.
Como esta é uma página de destino de anúncios, meça-a também sem as tags: as pontuações dos portões são para a página sem tags, e a página com tags é medida separadamente na etapa 5.
Depois de publicar: mostre a prévia da regra `/assets/* Cache-Control: public, max-age=31536000, immutable` com site_headers e aplique-a após minha aprovação; a partir daí, renomeie os arquivos CSS ou JS quando mudarem (site-v2.css e assim por diante). Envie o sitemap.xml com gsc_submit_sitemap e verifique a página inicial com gsc_url_inspect. Termine com uma tabela de pontuação por página (página, quatro pontuações mobile, quatro pontuações desktop, LCP, CLS), os resultados dos portões e a lista das correções que você aplicou.
