{"id":3221,"date":"2023-01-04T11:04:48","date_gmt":"2023-01-04T14:04:48","guid":{"rendered":"http:\/\/wiki3.locaweb.com.br\/?post_type=ht_kb&p=3221"},"modified":"2024-08-02T18:17:34","modified_gmt":"2024-08-02T21:17:34","slug":"veja-as-boas-praticas-de-html-email-marketing","status":"publish","type":"ht_kb","link":"https:\/\/www.locaweb.com.br\/ajuda\/wiki\/veja-as-boas-praticas-de-html-email-marketing\/","title":{"rendered":"Veja as boas pr\u00e1ticas de HTML – Email Marketing"},"content":{"rendered":" \t\t
\r\n \t\t\tInforma\u00e7\u00e3o!<\/b><\/span> \t\t\t \t\t\t\t

\r\n \t\t\t\t\tEste artigo tem como objetivo orientar sobre como\u00a0otimizar o conte\u00fado<\/strong>\u00a0de seus e-mails para eles n\u00e3o sejam tagueados como\u00a0spam. \t\t\t\t<\/p>\r\n \t\t\t \t\t\t\r\n \t\t<\/div>\r\n \t\t\n

    \n
  • Para isso, algumas pr\u00e1ticas devem ser seguidas<\/strong>, a fim de que sua mensagem n\u00e3o apare\u00e7a distorcida para seus destinat\u00e1rios.<\/li>\n
  • No entanto, mesmo que voc\u00ea siga essas pr\u00e1ticas n\u00e3o h\u00e1 como garantir que a mensagem chegar\u00e1 sem distor\u00e7\u00f5es para todos os provedores, pois os mesmos alteram suas regras constantemente por\u00a0motivo de seguran\u00e7a<\/strong>.<\/li>\n
  • Se voc\u00ea desenvolve o seu conte\u00fado por c\u00f3digo HTML, h\u00e1 algumas\u00a0tags n\u00e3o recomendadas\u00a0<\/strong>e outras\u00a0tags que s\u00e3o aceitas<\/strong>, veja quais s\u00e3o:<\/li>\n<\/ul>\n
    Tags n\u00e3o recomendadas:
    \n<\/b><\/strong><\/h6>\n
      \n
    • <meta><\/b><\/strong>\u00a0N\u00e3o serve para mensagens em HTML.<\/li>\n
    • <title><\/b>\u00a0<\/strong>\u00c9 utilizado somente para p\u00e1ginas HTML, evite usar em mensagens.<\/li>\n
    • <link><\/b>\u00a0<\/strong>Evite usar ela para referenciar arquivos de css, o certo \u00e9 usar css inline ou colocar as classes de css dentro do <style><\/style>.<\/li>\n
    • <style><\/b>\u00a0<\/strong>Alguns webmails como o Gmail por exemplo, removem esta tag.<\/li>\n<\/ul>\n
      Tags aceitas:<\/strong><\/h6>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      <a><\/td>\n<col><\/td>\n<h1><\/td>\n<meter><\/td>\n<small><\/td>\n<\/tr>\n
      <abbr><\/td>\n<colgroup><\/td>\n<h2><\/td>\n<nav><\/td>\n<source><\/td>\n<\/tr>\n
      <acronym><\/td>\n<command><\/td>\n<h3><\/td>\n<noframes><\/td>\n<span><\/td>\n<\/tr>\n
      <address><\/td>\n<datalist><\/td>\n<h4><\/td>\n<noscript><\/td>\n<strike><\/td>\n<\/tr>\n
      <applet><\/td>\n<dd><\/td>\n<h5><\/td>\n<object><\/td>\n<strong><\/td>\n<\/tr>\n
      <area><\/td>\n<del><\/td>\n<h6><\/td>\n<ol><\/td>\n<style><\/td>\n<\/tr>\n
      <article><\/td>\n<details><\/td>\n<head><\/td>\n<optgroup><\/td>\n<sub><\/td>\n<\/tr>\n
      <aside><\/td>\n<dfn><\/td>\n<hgroup><\/td>\n<option><\/td>\n<summary><\/td>\n<\/tr>\n
      <audio><\/td>\n<dir><\/td>\n<hr><\/td>\n<output><\/td>\n<sup><\/td>\n<\/tr>\n
      <b><\/td>\n<div><\/td>\n<i><\/td>\n<p><\/td>\n<table><\/td>\n<\/tr>\n
      <base><\/td>\n<dl><\/td>\n<img><\/td>\n<param><\/td>\n<tbody><\/td>\n<\/tr>\n
      <basefont><\/td>\n<dt><\/td>\n<input><\/td>\n<pre><\/td>\n<td><\/td>\n<\/tr>\n
      <bdo><\/td>\n<em><\/td>\n<ins><\/td>\n<progress><\/td>\n<textarea><\/td>\n<\/tr>\n
      <big><\/td>\n<embed><\/td>\n<kbd><\/td>\n<q><\/td>\n<tfoot><\/td>\n<\/tr>\n
      <blockquote><\/td>\n<fieldset><\/td>\n<keygen><\/td>\n<rp><\/td>\n<th><\/td>\n<\/tr>\n
      <br><\/td>\n<figcaption><\/td>\n<label><\/td>\n<rt><\/td>\n<thead><\/td>\n<\/tr>\n
      <button><\/td>\n<figure><\/td>\n<legend><\/td>\n<ruby><\/td>\n<time><\/td>\n<\/tr>\n
      <canvas><\/td>\n<font><\/td>\n<li><\/td>\n<s><\/td>\n<tr><\/td>\n<\/tr>\n
      <caption><\/td>\n<footer><\/td>\n<link><\/td>\n<samp><\/td>\n<tt><\/td>\n<\/tr>\n
      <center><\/td>\n<form><\/td>\n<map><\/td>\n<script><\/td>\n<u><\/td>\n<\/tr>\n
      <cite><\/td>\n<frame><\/td>\n<mark><\/td>\n<section><\/td>\n<ul><\/td>\n<\/tr>\n
      <code><\/td>\n<frameset><\/td>\n<menu><\/td>\n<select><\/td>\n<var><\/td>\n<\/tr>\n
      <\/td>\n<\/td>\n<\/td>\n<\/td>\n<video><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Formata\u00e7\u00e3o – Imagens<\/strong><\/h6>\n
      \n
        \n
      • Sempre<\/b>\u00a0utilize url absoluta da imagem quando for utilizar imagens externas, por exemplo:<\/li>\n<\/ul>\n
        <img<\/span> src<\/span>=<\/span>\"http:\/\/mkt.locaweb.com.br\/images\/logo.jpg\"<\/span> border<\/span>=<\/span>\"0\"<\/span>>\r\n<\/span><\/pre>\n
          \n
        • Nunca<\/b>\u00a0utilize URLs relativas, por exemplo:<\/li>\n<\/ul>\n
          <img<\/span> src<\/span>=<\/span>\"images\/logo_mkt.jpg\"<\/span> border<\/span>=<\/span>\"0\"<\/span> alt<\/span>=<\/span>\"A imagem\"<\/span>\/<\/span>><\/span><\/pre>\n
            \n
          • Evite <\/strong>utilizar uma \u00fanica imagem grande como conte\u00fado do e-mail, pois isso \u00e9 considerado como pr\u00e1tica de SPAM.<\/li>\n
          • Prefira <\/strong>utilizar mais textos na cria\u00e7\u00e3o de sua mensagem.<\/li>\n<\/ul>\n
              \n
            • Coloque sempre o atributo\u00a0border=\u2019\u20190\u201d<\/strong>nas tags de imagem\u00a0<img><\/strong>, pois assim como os browsers, os programas de e-mail costumam colocar uma borda azul ao redor de imagens que tenham link.<\/li>\n<\/ul>\n
                \n
              • N\u00e3o use<\/strong>\u00a0imagens com extens\u00e3o PNG que possuem \u00e1reas transparentes, pois n\u00e3o s\u00e3o aceitas em vers\u00f5es do\u00a0Outlook<\/u>\u00a0anteriores a\u00a02007<\/u>. As \u00e1reas que deveriam ser transparentes s\u00e3o exibidas em cinza.<\/li>\n<\/ul>\n
                  \n
                • O atributo\u00a0ALT <\/strong>oferece um texto alternativo quando alguma imagem n\u00e3o carrega ou n\u00e3o pode ser visualizada. Esse atributo \u00e9 muito usado para melhorar a acessibilidade de uma p\u00e1gina na web e principalmente de um E-mail Marketing, j\u00e1 que muitos clientes de e-mail bloqueiam as imagens enviadas por remetentes desconhecidos. Nesta situa\u00e7\u00e3o, a fun\u00e7\u00e3o do atributo \u00e9 facilitar a\u00a0\u201cpr\u00e9-leitura\u201d<\/strong>\u00a0para o usu\u00e1rio.<\/li>\n<\/ul>\n
                    \n
                  • Evite<\/b>\u00a0usar gifs animados.<\/li>\n<\/ul>\n
                    Formata\u00e7\u00e3o – Tabelas<\/h6>\n
                      \n
                    • Utilize <\/strong>layouts baseados em tabelas, ao inv\u00e9s, de DIVS, como no padr\u00e3o tableless. Por mais que essa pr\u00e1tica n\u00e3o seja recomendada na constru\u00e7\u00e3o de sites, a maior parte dos programas de e-mail, n\u00e3o renderiza os atributos das tags\u00a0<div><\/strong><\/li>\n<\/ul>\n
                        \n
                      • Evite <\/strong>utilizar as propriedades\u00a0colspan<\/strong>\u00a0e\u00a0rowspan<\/strong>\u00a0nas tags\u00a0<td><\/strong>, pois alguns programas de e-mail n\u00e3o reconhecem a forma certa.<\/li>\n<\/ul>\n
                          \n
                        • Prefira <\/strong>utilizar a propriedade\u00a0width<\/strong>\u00a0nas tags\u00a0<td><\/strong>\u00a0ao inv\u00e9s de utilizar nas tags\u00a0<table><\/strong>, como no exemplo abaixo:<\/li>\n<\/ul>\n
                          <table<\/span> cellspacing<\/span>=<\/span>\"0\"<\/span> cellpadding<\/span>=<\/span>\"10\"<\/span> border<\/span>=<\/span>\"0\"<\/span>><\/span>\r\n <tr<\/span>><\/span>\r\n  <td<\/span> width<\/span>=<\/span>\"120\"<\/span>><\/<\/span>td<\/span>><\/span>\r\n  <td<\/span> width<\/span>=<\/span>\"480\"<\/span>><\/<\/span>td<\/span>><\/span>\r\n <\/<\/span>tr<\/span>><\/span>\r\n<\/<\/span>table<\/span>><\/span><\/pre>\n
                          \n
                            \n
                          • Utilize<\/b>\u00a0sempre o atributo\u00a0valig=”top”<\/b>\u00a0para alinhar o conte\u00fado:<\/li>\n<\/ul>\n
                            <table<\/span> cellspacing<\/span>=<\/span>\"0\"<\/span> cellpadding<\/span>=<\/span>\"10\"<\/span> border<\/span>=<\/span>\"0\"<\/span>><\/span>\r\n <tr<\/span>><\/span>\r\n  <td<\/span> width<\/span>=<\/span>\"120\"<\/span> valign<\/span>=<\/span>\"top\"<\/span>><\/<\/span>td<\/span>><\/span>\r\n  <td<\/span> width<\/span>=<\/span>\"480\"<\/span> valign<\/span>=<\/span>\"top\"<\/span>><\/<\/span>td<\/span>><\/span>\r\n <\/<\/span>tr<\/span>><\/span>\r\n<\/<\/span>table<\/span>><\/span><\/pre>\n
                            Formata\u00e7\u00e3o – Links<\/strong><\/h6>\n