Node.js使用SendGrid发送HTML邮件内容被折叠隐藏如何解决

问题描述 #

通过Node.js集成SendGrid服务发送邮件时，邮件发送状态正常，但正文默认被折叠隐藏，需要点击邮件界面的三点按钮才能展开查看完整内容，预期实现用户打开邮件无需额外操作即可直接看到完整正文，匹配常规企业邮件的展示效果。
默认折叠效果如下：

原有实现代码 #

const msg = {
    to: 'example@gmail.com',
    from: 'example@example.app',
    subject: 'example: quotation email',
    text: msgText,
    html: "<style>.tab {padding-left: 18xp;}</style>" + msgText ,
}
console.log(msg);
sendgrid
    .send(msg)
    .then((resp) => {
        console.log('Email sent: \n', resp)
    })
    .catch((error) => {
        console.error(error)
    })

问题原因与修复方案 #

Gmail等主流邮箱客户端默认折叠邮件正文，本质是当前发送的邮件内容不符合客户端渲染规则，被判定为非规范或低价值内容触发截断，按以下优先级调整即可解决：

• 补全HTML邮件的标准文档结构
  现有代码直接拼接style标签和纯文本作为html字段内容，缺少邮件必需的基础HTML结构，会被客户端判定为不规范内容自动折叠。标准HTML邮件必须包含完整的文档、头部、主体标签，不能直接传入文本片段。
  修正后的html字段示例：

  html: `
  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>.tab {padding-left: 18px;}</style>
  </head>
  <body style="margin:0; padding:0; word-break:break-word;">
      ${msgText}
  </body>
  </html>
  `
  

  注意原有代码中样式存在笔误：padding-left的单位应为px，错写为xp，样式解析异常也可能触发折叠。
• 保证纯文本版本与HTML版本内容一致
  代码中同时传入了text和html两个字段，如果两个字段的内容差异过大，邮箱客户端会判定为可疑内容，自动截断折叠正文。两个版本的核心内容必须完全匹配，不要在HTML版本中加入纯文本版本没有的隐藏内容、冗余追踪代码。
• 调整正文开头内容
  主流邮箱客户端会自动识别邮件开头的冗余内容，如果开头大段内容为重复模板头、过长免责声明、无意义占位文本，会直接截断折叠后续内容。正文开头直接放置核心业务信息，不要堆砌无关内容。
• 完成发件人域名身份校验
  确认发件人域名已经在SendGrid后台完成SPF、DKIM、DMARC配置，未通过身份校验的发件人发出的邮件，不仅容易进入垃圾箱，也会更高概率触发内容截断规则。

完成以上调整后重新发送邮件，即可实现正文默认完整展示。

内容的提问来源于stack exchange，提问作者nawar