← Back to all posts
2026-09-01 · MailAnvil Team

HTML Email Transaksional yang Masuk Inbox (Bukan Spam)

OTP masuk spam. Invoice hilang. Konfirmasi booking nyangkut di folder Promosi. Kalau ini terjadi di aplikasi kamu, masalahnya sering bukan di server email — tapi di HTML email itu sendiri.

Email transaksional beda dari newsletter. Dia dipicu aksi user (signup, order, reset password), dan user menunggu email itu. Tapi kalau HTML-nya kotor, filter spam tetap bisa menghukumnya. Ini checklist yang dipakai developer Indonesia untuk bikin email transaksional yang lolos filter dan dirender bersih.

1. Inline CSS — jangan pakai <style>

Gmail (web dan app) menghapus <style> di <head>. Kalau styling kamu di sana, email jadi polos, link biru default, dan terlihat seperti phishing.

<!-- ❌ Gmail hapus ini -->
<style> .btn { background: #ff801f; } </style>

<!-- ✅ Inline, selalu jalan -->
<a href="https://mailanvil.com"
   style="display:inline-block;background:#ff801f;color:#fff;
          padding:12px 24px;border-radius:999px;text-decoration:none;">
   Verifikasi Email
</a>

Aturan praktis: setiap atribut style ditulis inline di elemen. Satu-satunya pengecualian adalah media query responsif, yang dibaca beberapa klien tapi diabaikan dengan aman oleh yang lain.

2. Layout tabel, bukan flexbox/grid

Client email (terutama Outlook desktop) punya dukungan CSS kuno. Flexbox dan grid di-render aneh atau diabaikan. Tabel masih standar industri untuk struktur email:

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr><td align="center" style="padding:40px 16px;background:#000;">
    <h1 style="color:#ff801f;margin:0 0 12px;">Invoice #INV-4821</h1>
  </td></tr>
</table>

role="presentation" penting — bikin screen reader tidak membacakan struktur tabel sebagai data.

3. Preheader text

Baris teks pertama di email jadi preview di inbox. Kalau itu "Lihat email ini di browser", kamu buang kesempatan meyakinkan user untuk buka:

<div style="display:none;max-height:0;overflow:hidden;">
  Kode OTP kamu: 482915 — berlaku 5 menit.
</div>

4. Plain-text fallback (multipart)

Kirim versi text/plain berdampingan dengan html. Beberapa klien menampilkan plain text, dan rasio text-vs-gambar yang seimbang dihargai filter spam. Email cuma gambar besar + sedikit teks = bendera merah spam.

Di MailAnvil, cukup isi field text bersamaan dengan html — API mengirim keduanya sebagai multipart.

5. Jangan pakai URL shortener & domain aneh

Link bit.ly atau domain tracking mencurigakan bikin filter spam curiga. Pakai domain asli kamu, dan pastikan domain pengirim (From) sudah terverifikasi DKIM/SPF — kalau tidak, email manapun yang kamu kirim akan dianggap spoofing.

6. Satu kolom, max-width 600px

HP menyumbang mayoritas buka email di Indonesia. Satu kolom, lebar maksimal 600px, dan tombol CTA minimal 44px tinggi (nyaman disentuh jempol).

7. Jangan sertakan JavaScript atau form

<script> dan <form> di email otomatis dihapus dan menaikkan skor spam. Semua aksi (klik verifikasi, lihat invoice) harus berupa link ke halaman web kamu.

Kenapa deliverability struktural ini penting di Indonesia

Ketiganya email transaksional, dan ketiganya rusak kalau HTML-nya asal-asalan.

Checklist cepat sebelum deploy

Coba sendiri

Kirim email transaksional yang bersih tanpa mikirin deliverability struktural — verifikasi DKIM/SPF, rate limit, dan suppression ditangani MailAnvil. Kamu fokus ke isi email, bukan ke tabel layout.

Daftar gratis di mailanvil.com — 500 email/bulan tanpa biaya, harga Rupiah, bayar QRIS/GoPay, dan dokumentasi Bahasa Indonesia.