Página de link na bio: uma landing page para o seu perfil

Um bom design de página de link na bio é uma landing page curta para celular: o seu nome, uma linha sobre o que você faz, de três a cinco botões por ordem de importância e um fundo que combina com o seu feed para que a visita pareça contínua. Quase todo mundo chega pelo celular, direto do seu perfil, com poucos segundos de atenção. Cada escolha abaixo decorre disso.

O que uma página de link na bio precisa ter, em ordem

Leia a página de cima para baixo como um visitante. Ele quer confirmar que está no lugar certo, ver o que pode fazer e fazer. Qualquer coisa que atrase esses três passos pode sair.

Escreva os botões como ações. Reserve uma mesa vence Reservas; Leia a nova edição vence Newsletter. Os mesmos princípios valem para todo texto curto nas redes, que copywriting para redes sociais cobre com mais profundidade.

Criando o fundo

O fundo é quase tudo o que o visitante vê, e é onde uma página ou parece com você ou parece com todos os outros templates gratuitos. Crie-o primeiro para a tela do celular. Um quadro vertical de 1080×1920, igual ao de um story, é um tamanho de trabalho sensato para a imagem, e uma cor sólida atrás dela cobre telas mais altas e o desktop.

Mantenha a parte mais agitada e mais brilhante do fundo longe de onde ficam os botões, geralmente em direção ao topo ou a um canto. Os botões precisam de uma superfície calma e uniforme atrás deles, ou os rótulos começam a competir com a cor.

Botões que parecem tocáveis

Um botão preenchido na sua cor de acento, com os outros em um tom mais suave do fundo, dá ao olho um primeiro toque óbvio. Confira se cada rótulo tem contraste com o próprio preenchimento, e não com a página: contraste de cor e acessibilidade traz as razões.

Criando a sua própria página de link na bio

Serviços de link na bio são rápidos, mas uma página no seu próprio domínio é fácil de montar e mantém os visitantes no seu site. Esta é uma versão completa e mínima: um fundo em degradê de altura total, uma coluna centralizada e um botão principal. Troque pelas suas cores e links.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Studio Nine</title>
  <meta property="og:image" content="https://example.com/og.png">
  <style>
    html { background: #0b0a1a; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: system-ui, sans-serif;
      color: #f5f3ff;
      background: linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%);
    }
    main { max-width: 26rem; margin: 0 auto; padding: 4rem 1.25rem; text-align: center; }
    img { width: 96px; height: 96px; border-radius: 50%; }
    p { opacity: 0.85; margin: 0.5rem 0 2rem; }
    a {
      display: block;
      padding: 1rem;
      margin: 0 0 0.75rem;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.12);
      color: inherit;
      text-decoration: none;
      font-weight: 600;
    }
    a.main { background: #fbbf24; color: #1c1917; }
  </style>
</head>
<body>
  <main>
    <img src="logo.png" alt="Studio Nine">
    <h1>Studio Nine</h1>
    <p>Handmade ceramics and weekend classes in Bristol.</p>
    <a class="main" href="/classes">Book a class</a>
    <a href="/shop">Shop the new pots</a>
    <a href="/visit">Visit the studio</a>
  </main>
</body>
</html>

Se preferir um botão mais rico, CSS de botão com degradê mostra como dar ao principal um pouco de profundidade sem fazê-lo gritar.

Combinando a página com o seu feed

O toque do perfil para a página deve parecer abrir uma porta no mesmo prédio. Use as cores, as fontes e o fundo que você usa nos posts, e o visitante nunca se pergunta se saiu de lá. Branding consistente nas redes sociais cobre o sistema mais amplo.

É aqui que um fundo próprio compensa. Um Mark do Gradiently é um degradê vivo que é renderizado em todos os tamanhos que você cria, então os seus posts, stories e o fundo da página podem usar exatamente o mesmo visual, e ninguém mais pode exportar com ele depois que você o reservou. Exporte o Mark em 1080×1920 com o Pro, que o mantém em tamanho total e sem marca d’água, e a página combina com o seu feed por construção.

A imagem de prévia que as pessoas veem quando você compartilha o link

Quando alguém envia o seu link em uma mensagem, os apps mostram um cartão de prévia montado a partir da imagem Open Graph da página. Uma prévia em branco ou aleatória desfaz o trabalho acima. Crie uma em 1200×630 com o seu nome e a promessa, usando o mesmo fundo. Os detalhes estão em tamanho da imagem OG.

1. 1

   Confira na largura do celular

   Abra a página no seu próprio celular, a partir do perfil, como os visitantes fazem, e não em um navegador de desktop.

2. 2

   Reordene os botões toda semana

   Leve o que importa agora para o topo e aposente o que já acabou.

3. 3

   Teste a prévia

   Envie o link para você mesmo em um app de mensagens e veja o cartão que ele gera.