Informação!
Este artigo tem como objetivo orientar sobre como otimizar o conteúdo de seus e-mails para eles não sejam tagueados como spam.
- Para isso, algumas práticas devem ser seguidas, a fim de que sua mensagem não apareça distorcida para seus destinatários.
- No entanto, mesmo que você siga essas práticas não há como garantir que a mensagem chegará sem distorções para todos os provedores, pois os mesmos alteram suas regras constantemente por motivo de segurança.
- Se você desenvolve o seu conteúdo por código HTML, há algumas tags não recomendadas e outras tags que são aceitas, veja quais são:
Tags não recomendadas:
- <meta> Não serve para mensagens em HTML.
- <title> É utilizado somente para páginas HTML, evite usar em mensagens.
- <link> Evite usar ela para referenciar arquivos de css, o certo é usar css inline ou colocar as classes de css dentro do <style></style>.
- <style> Alguns webmails como o Gmail por exemplo, removem esta tag.
Tags aceitas:
| <a> | <col> | <h1> | <meter> | <small> |
| <abbr> | <colgroup> | <h2> | <nav> | <source> |
| <acronym> | <command> | <h3> | <noframes> | <span> |
| <address> | <datalist> | <h4> | <noscript> | <strike> |
| <applet> | <dd> | <h5> | <object> | <strong> |
| <area> | <del> | <h6> | <ol> | <style> |
| <article> | <details> | <head> | <optgroup> | <sub> |
| <aside> | <dfn> | <hgroup> | <option> | <summary> |
| <audio> | <dir> | <hr> | <output> | <sup> |
| <b> | <div> | <i> | <p> | <table> |
| <base> | <dl> | <img> | <param> | <tbody> |
| <basefont> | <dt> | <input> | <pre> | <td> |
| <bdo> | <em> | <ins> | <progress> | <textarea> |
| <big> | <embed> | <kbd> | <q> | <tfoot> |
| <blockquote> | <fieldset> | <keygen> | <rp> | <th> |
| <br> | <figcaption> | <label> | <rt> | <thead> |
| <button> | <figure> | <legend> | <ruby> | <time> |
| <canvas> | <font> | <li> | <s> | <tr> |
| <caption> | <footer> | <link> | <samp> | <tt> |
| <center> | <form> | <map> | <script> | <u> |
| <cite> | <frame> | <mark> | <section> | <ul> |
| <code> | <frameset> | <menu> | <select> | <var> |
| <video> |
Formatação – Imagens
- Sempre utilize url absoluta da imagem quando for utilizar imagens externas, por exemplo:
<img src="http://mkt.locaweb.com.br/images/logo.jpg" border="0">
- Nunca utilize URLs relativas, por exemplo:
<img src="images/logo_mkt.jpg" border="0" alt="A imagem"/>
- Evite utilizar uma única imagem grande como conteúdo do e-mail, pois isso é considerado como prática de SPAM.
- Prefira utilizar mais textos na criação de sua mensagem.
- Coloque sempre o atributo border=’’0”nas tags de imagem <img>, pois assim como os browsers, os programas de e-mail costumam colocar uma borda azul ao redor de imagens que tenham link.
- Não use imagens com extensão PNG que possuem áreas transparentes, pois não são aceitas em versões do Outlook anteriores a 2007. As áreas que deveriam ser transparentes são exibidas em cinza.
- O atributo ALT oferece um texto alternativo quando alguma imagem não carrega ou não pode ser visualizada. Esse atributo é muito usado para melhorar a acessibilidade de uma página na web e principalmente de um E-mail Marketing, já que muitos clientes de e-mail bloqueiam as imagens enviadas por remetentes desconhecidos. Nesta situação, a função do atributo é facilitar a “pré-leitura” para o usuário.
- Evite usar gifs animados.
Formatação – Tabelas
- Utilize layouts baseados em tabelas, ao invés, de DIVS, como no padrão tableless. Por mais que essa prática não seja recomendada na construção de sites, a maior parte dos programas de e-mail, não renderiza os atributos das tags <div>
- Evite utilizar as propriedades colspan e rowspan nas tags <td>, pois alguns programas de e-mail não reconhecem a forma certa.
- Prefira utilizar a propriedade width nas tags <td> ao invés de utilizar nas tags <table>, como no exemplo abaixo:
<table cellspacing="0" cellpadding="10" border="0"> <tr> <td width="120"></td> <td width="480"></td> </tr> </table>
- Utilize sempre o atributo valig=”top” para alinhar o conteúdo:
<table cellspacing="0" cellpadding="10" border="0"> <tr> <td width="120" valign="top"></td> <td width="480" valign="top"></td> </tr> </table>
Formatação – Links
- Utilize <a hef=”url_destino”>Texto</a>.
- Evite usar iframe em links de mensagens. Alguns provedores de e-mail não tratam da forma esperada.
Formatação – Estilo CSS
- Nunca utilize a tag <link> para referenciar um arquivo de estilos (.css), pois a maioria dos provedores removem essa tag.
- Nunca utilize forma reduzida para definir um estilo, por exemplo ao invés de:
style="font: 12px/16px Arial, Helvetica"
utilize:
style="font-size:12px; line-height:16px; font-family:Arial, Helvetica;"
- Evite utilizar charset no seu HTML, isso pode fazer com que alguns provedores desconfigurem o seu email.
- Não utilize a tag <style> como definição das classes de estilo, pois alguns provedores removem essa tag. Caso, insista em utilizar, coloque essa tag dentro da tag <body> e não dentro da tag <head>, sendo necessário testar a mensagem em diversos programas de e-mail, a fim de verificar se ela estará distorcida.
- Evite utilizar as tags de comentário HTML <!–e –> dentro da tag <style>, pois o editor HTML do Email Marketing irá distorcer todo código que estiver dentro dessas tags.
Errado:
<style type="text/css"> <!-- .bloco1_titulo {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; font-weight:bold; background-color:#333366; padding-left:10px; } --> </style>
Certo:
<style type="text/css"> .bloco1_titulo {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; font-weight:bold; background-color:#333366; padding-left:10px; } </style>
Prefira utilizar o CSS em sua forma inline, ou seja, direto no código HTML, por exemplo:
<p style="font-family:Arial; font-weight:bold; font-size:11px; color:red;">texto</p>
- Evite utilizar charset no seu HTML, isso pode fazer com que alguns provedores desconfigurem o seu email.
Formatação – Formulários
- Evite utilizar formulários pois estes são bloqueados no Outlook e por vários provedores.
Formatação – Imagens de Fundo
- Prefira utilizar a tag <td background>, por exemplo:
<body> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td background="http://mkt.locaweb.com.br/images.jpg" width="767" height="830">lalal</td> </tr> </table> </body>
Evite utilizar imagens de fundo, pois alguns provedores de e-mail não permitem a visualização da imagem.
Formatação – Cor de fundo
- Utilize a tag <div>com a propriedade background-color e no style defina margin 0px para o body por exemplo.
Obs: Neste caso, ajuste o parâmetro height para definir a altura da cor de fundo:
<div>
<style>
body{
margin:0px;
}
</style>
</div>
<div style="background-color: red; width: 100%;height:800px;">qualquer texto aqui</div>
Outra maneira é utilizar a tag <td> com a propriedade bgcolor, por exemplo:
<table> <tr> <td bgcolor="red">texto<br />dsadasdas </td> </tr> </table>
Formatação – Flash e Javascript
- Nunca utilize Flash ou Javascript no corpo do e-mail, pois estes são bloqueados pelos antivírus dos principais provedores.
Formatação – Expressões
Evite textos, expressões ou mensagens que contenham:
- Termos quantitativos com a palavra “mais” seguida de uma reticências (ex.: venda mais… durma mais… ganhe mais… )
- Sorte acompanhado de interrogações
- Termos sobre pechincha ou oportunidade única
- Texto contendo termos sobre grande quantidade de pessoas (ex.: junte-se a comunidade do Facebook)
- Termos sobre exclusividade como se a mensagem fosse apenas para você
- Trocadilho do tipo 4you (for you)
- Texto no assunto separado por pontos para burlar a filtragem (ex.: palavras do tipo P.R.O.M.O.Ç.Ã.O)
- Satisfação garantida
- Informando que não é um spam
- Oportunidade única
- Venda de listas de emails
- Telemarketing
- Evite utilizar no Assunto, Corpo ou Remetente de sua mensagem, palavras que possam ser interpretadas como SPAM, exemplos: clique aqui, mailmkt, crédito, grátis, curso, de/para sua empresa, promoção e entre outros.
Resolução de alguns problemas conhecidos
- Para remover espaços em branco entre linhas de uma tabela com imagens basta adicionar esse estilo no código fonte:
<style>img {display:block}</style>
- Em seguida, efetue a conversão de todo o código para que o CSS fique no formato inline.
Recomendações adicionais
- O ideal é que o layout não ultrapasse 600px de largura, assim evita rolagem horizontal.
- Use a ferramenta slice do Photoshop e faça recortes em blocos horizontais.
- Para otimizar a entrega das mensagens, desenvolva o código HTML para que tenha até 30KB.
- Para remover um sublinhado basta usar css inline: style=”text-decoration: none;” direto no link.
- Ao criar um site é necessário que você teste em vários navegadores. Para e-mail marketing isso não é diferente, os destinatários usam uma ampla variedade de provedores (hotmail, gmail, yahoo, etc) e que podem apresentar o seu template de diversos formatos.
Agora que você já conferiu as boas práticas de HTML para Email Marketing, conheça outros produtos da Locaweb, como o Email Empresarial e Hospedagem de Sites!