Prévia do e-mail: a primeira linha não pode ser "ver no navegador"

Na caixa de entrada, a linha cinza ao lado do assunto dizia: "Se você não consegue visualizar este e-mail corretamente, clique aqui. Logo Loja Ferragem Silva". O recado de verdade, "seu pedido saiu para entrega e chega quinta", estava três blocos abaixo. Ninguém viu pela prévia. A resposta curta: o cliente de e-mail mostra o começo do texto da mensagem como prévia. As primeiras palavras do corpo precisam ser o recado, e o aviso de "ver no navegador" vai para o rodapé.

A prévia é o segundo espaço mais valioso da mensagem, depois do assunto. Ela completa a promessa antes da pessoa abrir. Gastá-la com um aviso técnico ou com o texto alternativo do logo é desperdiçar o único resumo que você tem.

De onde vem a prévia

A maioria dos clientes de e-mail, como Gmail, Outlook e Apple Mail, monta a prévia com o primeiro texto que encontra no corpo. Não existe uma tag oficial para isso. O cliente lê o HTML, ignora a marcação e pega as primeiras palavras visíveis, o que pode incluir o aviso de "ver no navegador", o texto de um menu, ou o texto alternativo da primeira imagem.

Quantos caracteres aparecem depende do cliente, do tamanho da tela e do tamanho do assunto: no celular é bem menos do que no desktop. Por isso a regra prática é a mesma do assunto: o essencial vai nas primeiras palavras, e o resto é complemento.

Clientes em modo texto e alguns apps usam a parte em texto puro da mensagem. Se você envia HTML e texto (e deveria), as duas versões precisam começar pelo recado.

Como controlar a prévia passo a passo

Exemplo trabalhado: o e-mail de pedido enviado da loja fictícia.

1. Escreva a frase da prévia. Ela complementa o assunto, não repete. Assunto: "Seu pedido 48213 foi enviado". Prévia: "Chega até quinta-feira. Acompanhe a entrega pelo código de rastreio."
2. Coloque essa frase como primeiro texto do corpo. Pode ser visível, como primeira linha da mensagem, ou um preheader oculto, como no exemplo abaixo.
3. Tire o "ver no navegador" do topo. Mande para o rodapé, ou remova se a mensagem funciona bem nos clientes que importam para você.
4. Cuide do texto alternativo do logo. Se a primeira coisa do corpo é uma imagem, o alt dela pode entrar na prévia. "Loja Ferragem Silva" é aceitável; "logo_header_v2.png" não.
5. Comece a versão em texto puro pela mesma frase.
6. Teste com imagens bloqueadas e no celular. Envie para contas suas em dois ou três clientes e olhe a lista da caixa de entrada, não a mensagem aberta.

O preheader oculto

A técnica mais usada é um bloco no começo do corpo que o cliente lê para a prévia, mas que não aparece quando a mensagem é aberta:

<body>
  <div style="display:none; max-height:0; overflow:hidden; mso-hide:all;">
    Chega até quinta-feira. Acompanhe a entrega pelo código de rastreio.
  </div>

  <table role="presentation" width="100%">
    <tr>
      <td>
        <img src="https://www.exemplo.com.br/email/logo.png" alt="Loja Ferragem Silva" width="160" height="40">
        <h1>Seu pedido 48213 foi enviado</h1>
        <p>Ele chega até quinta-feira, 22 de outubro.</p>
        <p><a href="https://www.exemplo.com.br/pedidos/48213/rastreio">Acompanhar a entrega do pedido 48213</a></p>
      </td>
    </tr>
  </table>

  <p><a href="https://www.exemplo.com.br/email/48213">Abrir este e-mail no navegador</a></p>
</body>

O estilo inline é proposital: muitos clientes de e-mail ignoram CSS em <style> no cabeçalho, e o mso-hide:all é uma propriedade reconhecida pelo Outlook para Windows. O link do navegador foi para o fim, com um texto que diz o que faz.

Quando a frase do preheader é curta, alguns clientes completam a prévia com o texto que vem depois, e o "Loja Ferragem Silva" do alt pode aparecer colado. Uma prática comum é preencher o fim do preheader com caracteres invisíveis repetidos, como ‌ , para empurrar o resto para fora da prévia. Funciona em muitos clientes, mas não em todos; teste antes de confiar.

A versão em texto puro

Seu pedido 48213 foi enviado e chega até quinta-feira, 22 de outubro.

Acompanhe a entrega:
https://www.exemplo.com.br/pedidos/48213/rastreio

Loja Ferragem Silva

Sem aviso técnico na frente, sem cabeçalho decorativo. O recado está na primeira linha, e o link aparece inteiro porque em texto puro não existe texto de link.

A prévia e o assunto trabalham juntos

Pense nos dois como uma frase em duas partes. O assunto diz o tema; a prévia diz o detalhe que faz a pessoa agir ou se tranquilizar. Em newsletter, a prévia pode listar os outros itens da edição. Em aviso de segurança, ela diz o que fazer se não foi a pessoa.

A prévia herda a regra de honestidade do assunto: ela não pode prometer o que o corpo não tem. Se o assunto já é bom, o guia sobre assunto de e-mail que não engana mostra como manter os dois alinhados. E para o conjunto do e-mail de sistema, veja e-mail transacional que chega e se entende.

Erros comuns

• "Ver no navegador" no topo. A prévia gasta o espaço com um aviso que quase ninguém precisa, e o recado some.
• Logo sem texto alternativo útil. A prévia mostra o nome do arquivo ou "imagem", e a mensagem parece quebrada.
• Prévia que repete o assunto. A pessoa lê a mesma informação duas vezes e não ganha nada.
• Recado dentro de imagem. Com imagens bloqueadas, a prévia mostra só o rodapé ou nada útil.
• Preheader com CSS no cabeçalho. Em clientes que removem o bloco de estilo, o texto oculto aparece duplicado no topo da mensagem.
• Esquecer a versão em texto puro. Clientes que a usam mostram o que sobrar, às vezes o aviso legal do rodapé.

Checklist

• A primeira frase do corpo HTML e da versão em texto é o recado principal.
• O "ver no navegador" está no rodapé ou foi removido.
• A prévia complementa o assunto, sem repeti-lo.
• A primeira imagem tem alt que faz sentido se aparecer na prévia.
• O preheader oculto usa estilo inline.
• A mensagem foi testada com imagens bloqueadas em pelo menos dois clientes.
• A lista da caixa de entrada no celular mostra o essencial.

Para fechar: abra a caixa de entrada no celular e procure o último e-mail que o seu sistema mandou. Só pela linha da lista, dá para saber do que se trata sem abrir?