Landing page geolocalizada para desentupimento na Grande São Paulo: Guia técnico

Um plantão de desentupimento às 3h da madrugada em Ferraz de Vasconcelos. O cliente abre o celular, busca “desentupimento agora” e cai em uma página genérica com telefone de São Paulo capital, depoimentos de Moema e tempo de atendimento “até 2 horas”. Ele fecha a aba e liga para o concorrente que mostra “Atendimento em Ferraz - 30 min - Tel: (11) 4000-XXXX”. Essa cena se repete centenas de vezes por noite na Grande São Paulo.

A diferença entre converter e perder o lead não está no design bonito, mas na relevância imediata. Uma landing page geolocalizada bem implementada detecta a localização do visitante — seja via GPS do navegador, IP ou parâmetro UTM — e reconstrói o conteúdo crítico em milissegundos: título H1 com o nome da cidade, telefone local, depoimentos de vizinhos, áreas de atendimento confirmadas e botão de WhatsApp pré-preenchido com a mensagem “Preciso de desentupimento em [Cidade]”.

Este artigo detalha a arquitetura técnica para construir essa experiência no WordPress profissional, sem plugins inchados, mantendo Core Web Vitals verdes e escalabilidade para adicionar novos municípios sem deploy de código.

Arquitetura de template único com dados dinâmicos

O erro mais comum é criar uma página separada para cada município. Isso gera centenas de URLs para manter, dilui autoridade de link, complica o sitemap e torna atualizações de layout um pesadelo. A solução robusta usa um page template (ou template de bloco em Full Site Editing) que recebe o identificador da cidade — via slug /guarulhos/, /osasco/ ou parâmetro ?cidade=guarulhos — e popula todos os campos dinâmicos via WP_Query customizado ou REST API endpoint.

// functions.php ou mu-plugin
add_action('init', function () {
    add_rewrite_rule(
        '^desentupimento/([^/]+)/?$',
        'index.php?pagename=landing-desentupimento&cidade=$matches[1]',
        'top'
    );
});

add_filter('query_vars', function ($vars) {
    $vars[] = 'cidade';
    return $vars;
});

// Endpoint REST para dados da cidade
add_action('rest_api_init', function () {
    register_rest_route('devwp/v1', '/cidade/(?P<slug>[\w-]+)', [
        'methods' => 'GET',
        'callback' => function ($request) {
            $slug = sanitize_title($request['slug']);
            $post = get_page_by_path($slug, OBJECT, 'cidade_atendimento');
            if (!$post) return new WP_Error('not_found', 'Cidade não cadastrada', ['status' => 404]);
            return [
                'nome' => get_field('nome_exibicao', $post->ID),
                'telefone' => get_field('telefone_local', $post->ID),
                'whatsapp_msg' => get_field('whatsapp_preenchido', $post->ID),
                'depoimentos' => get_field('depoimentos', $post->ID),
                'bairros' => get_field('bairros_atendidos', $post->ID),
                'tempo_medio' => get_field('tempo_medio_minutos', $post->ID),
            ];
        },
        'permission_callback' => '__return_true',
    ]);
});

O Custom Post Type cidade_atendimento armazena todos os dados por município (nome, telefone, WhatsApp, depoimentos, bairros, tempo médio). O template carrega o shell estático (header, footer, CSS crítico) e faz fetch assíncrono para /wp-json/devwp/v1/cidade/guarulhos populando os blocos dinâmicos via JavaScript vanilla. Isso mantém o TTFB baixo e permite cache agressivo do HTML base no CDN.

Geolocalização sem penalizar Core Web Vitals

A detecção de localização não pode bloquear o render. A estratégia em camadas:

1. Client-side first: navigator.geolocation.getCurrentPosition() com timeout: 3000 e maximumAge: 86400000 (24h). Se o usuário permitir, faz reverse geocoding via API própria (ex: Nominatim self-hosted ou Google Maps Geocoding) para resolver coordenadas → município.
2. Fallback server-side: Se negado ou timeout, o PHP no template lê $_SERVER['HTTP_CF_IPCOUNTRY'] (Cloudflare) ou usa geoip_detect2_get_info_from_current_ip() (plugin GeoIP Detect) para estimar cidade pelo IP.
3. UTM override: Parâmetro ?cidade=guarulhos vindo de campanhas Google Ads/Facebook tem prioridade máxima.
4. Persistência: Resultado salvo em cookie dw_cidade=guarulhos (30 dias, SameSite=Lax, Secure) e localStorage backup. Próximos acessos pulam a detecção.

O script de geolocalização carrega com defer e não está no critical path. O template renderiza estado “neutro” (“Grande São Paulo”) instantaneamente; quando a cidade resolve, um CustomEvent('dw:cidade-resolvida') atualiza apenas os nós necessários (H1, telefone, depoimentos). Zero layout shift (CLS = 0).

Dados estruturados para SEO local: além do básico

Não basta LocalBusiness. Para cada cidade, o JSON-LD deve incluir:

Injete o JSON-LD no <head> via wp_head action após a resolução da cidade (use wp_add_inline_script com dependência do script de geolocalização). Valide no Rich Results Test para cada município.

Performance móvel: a realidade da Grande SP

Testes de laboratório (Lighthouse) não refletem a rede 3G instável de Itaquaquecetuba ou a Wi-Fi compartilhada de um barraco em Parelheiros. Otimizações obrigatórias:

• Critical CSS inline: Extraia com penthouse ou critical o CSS do above-the-fold (hero, botão WhatsApp, telefone) e injete no <style> no <head>.
• Imagens: WebP/AVIF via picture element, loading=lazy exceto hero, srcset com larguras 320w, 640w, 1280w. Depoimentos usam aspect-ratio para evitar CLS.
• Service Worker: Workbox StaleWhileRevalidate para shell (HTML, CSS, JS, fontes) e NetworkFirst para API de cidades. Permite funcionamento offline parcial (botão ligação/WhastApp funciona).
• Fontes: font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; — zero download de fonte, zero FOIT/FOUT.
• Third-party: WhatsApp Business API widget carrega após interação (intersectionObserver no botão) ou requestIdleCallback. Google Tag Manager em defer com data-gtm-lazy.

Resultado alvo em Moto G Power (3G throttling): LCP < 2.5s, TBT < 200ms, CLS = 0.

Analytics de conversão por município

O analytics de conversão para leads de desentupimento no Mandaqui demonstrou que segmentar eventos por cidade revela disparidades enormes: taxa de clique no WhatsApp varia de 12% (São Caetano) a 3% (Embu das Artes) com o mesmo layout. Implemente via GTM:

// dataLayer push padronizado
dataLayer.push({
  event: 'dw_conversion',
  conversion_type: 'whatsapp_click', // ou 'phone_call', 'form_submit'
  cidade: 'guarulhos', // do cookie/localStorage
  origem: 'organic', // utm_source ou 'direct'
  device: 'mobile',
  valor_estimado: 350 // ticket médio por cidade (configurável no CPT)
});

Crie relatórios no Looker Studio filtrando por cidade e conversion_type. Identifique municípios com alto tráfego e baixa conversão — geralmente faltam depoimentos locais ou o telefone não é DDD da região.

Escalabilidade: adicionando uma nova cidade em 5 minutos

O fluxo operacional para a equipe de marketing/operacional semenvolvedor:

1. Acessa admin → “Cidades de Atendimento” → “Adicionar Nova”.
2. Preenche: Nome exibição, Slug (ex: suzano), Telefone local (DDD 11), WhatsApp pré-preenchido, 3-5 depoimentos (nome, bairro, texto, foto), Bairros atendidos (repeater), Tempo médio (minutos), Ticket médio (para analytics).
3. Publica. O rewrite rule já resolve /desentupimento/suzano/. O sitemap XML (gerado via wp_sitemaps_posts_pre_max_num_pages filter customizado) inclui a nova URL automaticamente.
4. Testa no celular: abre /desentupimento/suzano/, valida H1, telefone, depoimentos, botão WhatsApp.
5. Cria campanha Google Ads direcionada para Suzano com UTM ?cidade=suzano.

Zero deploy, zero cache purge (HTML base é estático), zero risco de quebrar outras cidades.

Acessibilidade e conformidade LGPD

A geolocalização via GPS exige consentimento explícito (LGPD Art. 7º, I). Implemente banner minimalista: “Usamos sua localização para mostrar o telefone e tempo de atendimento da sua cidade. [Permitir] [Usar IP aproximado]”. Armazene consentimento em cookie dw_geo_consent=gps|ip|denied. Se negado, use apenas fallback IP (dado público, não sensível).

WCAG 2.1 AA: contraste 4.5:1 nos botões de emergência (vermelho #C00 sobre branco), aria-label no botão WhatsApp (“Abrir WhatsApp para desentupimento em Guarulhos”), foco visível (outline: 3px solid #FFD600), formulário com autocomplete="tel" e inputmode="tel".

Conclusão prática

Uma landing page geolocalizada para desentupimento na Grande São Paulo não é um projeto de design — é um sistema de entrega de relevância hiperlocal em milissegundos. Template único, dados em CPT, geolocalização assíncrona com fallback robusto, JSON-LD dinâmico, performance móvel real e analytics por município. O atendimento rápido na cidade de São Paulo depende dessa arquitetura invisível. Comece pelo CPT de cidades e pelo endpoint REST; o resto é consequência.

Checklist prático

Perguntas frequentes

Quem cuida de prédios na região metropolitana de São Paulo costuma guardar desentupidora de plantão na região de São Paulo na agenda de emergências hidráulicas.