Encurtador de Link Domínio Próprio no WordPress e Next.js

Como encurtar links com domínio próprio no WordPress e Next.js

Você compartilha links do tipo "seu-site.com.br/produto/categoria/promocao-black-friday-2024" no WhatsApp e no Instagram. Quem recebe desconfia da URL longa e nem clica. Um encurtador de link domínio próprio resolve isso: transforma o endereço em "seu.link/promo" e ainda rastreia cada clique.

Neste guia prático, você vai configurar um encurtador de URL com domínio próprio no WordPress e Next.js, do registro DNS ao tracking de cliques e pixels de retargeting.

Por que usar um encurtador de link com domínio próprio no WordPress e Next.js

Links curtos genéricos (tipo bit.ly/3xY9zK) funcionam, mas não constroem marca. Quando você usa um encurtador de URL com domínio próprio, cada link compartilhado reforça o nome da sua empresa no canal onde o usuário está.

Segundo um estudo da Rebrandly, links curtos com domínio de marca podem aumentar a taxa de cliques em até 39% em comparação com links curtos genéricos. No Brasil, onde o WhatsApp concentra mais de 120 milhões de usuários ativos (segundo dados da Statista), a confiança no link que você compartilha faz toda a diferença na conversão.

Links curtos com domínio de marca geram até 39% mais cliques do que encurtadores genéricos, porque o usuário reconhece a origem antes de clicar.

Para quem desenvolve em WordPress e Next.js, existem três cenários comuns:

Você tem um e-commerce no WordPress (WooCommerce) e precisa de links curtos para campanhas de WhatsApp e Instagram.
Você mantém uma aplicação Next.js e quer gerar links curtos dinamicamente via API.
Você gerencia ambos: o site principal em WordPress e ferramentas internas em Next.js.

Em todos os casos, a solução é a mesma: um encurtador com CNAME (um registro DNS que aponta um subdomínio seu para o servidor do encurtador), que mantém seu domínio visível em cada link compartilhado.

Como configurar o CNAME para o seu encurtador de URL com domínio próprio?

A configuração do CNAME é o passo que conecta o seu subdomínio ao servidor do encurtador. Sem ele, o link curto aparece com o domínio da plataforma, não com o seu.

Aqui está o Método CNAME-3, um processo em três etapas que funciona para qualquer provedor de DNS brasileiro (Registro.br, Cloudflare, Hostinger, GoDaddy, etc.):

Escolha o subdomínio: Defina qual subdomínio será usado. Os mais comuns são "go.", "link." ou "l." antes do seu domínio. Exemplo: go.minhamarca.com.br.
Crie o registro CNAME: No painel de DNS do seu provedor, adicione um registro do tipo CNAME apontando o subdomínio para o endereço fornecido pelo encurtador. No HitURL, esse endereço aparece na seção de domínios personalizados do painel.
Configure o SSL: Após o DNS propagar (geralmente 15 minutos a 2 horas), o encurtador emite um certificado SSL automático para o seu subdomínio. Você não precisa comprar ou instalar certificado nenhum.

O registro CNAME é o que permite que um link como "go.suaempresa.com.br/oferta" seja servido por uma plataforma externa sem expor o domínio dessa plataforma ao usuário final.

Se você usa Cloudflare, um detalhe importante: certifique-se de que o proxy (nuvem laranja) está desativado para o registro CNAME durante a configuração. Ative apenas após a verificação do domínio ser concluída.

Para um guia mais detalhado sobre o processo completo de configuração de domínio personalizado, confira nosso artigo sobre como encurtar links com domínio próprio.

Como integrar o encurtador de URL com domínio próprio no WordPress?

A integração no WordPress pode ser feita de duas formas: via API com um snippet no functions.php, ou via webhook com plugins de automação. A primeira opção dá mais controle e não adiciona plugins extras ao seu site.

Opção 1: Via API no functions.php

Adicione uma função ao functions.php do seu tema que chama a API do HitURL e retorna o link curto com seu domínio próprio:

function encurtar_link_hiturl($url_longa, $alias = '') {
    $api_key = 'SUA_API_KEY';
    $endpoint = 'https://hiturl.at/api/v1/links';

    $body = array(
        'url'    => $url_longa,
        'domain' => 'go.seudominio.com.br',
        'alias'  => $alias
    );

    $response = wp_remote_post($endpoint, array(
        'headers' => array(
            'Authorization' => 'Bearer ' . $api_key,
            'Content-Type'  => 'application/json'
        ),
        'body' => json_encode($body)
    ));

    if (is_wp_error($response)) return $url_longa;

    $data = json_decode(wp_remote_retrieve_body($response), true);
    return $data['short_url'] ?? $url_longa;
}

Depois, chame a função em qualquer lugar do tema ou em um shortcode:

echo encurtar_link_hiturl('https://seu-site.com.br/produto/camiseta-promocional', 'camiseta');
// Retorna: https://go.seudominio.com.br/camiseta

No WordPress, a integração com um encurtador de URL com domínio próprio pode ser feita com menos de 20 linhas de código no functions.php, sem necessidade de plugins pesados.

Opção 2: Via webhook e automação

Se você prefere não mexer em código, use um plugin de webhook como "WP Webhooks" para enviar a URL longa para a API do HitURL e receber o link curto de volta. Para automações mais complexas envolvendo múltiplas etapas, vale conferir como automatizar envios de links com n8n e a API do HitURL.

A documentação oficial do WordPress sobre hooks e filtros está disponível em wordpress.org/documentation e é uma referência sólida para quem está começando a integrar APIs no tema.

O HitURL cuida do CNAME, SSL, tracking e retargeting em uma plataforma só. Em vez de montar tudo do zero, você configura o domínio uma vez e foca nas suas campanhas. Veja os planos em hiturl.at/pricing.

Como criar links personalizados em Next.js?

No Next.js, a integração é via rota de API no servidor (server-side), mantendo sua chave de API segura. Você cria um endpoint que recebe a URL longa e retorna o link curto com seu domínio próprio.

Passo 1: Criar a rota de API

Crie um arquivo em app/api/shorten/route.ts (App Router) ou pages/api/shorten.ts (Pages Router):

import { NextResponse } from 'next/server';

export async function POST(request) {
  const { url, alias } = await request.json();

  const response = await fetch('https://hiturl.at/api/v1/links', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer ' + process.env.HITURL_API_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      url,
      domain: 'go.seudominio.com.br',
      alias: alias || undefined
    })
  });

  const data = await response.json();
  return NextResponse.json(data);
}

Passo 2: Criar o componente cliente

No seu componente React, chame a rota de API e exiba o link curto:

'use client';
import { useState } from 'react';

export function ShortenButton({ longUrl }) {
  const [shortUrl, setShortUrl] = useState('');
  const [loading, setLoading] = useState(false);

  async function handleShorten() {
    setLoading(true);
    const res = await fetch('/api/shorten', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ url: longUrl })
    });
    const data = await res.json();
    setShortUrl(data.short_url);
    setLoading(false);
  }

  return (
    <div>
      <button onClick={handleShorten} disabled={loading}>
        {loading ? 'Encurtando...' : 'Encurtar link'}
      </button>
      {shortUrl && <p>Link curto: {shortUrl}</p>}
    </div>
  );
}

Passo 3: Adicionar a variável de ambiente

No arquivo .env.local:

HITURL_API_KEY=sua_chave_aqui

Em Next.js, a integração com um encurtador de link personalizado exige apenas uma rota de API no servidor e um componente cliente. A chave de API nunca é exposta no navegador.

A documentação completa do Next.js sobre rotas de API está disponível em nextjs.org/docs. Para mais detalhes sobre os endpoints disponíveis, confira a documentação para desenvolvedores do HitURL.

Se você também constrói páginas de link-in-bio com Next.js e Tailwind, vale conferir nosso tutorial sobre como criar uma página de link-in-bio com Next.js e Tailwind.

Rastreando cliques e disparando pixels de retargeting

O maior benefício de um encurtador de link com domínio próprio não é apenas encurtar. É o que acontece depois do clique.

Tracking de cliques

Cada link criado no HitURL rastreia: número total de cliques, cliques únicos, localização geográfica (por IP), tipo de dispositivo (mobile, desktop, tablet), sistema operacional e navegador. Você acessa esses dados no painel ou via API.

Retargeting pixel on click

Um pixel de retargeting é um código JavaScript que dispara quando alguém visita uma página. Com o HitURL, esse pixel pode ser disparado no momento do clique no link curto, antes do redirecionamento. O HitURL suporta pixels do Facebook, Google, LinkedIn, Twitter, AdRoll, Quora e Google Tag Manager.

Isso significa que você pode criar audiências de retargeting com pessoas que clicaram em um link específico, mesmo que elas não tenham chegado ao seu site. Para anúncios no Instagram e Facebook, isso é poderoso: você segmenta quem já demonstrou interesse clicando no seu link de WhatsApp ou na sua bio.

Com retargeting pixel on click, você constrói audiências de anúncios a partir de cliques em links curtos, mesmo quando o usuário não visita o seu site diretamente.

Geo e device targeting

Além do tracking, você pode direcionar o destino do link com base na localização ou no dispositivo do usuário. Um exemplo prático: o mesmo link "go.suaempresa.com.br/app" envia usuários de Android para a Google Play e usuários de iOS para a App Store.

Para campanhas regionais no Brasil, o geo targeting permite enviar visitantes de São Paulo para uma landing page específica e visitantes do Nordeste para outra, tudo com o mesmo link curto. Isso melhora a relevância da mensagem e aumenta a taxa de conversão sem precisar criar links diferentes para cada região.

Comparação de soluções para encurtador de URL com domínio próprio

Existem três caminhos para ter um encurtador de link com domínio próprio: usar uma plataforma como o HitURL, pagar pelo Bitly, ou construir do zero. Veja a comparação:

Recurso	HitURL	Bitly	Solução própria
Domínio próprio	Grátis no plano free	Plano pago (US$ 13/mês)	Você gerencia
CNAME e SSL	Automático	Automático	Você configura manualmente
Retargeting pixels	Facebook, Google, LinkedIn, Twitter, AdRoll, Quora, GTM	Limitado no plano básico	Você implementa
QR Code dinâmico	Incluído	Plano superior	Você constrói
API REST	Sim	Sim (limite no free)	Você constrói
Geo e device targeting	Sim	Planos superiores	Você constrói
Link-in-bio	Incluído	Não (produto separado)	Você constrói
Preço inicial	Grátis	US$ 13/mês	Custo de servidor + tempo

A matemática é direta. Construir um encurtador próprio com domínio customizado exige: servidor, banco de dados, sistema de redirect, painel de analytics, renovação de SSL e manutenção contínua. Isso consome tempo de desenvolvimento que poderia ir para o produto principal.

Construir um encurtador de URL próprio custa em média 40+ horas de desenvolvimento inicial, sem contar manutenção. Usar uma plataforma como o HitURL reduz esse custo a zero e mantém todos os recursos.

Veja os planos disponíveis em hiturl.at/pricing e compare com o que você gastaria em servidor, SSL e horas de desenvolvimento.

FAQ sobre encurtador de link domínio próprio

Preciso de um servidor próprio para usar um encurtador de link com domínio próprio?

Não. Você só precisa de um domínio registrado e configurar um registro CNAME no DNS. A plataforma de encurtamento cuida do servidor, dos redirects e do SSL.

O CNAME funciona com qualquer provedor de DNS brasileiro?

Sim. Registro.br, Cloudflare, Hostinger, GoDaddy e qualquer provedor que suporte registros CNAME funciona. O processo é o mesmo: criar o registro, apontar para o servidor do encurtador e aguardar a propagação.

Posso usar o mesmo subdomínio para WordPress e Next.js?

O subdomínio do encurtador (ex: go.seudominio.com.br) é independente do seu site principal. Você pode ter o site em www.seudominio.com.br (WordPress) e o encurtador em go.seudominio.com.br, sem conflito. Ambos consomem a mesma API do HitURL.

Como o retargeting pixel on click funciona tecnicamente?

Quando um usuário clica no link curto, o servidor do encurtador carrega o pixel de retargeting antes de redirecionar para o destino. Isso registra o evento na plataforma de anúncios (Facebook, Google, etc.) sem precisar que o usuário acesse uma página com o pixel instalado.

Posso gerar QR Codes dinâmicos com meu domínio próprio?

Sim. O HitURL gera QR Codes dinâmicos vinculados ao seu link curto. Um QR Code dinâmico é aquele em que o destino pode ser alterado após a impressão, sem precisar reimprimir o código. É ideal para materiais impressos, embalagens e point of sale.

Você já viu como configurar um encurtador de link com domínio próprio no WordPress e Next.js, do CNAME ao tracking de cliques. A próxima decisão é se você quer gastar semanas construindo e mantendo uma solução própria, ou se prefere começar a criar links curtos com marca hoje.

Mude para o HitURL hoje. Grátis para começar, e você mantém todos os recursos que importam.