chore: Add guides and comparison pages to landing site
This commit is contained in:
Dries Augustyns
@@ -0,0 +1,605 @@
|
||||
import React from 'react';
|
||||
import {GuideLayout, InfoBox} from '../../components/guides';
|
||||
import {CodeBlock} from '../../components/CodeBlock';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function EmailAPIGuide() {
|
||||
return (
|
||||
<GuideLayout
|
||||
title="Email API Guide: Everything You Need to Know with Code Examples"
|
||||
description="Complete guide to email APIs: how they work, implementation examples, best practices, and choosing the right solution for your application."
|
||||
lastUpdated="2025-12-20"
|
||||
readTime="12 min"
|
||||
canonical="https://www.useplunk.com/guides/email-api-guide"
|
||||
>
|
||||
{/* Introduction */}
|
||||
<section id="introduction" className="mb-12">
|
||||
<p className="text-neutral-700 leading-relaxed">
|
||||
Email APIs allow developers to programmatically send, receive, and manage emails from applications. Whether
|
||||
you're sending order confirmations, password resets, or marketing campaigns, email APIs provide a reliable,
|
||||
scalable way to integrate email into your software.
|
||||
</p>
|
||||
<p className="mt-4 text-neutral-700 leading-relaxed">
|
||||
This guide covers everything you need to know: how email APIs work, implementation examples in multiple
|
||||
languages, best practices, and choosing the right provider.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* What is an Email API */}
|
||||
<section id="what-is-email-api" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What is an Email API?</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
An email API is a programmatic interface that lets you send and manage emails via HTTP requests instead of
|
||||
manually configuring SMTP servers. APIs abstract away the complexity of email delivery, providing simple HTTP
|
||||
endpoints to send emails and webhooks to track delivery status.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 mb-8">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">SMTP (Traditional)</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Direct protocol for sending email</li>
|
||||
<li>• Requires managing connections</li>
|
||||
<li>• Manual error handling</li>
|
||||
<li>• Limited delivery tracking</li>
|
||||
<li>• More complex implementation</li>
|
||||
<li>• Port 25, 587, or 465</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Email API (Modern)</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• HTTP-based RESTful interface</li>
|
||||
<li>• No connection management needed</li>
|
||||
<li>• Structured error responses</li>
|
||||
<li>• Built-in tracking & analytics</li>
|
||||
<li>• Simpler to implement</li>
|
||||
<li>• Standard HTTP/HTTPS</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="tip" title="When to Use Email APIs">
|
||||
<p>
|
||||
Email APIs are ideal for transactional emails (order confirmations, password resets), automated
|
||||
notifications, and programmatic campaigns. If you're building software that sends emails, APIs are almost
|
||||
always the better choice over SMTP.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* How Email APIs Work */}
|
||||
<section id="how-it-works" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How Email APIs Work</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Authentication</h3>
|
||||
<p className="text-neutral-700">
|
||||
You authenticate requests using an API key (usually passed in headers). This identifies your account and
|
||||
authorizes API access.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Make HTTP Request</h3>
|
||||
<p className="text-neutral-700">
|
||||
Send a POST request to the API endpoint with email details (recipient, subject, body, etc.) as JSON.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. API Validates & Queues</h3>
|
||||
<p className="text-neutral-700">
|
||||
The API validates your request, queues the email for delivery, and returns a response with the email ID
|
||||
and status.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Email Delivery</h3>
|
||||
<p className="text-neutral-700">
|
||||
The service handles SMTP connections, retry logic, and delivery to the recipient's mail server.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Webhooks & Tracking</h3>
|
||||
<p className="text-neutral-700">
|
||||
You receive webhook notifications for delivery events (delivered, bounced, opened, clicked) and can query
|
||||
the API for email status.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Code Examples */}
|
||||
<section id="examples" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Email API Code Examples</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Here's how to send an email using Plunk's API in various languages:
|
||||
</p>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">JavaScript / Node.js</h3>
|
||||
<CodeBlock
|
||||
language="javascript"
|
||||
title="Node.js Example"
|
||||
code={`// Using fetch (Node.js 18+ or with node-fetch)
|
||||
const response = await fetch('https://api.useplunk.com/v1/send', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer YOUR_API_KEY'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
to: '[email protected]',
|
||||
subject: 'Welcome to our platform!',
|
||||
body: '<h1>Welcome!</h1><p>Thanks for signing up.</p>',
|
||||
// Optional fields
|
||||
from: '[email protected]',
|
||||
name: 'Your Company',
|
||||
replyTo: '[email protected]'
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
console.log('Email sent!', data.emailId);
|
||||
} else {
|
||||
console.error('Failed to send:', data.error);
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Python</h3>
|
||||
<CodeBlock
|
||||
language="python"
|
||||
title="Python Example"
|
||||
code={`import requests
|
||||
|
||||
response = requests.post(
|
||||
'https://api.useplunk.com/v1/send',
|
||||
headers={
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer YOUR_API_KEY'
|
||||
},
|
||||
json={
|
||||
'to': '[email protected]',
|
||||
'subject': 'Welcome to our platform!',
|
||||
'body': '<h1>Welcome!</h1><p>Thanks for signing up.</p>',
|
||||
'from': '[email protected]',
|
||||
'name': 'Your Company'
|
||||
}
|
||||
)
|
||||
|
||||
if response.status_code == 200:
|
||||
data = response.json()
|
||||
print(f"Email sent! ID: {data['emailId']}")
|
||||
else:
|
||||
print(f"Error: {response.json()['error']}")`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">PHP</h3>
|
||||
<CodeBlock
|
||||
language="php"
|
||||
title="PHP Example"
|
||||
code={`<?php
|
||||
$ch = curl_init('https://api.useplunk.com/v1/send');
|
||||
|
||||
curl_setopt($ch, CURLOPT_POST, true);
|
||||
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
|
||||
curl_setopt($ch, CURLOPT_HTTPHEADER, [
|
||||
'Content-Type: application/json',
|
||||
'Authorization: Bearer YOUR_API_KEY'
|
||||
]);
|
||||
|
||||
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode([
|
||||
'to' => '[email protected]',
|
||||
'subject' => 'Welcome to our platform!',
|
||||
'body' => '<h1>Welcome!</h1><p>Thanks for signing up.</p>',
|
||||
'from' => '[email protected]',
|
||||
'name' => 'Your Company'
|
||||
]));
|
||||
|
||||
$response = curl_exec($ch);
|
||||
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||
curl_close($ch);
|
||||
|
||||
$data = json_decode($response, true);
|
||||
|
||||
if ($httpCode === 200) {
|
||||
echo "Email sent! ID: " . $data['emailId'];
|
||||
} else {
|
||||
echo "Error: " . $data['error'];
|
||||
}
|
||||
?>`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Ruby</h3>
|
||||
<CodeBlock
|
||||
language="ruby"
|
||||
title="Ruby Example"
|
||||
code={`require 'net/http'
|
||||
require 'json'
|
||||
|
||||
uri = URI('https://api.useplunk.com/v1/send')
|
||||
http = Net::HTTP.new(uri.host, uri.port)
|
||||
http.use_ssl = true
|
||||
|
||||
request = Net::HTTP::Post.new(uri.path)
|
||||
request['Content-Type'] = 'application/json'
|
||||
request['Authorization'] = 'Bearer YOUR_API_KEY'
|
||||
request.body = {
|
||||
to: '[email protected]',
|
||||
subject: 'Welcome to our platform!',
|
||||
body: '<h1>Welcome!</h1><p>Thanks for signing up.</p>',
|
||||
from: '[email protected]',
|
||||
name: 'Your Company'
|
||||
}.to_json
|
||||
|
||||
response = http.request(request)
|
||||
data = JSON.parse(response.body)
|
||||
|
||||
if response.code.to_i == 200
|
||||
puts "Email sent! ID: #{data['emailId']}"
|
||||
else
|
||||
puts "Error: #{data['error']}"
|
||||
end`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Go</h3>
|
||||
<CodeBlock
|
||||
language="go"
|
||||
title="Go Example"
|
||||
code={`package main
|
||||
|
||||
import (
|
||||
"bytes"
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"io"
|
||||
"net/http"
|
||||
)
|
||||
|
||||
type EmailRequest struct {
|
||||
To string \`json:"to"\`
|
||||
Subject string \`json:"subject"\`
|
||||
Body string \`json:"body"\`
|
||||
From string \`json:"from"\`
|
||||
Name string \`json:"name"\`
|
||||
}
|
||||
|
||||
func main() {
|
||||
email := EmailRequest{
|
||||
To: "[email protected]",
|
||||
Subject: "Welcome to our platform!",
|
||||
Body: "<h1>Welcome!</h1><p>Thanks for signing up.</p>",
|
||||
From: "[email protected]",
|
||||
Name: "Your Company",
|
||||
}
|
||||
|
||||
jsonData, _ := json.Marshal(email)
|
||||
|
||||
req, _ := http.NewRequest("POST", "https://api.useplunk.com/v1/send", bytes.NewBuffer(jsonData))
|
||||
req.Header.Set("Content-Type", "application/json")
|
||||
req.Header.Set("Authorization", "Bearer YOUR_API_KEY")
|
||||
|
||||
client := &http.Client{}
|
||||
resp, err := client.Do(req)
|
||||
if err != nil {
|
||||
fmt.Println("Error:", err)
|
||||
return
|
||||
}
|
||||
defer resp.Body.Close()
|
||||
|
||||
body, _ := io.ReadAll(resp.Body)
|
||||
|
||||
if resp.StatusCode == 200 {
|
||||
var result map[string]interface{}
|
||||
json.Unmarshal(body, &result)
|
||||
fmt.Printf("Email sent! ID: %v\\n", result["emailId"])
|
||||
} else {
|
||||
fmt.Println("Error:", string(body))
|
||||
}
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Common Features */}
|
||||
<section id="features" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Common Email API Features</h2>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Sending Features</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Send individual or batch emails</li>
|
||||
<li>• HTML and plain text support</li>
|
||||
<li>• Attachments</li>
|
||||
<li>• CC, BCC recipients</li>
|
||||
<li>• Custom headers</li>
|
||||
<li>• Template rendering</li>
|
||||
<li>• Scheduled sending</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Tracking & Analytics</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Delivery status tracking</li>
|
||||
<li>• Open tracking</li>
|
||||
<li>• Click tracking</li>
|
||||
<li>• Bounce detection</li>
|
||||
<li>• Spam complaint monitoring</li>
|
||||
<li>• Unsubscribe management</li>
|
||||
<li>• Real-time analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Webhooks & Events</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Delivery notifications</li>
|
||||
<li>• Bounce notifications</li>
|
||||
<li>• Spam complaint alerts</li>
|
||||
<li>• Unsubscribe events</li>
|
||||
<li>• Open and click events</li>
|
||||
<li>• Custom event triggers</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Management Features</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Suppression list management</li>
|
||||
<li>• Contact management</li>
|
||||
<li>• Domain verification</li>
|
||||
<li>• Template management</li>
|
||||
<li>• API key management</li>
|
||||
<li>• Rate limiting</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Best Practices */}
|
||||
<section id="best-practices" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Email API Best Practices</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Secure Your API Keys</h3>
|
||||
<p className="text-neutral-700">
|
||||
Store API keys in environment variables, never in code. Use separate keys for development, staging, and
|
||||
production. Rotate keys periodically and immediately if compromised.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Implement Proper Error Handling</h3>
|
||||
<p className="text-neutral-700 mb-3">Handle different HTTP status codes appropriately:</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-sm text-neutral-700">
|
||||
<li>200: Success</li>
|
||||
<li>400-499: Client errors (bad request, validation failed) - don't retry</li>
|
||||
<li>500-599: Server errors - retry with exponential backoff</li>
|
||||
<li>429: Rate limit exceeded - back off and retry later</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Use Webhooks for Delivery Status</h3>
|
||||
<p className="text-neutral-700">
|
||||
Don't poll the API for email status. Set up webhooks to receive real-time delivery notifications
|
||||
(delivered, bounced, opened, clicked). This is more efficient and provides faster updates.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Respect Rate Limits</h3>
|
||||
<p className="text-neutral-700">
|
||||
Implement rate limiting in your code to stay within API limits. Queue emails and send in batches. Use
|
||||
exponential backoff when you receive 429 rate limit errors.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Validate Email Addresses</h3>
|
||||
<p className="text-neutral-700">
|
||||
Validate email format before making API calls. Check for common typos. Consider using email validation
|
||||
APIs to verify deliverability before sending.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Use Templates</h3>
|
||||
<p className="text-neutral-700">
|
||||
Store email templates in your email service provider rather than hardcoding HTML in your application.
|
||||
This allows non-developers to update email content without code changes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
7
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Monitor Deliverability Metrics</h3>
|
||||
<p className="text-neutral-700">
|
||||
Track bounce rates, spam complaints, and engagement metrics. Set up alerts for anomalies. Address
|
||||
deliverability issues proactively.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
8
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Test in Sandbox/Development Mode</h3>
|
||||
<p className="text-neutral-700">
|
||||
Use sandbox or test mode during development. Test error scenarios, retry logic, and webhook handling
|
||||
before deploying to production.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
9
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Log API Requests & Responses</h3>
|
||||
<p className="text-neutral-700">
|
||||
Log all API interactions (but redact sensitive data like API keys). This helps debug issues and
|
||||
understand email sending patterns.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
10
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Handle Timeouts</h3>
|
||||
<p className="text-neutral-700">
|
||||
Set appropriate timeouts for API requests (typically 10-30 seconds). Don't block user requests waiting
|
||||
for email API responses—queue emails asynchronously if needed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Choosing a Provider */}
|
||||
<section id="choosing-provider" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Choosing an Email API Provider</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Consider these factors when selecting an email API provider:
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">Deliverability Reputation</h3>
|
||||
<p className="text-neutral-700">
|
||||
Choose providers with strong deliverability rates and sender reputation. Poor deliverability means your
|
||||
emails land in spam, defeating the purpose.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">Feature Set</h3>
|
||||
<p className="text-neutral-700">
|
||||
Ensure the API supports your needs: templates, webhooks, analytics, scheduling, attachments, etc. Some
|
||||
providers specialize in transactional emails, others in marketing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">Pricing Model</h3>
|
||||
<p className="text-neutral-700">
|
||||
Understand pricing: per-email charges, monthly tiers, overage fees. Calculate costs for your expected
|
||||
volume. Watch for hidden fees and price increases at higher volumes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">Developer Experience</h3>
|
||||
<p className="text-neutral-700">
|
||||
Good documentation, SDKs in your language, clear error messages, and responsive support make
|
||||
implementation much easier.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">Scalability & Reliability</h3>
|
||||
<p className="text-neutral-700">
|
||||
Can the provider handle your peak volumes? What's their uptime guarantee (SLA)? Do they have redundancy
|
||||
and failover systems?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">Compliance & Security</h3>
|
||||
<p className="text-neutral-700">
|
||||
Ensure the provider complies with GDPR, CAN-SPAM, and other relevant regulations. Check their security
|
||||
certifications (SOC 2, ISO 27001).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Related Guides */}
|
||||
<section id="related-guides" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Related Email Guides</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Link
|
||||
href="/guides/transactional-vs-marketing-email"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Transactional vs Marketing Email</h3>
|
||||
<p className="text-sm text-neutral-600">Understand email types for APIs.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-deliverability"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Deliverability</h3>
|
||||
<p className="text-sm text-neutral-600">Ensure API-sent emails reach the inbox.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-sender-reputation"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Sender Reputation</h3>
|
||||
<p className="text-sm text-neutral-600">Maintain good sender reputation.</p>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</GuideLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,433 @@
|
||||
import React from 'react';
|
||||
import {GuideLayout, InfoBox} from '../../components/guides';
|
||||
import {CodeBlock} from '../../components/CodeBlock';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function EmailBounceRate() {
|
||||
return (
|
||||
<GuideLayout
|
||||
title="Email Bounce Rate: Hard vs Soft Bounces & How to Reduce Them"
|
||||
description="Understand email bounce rates, the difference between hard and soft bounces, and proven strategies to reduce bounces and protect your sender reputation."
|
||||
lastUpdated="2025-12-20"
|
||||
readTime="9 min"
|
||||
canonical="https://www.useplunk.com/guides/email-bounce-rate"
|
||||
>
|
||||
{/* Introduction */}
|
||||
<section id="introduction" className="mb-12">
|
||||
<p className="text-neutral-700 leading-relaxed">
|
||||
Email bounce rate measures the percentage of emails that couldn't be delivered to recipients' inboxes. Bounces
|
||||
occur for various reasons—some temporary, others permanent—and high bounce rates seriously damage your sender
|
||||
reputation and deliverability.
|
||||
</p>
|
||||
<p className="mt-4 text-neutral-700 leading-relaxed">
|
||||
Understanding the types of bounces and how to minimize them is essential for maintaining a healthy email
|
||||
program.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* What is Bounce Rate */}
|
||||
<section id="what-is-bounce-rate" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What is Email Bounce Rate?</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Bounce rate is the percentage of sent emails that were rejected by receiving mail servers and couldn't be
|
||||
delivered.
|
||||
</p>
|
||||
|
||||
<div className="rounded-xl border-2 border-neutral-900 bg-neutral-50 p-8 mb-8">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-neutral-900 mb-4">Bounce Rate Formula</div>
|
||||
<CodeBlock
|
||||
language="text"
|
||||
code={`Bounce Rate = (Bounced Emails ÷ Sent Emails) × 100
|
||||
|
||||
Example:
|
||||
- Sent: 10,000 emails
|
||||
- Bounced: 150 emails
|
||||
|
||||
Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
|
||||
showCopy={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-3 mb-8">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="text-3xl font-bold text-green-600 mb-2"><2%</div>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Excellent</h3>
|
||||
<p className="text-sm text-neutral-700">Healthy list with good hygiene practices</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="text-3xl font-bold text-amber-600 mb-2">2-5%</div>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Concerning</h3>
|
||||
<p className="text-sm text-neutral-700">List quality issues need attention</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="text-3xl font-bold text-red-600 mb-2">>5%</div>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Critical</h3>
|
||||
<p className="text-sm text-neutral-700">Serious problems damaging sender reputation</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Types of Bounces */}
|
||||
<section id="types-of-bounces" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Hard Bounces vs Soft Bounces</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Not all bounces are the same. Understanding the difference between hard and soft bounces is crucial for
|
||||
managing your email list.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-2">
|
||||
<div className="rounded-xl border-2 border-red-200 bg-red-50 p-6">
|
||||
<h3 className="text-2xl font-semibold text-red-900 mb-4">Hard Bounces (Permanent)</h3>
|
||||
<p className="text-neutral-700 mb-4">
|
||||
Hard bounces occur when an email can't be delivered for permanent reasons. These addresses will never
|
||||
receive your emails.
|
||||
</p>
|
||||
<div className="space-y-3 mb-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Common Causes:</h4>
|
||||
<ul className="space-y-1 text-sm text-neutral-700">
|
||||
<li>• Email address doesn't exist</li>
|
||||
<li>• Domain name doesn't exist</li>
|
||||
<li>• Email server has completely blocked delivery</li>
|
||||
<li>• Invalid email address format</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg bg-red-100 border border-red-200 p-4">
|
||||
<p className="text-sm font-semibold text-red-900 mb-2">Action Required:</p>
|
||||
<p className="text-sm text-neutral-700">
|
||||
<strong>Remove immediately.</strong> Never send to hard bounce addresses again. Continuing to send to
|
||||
them damages your sender reputation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-amber-200 bg-amber-50 p-6">
|
||||
<h3 className="text-2xl font-semibold text-amber-900 mb-4">Soft Bounces (Temporary)</h3>
|
||||
<p className="text-neutral-700 mb-4">
|
||||
Soft bounces are temporary delivery failures. The email address is valid, but delivery failed for a
|
||||
temporary reason.
|
||||
</p>
|
||||
<div className="space-y-3 mb-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Common Causes:</h4>
|
||||
<ul className="space-y-1 text-sm text-neutral-700">
|
||||
<li>• Recipient's mailbox is full</li>
|
||||
<li>• Email server is temporarily down or busy</li>
|
||||
<li>• Email message is too large</li>
|
||||
<li>• Recipient's server is experiencing issues</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg bg-amber-100 border border-amber-200 p-4">
|
||||
<p className="text-sm font-semibold text-amber-900 mb-2">Action Required:</p>
|
||||
<p className="text-sm text-neutral-700">
|
||||
<strong>Retry automatically.</strong> Most platforms retry for 24-72 hours. After 3-5 consecutive soft
|
||||
bounces, treat as a hard bounce and remove.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="info" title="Bounce vs Block" className="mt-6">
|
||||
<p>
|
||||
A <strong>block</strong> occurs when the receiving server actively rejects your email due to reputation or
|
||||
content issues. Unlike bounces (address problems), blocks indicate deliverability problems that affect all
|
||||
your emails to that domain.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Common Bounce Reasons */}
|
||||
<section id="bounce-reasons" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Common Bounce Reasons & Error Codes</h2>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold">Error Type</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold">Reason</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold">Type</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-neutral-200 bg-white">
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">550</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Mailbox unavailable</td>
|
||||
<td className="px-6 py-4 text-sm text-red-600">Hard</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Remove</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">551</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">User not local/Invalid address</td>
|
||||
<td className="px-6 py-4 text-sm text-red-600">Hard</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Remove</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">552</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Mailbox full</td>
|
||||
<td className="px-6 py-4 text-sm text-amber-600">Soft</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Retry</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">553</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Mailbox name invalid</td>
|
||||
<td className="px-6 py-4 text-sm text-red-600">Hard</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Remove</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">554</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Transaction failed</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-600">Varies</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Investigate</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">421</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Service not available</td>
|
||||
<td className="px-6 py-4 text-sm text-amber-600">Soft</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Retry</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">450</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Mailbox busy</td>
|
||||
<td className="px-6 py-4 text-sm text-amber-600">Soft</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Retry</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How to Reduce Bounces */}
|
||||
<section id="reduce-bounces" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How to Reduce Email Bounce Rates</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Use Double Opt-In</h3>
|
||||
<p className="text-neutral-700">
|
||||
Require new subscribers to confirm their email address by clicking a verification link. This ensures the
|
||||
address is valid, active, and belongs to the person who submitted it. Double opt-in reduces bounce rates
|
||||
by 50-70%.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Validate Email Addresses</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
Use real-time email validation on signup forms to catch typos and invalid formats. Validate:
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-sm text-neutral-700">
|
||||
<li>Email format (contains @ and valid domain)</li>
|
||||
<li>Domain has valid MX records</li>
|
||||
<li>Catch common typos (gmial.com → gmail.com)</li>
|
||||
<li>Block disposable email addresses (if needed)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Remove Hard Bounces Immediately</h3>
|
||||
<p className="text-neutral-700">
|
||||
Automate removal of hard bounce addresses from your list. Never send to them again. Continued sending to
|
||||
invalid addresses signals poor list hygiene to email providers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Clean Your List Regularly</h3>
|
||||
<p className="text-neutral-700">
|
||||
Remove or re-engage inactive subscribers every 6-12 months. Email addresses become invalid over time
|
||||
(15- 20% per year). Regular list cleaning prevents bounce accumulation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Never Buy Email Lists</h3>
|
||||
<p className="text-neutral-700">
|
||||
Purchased lists have 20-40% invalid addresses and zero engagement. They'll destroy your bounce rate and
|
||||
sender reputation. Build your list organically—it's slower but dramatically more effective.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Monitor Soft Bounces</h3>
|
||||
<p className="text-neutral-700">
|
||||
Track addresses that repeatedly soft bounce. After 3-5 consecutive soft bounces over multiple campaigns,
|
||||
treat them as hard bounces and remove them.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
7
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Optimize Email Size</h3>
|
||||
<p className="text-neutral-700">
|
||||
Keep email size under 100KB to avoid soft bounces from size limits. Compress images, minimize code, and
|
||||
avoid large attachments (link to downloads instead).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
8
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Maintain Consistent Sending</h3>
|
||||
<p className="text-neutral-700">
|
||||
Send regularly to maintain list freshness. Long gaps between sends (3+ months) increase bounce rates as
|
||||
addresses become invalid or subscribers forget about you.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Impact on Deliverability */}
|
||||
<section id="impact" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How Bounce Rate Affects Deliverability</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Bounce rates directly impact your sender reputation and ability to reach the inbox:
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-xl border-2 border-red-200 bg-red-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-red-900 mb-3">Damaged Sender Reputation</h3>
|
||||
<p className="text-neutral-700">
|
||||
Email providers track bounce rates. High rates signal poor list quality and careless email practices,
|
||||
damaging your reputation score. This causes more emails—even to valid addresses—to land in spam.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-amber-200 bg-amber-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-amber-900 mb-3">Spam Trap Hits</h3>
|
||||
<p className="text-neutral-700">
|
||||
Invalid addresses can be recycled as spam traps—addresses used to catch senders with poor list hygiene.
|
||||
Sending to spam traps can get you blacklisted, severely impacting deliverability across all recipients.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-blue-200 bg-blue-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-blue-900 mb-3">IP/Domain Blacklisting</h3>
|
||||
<p className="text-neutral-700">
|
||||
Consistently high bounce rates can lead to your sending IP or domain being blacklisted by email providers
|
||||
or third-party blacklist services, making it extremely difficult to deliver emails.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-purple-200 bg-purple-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-purple-900 mb-3">Reduced Engagement</h3>
|
||||
<p className="text-neutral-700">
|
||||
High bounce rates correlate with low engagement. Email providers notice when large portions of your list
|
||||
aren't valid, reducing trust in your remaining emails.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="warning" title="Recovery Takes Time" className="mt-6">
|
||||
<p>
|
||||
Once your sender reputation is damaged by high bounce rates, recovery can take weeks or months of
|
||||
consistently good sending behavior. Prevention is far easier than recovery.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Monitoring Bounces */}
|
||||
<section id="monitoring" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Monitoring & Managing Bounces</h2>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">What to Track</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Overall bounce rate (target: <2%)</li>
|
||||
<li>• Hard bounce rate specifically</li>
|
||||
<li>• Soft bounce rate and retry success</li>
|
||||
<li>• Bounce rate by campaign</li>
|
||||
<li>• Bounce rate trends over time</li>
|
||||
<li>• Specific bounce reasons/error codes</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Automated Actions</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Auto-remove hard bounces immediately</li>
|
||||
<li>• Retry soft bounces 3-5 times over 72 hours</li>
|
||||
<li>• Remove persistent soft bouncers</li>
|
||||
<li>• Alert when bounce rate exceeds threshold</li>
|
||||
<li>• Weekly bounce rate reports</li>
|
||||
<li>• Validate emails at signup</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Related Guides */}
|
||||
<section id="related-guides" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Related Email Guides</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Link
|
||||
href="/guides/email-deliverability"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Deliverability</h3>
|
||||
<p className="text-sm text-neutral-600">Complete guide to reaching the inbox.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-sender-reputation"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Sender Reputation</h3>
|
||||
<p className="text-sm text-neutral-600">Build and maintain sender reputation.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-marketing-best-practices"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Marketing Best Practices</h3>
|
||||
<p className="text-sm text-neutral-600">Complete email marketing guide.</p>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</GuideLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,474 @@
|
||||
import React from 'react';
|
||||
import {GuideLayout, InfoBox} from '../../components/guides';
|
||||
import {CodeBlock} from '../../components/CodeBlock';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function EmailClickThroughRate() {
|
||||
return (
|
||||
<GuideLayout
|
||||
title="Email Click-Through Rate: How to Optimize CTAs & Increase Clicks"
|
||||
description="Learn what affects email click-through rates, industry benchmarks, and proven tactics to optimize CTAs and boost engagement."
|
||||
lastUpdated="2025-12-20"
|
||||
readTime="10 min"
|
||||
canonical="https://www.useplunk.com/guides/email-click-through-rate"
|
||||
>
|
||||
{/* Introduction */}
|
||||
<section id="introduction" className="mb-12">
|
||||
<p className="text-neutral-700 leading-relaxed">
|
||||
Email click-through rate (CTR) measures the percentage of recipients who clicked a link in your email. While
|
||||
open rates show subject line effectiveness, CTR reveals how compelling your email content and calls-to-action
|
||||
are.
|
||||
</p>
|
||||
<p className="mt-4 text-neutral-700 leading-relaxed">
|
||||
High CTR indicates engaged subscribers who find value in your emails and are moving toward conversion. This
|
||||
guide covers everything you need to optimize CTAs and maximize clicks.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* What is CTR */}
|
||||
<section id="what-is-ctr" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What is Email Click-Through Rate?</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Click-through rate is the percentage of delivered emails that received at least one click on a link.
|
||||
</p>
|
||||
|
||||
<div className="rounded-xl border-2 border-neutral-900 bg-neutral-50 p-8 mb-8">
|
||||
<div className="text-center mb-6">
|
||||
<div className="text-3xl font-bold text-neutral-900 mb-4">CTR Formula</div>
|
||||
<CodeBlock
|
||||
language="text"
|
||||
code={`CTR = (Unique Clicks ÷ Delivered Emails) × 100
|
||||
|
||||
Example:
|
||||
- Sent: 10,000 emails
|
||||
- Delivered: 9,800 emails
|
||||
- Unique Clicks: 294
|
||||
|
||||
CTR = (294 ÷ 9,800) × 100 = 3.0%`}
|
||||
showCopy={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-neutral-900 mb-4">CTOR Formula</div>
|
||||
<CodeBlock
|
||||
language="text"
|
||||
code={`CTOR (Click-to-Open Rate) = (Unique Clicks ÷ Unique Opens) × 100
|
||||
|
||||
Example:
|
||||
- Unique Opens: 2,450
|
||||
- Unique Clicks: 294
|
||||
|
||||
CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
|
||||
showCopy={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="info" title="CTR vs CTOR">
|
||||
<p>
|
||||
<strong>CTR</strong> measures overall campaign effectiveness (including deliverability and opens).{' '}
|
||||
<strong>CTOR</strong> isolates content quality by measuring engagement from those who opened. Use both—CTR
|
||||
for overall performance, CTOR for content optimization.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Benchmarks */}
|
||||
<section id="benchmarks" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">CTR Benchmarks by Industry</h2>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 overflow-hidden mb-8">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold">Industry</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold">Average CTR</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold">Good CTR</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold">Average CTOR</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-neutral-200 bg-white">
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm text-neutral-900">SaaS / Technology</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">2-3%</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">4%+</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">10-15%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm text-neutral-900">E-commerce / Retail</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">3-5%</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">6%+</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">12-18%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm text-neutral-900">Media / Publishing</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">4-6%</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">7%+</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">15-20%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm text-neutral-900">Financial Services</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">2-4%</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">5%+</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">10-14%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm text-neutral-900">Non-Profit</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">2-4%</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">5%+</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">10-16%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm text-neutral-900">Education</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">3-5%</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">6%+</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">12-17%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<InfoBox type="tip" title="Context Matters">
|
||||
<p>
|
||||
CTR varies dramatically by email type: promotional emails (2-3%), newsletters (4-6%), transactional emails
|
||||
(10-15%), and triggered emails (15-30%). Compare similar email types, not all campaigns together.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Factors Affecting CTR */}
|
||||
<section id="factors" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What Affects Click-Through Rates?</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Call-to-Action (CTA) Design</h3>
|
||||
<p className="text-neutral-700">
|
||||
Your CTA's design, placement, and copy directly impact clicks. Clear, prominent, action-oriented CTAs
|
||||
significantly outperform generic "Click here" links.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Email Relevance</h3>
|
||||
<p className="text-neutral-700">
|
||||
Targeted, personalized content generates 2-3x higher CTR than generic blasts. Segmentation and
|
||||
personalization ensure emails match subscriber interests.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Value Proposition</h3>
|
||||
<p className="text-neutral-700">
|
||||
Recipients need a clear reason to click. Compelling value propositions—exclusive content, limited offers,
|
||||
solutions to problems—drive clicks.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Mobile Optimization</h3>
|
||||
<p className="text-neutral-700">
|
||||
60%+ of emails are read on mobile. Unoptimized emails with small links or poorly formatted content see 50%
|
||||
lower CTR on mobile devices.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Content Scannability</h3>
|
||||
<p className="text-neutral-700">
|
||||
Most people skim emails. Clear structure with headers, bullet points, and whitespace helps readers find
|
||||
and click CTAs quickly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">6. Number of CTAs</h3>
|
||||
<p className="text-neutral-700">
|
||||
More CTAs = divided attention. Emails with one primary CTA convert 371% better than those with multiple
|
||||
competing CTAs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How to Improve CTR */}
|
||||
<section id="improve-ctr" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How to Increase Email Click-Through Rates</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Use Clear, Action-Oriented CTA Copy</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
Be specific about what happens when users click. Action verbs + value = higher CTR.
|
||||
</p>
|
||||
<div className="rounded-lg bg-neutral-100 p-4 space-y-2">
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-green-600 font-bold">✓</span>
|
||||
<span className="text-sm text-neutral-700">"Download your free guide"</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-green-600 font-bold">✓</span>
|
||||
<span className="text-sm text-neutral-700">"Start your 14-day free trial"</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-green-600 font-bold">✓</span>
|
||||
<span className="text-sm text-neutral-700">"Get 20% off today only"</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-red-600 font-bold">✗</span>
|
||||
<span className="text-sm text-neutral-700">"Click here"</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-red-600 font-bold">✗</span>
|
||||
<span className="text-sm text-neutral-700">"Learn more"</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Design Prominent CTA Buttons</h3>
|
||||
<p className="text-neutral-700 mb-3">Button best practices:</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-sm text-neutral-700">
|
||||
<li>Use contrasting colors that stand out from email design</li>
|
||||
<li>Make buttons large enough to tap on mobile (44x44px minimum)</li>
|
||||
<li>Add white space around buttons for visual prominence</li>
|
||||
<li>Use button text, not images (better for accessibility and loading)</li>
|
||||
<li>Repeat primary CTA if email is long (top and bottom)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Create a Single, Clear Focus</h3>
|
||||
<p className="text-neutral-700">
|
||||
Each email should have one primary goal. Multiple CTAs competing for attention reduce overall clicks.
|
||||
Guide readers toward one clear action.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Personalize Content</h3>
|
||||
<p className="text-neutral-700">
|
||||
Go beyond "Hi [Name]". Use behavioral data, purchase history, browsing activity, or preferences to send
|
||||
highly relevant emails. Personalized CTAs see 202% higher CTR.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Optimize for Mobile</h3>
|
||||
<p className="text-neutral-700 mb-3">Mobile optimization is critical:</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-sm text-neutral-700">
|
||||
<li>Responsive design that adapts to screen size</li>
|
||||
<li>Large, tappable buttons (not small text links)</li>
|
||||
<li>Single-column layout for easy scrolling</li>
|
||||
<li>Concise copy (mobile users scan quickly)</li>
|
||||
<li>Place CTAs above the fold when possible</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Use Urgency and Scarcity (Authentically)</h3>
|
||||
<p className="text-neutral-700">
|
||||
Genuine limited-time offers or limited quantity create urgency that drives clicks. Be authentic—false
|
||||
urgency damages trust. "Sale ends tonight" or "Only 5 spots remaining" work when true.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
7
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Segment Your Audience</h3>
|
||||
<p className="text-neutral-700">
|
||||
Send targeted emails to specific groups based on behavior, interests, or demographics. Segmented
|
||||
campaigns see 3x higher CTR than non-segmented blasts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
8
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Include Preview/Teaser Content</h3>
|
||||
<p className="text-neutral-700">
|
||||
Show just enough value to create curiosity. Product images, stat highlights, or content snippets
|
||||
encourage clicks to see more. "Read the full article" works better than just a headline.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
9
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">A/B Test CTAs</h3>
|
||||
<p className="text-neutral-700 mb-3">Test systematically:</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-sm text-neutral-700">
|
||||
<li>Button copy ("Get started" vs "Start free trial")</li>
|
||||
<li>Button color (brand color vs high-contrast color)</li>
|
||||
<li>Button placement (top, middle, bottom)</li>
|
||||
<li>Number of CTAs (one vs multiple)</li>
|
||||
<li>Button size and shape</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
10
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Improve Email-Landing Page Match</h3>
|
||||
<p className="text-neutral-700">
|
||||
Ensure landing pages match email promises. Mismatched expectations cause immediate bounces. Email says
|
||||
"20% off"? Landing page should show 20% off, not a generic homepage.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Placement */}
|
||||
<section id="cta-placement" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">CTA Placement Best Practices</h2>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Short Emails (<200 words)</h3>
|
||||
<p className="text-sm text-neutral-700 mb-3">One CTA in the middle or at the end.</p>
|
||||
<div className="rounded-lg bg-neutral-50 p-3 text-xs text-neutral-600">Intro → Value prop → CTA</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Medium Emails (200-500 words)</h3>
|
||||
<p className="text-sm text-neutral-700 mb-3">CTAs at the beginning and end.</p>
|
||||
<div className="rounded-lg bg-neutral-50 p-3 text-xs text-neutral-600">
|
||||
Intro + CTA → Content → Final CTA
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Long Emails (>500 words)</h3>
|
||||
<p className="text-sm text-neutral-700 mb-3">Multiple CTAs throughout.</p>
|
||||
<div className="rounded-lg bg-neutral-50 p-3 text-xs text-neutral-600">
|
||||
CTA → Content → CTA → More content → Final CTA
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="tip" title="Above the Fold" className="mt-6">
|
||||
<p>
|
||||
Place at least one CTA above the fold (visible without scrolling) on mobile. Many readers won't scroll, so
|
||||
give them an early opportunity to click.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Common Mistakes */}
|
||||
<section id="common-mistakes" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Common CTR Mistakes to Avoid</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Too Many CTAs</h3>
|
||||
<p className="text-neutral-700">
|
||||
Multiple competing CTAs confuse readers and reduce overall clicks. Focus on one primary action per email.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Vague CTA Copy</h3>
|
||||
<p className="text-neutral-700">
|
||||
"Click here" and "Learn more" don't communicate value. Be specific: "Download free guide" or "Start 14-day
|
||||
trial" tell readers exactly what they'll get.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Image-Only CTAs</h3>
|
||||
<p className="text-neutral-700">
|
||||
Many email clients block images by default. If your CTA is an image, users won't see it. Use HTML buttons
|
||||
with text.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Small, Hard-to-Tap Links</h3>
|
||||
<p className="text-neutral-700">
|
||||
Tiny text links are difficult to tap on mobile. Use large buttons (minimum 44x44px) for easy tapping.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ No Clear Value Proposition</h3>
|
||||
<p className="text-neutral-700">
|
||||
Readers won't click if they don't know why they should. Clearly communicate the benefit of clicking before
|
||||
asking them to act.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Related Guides */}
|
||||
<section id="related-guides" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Related Email Guides</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Link
|
||||
href="/guides/email-open-rate"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Open Rates</h3>
|
||||
<p className="text-sm text-neutral-600">Improve opens to get more clicks.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-marketing-best-practices"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Marketing Best Practices</h3>
|
||||
<p className="text-sm text-neutral-600">Complete email marketing guide.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-deliverability"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Deliverability</h3>
|
||||
<p className="text-sm text-neutral-600">Reach the inbox for better engagement.</p>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</GuideLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,380 @@
|
||||
import React from 'react';
|
||||
import {GuideLayout, InfoBox} from '../../components/guides';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function EmailDeliverability() {
|
||||
return (
|
||||
<GuideLayout
|
||||
title="Email Deliverability Guide: Reach the Inbox Every Time"
|
||||
description="Learn proven strategies to improve email deliverability, avoid spam filters, and maximize inbox placement rates. Complete guide with best practices."
|
||||
lastUpdated="2025-12-20"
|
||||
readTime="12 min"
|
||||
canonical="https://www.useplunk.com/guides/email-deliverability"
|
||||
>
|
||||
{/* Introduction */}
|
||||
<section id="introduction" className="mb-12">
|
||||
<p className="text-neutral-700 leading-relaxed">
|
||||
Email deliverability is the measure of how successfully your emails reach recipients' inboxes rather than spam
|
||||
folders or being blocked entirely. Even perfectly crafted emails are worthless if they never reach your
|
||||
audience.
|
||||
</p>
|
||||
<p className="mt-4 text-neutral-700 leading-relaxed">
|
||||
This comprehensive guide covers everything you need to know about email deliverability—from technical
|
||||
authentication to content best practices—so you can maximize inbox placement rates.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* What is Email Deliverability */}
|
||||
<section id="what-is-deliverability" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What is Email Deliverability?</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Email deliverability refers to your ability to deliver emails to subscribers' inboxes. It's measured as a
|
||||
percentage of sent emails that successfully reach the inbox.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-3 mb-8">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="text-3xl font-bold text-green-600 mb-2">95%+</div>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Excellent</h3>
|
||||
<p className="text-sm text-neutral-700">
|
||||
Strong sender reputation, proper authentication, engaged audience
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="text-3xl font-bold text-amber-600 mb-2">85-94%</div>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Good</h3>
|
||||
<p className="text-sm text-neutral-700">Room for improvement in authentication or engagement</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="text-3xl font-bold text-red-600 mb-2"><85%</div>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Poor</h3>
|
||||
<p className="text-sm text-neutral-700">Serious issues requiring immediate attention</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="info" title="Deliverability vs Delivery Rate">
|
||||
<p>
|
||||
<strong>Delivery rate</strong> measures emails that weren't bounced (reached the server).{' '}
|
||||
<strong>Deliverability</strong> measures emails that reached the inbox specifically, not spam. You want both
|
||||
to be high.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Key Factors */}
|
||||
<section id="key-factors" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Key Factors Affecting Deliverability</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Email deliverability depends on multiple interconnected factors:
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Sender Reputation</h3>
|
||||
<p className="text-neutral-700">
|
||||
Email providers track your sending behavior over time. High engagement rates, low spam complaints, and few
|
||||
bounces build a positive reputation. Poor practices damage it.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Email Authentication</h3>
|
||||
<p className="text-neutral-700">
|
||||
SPF, DKIM, and DMARC authenticate your emails and prove they're legitimate. Without proper authentication,
|
||||
emails are more likely to be flagged as spam.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Email Content</h3>
|
||||
<p className="text-neutral-700">
|
||||
Spam filters analyze your subject lines, body content, links, and images. Spammy language, excessive
|
||||
links, or misleading content trigger filters.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. List Quality & Engagement</h3>
|
||||
<p className="text-neutral-700">
|
||||
Sending to engaged subscribers who want your emails is crucial. High open rates and clicks signal quality.
|
||||
Low engagement or spam complaints hurt deliverability.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Technical Infrastructure</h3>
|
||||
<p className="text-neutral-700">
|
||||
Your sending IP address, domain reputation, and email infrastructure affect how providers perceive your
|
||||
emails. Dedicated IPs and proper warm-up are important at scale.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Best Practices */}
|
||||
<section id="best-practices" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Email Deliverability Best Practices</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Authentication & Technical Setup</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Configure SPF, DKIM, and DMARC</h4>
|
||||
<p className="text-neutral-700">
|
||||
Implement all three authentication protocols. This proves your emails are legitimate and protects
|
||||
your domain from spoofing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Use a Dedicated Sending Domain</h4>
|
||||
<p className="text-neutral-700">
|
||||
Send marketing emails from a subdomain (e.g., mail.yourdomain.com) to protect your main domain's
|
||||
reputation if issues arise.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Warm Up New IPs and Domains</h4>
|
||||
<p className="text-neutral-700">
|
||||
If using a new IP or domain, gradually increase sending volume over 2-4 weeks. Sudden high volume
|
||||
from new sources looks suspicious.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">List Management</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Use Double Opt-In</h4>
|
||||
<p className="text-neutral-700">
|
||||
Require subscribers to confirm their email address. This ensures list quality and prevents spam trap
|
||||
addresses from being added.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Clean Your List Regularly</h4>
|
||||
<p className="text-neutral-700">
|
||||
Remove hard bounces immediately and consider removing subscribers who haven't engaged in 6-12
|
||||
months. Inactive subscribers hurt your reputation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Make Unsubscribing Easy</h4>
|
||||
<p className="text-neutral-700">
|
||||
Include a clear unsubscribe link in every email. Making it hard to unsubscribe leads to spam
|
||||
complaints, which are much worse for deliverability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Content Best Practices</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
7
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Avoid Spam Trigger Words</h4>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
Words like "FREE", "ACT NOW", "LIMITED TIME", excessive exclamation marks, and all caps trigger spam
|
||||
filters. Write naturally and professionally.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
8
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Balance Text and Images</h4>
|
||||
<p className="text-neutral-700">
|
||||
Don't send image-only emails. Maintain a healthy text-to-image ratio (at least 60% text). Include
|
||||
alt text for images.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
9
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Use Relevant Subject Lines</h4>
|
||||
<p className="text-neutral-700">
|
||||
Subject lines should accurately reflect email content. Misleading subjects increase spam complaints
|
||||
and damage trust.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Common Issues */}
|
||||
<section id="common-issues" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Common Deliverability Issues & Solutions</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-xl border-2 border-red-200 bg-red-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-red-900 mb-3">Problem: Emails Going to Spam</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
<strong>Causes:</strong> Poor sender reputation, missing authentication, spammy content, low engagement
|
||||
</p>
|
||||
<p className="text-neutral-700">
|
||||
<strong>Solutions:</strong> Verify SPF/DKIM/DMARC setup, improve email content, segment your list to send
|
||||
to engaged subscribers, warm up sending reputation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-amber-200 bg-amber-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-amber-900 mb-3">Problem: High Bounce Rate</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
<strong>Causes:</strong> Invalid email addresses, purchased lists, poor list hygiene
|
||||
</p>
|
||||
<p className="text-neutral-700">
|
||||
<strong>Solutions:</strong> Use double opt-in, validate email addresses, remove hard bounces immediately,
|
||||
regularly clean your list
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-blue-200 bg-blue-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-blue-900 mb-3">Problem: Low Engagement Rates</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
<strong>Causes:</strong> Irrelevant content, wrong send frequency, stale email list
|
||||
</p>
|
||||
<p className="text-neutral-700">
|
||||
<strong>Solutions:</strong> Segment your audience, personalize content, test send times, re-engagement
|
||||
campaigns for inactive subscribers
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-purple-200 bg-purple-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-purple-900 mb-3">Problem: Blacklisted IP or Domain</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
<strong>Causes:</strong> Spam complaints, sending to spam traps, compromised account
|
||||
</p>
|
||||
<p className="text-neutral-700">
|
||||
<strong>Solutions:</strong> Check blacklists (MXToolbox, Spamhaus), request delisting, fix underlying
|
||||
issues, consider a new sending domain if severely damaged
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Monitoring */}
|
||||
<section id="monitoring" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Monitoring Email Deliverability</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Track these metrics to stay on top of deliverability:
|
||||
</p>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Delivery Rate</h3>
|
||||
<p className="text-neutral-700">
|
||||
Percentage of emails that didn't bounce. Target: 98%+. Track hard vs soft bounces separately.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Inbox Placement Rate</h3>
|
||||
<p className="text-neutral-700">
|
||||
Percentage of delivered emails that reached the inbox (not spam). Target: 95%+. Use seed list testing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Spam Complaint Rate</h3>
|
||||
<p className="text-neutral-700">
|
||||
Percentage of recipients who mark as spam. Target: <0.1%. Even 0.3% is concerning.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Engagement Metrics</h3>
|
||||
<p className="text-neutral-700">
|
||||
Open rates, click rates, and unsubscribe rates. Sustained low engagement signals poor deliverability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="tip" title="Use DMARC Reports">
|
||||
<p>
|
||||
DMARC aggregate reports show authentication success rates and potential spoofing attempts. Review these
|
||||
weekly to catch deliverability issues early.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Related Guides */}
|
||||
<section id="related-guides" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Related Email Guides</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Link
|
||||
href="/guides/what-is-dkim"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">What is DKIM?</h3>
|
||||
<p className="text-sm text-neutral-600">Learn about DKIM email authentication.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/what-is-spf"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">What is SPF?</h3>
|
||||
<p className="text-sm text-neutral-600">Understand SPF records and sender authorization.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-sender-reputation"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Sender Reputation</h3>
|
||||
<p className="text-sm text-neutral-600">Build and maintain sender reputation.</p>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</GuideLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,549 @@
|
||||
import React from 'react';
|
||||
import {GuideLayout, InfoBox} from '../../components/guides';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function EmailMarketingBestPractices() {
|
||||
return (
|
||||
<GuideLayout
|
||||
title="Email Marketing Best Practices: The Complete Guide"
|
||||
description="Master email marketing with proven best practices for content, design, timing, deliverability, and compliance. Comprehensive guide for 2025."
|
||||
lastUpdated="2025-12-20"
|
||||
readTime="15 min"
|
||||
canonical="https://www.useplunk.com/guides/email-marketing-best-practices"
|
||||
>
|
||||
{/* Introduction */}
|
||||
<section id="introduction" className="mb-12">
|
||||
<p className="text-neutral-700 leading-relaxed">
|
||||
Email marketing remains one of the most effective digital marketing channels, delivering an average ROI of
|
||||
$36-42 for every $1 spent. But success requires following best practices that have evolved with technology,
|
||||
regulations, and user expectations.
|
||||
</p>
|
||||
<p className="mt-4 text-neutral-700 leading-relaxed">
|
||||
This comprehensive guide covers everything you need to know: from building your list to crafting compelling
|
||||
content, optimizing deliverability, and staying compliant with regulations.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* List Building */}
|
||||
<section id="list-building" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Building Your Email List</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
A high-quality email list is the foundation of successful email marketing. Focus on engaged subscribers who
|
||||
genuinely want to hear from you.
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-xl border-2 border-green-200 bg-green-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-green-900 mb-3">✓ Best Practices</h3>
|
||||
<ul className="space-y-3 text-neutral-700">
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-green-600 font-bold mt-1">•</span>
|
||||
<span>
|
||||
<strong>Use double opt-in:</strong> Require subscribers to confirm their email address. This ensures
|
||||
list quality and reduces spam complaints.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-green-600 font-bold mt-1">•</span>
|
||||
<span>
|
||||
<strong>Offer clear value:</strong> Explain what subscribers will receive and how often. "Get weekly
|
||||
tips on [topic]" is better than "Subscribe to our newsletter."
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-green-600 font-bold mt-1">•</span>
|
||||
<span>
|
||||
<strong>Use multiple touchpoints:</strong> Add signup forms on your website, blog, checkout page,
|
||||
social media, and in-person events.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-green-600 font-bold mt-1">•</span>
|
||||
<span>
|
||||
<strong>Provide incentives:</strong> Lead magnets like ebooks, discounts, templates, or exclusive
|
||||
content encourage signups.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-green-600 font-bold mt-1">•</span>
|
||||
<span>
|
||||
<strong>Make forms easy:</strong> Keep signup forms simple—ask only for essential information (usually
|
||||
just email, sometimes name).
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-red-200 bg-red-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-red-900 mb-3">✗ Avoid These Mistakes</h3>
|
||||
<ul className="space-y-3 text-neutral-700">
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-red-600 font-bold mt-1">•</span>
|
||||
<span>
|
||||
<strong>Never buy email lists:</strong> Purchased lists lead to spam complaints, poor engagement, and
|
||||
damaged reputation.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-red-600 font-bold mt-1">•</span>
|
||||
<span>
|
||||
<strong>Don't use pre-checked boxes:</strong> Subscribers must actively opt-in. Pre-checked boxes
|
||||
violate GDPR and reduce engagement.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-red-600 font-bold mt-1">•</span>
|
||||
<span>
|
||||
<strong>Avoid hidden signup terms:</strong> Be transparent about email frequency and content type.
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Content Best Practices */}
|
||||
<section id="content" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Email Content Best Practices</h2>
|
||||
|
||||
<div className="space-y-6 mb-8">
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Craft Compelling Subject Lines</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
Your subject line determines whether emails get opened. Keep them under 50 characters, create curiosity,
|
||||
and be specific about value.
|
||||
</p>
|
||||
<div className="rounded-lg bg-neutral-50 p-4">
|
||||
<p className="text-sm font-semibold text-neutral-900 mb-2">Examples:</p>
|
||||
<ul className="space-y-1 text-sm text-neutral-700">
|
||||
<li>✓ "5 proven strategies to reduce churn by 30%"</li>
|
||||
<li>✓ "Your personalized year-end report is ready"</li>
|
||||
<li>✓ "Last chance: Sale ends tonight at midnight"</li>
|
||||
<li>✗ "Newsletter #47"</li>
|
||||
<li>✗ "Check this out!!!"</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Personalize Beyond First Names</h3>
|
||||
<p className="text-neutral-700">
|
||||
Use behavioral data, purchase history, browsing activity, or preferences. Personalized emails deliver 6x
|
||||
higher transaction rates than generic blasts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Focus on One Primary Goal</h3>
|
||||
<p className="text-neutral-700">
|
||||
Each email should have one clear call-to-action (CTA). Multiple CTAs confuse readers and reduce conversion
|
||||
rates. Guide recipients toward a single action.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Write Scannable Content</h3>
|
||||
<p className="text-neutral-700 mb-3">Most people skim emails. Structure content for easy scanning:</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-neutral-700">
|
||||
<li>Use short paragraphs (2-3 sentences max)</li>
|
||||
<li>Include bullet points and numbered lists</li>
|
||||
<li>Add descriptive subheadings</li>
|
||||
<li>Use white space generously</li>
|
||||
<li>Highlight key points with bold text</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Create Compelling CTAs</h3>
|
||||
<p className="text-neutral-700 mb-3">Effective CTAs are:</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-neutral-700">
|
||||
<li>
|
||||
<strong>Action-oriented:</strong> "Download the guide" not "Click here"
|
||||
</li>
|
||||
<li>
|
||||
<strong>Specific:</strong> "Start your 14-day free trial" not "Get started"
|
||||
</li>
|
||||
<li>
|
||||
<strong>Visually prominent:</strong> Button format with contrasting colors
|
||||
</li>
|
||||
<li>
|
||||
<strong>Urgent when appropriate:</strong> "Claim your discount today"
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">6. Provide Real Value</h3>
|
||||
<p className="text-neutral-700">
|
||||
Every email should benefit the reader. Share insights, solve problems, offer exclusive content, or provide
|
||||
entertainment. Don't just promote—educate and engage.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Design Best Practices */}
|
||||
<section id="design" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Email Design Best Practices</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Mobile-First Design</h3>
|
||||
<p className="text-neutral-700">
|
||||
60%+ of emails are opened on mobile. Use responsive templates, large tap targets (44x44px minimum), and
|
||||
test on multiple devices and email clients.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Optimize Images</h3>
|
||||
<p className="text-neutral-700">
|
||||
Compress images for fast loading, use alt text (many clients block images), and maintain 60/40
|
||||
text-to-image ratio. Never send image-only emails.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Brand Consistency</h3>
|
||||
<p className="text-neutral-700">
|
||||
Use your brand colors, fonts, logo, and voice consistently. Recipients should instantly recognize your
|
||||
emails. Create a template system for efficiency.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Accessible Design</h3>
|
||||
<p className="text-neutral-700">
|
||||
Use sufficient color contrast (4.5:1 minimum), readable font sizes (14px+ for body text), descriptive
|
||||
link text, and semantic HTML for screen readers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Test Across Email Clients</h3>
|
||||
<p className="text-neutral-700">
|
||||
Email rendering varies dramatically across Gmail, Outlook, Apple Mail, etc. Test your designs across
|
||||
major clients before sending to your full list.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Timing & Frequency */}
|
||||
<section id="timing" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Timing & Frequency Best Practices</h2>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 mb-8">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Best Send Times (General)</h3>
|
||||
<ul className="space-y-2 text-neutral-700">
|
||||
<li>
|
||||
<strong>B2B:</strong> Tuesday-Thursday, 10am-11am or 2pm-3pm
|
||||
</li>
|
||||
<li>
|
||||
<strong>B2C:</strong> Varies widely—test evenings and weekends
|
||||
</li>
|
||||
<li>
|
||||
<strong>Avoid:</strong> Monday mornings (inbox overload) and Friday afternoons
|
||||
</li>
|
||||
</ul>
|
||||
<InfoBox type="info" title="Test Your Audience" className="mt-4">
|
||||
<p className="text-sm">
|
||||
These are starting points. Your specific audience may behave differently. A/B test send times and let
|
||||
data guide your strategy.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Email Frequency Guidelines</h3>
|
||||
<ul className="space-y-2 text-neutral-700">
|
||||
<li>
|
||||
<strong>Weekly:</strong> Most common for newsletters and content
|
||||
</li>
|
||||
<li>
|
||||
<strong>2-3x/week:</strong> Works for engaged audiences with fresh content
|
||||
</li>
|
||||
<li>
|
||||
<strong>Daily:</strong> Only for news, deals, or highly engaged communities
|
||||
</li>
|
||||
<li>
|
||||
<strong>Monthly:</strong> Risk of being forgotten; better for curated content
|
||||
</li>
|
||||
</ul>
|
||||
<InfoBox type="warning" title="Monitor Unsubscribes">
|
||||
<p className="text-sm">
|
||||
If unsubscribe rates spike when you increase frequency, you're sending too often. Find the balance.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Segmentation */}
|
||||
<section id="segmentation" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Segmentation & Personalization</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Segmented campaigns generate 30% more opens and 50% more clicks than non-segmented campaigns. Send targeted
|
||||
messages to specific groups rather than blasting your entire list.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Common Segmentation Criteria</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>
|
||||
• <strong>Demographics:</strong> Age, location, job title, company size
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Behavior:</strong> Purchase history, browsing activity, email engagement
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Lifecycle stage:</strong> New subscriber, active customer, churned user
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Engagement level:</strong> Highly engaged vs inactive subscribers
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Preferences:</strong> Product interests, content topics, email frequency
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Purchase recency:</strong> Recent buyers, lapsed customers
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Segment-Specific Campaigns</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Welcome series for new subscribers</li>
|
||||
<li>• Re-engagement campaigns for inactive users</li>
|
||||
<li>• Win-back campaigns for churned customers</li>
|
||||
<li>• Product recommendations based on past purchases</li>
|
||||
<li>• Location-specific offers and events</li>
|
||||
<li>• VIP campaigns for high-value customers</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testing & Optimization */}
|
||||
<section id="testing" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Testing & Optimization</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Continuous testing is essential for improving email performance. Never assume—test and let data guide
|
||||
decisions.
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">What to A/B Test</h3>
|
||||
<ul className="space-y-2 text-neutral-700">
|
||||
<li>
|
||||
• <strong>Subject lines:</strong> Length, personalization, questions vs statements, emojis
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Send times:</strong> Day of week, time of day, time zones
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Content:</strong> Long vs short, text vs image-heavy, tone and style
|
||||
</li>
|
||||
<li>
|
||||
• <strong>CTAs:</strong> Button text, color, placement, number of CTAs
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Sender name:</strong> Company name vs person's name
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Personalization:</strong> Generic vs personalized content
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">A/B Testing Best Practices</h3>
|
||||
<ul className="space-y-2 text-neutral-700">
|
||||
<li>• Test one variable at a time for clear results</li>
|
||||
<li>• Use statistically significant sample sizes (minimum 1,000+ per variant)</li>
|
||||
<li>• Run tests long enough to account for timing variations</li>
|
||||
<li>• Test with random splits, not cherry-picked segments</li>
|
||||
<li>• Implement winners, then test the next variable</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Compliance */}
|
||||
<section id="compliance" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Legal Compliance</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Email marketing is heavily regulated. Non-compliance can result in massive fines and damage to your
|
||||
reputation.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="rounded-xl border-2 border-blue-200 bg-blue-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-blue-900 mb-3">CAN-SPAM (US)</h3>
|
||||
<ul className="space-y-2 text-neutral-700">
|
||||
<li>• Don't use misleading subject lines or headers</li>
|
||||
<li>• Include your physical mailing address</li>
|
||||
<li>• Provide a clear, easy unsubscribe mechanism</li>
|
||||
<li>• Honor unsubscribe requests within 10 business days</li>
|
||||
<li>• Identify the email as an advertisement (if applicable)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-purple-200 bg-purple-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-purple-900 mb-3">GDPR (EU)</h3>
|
||||
<ul className="space-y-2 text-neutral-700">
|
||||
<li>• Obtain explicit consent before sending marketing emails</li>
|
||||
<li>• Provide clear information about data usage</li>
|
||||
<li>• Allow subscribers to access, modify, or delete their data</li>
|
||||
<li>• Keep records of consent</li>
|
||||
<li>• Implement appropriate data security measures</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="warning" title="When in Doubt, Get Consent" className="mt-6">
|
||||
<p>
|
||||
Laws vary by jurisdiction. The safest approach is always to get explicit, documented consent before adding
|
||||
anyone to your email list. Make unsubscribing easy and honor requests immediately.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Metrics to Track */}
|
||||
<section id="metrics" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Key Metrics to Track</h2>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Engagement Metrics</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>
|
||||
• <strong>Open rate:</strong> Industry average: 15-25%
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Click-through rate (CTR):</strong> Industry average: 2-5%
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Click-to-open rate (CTOR):</strong> Clicks ÷ opens
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Conversion rate:</strong> Goal completions ÷ delivered
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Health Metrics</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>
|
||||
• <strong>Bounce rate:</strong> Target: <2%
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Unsubscribe rate:</strong> Target: <0.5%
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Spam complaint rate:</strong> Target: <0.1%
|
||||
</li>
|
||||
<li>
|
||||
• <strong>List growth rate:</strong> New subscribers vs unsubscribes
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Business Metrics</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>
|
||||
• <strong>ROI:</strong> Revenue generated ÷ cost
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Revenue per email:</strong> Total revenue ÷ emails sent
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Customer lifetime value (CLV):</strong> Long-term value
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Cost per acquisition (CPA):</strong> Acquisition cost
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Deliverability Metrics</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>
|
||||
• <strong>Delivery rate:</strong> Target: 98%+
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Inbox placement rate:</strong> Target: 95%+
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Sender reputation score:</strong> Monitor regularly
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Authentication status:</strong> SPF, DKIM, DMARC passing
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Related Guides */}
|
||||
<section id="related-guides" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Related Email Guides</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Link
|
||||
href="/guides/email-deliverability"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Deliverability</h3>
|
||||
<p className="text-sm text-neutral-600">Ensure your emails reach the inbox.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-open-rate"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Open Rates</h3>
|
||||
<p className="text-sm text-neutral-600">Improve your open rates with proven tactics.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-click-through-rate"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Click-Through Rate</h3>
|
||||
<p className="text-sm text-neutral-600">Optimize CTAs for more clicks.</p>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</GuideLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,394 @@
|
||||
import React from 'react';
|
||||
import {GuideLayout, InfoBox} from '../../components/guides';
|
||||
import {CodeBlock} from '../../components/CodeBlock';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function EmailOpenRate() {
|
||||
return (
|
||||
<GuideLayout
|
||||
title="Email Open Rate: Benchmarks, Strategies & Best Practices"
|
||||
description="Learn what affects email open rates, industry benchmarks, and proven tactics to improve opens. Complete guide with actionable tips."
|
||||
lastUpdated="2025-12-20"
|
||||
readTime="10 min"
|
||||
canonical="https://www.useplunk.com/guides/email-open-rate"
|
||||
>
|
||||
{/* Introduction */}
|
||||
<section id="introduction" className="mb-12">
|
||||
<p className="text-neutral-700 leading-relaxed">
|
||||
Email open rate measures the percentage of recipients who open your email. It's one of the most important
|
||||
email marketing metrics, indicating how well your subject lines, sender name, and send timing resonate with
|
||||
your audience.
|
||||
</p>
|
||||
<p className="mt-4 text-neutral-700 leading-relaxed">
|
||||
While recent privacy changes have affected open rate accuracy, it remains a valuable metric for understanding
|
||||
email performance and audience engagement.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* What is Open Rate */}
|
||||
<section id="what-is-open-rate" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What is Email Open Rate?</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Open rate is calculated by dividing the number of unique opens by the number of delivered emails (sent emails
|
||||
minus bounces).
|
||||
</p>
|
||||
|
||||
<div className="rounded-xl border-2 border-neutral-900 bg-neutral-50 p-8 mb-8">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-neutral-900 mb-4">Open Rate Formula</div>
|
||||
<CodeBlock
|
||||
language="text"
|
||||
code={`Open Rate = (Unique Opens ÷ Emails Delivered) × 100
|
||||
|
||||
Example:
|
||||
- Sent: 1,000 emails
|
||||
- Bounced: 50 emails
|
||||
- Delivered: 950 emails
|
||||
- Unique Opens: 285
|
||||
|
||||
Open Rate = (285 ÷ 950) × 100 = 30%`}
|
||||
showCopy={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="info" title="Unique vs Total Opens">
|
||||
<p>
|
||||
<strong>Unique opens</strong> count each recipient only once, even if they open multiple times.{' '}
|
||||
<strong>Total opens</strong> count every open. Always use unique opens for open rate calculations to avoid
|
||||
inflated metrics.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Benchmarks */}
|
||||
<section id="benchmarks" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Email Open Rate Benchmarks by Industry</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Open rates vary significantly by industry, audience, and email type:
|
||||
</p>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 overflow-hidden mb-8">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold">Industry</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold">Average Open Rate</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold">Good Open Rate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-neutral-200 bg-white">
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm text-neutral-900">SaaS / Technology</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">20-25%</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">30%+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm text-neutral-900">E-commerce / Retail</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">15-20%</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">25%+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm text-neutral-900">Financial Services</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">18-23%</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">28%+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm text-neutral-900">Healthcare</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">20-25%</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">30%+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm text-neutral-900">Education</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">22-28%</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">33%+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm text-neutral-900">Media / Publishing</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">18-23%</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">28%+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm text-neutral-900">Non-Profit</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">24-30%</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">35%+</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<InfoBox type="warning" title="Post-Apple MPP Benchmarks">
|
||||
<p>
|
||||
Since Apple Mail Privacy Protection launched in 2021, industry-wide open rates have increased by 5-15
|
||||
percentage points. Compare against your own historical data rather than relying solely on industry
|
||||
benchmarks.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Factors Affecting */}
|
||||
<section id="factors" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What Affects Email Open Rates?</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Subject Line</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
Your subject line is the #1 factor. It must be compelling, relevant, and create curiosity without being
|
||||
clickbait. Personalization and specificity improve opens.
|
||||
</p>
|
||||
<div className="rounded-lg bg-neutral-50 p-4 space-y-2">
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-green-600 font-bold">✓</span>
|
||||
<span className="text-sm text-neutral-700">
|
||||
"John, your invoice is ready" (personal, specific, clear)
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-green-600 font-bold">✓</span>
|
||||
<span className="text-sm text-neutral-700">
|
||||
"3 proven ways to increase conversion rates" (specific value)
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-red-600 font-bold">✗</span>
|
||||
<span className="text-sm text-neutral-700">"You won't believe this!" (clickbait, vague)</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-red-600 font-bold">✗</span>
|
||||
<span className="text-sm text-neutral-700">"Newsletter #47" (generic, uninteresting)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Sender Name</h3>
|
||||
<p className="text-neutral-700">
|
||||
Recipients decide whether to open based on who it's from. Use a recognizable name—either your brand or a
|
||||
person from your company. "Company Name" or "John from Company" work better than "noreply@company.com".
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Send Time & Day</h3>
|
||||
<p className="text-neutral-700">
|
||||
Timing impacts visibility. B2B emails typically perform best Tuesday-Thursday, 10am-2pm. B2C varies more
|
||||
by audience—test evenings and weekends. Avoid Monday mornings and Friday afternoons.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. List Quality & Segmentation</h3>
|
||||
<p className="text-neutral-700">
|
||||
Engaged subscribers open more. Segmenting by behavior, interests, or demographics ensures relevance.
|
||||
Inactive subscribers drag down open rates—consider re-engagement or removal.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Deliverability & Sender Reputation</h3>
|
||||
<p className="text-neutral-700">
|
||||
If emails land in spam, they won't be opened. Maintain good sender reputation through proper
|
||||
authentication (SPF, DKIM, DMARC), low spam complaints, and high engagement.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">6. Email Frequency</h3>
|
||||
<p className="text-neutral-700">
|
||||
Too frequent leads to fatigue and unsubscribes. Too infrequent and subscribers forget you. Find the sweet
|
||||
spot for your audience—typically 1-4 emails per week for marketing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">7. Mobile Optimization</h3>
|
||||
<p className="text-neutral-700">
|
||||
60%+ of emails are opened on mobile. Use short subject lines (40-50 characters), clear preview text, and
|
||||
mobile-responsive design to improve mobile open rates.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How to Improve */}
|
||||
<section id="improve-open-rates" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How to Improve Email Open Rates</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Write Compelling Subject Lines</h3>
|
||||
<p className="text-neutral-700">
|
||||
Test different approaches: questions, personalization, numbers, urgency (without being spammy). Keep
|
||||
them under 50 characters. A/B test to find what resonates with your audience.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Personalize Beyond First Names</h3>
|
||||
<p className="text-neutral-700">
|
||||
Use behavioral data, past purchases, browsing history, or location. "Products you recently viewed" or
|
||||
"Based on your interest in [topic]" outperform generic blasts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Segment Your Audience</h3>
|
||||
<p className="text-neutral-700">
|
||||
Send targeted emails to specific groups based on engagement level, purchase history, demographics, or
|
||||
interests. Segmented campaigns see 14-100% higher open rates than non-segmented.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Optimize Preview Text</h3>
|
||||
<p className="text-neutral-700">
|
||||
Preview text appears next to the subject line. Use it to complement your subject, add context, or create
|
||||
additional curiosity. Don't let it default to "View this email in your browser".
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Clean Your Email List Regularly</h3>
|
||||
<p className="text-neutral-700">
|
||||
Remove subscribers who haven't engaged in 6-12 months. While this reduces list size, it dramatically
|
||||
improves open rates and sender reputation. Quality over quantity.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Test Send Times</h3>
|
||||
<p className="text-neutral-700">
|
||||
Run A/B tests sending the same email at different times. Track when your specific audience is most
|
||||
responsive. Send time optimization can improve opens by 20-50%.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
7
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Re-engage Inactive Subscribers</h3>
|
||||
<p className="text-neutral-700">
|
||||
Before removing inactive users, send a re-engagement campaign: "We miss you" or "Still interested?"
|
||||
emails with special offers. Remove those who still don't engage.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
8
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Use a Recognizable Sender Name</h3>
|
||||
<p className="text-neutral-700">
|
||||
Build consistency with your sender name. People are more likely to open emails from names they
|
||||
recognize. Avoid changing it frequently.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Apple MPP Impact */}
|
||||
<section id="apple-mpp" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Apple Mail Privacy Protection Impact</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Since iOS 15, Apple Mail Privacy Protection pre-loads email images and tracking pixels, making open tracking
|
||||
less reliable for Apple Mail users.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="rounded-xl border-2 border-amber-200 bg-amber-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-amber-900 mb-3">What Changed</h3>
|
||||
<ul className="space-y-2 text-neutral-700">
|
||||
<li>• Apple Mail pre-loads all images automatically</li>
|
||||
<li>• Opens are registered even if user never sees email</li>
|
||||
<li>• 30-50% of email lists use Apple Mail</li>
|
||||
<li>• Open rates appear 5-15% higher than reality</li>
|
||||
<li>• Open-based automation is less accurate</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-blue-200 bg-blue-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-blue-900 mb-3">How to Adapt</h3>
|
||||
<ul className="space-y-2 text-neutral-700">
|
||||
<li>• Focus on click rates as primary engagement metric</li>
|
||||
<li>• Track conversions and replies, not just opens</li>
|
||||
<li>• Use multi-touch attribution</li>
|
||||
<li>• Compare your own historical data, not industry averages</li>
|
||||
<li>• Segment by email client to understand true engagement</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="tip" title="Beyond Open Rates">
|
||||
<p>
|
||||
With less reliable open tracking, prioritize metrics like click-through rate, conversion rate, reply rate,
|
||||
and revenue per email. These better indicate true engagement and ROI.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Related Guides */}
|
||||
<section id="related-guides" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Related Email Guides</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Link
|
||||
href="/guides/email-click-through-rate"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Click-Through Rate</h3>
|
||||
<p className="text-sm text-neutral-600">Optimize CTAs and improve email clicks.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-deliverability"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Deliverability</h3>
|
||||
<p className="text-sm text-neutral-600">Reach the inbox to maximize opens.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-marketing-best-practices"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Marketing Best Practices</h3>
|
||||
<p className="text-sm text-neutral-600">Complete email marketing strategy guide.</p>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</GuideLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,580 @@
|
||||
import React from 'react';
|
||||
import {GuideLayout, InfoBox} from '../../components/guides';
|
||||
import {CodeBlock} from '../../components/CodeBlock';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function EmailSenderReputation() {
|
||||
return (
|
||||
<GuideLayout
|
||||
title="Email Sender Reputation: Build & Maintain Trust for Better Deliverability"
|
||||
description="Learn how sender reputation works, what affects it, and proven strategies to build and maintain a positive reputation for maximum deliverability."
|
||||
lastUpdated="2025-12-20"
|
||||
readTime="11 min"
|
||||
canonical="https://www.useplunk.com/guides/email-sender-reputation"
|
||||
>
|
||||
{/* Introduction */}
|
||||
<section id="introduction" className="mb-12">
|
||||
<p className="text-neutral-700 leading-relaxed">
|
||||
Email sender reputation is your sending domain and IP address's trustworthiness score in the eyes of email
|
||||
providers. It's the single most important factor determining whether your emails reach the inbox or spam
|
||||
folder.
|
||||
</p>
|
||||
<p className="mt-4 text-neutral-700 leading-relaxed">
|
||||
Think of it like a credit score for email: good reputation = inbox placement, bad reputation = spam folder or
|
||||
blocked delivery. This guide explains how reputation works and how to build and maintain it.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* What is Sender Reputation */}
|
||||
<section id="what-is-reputation" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What is Email Sender Reputation?</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Sender reputation is a score (typically 0-100) that email providers (Gmail, Outlook, Yahoo) assign to your
|
||||
sending domain and IP address. It's calculated based on your sending history, engagement rates, spam
|
||||
complaints, authentication, and list quality.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-3 mb-8">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="text-3xl font-bold text-green-600 mb-2">80-100</div>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Excellent</h3>
|
||||
<p className="text-sm text-neutral-700">
|
||||
Strong inbox placement, trusted sender, high engagement, proper authentication
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="text-3xl font-bold text-amber-600 mb-2">50-79</div>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Moderate</h3>
|
||||
<p className="text-sm text-neutral-700">Some emails may reach spam, mixed signals, needs improvement</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="text-3xl font-bold text-red-600 mb-2"><50</div>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Poor</h3>
|
||||
<p className="text-sm text-neutral-700">Most emails go to spam or blocked, serious deliverability issues</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="info" title="Domain vs IP Reputation">
|
||||
<p>
|
||||
Email providers track reputation for both your <strong>sending domain</strong> (yourdomain.com) and{' '}
|
||||
<strong>IP address</strong>. Both matter. Domain reputation is more permanent, while IP reputation can be
|
||||
changed by switching IPs (though you have to rebuild it).
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Factors Affecting Reputation */}
|
||||
<section id="factors" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What Affects Sender Reputation?</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Spam Complaint Rate</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
<strong>Impact: Critical.</strong> When recipients mark your emails as spam, it severely damages
|
||||
reputation. Target: <0.1% (1 complaint per 1,000 emails). Even 0.3% is concerning.
|
||||
</p>
|
||||
<p className="text-sm text-neutral-600">
|
||||
Prevention: Only send to opted-in subscribers, provide value, make unsubscribing easy.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Engagement Metrics</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
<strong>Impact: Very High.</strong> Email providers track opens, clicks, replies, forwards, and deletes.
|
||||
High engagement signals that recipients want your emails. Low engagement suggests spam.
|
||||
</p>
|
||||
<p className="text-sm text-neutral-600">
|
||||
Boost engagement: Send relevant, valuable content to interested subscribers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Bounce Rate</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
<strong>Impact: High.</strong> High bounce rates (especially hard bounces) indicate poor list hygiene,
|
||||
purchased lists, or spam traps. Target: <2% overall bounce rate.
|
||||
</p>
|
||||
<p className="text-sm text-neutral-600">
|
||||
Prevent bounces: Use double opt-in, validate emails, remove hard bounces immediately.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Email Authentication</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
<strong>Impact: High.</strong> Proper SPF, DKIM, and DMARC authentication proves your emails are
|
||||
legitimate. Missing authentication raises red flags.
|
||||
</p>
|
||||
<p className="text-sm text-neutral-600">
|
||||
Required: Implement all three authentication protocols (SPF, DKIM, DMARC).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Spam Trap Hits</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
<strong>Impact: Critical.</strong> Spam traps are email addresses used to catch senders with poor
|
||||
practices. Hitting spam traps can get you blacklisted instantly.
|
||||
</p>
|
||||
<p className="text-sm text-neutral-600">
|
||||
Avoid: Never buy lists, use double opt-in, clean old addresses regularly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">6. Sending Volume & Consistency</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
<strong>Impact: Moderate.</strong> Sudden spikes in volume look suspicious. Inconsistent sending (long
|
||||
gaps, then huge blasts) damages reputation.
|
||||
</p>
|
||||
<p className="text-sm text-neutral-600">
|
||||
Best practice: Send consistently and gradually increase volume over time (warm-up).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">7. Content Quality</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
<strong>Impact: Moderate.</strong> Spammy content (excessive links, misleading subject lines, all caps)
|
||||
triggers filters and reduces engagement.
|
||||
</p>
|
||||
<p className="text-sm text-neutral-600">
|
||||
Write naturally: Professional, valuable content that matches subject line promises.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">8. Blacklist Status</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
<strong>Impact: Critical.</strong> Being listed on major blacklists (Spamhaus, Barracuda, SURBL) can block
|
||||
delivery to entire domains.
|
||||
</p>
|
||||
<p className="text-sm text-neutral-600">
|
||||
Monitor: Regularly check blacklist status and request delisting if listed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">9. Sending History</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
<strong>Impact: Cumulative.</strong> Reputation is built over time. New domains/IPs have no history (zero
|
||||
reputation) and need to be warmed up gradually.
|
||||
</p>
|
||||
<p className="text-sm text-neutral-600">
|
||||
For new senders: Start with small volumes and gradually increase over 4-8 weeks.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Building Reputation */}
|
||||
<section id="building" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How to Build Sender Reputation</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Building reputation from scratch (new domain or IP) requires patience and best practices:
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Warm Up New IPs and Domains</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
Gradually increase sending volume over 4-8 weeks. Start with your most engaged subscribers.
|
||||
</p>
|
||||
<CodeBlock
|
||||
language="text"
|
||||
title="Example Warm-Up Schedule"
|
||||
code={`Week 1: 200-500 emails/day
|
||||
Week 2: 500-1,000 emails/day
|
||||
Week 3: 1,000-5,000 emails/day
|
||||
Week 4: 5,000-10,000 emails/day
|
||||
Week 5: 10,000-20,000 emails/day
|
||||
Week 6: 20,000-50,000 emails/day
|
||||
Week 7: 50,000-100,000 emails/day
|
||||
Week 8+: Full volume
|
||||
|
||||
Adjust based on engagement and bounce rates.`}
|
||||
showCopy={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Start with Highly Engaged Subscribers</h3>
|
||||
<p className="text-neutral-700">
|
||||
During warm-up, send only to subscribers who recently opened or clicked. High engagement in early sends
|
||||
establishes positive reputation quickly.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Implement Full Authentication</h3>
|
||||
<p className="text-neutral-700">
|
||||
Set up SPF, DKIM, and DMARC before sending. Proper authentication is table stakes for building
|
||||
reputation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Maintain Consistent Sending</h3>
|
||||
<p className="text-neutral-700">
|
||||
Send regularly (daily or weekly) rather than sporadic blasts. Consistency builds trust with email
|
||||
providers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Use Double Opt-In</h3>
|
||||
<p className="text-neutral-700">
|
||||
Require email confirmation before adding subscribers. This ensures list quality and prevents spam trap
|
||||
addresses from the start.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Monitor Metrics Closely</h3>
|
||||
<p className="text-neutral-700">
|
||||
Track bounce rate, spam complaints, and engagement during warm-up. If metrics degrade, slow down volume
|
||||
increases and improve list quality.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
7
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Provide Immediate Value</h3>
|
||||
<p className="text-neutral-700">
|
||||
Your first emails set the tone. Deliver on promises made during signup. High engagement on early emails
|
||||
accelerates reputation building.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Maintaining Reputation */}
|
||||
<section id="maintaining" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Maintaining Good Sender Reputation</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Once built, reputation requires ongoing attention:
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Clean Your List Regularly</h3>
|
||||
<p className="text-neutral-700 mb-3">Remove or re-engage inactive subscribers every 6-12 months:</p>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Send re-engagement campaigns to inactive subscribers</li>
|
||||
<li>• Remove those who don't re-engage</li>
|
||||
<li>• Immediately remove hard bounces</li>
|
||||
<li>• Remove persistent soft bouncers (3-5 bounces)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Make Unsubscribing Easy</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
Paradoxically, easy unsubscribes protect reputation. Frustrated users who can't unsubscribe mark as spam
|
||||
instead, which is far worse.
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Include clear, one-click unsubscribe in every email</li>
|
||||
<li>• Process unsubscribes immediately (don't require confirmation)</li>
|
||||
<li>• Honor unsubscribes permanently</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Monitor Reputation Metrics</h3>
|
||||
<p className="text-neutral-700 mb-3">Track these indicators weekly:</p>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Delivery rate (target: 98%+)</li>
|
||||
<li>• Spam complaint rate (target: <0.1%)</li>
|
||||
<li>• Bounce rate (target: <2%)</li>
|
||||
<li>• Engagement rates (opens, clicks)</li>
|
||||
<li>• Blacklist status (monthly checks)</li>
|
||||
<li>• Sender Score (check quarterly)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Segment and Personalize</h3>
|
||||
<p className="text-neutral-700">
|
||||
Send targeted, relevant emails to specific subscriber groups. Segmentation dramatically improves
|
||||
engagement, which protects reputation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">
|
||||
Use Separate Domains for Different Email Types
|
||||
</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
Protect critical transactional email reputation by separating from marketing:
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Transactional: transact.yourdomain.com</li>
|
||||
<li>• Marketing: news.yourdomain.com or marketing.yourdomain.com</li>
|
||||
<li>• Benefits: Marketing issues won't affect mission-critical transactional emails</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Recovering Damaged Reputation */}
|
||||
<section id="recovery" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Recovering from Damaged Reputation</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
If your reputation suffers, recovery is possible but takes time and discipline:
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-amber-50 border border-amber-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-amber-900 mb-2">Identify the Root Cause</h3>
|
||||
<p className="text-neutral-700">
|
||||
Review recent campaigns for spam complaints, high bounces, poor engagement. Check if you're blacklisted.
|
||||
Find and fix the underlying issue.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-amber-50 border border-amber-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-amber-900 mb-2">Clean Your List Aggressively</h3>
|
||||
<p className="text-neutral-700">
|
||||
Remove all unengaged subscribers, bounced addresses, and anyone who hasn't opened in 6+ months. Yes,
|
||||
your list shrinks, but quality beats quantity for reputation recovery.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-amber-50 border border-amber-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-amber-900 mb-2">Reduce Volume Temporarily</h3>
|
||||
<p className="text-neutral-700">
|
||||
Cut sending volume by 50-70% while you fix issues. Send only to highly engaged subscribers. Rebuild
|
||||
trust before scaling back up.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-amber-50 border border-amber-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-amber-900 mb-2">Request Blacklist Removal</h3>
|
||||
<p className="text-neutral-700">
|
||||
If blacklisted, identify which lists, fix the underlying issues, then request delisting. Most blacklists
|
||||
have removal request processes. Be honest about what you fixed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-amber-50 border border-amber-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-amber-900 mb-2">Send Valuable, Engaging Content</h3>
|
||||
<p className="text-neutral-700">
|
||||
Recovery requires proving you send emails people want. Focus on value, not promotions. High engagement
|
||||
signals to providers that you've reformed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-amber-50 border border-amber-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-amber-900 mb-2">Be Patient</h3>
|
||||
<p className="text-neutral-700">
|
||||
Reputation recovery typically takes 4-12 weeks of consistently good behavior. Monitor metrics closely
|
||||
and don't rush back to high volumes before reputation improves.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="warning" title="Severe Damage May Require Starting Fresh" className="mt-6">
|
||||
<p>
|
||||
If reputation is severely damaged (sender score <30, multiple blacklistings, blocked by major providers),
|
||||
recovery may be impractical. Consider migrating to a new subdomain or IP and starting reputation from
|
||||
scratch. This is a last resort.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Monitoring Tools */}
|
||||
<section id="monitoring" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Reputation Monitoring Tools</h2>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Google Postmaster Tools</h3>
|
||||
<p className="text-sm text-neutral-700 mb-3">
|
||||
Free tool showing domain reputation, spam rate, authentication, and encryption for Gmail delivery.
|
||||
</p>
|
||||
<a
|
||||
href="https://postmaster.google.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-600 hover:underline"
|
||||
>
|
||||
postmaster.google.com →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Microsoft SNDS</h3>
|
||||
<p className="text-sm text-neutral-700 mb-3">
|
||||
Smart Network Data Services provides data on how Microsoft views your IPs, including spam complaints.
|
||||
</p>
|
||||
<a
|
||||
href="https://sendersupport.olc.protection.outlook.com/snds/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-600 hover:underline"
|
||||
>
|
||||
Microsoft SNDS →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Sender Score (Validity)</h3>
|
||||
<p className="text-sm text-neutral-700 mb-3">
|
||||
Free sender reputation score (0-100) based on industry data. Widely used benchmark for IP reputation.
|
||||
</p>
|
||||
<a
|
||||
href="https://www.validity.com/everest/senderscore/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-600 hover:underline"
|
||||
>
|
||||
Check Sender Score →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">MXToolbox Blacklist Check</h3>
|
||||
<p className="text-sm text-neutral-700 mb-3">
|
||||
Check if your domain or IP is on major blacklists. Monitor regularly to catch listings early.
|
||||
</p>
|
||||
<a
|
||||
href="https://mxtoolbox.com/blacklists.aspx"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-600 hover:underline"
|
||||
>
|
||||
MXToolbox →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Talos Intelligence</h3>
|
||||
<p className="text-sm text-neutral-700 mb-3">
|
||||
Cisco Talos provides sender reputation data. Check your IP's reputation and request delisting if needed.
|
||||
</p>
|
||||
<a
|
||||
href="https://talosintelligence.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-600 hover:underline"
|
||||
>
|
||||
Talos Intelligence →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">BarracudaCentral</h3>
|
||||
<p className="text-sm text-neutral-700 mb-3">
|
||||
Check reputation and blacklist status on Barracuda's network. Important for enterprise email delivery.
|
||||
</p>
|
||||
<a
|
||||
href="https://www.barracudacentral.org/lookups"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-600 hover:underline"
|
||||
>
|
||||
BarracudaCentral →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Related Guides */}
|
||||
<section id="related-guides" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Related Email Guides</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Link
|
||||
href="/guides/email-deliverability"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Deliverability</h3>
|
||||
<p className="text-sm text-neutral-600">Complete deliverability guide.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-bounce-rate"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Bounce Rate</h3>
|
||||
<p className="text-sm text-neutral-600">Reduce bounces to protect reputation.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/what-is-dkim"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">What is DKIM?</h3>
|
||||
<p className="text-sm text-neutral-600">Email authentication for better reputation.</p>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</GuideLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,266 @@
|
||||
import {Footer, Navbar} from '../../components';
|
||||
import {motion} from 'framer-motion';
|
||||
import {DASHBOARD_URI} from '../../lib/constants';
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import {NextSeo} from 'next-seo';
|
||||
import {ArrowRight, Book, Code, Mail, Shield, TrendingUp, Users} from 'lucide-react';
|
||||
|
||||
interface Guide {
|
||||
title: string;
|
||||
description: string;
|
||||
href: string;
|
||||
icon: React.ComponentType<{className?: string}>;
|
||||
badge?: string;
|
||||
}
|
||||
|
||||
const guides: Guide[] = [
|
||||
{
|
||||
title: 'What is DKIM?',
|
||||
description: 'Learn how DKIM email authentication works and why it matters for deliverability.',
|
||||
href: '/guides/what-is-dkim',
|
||||
icon: Shield,
|
||||
badge: 'Authentication',
|
||||
},
|
||||
{
|
||||
title: 'What is SPF?',
|
||||
description: 'Understand SPF records and how they protect your emails from spoofing.',
|
||||
href: '/guides/what-is-spf',
|
||||
icon: Shield,
|
||||
badge: 'Authentication',
|
||||
},
|
||||
{
|
||||
title: 'What is DMARC?',
|
||||
description: 'Complete guide to DMARC policies and email security best practices.',
|
||||
href: '/guides/what-is-dmarc',
|
||||
icon: Shield,
|
||||
badge: 'Authentication',
|
||||
},
|
||||
{
|
||||
title: 'Email Deliverability Guide',
|
||||
description: 'Improve your email deliverability with best practices and proven strategies.',
|
||||
href: '/guides/email-deliverability',
|
||||
icon: TrendingUp,
|
||||
badge: 'Deliverability',
|
||||
},
|
||||
{
|
||||
title: 'Email Open Rates',
|
||||
description: 'Industry benchmarks and strategies to improve your email open rates.',
|
||||
href: '/guides/email-open-rate',
|
||||
icon: Mail,
|
||||
badge: 'Analytics',
|
||||
},
|
||||
{
|
||||
title: 'Email Marketing Best Practices',
|
||||
description: 'Comprehensive guide to email marketing: timing, content, design, and more.',
|
||||
href: '/guides/email-marketing-best-practices',
|
||||
icon: Book,
|
||||
badge: 'Best Practices',
|
||||
},
|
||||
{
|
||||
title: 'Email Bounce Rate',
|
||||
description: 'Understand hard vs soft bounces and how to reduce your bounce rate.',
|
||||
href: '/guides/email-bounce-rate',
|
||||
icon: TrendingUp,
|
||||
badge: 'Deliverability',
|
||||
},
|
||||
{
|
||||
title: 'Email Click-Through Rate',
|
||||
description: 'Optimize your CTAs and improve email click-through rates.',
|
||||
href: '/guides/email-click-through-rate',
|
||||
icon: Mail,
|
||||
badge: 'Analytics',
|
||||
},
|
||||
{
|
||||
title: 'Transactional vs Marketing Email',
|
||||
description: 'Understand the legal and technical differences between email types.',
|
||||
href: '/guides/transactional-vs-marketing-email',
|
||||
icon: Book,
|
||||
badge: 'Fundamentals',
|
||||
},
|
||||
{
|
||||
title: 'Email API Guide',
|
||||
description: 'Everything you need to know about email APIs with code examples.',
|
||||
href: '/guides/email-api-guide',
|
||||
icon: Code,
|
||||
badge: 'Technical',
|
||||
},
|
||||
{
|
||||
title: 'Email Sender Reputation',
|
||||
description: 'Build and maintain a positive sender reputation for better deliverability.',
|
||||
href: '/guides/email-sender-reputation',
|
||||
icon: Users,
|
||||
badge: 'Deliverability',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Email Guides hub page
|
||||
*/
|
||||
export default function GuidesIndex() {
|
||||
return (
|
||||
<>
|
||||
<NextSeo
|
||||
title="Email Marketing & Deliverability Guides | Plunk"
|
||||
description="Learn email best practices, authentication (DKIM, SPF, DMARC), deliverability optimization, and more. Free guides from Plunk."
|
||||
canonical="https://www.useplunk.com/guides"
|
||||
openGraph={{
|
||||
title: 'Email Marketing & Deliverability Guides | Plunk',
|
||||
description:
|
||||
'Learn email best practices, authentication (DKIM, SPF, DMARC), deliverability optimization, and more.',
|
||||
url: 'https://www.useplunk.com/guides',
|
||||
images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk Guides'}],
|
||||
}}
|
||||
/>
|
||||
|
||||
<Navbar />
|
||||
|
||||
<main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
|
||||
{/* Hero Section */}
|
||||
<section className={'relative py-32 sm:py-48'}>
|
||||
<div
|
||||
className={
|
||||
'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]'
|
||||
}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'mx-auto max-w-4xl text-center'}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
'mb-6 inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-4 py-2'
|
||||
}
|
||||
>
|
||||
<Book className="h-4 w-4 text-neutral-600" />
|
||||
<span className={'text-sm text-neutral-600'}>Free Email Guides</span>
|
||||
</div>
|
||||
|
||||
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
|
||||
Master email
|
||||
<br />
|
||||
marketing & deliverability
|
||||
</h1>
|
||||
|
||||
<p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
|
||||
Free guides on email authentication, deliverability, best practices, and technical implementation. Learn
|
||||
from the experts.
|
||||
</p>
|
||||
|
||||
<div className={'mt-12 flex flex-wrap justify-center gap-4'}>
|
||||
<motion.a
|
||||
whileHover={{scale: 1.02}}
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-lg shadow-neutral-900/10 transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Try Plunk free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Guides Grid */}
|
||||
<section className={'py-32'}>
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'mb-16 text-center'}
|
||||
>
|
||||
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Browse all guides</h2>
|
||||
<p className={'mt-4 text-lg text-neutral-600'}>Everything you need to master email</p>
|
||||
</motion.div>
|
||||
|
||||
<div className={'grid gap-6 sm:grid-cols-2 lg:grid-cols-3'}>
|
||||
{guides.map((guide, index) => {
|
||||
const Icon = guide.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={guide.href}
|
||||
initial={{opacity: 0, y: 20}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.5, delay: index * 0.05, ease: [0.22, 1, 0.36, 1]}}
|
||||
>
|
||||
<Link
|
||||
href={guide.href}
|
||||
className={
|
||||
'group block h-full rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg'
|
||||
}
|
||||
>
|
||||
<div className={'flex items-start justify-between mb-4'}>
|
||||
<div
|
||||
className={
|
||||
'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
|
||||
}
|
||||
>
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
{guide.badge && (
|
||||
<span className={'rounded-full bg-neutral-100 px-3 py-1 text-xs font-medium text-neutral-700'}>
|
||||
{guide.badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<h3 className={'text-xl font-semibold text-neutral-900 mb-2 group-hover:text-neutral-700'}>
|
||||
{guide.title}
|
||||
</h3>
|
||||
<p className={'text-sm text-neutral-600 leading-relaxed'}>{guide.description}</p>
|
||||
</Link>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className={'border-t border-neutral-200 py-32'}>
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'mx-auto max-w-3xl text-center'}
|
||||
>
|
||||
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Ready to get started?</h2>
|
||||
<p className={'mt-6 text-lg text-neutral-600'}>
|
||||
Put these guides into practice with Plunk's modern email platform. Start free, no credit card required.
|
||||
</p>
|
||||
<div className={'mt-12 flex flex-wrap justify-center gap-4'}>
|
||||
<motion.a
|
||||
whileHover={{scale: 1.02}}
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
</motion.a>
|
||||
<Link
|
||||
href="/pricing"
|
||||
className={
|
||||
'rounded-lg border border-neutral-300 px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'
|
||||
}
|
||||
>
|
||||
View pricing
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,539 @@
|
||||
import React from 'react';
|
||||
import {GuideLayout, InfoBox} from '../../components/guides';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function TransactionalVsMarketingEmail() {
|
||||
return (
|
||||
<GuideLayout
|
||||
title="Transactional vs Marketing Email: Legal & Technical Differences"
|
||||
description="Understand the critical differences between transactional and marketing emails, including legal requirements, deliverability, and best practices."
|
||||
lastUpdated="2025-12-20"
|
||||
readTime="10 min"
|
||||
canonical="https://www.useplunk.com/guides/transactional-vs-marketing-email"
|
||||
>
|
||||
{/* Introduction */}
|
||||
<section id="introduction" className="mb-12">
|
||||
<p className="text-neutral-700 leading-relaxed">
|
||||
Not all emails are created equal. Transactional and marketing emails serve different purposes, follow
|
||||
different legal rules, and require different strategies. Understanding these differences is essential for
|
||||
compliance, deliverability, and effective email communication.
|
||||
</p>
|
||||
<p className="mt-4 text-neutral-700 leading-relaxed">
|
||||
This guide explains the key distinctions, legal requirements, and best practices for each email type.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Quick Comparison */}
|
||||
<section id="comparison" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Quick Comparison</h2>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold">Aspect</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold">Transactional Email</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold">Marketing Email</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-neutral-200 bg-white">
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm font-semibold text-neutral-900">Purpose</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Facilitate transaction or provide service info</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Promote products, services, or content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm font-semibold text-neutral-900">Trigger</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">User action or system event</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Scheduled or campaign-based</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm font-semibold text-neutral-900">Consent Required</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">No (expected as part of service)</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Yes (explicit opt-in required)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm font-semibold text-neutral-900">Unsubscribe Link</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Not required</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Required by law</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm font-semibold text-neutral-900">Open Rate</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">60-80% (very high)</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">15-25% (average)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 text-sm font-semibold text-neutral-900">Volume</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Lower, event-based</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Higher, scheduled campaigns</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Transactional Email */}
|
||||
<section id="transactional" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What is Transactional Email?</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Transactional emails are automated messages sent in response to a user's action or system event. They contain
|
||||
information the user needs or expects to facilitate a transaction or use a service.
|
||||
</p>
|
||||
|
||||
<div className="mb-8">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Common Types of Transactional Emails</h3>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Account & Authentication</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Welcome emails after signup</li>
|
||||
<li>• Email verification/confirmation</li>
|
||||
<li>• Password reset requests</li>
|
||||
<li>• Login notifications</li>
|
||||
<li>• Two-factor authentication codes</li>
|
||||
<li>• Account deletion confirmations</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Commerce & Transactions</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Order confirmations</li>
|
||||
<li>• Shipping notifications</li>
|
||||
<li>• Delivery updates</li>
|
||||
<li>• Payment receipts</li>
|
||||
<li>• Refund confirmations</li>
|
||||
<li>• Invoice emails</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Notifications & Alerts</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Activity notifications</li>
|
||||
<li>• Comment or mention alerts</li>
|
||||
<li>• Security alerts</li>
|
||||
<li>• System status updates</li>
|
||||
<li>• Subscription renewals</li>
|
||||
<li>• Trial expiration notices</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Account Management</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Billing statements</li>
|
||||
<li>• Usage reports</li>
|
||||
<li>• Account updates</li>
|
||||
<li>• Plan changes</li>
|
||||
<li>• Subscription confirmations</li>
|
||||
<li>• Account deactivation notices</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Transactional Email Best Practices</h3>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Send Immediately</h4>
|
||||
<p className="text-neutral-700">
|
||||
Transactional emails should be sent within seconds or minutes of the triggering action. Users expect
|
||||
instant confirmation—delays cause anxiety and support tickets.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Prioritize Clarity & Accuracy</h4>
|
||||
<p className="text-neutral-700">
|
||||
Include all critical information: order numbers, amounts, dates, tracking links. Be precise—errors in
|
||||
transactional emails damage trust significantly.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Use Descriptive Subject Lines</h4>
|
||||
<p className="text-neutral-700">
|
||||
Make subject lines scannable and specific: "Your order #12345 has shipped" not "Update from
|
||||
YourCompany". Users should know what the email contains at a glance.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Minimize Promotional Content</h4>
|
||||
<p className="text-neutral-700">
|
||||
The primary content must be transactional. Small promotional sections (cross-sells, upsells) are
|
||||
acceptable at the bottom, but don't turn order confirmations into marketing emails.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Ensure High Deliverability</h4>
|
||||
<p className="text-neutral-700">
|
||||
Use a dedicated sending infrastructure for transactional emails. They're mission-critical—users depend
|
||||
on them. Don't let marketing email issues affect transactional deliverability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Marketing Email */}
|
||||
<section id="marketing" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What is Marketing Email?</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Marketing emails are promotional messages sent to build relationships, drive engagement, and encourage
|
||||
conversions. Recipients must explicitly opt-in to receive them.
|
||||
</p>
|
||||
|
||||
<div className="mb-8">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Common Types of Marketing Emails</h3>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Promotional Campaigns</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Product announcements</li>
|
||||
<li>• Sale and discount promotions</li>
|
||||
<li>• New feature launches</li>
|
||||
<li>• Seasonal campaigns</li>
|
||||
<li>• Limited-time offers</li>
|
||||
<li>• Flash sales</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Content Marketing</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Newsletters</li>
|
||||
<li>• Blog post roundups</li>
|
||||
<li>• Educational content</li>
|
||||
<li>• Industry news and trends</li>
|
||||
<li>• Case studies</li>
|
||||
<li>• Webinar invitations</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Nurture & Engagement</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Welcome series (beyond initial welcome)</li>
|
||||
<li>• Onboarding sequences</li>
|
||||
<li>• Re-engagement campaigns</li>
|
||||
<li>• Win-back emails</li>
|
||||
<li>• Customer surveys</li>
|
||||
<li>• Loyalty program updates</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Lifecycle Marketing</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Abandoned cart reminders</li>
|
||||
<li>• Product recommendations</li>
|
||||
<li>• Upsell/cross-sell campaigns</li>
|
||||
<li>• Birthday or anniversary emails</li>
|
||||
<li>• Renewal reminders (if promotional)</li>
|
||||
<li>• Review requests</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Marketing Email Best Practices</h3>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Always Get Explicit Consent</h4>
|
||||
<p className="text-neutral-700">
|
||||
Use clear opt-in forms (preferably double opt-in). Never add people without permission or use purchased
|
||||
lists. GDPR and CAN-SPAM require explicit consent for marketing emails.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Provide Value, Not Just Promotions</h4>
|
||||
<p className="text-neutral-700">
|
||||
Balance promotional content with educational value, entertainment, or useful information. Subscribers
|
||||
who only receive sales pitches will unsubscribe.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Segment Your Audience</h4>
|
||||
<p className="text-neutral-700">
|
||||
Send targeted emails based on behavior, preferences, demographics, or engagement. Segmented campaigns
|
||||
see 3x higher engagement than mass blasts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Make Unsubscribing Easy</h4>
|
||||
<p className="text-neutral-700">
|
||||
Include a clear, one-click unsubscribe link in every email (required by law). Making it hard to
|
||||
unsubscribe leads to spam complaints, which are much worse for deliverability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-2">Test and Optimize</h4>
|
||||
<p className="text-neutral-700">
|
||||
A/B test subject lines, send times, content, and CTAs. Marketing emails benefit from continuous
|
||||
optimization based on performance data.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Legal Requirements */}
|
||||
<section id="legal" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Legal Requirements</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
The legal distinction between transactional and marketing emails is critical. Violating these rules can result
|
||||
in significant fines and damage to your reputation.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="rounded-xl border-2 border-blue-200 bg-blue-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-blue-900 mb-4">Transactional Email Laws</h3>
|
||||
<div className="space-y-3 text-neutral-700">
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-1">CAN-SPAM (US)</h4>
|
||||
<p className="text-sm">Exempt from most requirements but must not include false/misleading headers</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-1">GDPR (EU)</h4>
|
||||
<p className="text-sm">
|
||||
Allowed as "legitimate interest" for service provision. Must still protect user data and allow opt-out
|
||||
of optional transactional emails
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-1">Key Point</h4>
|
||||
<p className="text-sm">
|
||||
Transactional emails don't require explicit consent or unsubscribe links, but abuse this category (by
|
||||
making promotional emails appear transactional) violates laws
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-purple-200 bg-purple-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-purple-900 mb-4">Marketing Email Laws</h3>
|
||||
<div className="space-y-3 text-neutral-700">
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-1">CAN-SPAM (US)</h4>
|
||||
<ul className="text-sm space-y-1">
|
||||
<li>• Clear opt-out mechanism (unsubscribe link)</li>
|
||||
<li>• Honor opt-outs within 10 business days</li>
|
||||
<li>• Include physical mailing address</li>
|
||||
<li>• Identify message as advertisement</li>
|
||||
<li>• No false/misleading subject lines or headers</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-neutral-900 mb-1">GDPR (EU)</h4>
|
||||
<ul className="text-sm space-y-1">
|
||||
<li>• Explicit opt-in consent required</li>
|
||||
<li>• Clear information about data usage</li>
|
||||
<li>• Easy opt-out anytime</li>
|
||||
<li>• Right to data access/deletion</li>
|
||||
<li>• Records of consent</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="warning" title="Don't Abuse the Transactional Category" className="mt-6">
|
||||
<p>
|
||||
It's illegal and unethical to disguise marketing emails as transactional to avoid consent requirements.
|
||||
Regulators and ISPs actively monitor for this abuse. Keep transactional emails purely functional.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Infrastructure Considerations */}
|
||||
<section id="infrastructure" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Infrastructure & Sending Practices</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Separate Sending Domains</h3>
|
||||
<p className="text-neutral-700 mb-3">Use different subdomains for transactional and marketing emails:</p>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>
|
||||
• <strong>Transactional:</strong> transact.yourdomain.com or mail.yourdomain.com
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Marketing:</strong> marketing.yourdomain.com or news.yourdomain.com
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Benefit:</strong> Protects critical transactional email reputation from marketing
|
||||
deliverability issues
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Dedicated IP Addresses (High Volume)</h3>
|
||||
<p className="text-neutral-700 mb-3">For organizations sending 100,000+ emails/month:</p>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Use separate dedicated IPs for transactional and marketing</li>
|
||||
<li>• Properly warm up new IPs to build sender reputation</li>
|
||||
<li>• Monitor reputation for each IP independently</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Monitoring & Analytics</h3>
|
||||
<p className="text-neutral-700 mb-3">Track metrics separately for each type:</p>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>
|
||||
• <strong>Transactional:</strong> Delivery rate (target: 99%+), delivery speed, bounce rate
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Marketing:</strong> Open rate, CTR, conversions, engagement, unsubscribe rate
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* The Gray Area */}
|
||||
<section id="gray-area" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">The Gray Area: What's What?</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Some emails can be tricky to categorize. Here's guidance:
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl border-2 border-green-200 bg-green-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-green-900 mb-3">Clearly Transactional</h3>
|
||||
<ul className="space-y-2 text-neutral-700">
|
||||
<li>✓ Order confirmations and shipping updates</li>
|
||||
<li>✓ Password resets and account verification</li>
|
||||
<li>✓ Billing receipts and invoices</li>
|
||||
<li>✓ System alerts and security notifications</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-amber-200 bg-amber-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-amber-900 mb-3">Gray Area (Be Careful)</h3>
|
||||
<ul className="space-y-2 text-neutral-700">
|
||||
<li>
|
||||
• <strong>Cart abandonment:</strong> If purely reminder = transactional. If includes promotions =
|
||||
marketing
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Review requests:</strong> If tied to recent purchase = transactional. If general request =
|
||||
marketing
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Welcome emails:</strong> Initial verification = transactional. Follow-up series = marketing
|
||||
</li>
|
||||
<li>
|
||||
• <strong>Renewal reminders:</strong> If informational only = transactional. If promotional = marketing
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-red-200 bg-red-50 p-6">
|
||||
<h3 className="text-xl font-semibold text-red-900 mb-3">Clearly Marketing</h3>
|
||||
<ul className="space-y-2 text-neutral-700">
|
||||
<li>✗ Newsletters and content roundups</li>
|
||||
<li>✗ Product announcements and promotions</li>
|
||||
<li>✗ Sales and discount offers</li>
|
||||
<li>✗ Educational content and webinars</li>
|
||||
<li>✗ Re-engagement campaigns</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="tip" title="When in Doubt" className="mt-6">
|
||||
<p>
|
||||
If you're unsure whether an email is transactional or marketing, err on the side of treating it as
|
||||
marketing. Include an unsubscribe link, get proper consent, and follow all marketing email regulations.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Related Guides */}
|
||||
<section id="related-guides" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Related Email Guides</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Link
|
||||
href="/guides/email-api-guide"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email API Guide</h3>
|
||||
<p className="text-sm text-neutral-600">Implement transactional emails with APIs.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-marketing-best-practices"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Marketing Best Practices</h3>
|
||||
<p className="text-sm text-neutral-600">Complete marketing email guide.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-deliverability"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Deliverability</h3>
|
||||
<p className="text-sm text-neutral-600">Ensure both email types reach the inbox.</p>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</GuideLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,322 @@
|
||||
import React from 'react';
|
||||
import {GuideLayout, InfoBox} from '../../components/guides';
|
||||
import {CodeBlock} from '../../components/CodeBlock';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function WhatIsDKIM() {
|
||||
return (
|
||||
<GuideLayout
|
||||
title="What is DKIM? Email Authentication Explained"
|
||||
description="Learn how DKIM (DomainKeys Identified Mail) protects your emails from spoofing and improves deliverability. Complete guide with setup examples."
|
||||
lastUpdated="2025-12-20"
|
||||
readTime="8 min"
|
||||
canonical="https://www.useplunk.com/guides/what-is-dkim"
|
||||
>
|
||||
{/* Introduction */}
|
||||
<section id="introduction" className="mb-12">
|
||||
<p className="text-neutral-700 leading-relaxed">
|
||||
DKIM (DomainKeys Identified Mail) is an email authentication method that allows receiving mail servers to
|
||||
verify that an email was actually sent by the domain it claims to be from and that the message wasn't altered
|
||||
in transit.
|
||||
</p>
|
||||
<p className="mt-4 text-neutral-700 leading-relaxed">
|
||||
Think of DKIM as a digital signature for your emails—like a wax seal on a letter that proves it's authentic
|
||||
and hasn't been tampered with.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* How DKIM Works */}
|
||||
<section id="how-dkim-works" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How DKIM Works</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
DKIM uses cryptographic authentication to validate emails. Here's the process:
|
||||
</p>
|
||||
|
||||
<div className="space-y-6 mb-8">
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. The Sending Server Signs the Email</h3>
|
||||
<p className="text-neutral-700">
|
||||
When you send an email, your email server adds a DKIM signature to the email header. This signature is
|
||||
created using a private key that only your server knows.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. The Signature is Added to Headers</h3>
|
||||
<p className="text-neutral-700">
|
||||
The DKIM signature includes a hash of specific email components (like the subject, body, and sender) and
|
||||
is added to the email headers as a "DKIM-Signature" field.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. The Receiving Server Verifies</h3>
|
||||
<p className="text-neutral-700">
|
||||
When the email arrives, the receiving server looks up your domain's public DKIM key in DNS, then uses it
|
||||
to verify the signature. If everything matches, the email passes DKIM authentication.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Delivery Decision</h3>
|
||||
<p className="text-neutral-700">
|
||||
Passing DKIM verification improves your sender reputation and deliverability. Failing or missing DKIM may
|
||||
result in emails being flagged as suspicious or sent to spam.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="tip" title="Technical Detail">
|
||||
<p>
|
||||
DKIM uses asymmetric cryptography (public/private key pairs). The private key stays secure on your mail
|
||||
server, while the public key is published in your DNS records for anyone to verify.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* DKIM Record Example */}
|
||||
<section id="dkim-record-example" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What Does a DKIM Record Look Like?</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
A DKIM record is a TXT record in your DNS that contains your public key. Here's an example:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
language="dns"
|
||||
title="Example DKIM DNS Record"
|
||||
code={`default._domainkey.yourdomain.com IN TXT "v=DKIM1; k=rsa; p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC3QEKyU1fSma0axspqYK5iAj+54lsAg4qRRCnpKK68hawSJfliq9vKD6czJ..."
|
||||
|
||||
# Breaking down the components:
|
||||
# v=DKIM1 -> DKIM version
|
||||
# k=rsa -> Key type (RSA encryption)
|
||||
# p=MIGfMA0... -> Public key (base64 encoded)`}
|
||||
/>
|
||||
|
||||
<InfoBox type="info" title="Selector Names">
|
||||
<p>
|
||||
The "default" in <code>default._domainkey</code> is called a selector. You can use different selectors to
|
||||
rotate keys or separate different email streams (e.g., marketing, transactional).
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Why DKIM Matters */}
|
||||
<section id="why-dkim-matters" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Why DKIM Matters for Email Deliverability</h2>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 mb-8">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Prevents Email Spoofing</h3>
|
||||
<p className="text-neutral-700">
|
||||
DKIM makes it nearly impossible for spammers to forge emails from your domain. The cryptographic signature
|
||||
can't be replicated without your private key.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Improves Deliverability</h3>
|
||||
<p className="text-neutral-700">
|
||||
Major email providers (Gmail, Outlook, Yahoo) use DKIM as a trust signal. Emails with valid DKIM
|
||||
signatures are more likely to reach the inbox.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Protects Brand Reputation</h3>
|
||||
<p className="text-neutral-700">
|
||||
By preventing domain spoofing, DKIM protects your brand from being used in phishing attacks that could
|
||||
damage your reputation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Enables DMARC</h3>
|
||||
<p className="text-neutral-700">
|
||||
DKIM is a prerequisite for implementing DMARC, which provides even stronger email authentication and
|
||||
reporting capabilities.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="warning" title="Gmail & Yahoo Requirements">
|
||||
<p>
|
||||
As of February 2024, Gmail and Yahoo require DKIM authentication for bulk senders (5,000+ emails/day). Even
|
||||
if you send less, implementing DKIM is considered a best practice.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* DKIM Signature Example */}
|
||||
<section id="dkim-signature-example" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What Does a DKIM Signature Look Like?</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
When you send an email, the DKIM signature is added to the email headers. Here's what it looks like:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
language="text"
|
||||
title="DKIM-Signature Header Example"
|
||||
code={`DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed;
|
||||
d=yourdomain.com; s=default;
|
||||
h=from:subject:date:message-id:to;
|
||||
bh=frcCV1k9oG9oKj3dpUqdJg1PxRT2RSN/XKdLCPjaYaY=;
|
||||
b=GJwP3Qr8KqKKKNT5HL8j3fjXvLEm9KmZs6YdO2KqEqr...
|
||||
|
||||
# Key components:
|
||||
# v=1 -> DKIM version
|
||||
# d=yourdomain.com -> Signing domain
|
||||
# s=default -> Selector (matches DNS record)
|
||||
# h=from:subject... -> Headers included in signature
|
||||
# bh=frcCV1... -> Hash of email body
|
||||
# b=GJwP3Q... -> The actual signature`}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* How Plunk Handles DKIM */}
|
||||
<section id="plunk-dkim" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How Plunk Simplifies DKIM</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Setting up DKIM manually can be complex, but Plunk makes it automatic:
|
||||
</p>
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Automatic Key Generation</h3>
|
||||
<p className="text-neutral-700">
|
||||
Plunk automatically generates secure DKIM key pairs for your domain when you add it to your account.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Simple DNS Setup</h3>
|
||||
<p className="text-neutral-700">
|
||||
We provide the exact DNS records you need to add—just copy and paste into your DNS provider.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Automatic Signing</h3>
|
||||
<p className="text-neutral-700">
|
||||
Every email you send through Plunk is automatically signed with DKIM. No configuration needed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Verification & Monitoring</h3>
|
||||
<p className="text-neutral-700">
|
||||
Plunk verifies your DKIM setup and monitors authentication status for all your emails.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="success" title="Ready in Minutes">
|
||||
<p>
|
||||
Most Plunk users have DKIM fully configured and working within 5-10 minutes. Our dashboard guides you
|
||||
through every step.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* DKIM Best Practices */}
|
||||
<section id="dkim-best-practices" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">DKIM Best Practices</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="border-l-4 border-green-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✓ Use 2048-bit Keys</h3>
|
||||
<p className="text-neutral-700">
|
||||
While 1024-bit keys still work, 2048-bit keys provide better security and are recommended by Gmail and
|
||||
other providers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-green-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✓ Implement SPF and DMARC Too</h3>
|
||||
<p className="text-neutral-700">
|
||||
DKIM works best when combined with SPF and DMARC for comprehensive email authentication. Use all three for
|
||||
maximum protection.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-green-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✓ Monitor DKIM Status</h3>
|
||||
<p className="text-neutral-700">
|
||||
Regularly check that your DKIM signatures are passing. Most email platforms provide authentication
|
||||
reports.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-green-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✓ Rotate Keys Periodically</h3>
|
||||
<p className="text-neutral-700">
|
||||
For enhanced security, rotate your DKIM keys every 6-12 months. Plan key rotation carefully to avoid
|
||||
delivery disruptions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Don't Share Private Keys</h3>
|
||||
<p className="text-neutral-700">
|
||||
Your DKIM private key should never be shared or stored insecurely. Treat it like a password.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Don't Use the Same Key Across Domains</h3>
|
||||
<p className="text-neutral-700">
|
||||
Each domain should have its own unique DKIM key pair for security and proper authentication.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Related Guides */}
|
||||
<section id="related-guides" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Related Email Authentication Guides</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Link
|
||||
href="/guides/what-is-spf"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">What is SPF?</h3>
|
||||
<p className="text-sm text-neutral-600">Learn about SPF records and how they complement DKIM.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/what-is-dmarc"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">What is DMARC?</h3>
|
||||
<p className="text-sm text-neutral-600">Complete guide to DMARC policies and email security.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-deliverability"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Deliverability Guide</h3>
|
||||
<p className="text-sm text-neutral-600">Improve your email deliverability with best practices.</p>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</GuideLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,351 @@
|
||||
import React from 'react';
|
||||
import {GuideLayout, InfoBox} from '../../components/guides';
|
||||
import {CodeBlock} from '../../components/CodeBlock';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function WhatIsDMARC() {
|
||||
return (
|
||||
<GuideLayout
|
||||
title="What is DMARC? Email Policy & Reporting Explained"
|
||||
description="Learn how DMARC works with SPF and DKIM to protect your domain from email spoofing. Complete setup guide with policy examples."
|
||||
lastUpdated="2025-12-20"
|
||||
readTime="9 min"
|
||||
canonical="https://www.useplunk.com/guides/what-is-dmarc"
|
||||
>
|
||||
{/* Introduction */}
|
||||
<section id="introduction" className="mb-12">
|
||||
<p className="text-neutral-700 leading-relaxed">
|
||||
DMARC (Domain-based Message Authentication, Reporting, and Conformance) is an email authentication protocol
|
||||
that builds on SPF and DKIM to protect your domain from email spoofing and phishing.
|
||||
</p>
|
||||
<p className="mt-4 text-neutral-700 leading-relaxed">
|
||||
While SPF and DKIM authenticate emails, DMARC tells receiving servers what to do when authentication fails and
|
||||
provides reports about your email authentication status.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* How DMARC Works */}
|
||||
<section id="how-dmarc-works" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How DMARC Works</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
DMARC adds a policy layer on top of SPF and DKIM. Here's how it works:
|
||||
</p>
|
||||
|
||||
<div className="space-y-6 mb-8">
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Email Authentication</h3>
|
||||
<p className="text-neutral-700">
|
||||
When an email is received, the server first checks SPF and DKIM authentication. At least one of these must
|
||||
pass for DMARC to pass.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Alignment Check</h3>
|
||||
<p className="text-neutral-700">
|
||||
DMARC checks if the domain in the "From" header aligns with the domain that passed SPF or DKIM. This is
|
||||
called "identifier alignment."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Policy Application</h3>
|
||||
<p className="text-neutral-700">
|
||||
If authentication and alignment pass, the email is delivered. If they fail, the receiving server follows
|
||||
your DMARC policy: none (monitor only), quarantine (send to spam), or reject (block completely).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Reporting</h3>
|
||||
<p className="text-neutral-700">
|
||||
Receiving servers send daily reports to your specified email address, showing authentication results for
|
||||
all emails claiming to be from your domain.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="info" title="DMARC Requires SPF or DKIM">
|
||||
<p>
|
||||
DMARC doesn't work alone—you must have SPF and/or DKIM configured first. DMARC builds on these protocols to
|
||||
provide policy enforcement and reporting.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* DMARC Record Syntax */}
|
||||
<section id="dmarc-record-syntax" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">DMARC Record Syntax</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
A DMARC record is a TXT record published at <code>_dmarc.yourdomain.com</code>. Here's an example:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
language="dns"
|
||||
title="Example DMARC Record"
|
||||
code={`_dmarc.yourdomain.com IN TXT "v=DMARC1; p=quarantine; rua=mailto:[email protected]; ruf=mailto:[email protected]; pct=100; adkim=r; aspf=r"
|
||||
|
||||
# Breaking down the components:
|
||||
# v=DMARC1 -> DMARC version
|
||||
# p=quarantine -> Policy (none, quarantine, or reject)
|
||||
# rua=mailto:[email protected] -> Aggregate report email
|
||||
# ruf=mailto:[email protected] -> Forensic report email
|
||||
# pct=100 -> Percentage of mail to apply policy (100%)
|
||||
# adkim=r -> DKIM alignment mode (r=relaxed, s=strict)
|
||||
# aspf=r -> SPF alignment mode (r=relaxed, s=strict)`}
|
||||
/>
|
||||
|
||||
<div className="mt-8 space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">DMARC Policy Tags</h3>
|
||||
<div className="rounded-xl border border-neutral-200 overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-neutral-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-neutral-900">Tag</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-neutral-900">Description</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-neutral-900">Required</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-neutral-200">
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">v</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">DMARC version (always DMARC1)</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">p</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Policy: none, quarantine, or reject</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">rua</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Aggregate report email address</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Recommended</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">ruf</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Forensic report email address</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Optional</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">pct</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Percentage of mail to filter (0-100)</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Optional</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">sp</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Policy for subdomains</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Optional</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">adkim</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">DKIM alignment: r (relaxed) or s (strict)</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Optional</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">aspf</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">SPF alignment: r (relaxed) or s (strict)</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Optional</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* DMARC Policies */}
|
||||
<section id="dmarc-policies" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Understanding DMARC Policies</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
DMARC offers three policy levels. You should implement them progressively:
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-xl border-2 border-blue-200 bg-blue-50 p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-600 text-white font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-blue-900 mb-2">p=none (Monitor Mode)</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
No action is taken on failed emails—they're still delivered. Use this initially to monitor your email
|
||||
authentication without affecting delivery.
|
||||
</p>
|
||||
<CodeBlock language="dns" code={`v=DMARC1; p=none; rua=mailto:[email protected]`} showCopy={false} />
|
||||
<p className="text-sm text-neutral-600 mt-3">
|
||||
<strong>Best for:</strong> Initial setup, gathering data, testing configuration
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-amber-200 bg-amber-50 p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-amber-900 mb-2">p=quarantine (Quarantine Failed Mail)</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
Emails that fail authentication are sent to spam/junk folders. This is a good middle ground that
|
||||
protects your domain while minimizing delivery issues.
|
||||
</p>
|
||||
<CodeBlock
|
||||
language="dns"
|
||||
code={`v=DMARC1; p=quarantine; rua=mailto:[email protected]; pct=100`}
|
||||
showCopy={false}
|
||||
/>
|
||||
<p className="text-sm text-neutral-600 mt-3">
|
||||
<strong>Best for:</strong> After monitoring, when you're confident in your setup
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border-2 border-red-200 bg-red-50 p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-red-600 text-white font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-red-900 mb-2">p=reject (Block Failed Mail)</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
Emails that fail authentication are completely rejected and not delivered. This provides maximum
|
||||
protection but requires perfect configuration.
|
||||
</p>
|
||||
<CodeBlock
|
||||
language="dns"
|
||||
code={`v=DMARC1; p=reject; rua=mailto:[email protected]; pct=100`}
|
||||
showCopy={false}
|
||||
/>
|
||||
<p className="text-sm text-neutral-600 mt-3">
|
||||
<strong>Best for:</strong> Mature implementations with complete authentication coverage
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="warning" title="Progressive Implementation">
|
||||
<p>
|
||||
Always start with <code>p=none</code> and monitor for at least 2-4 weeks. Review DMARC reports, fix any
|
||||
authentication issues, then gradually move to <code>p=quarantine</code> and finally <code>p=reject</code>.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Setting Up DMARC */}
|
||||
<section id="setting-up-dmarc" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How to Set Up DMARC</h2>
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Ensure SPF and DKIM are Working</h3>
|
||||
<p className="text-neutral-700">
|
||||
DMARC requires either SPF or DKIM (or both) to be configured. Verify these are working before
|
||||
implementing DMARC.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Create a Mailbox for Reports</h3>
|
||||
<p className="text-neutral-700">
|
||||
Set up an email address to receive DMARC reports (e.g., [email protected]). These reports can be
|
||||
large and frequent, so use a dedicated mailbox.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Create Your DMARC Record</h3>
|
||||
<p className="text-neutral-700 mb-3">Start with a monitoring-only policy:</p>
|
||||
<CodeBlock language="dns" code={`v=DMARC1; p=none; rua=mailto:[email protected]; pct=100`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Add to DNS</h3>
|
||||
<p className="text-neutral-700">
|
||||
Add the DMARC record as a TXT record at <code>_dmarc.yourdomain.com</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Monitor Reports</h3>
|
||||
<p className="text-neutral-700">
|
||||
Review DMARC reports for 2-4 weeks. Look for failed authentications and identify any legitimate sources
|
||||
that need SPF/DKIM configuration.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Gradually Increase Policy</h3>
|
||||
<p className="text-neutral-700">
|
||||
Once confident, update to <code>p=quarantine</code>, monitor again, then move to <code>p=reject</code>{' '}
|
||||
if desired.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Related Guides */}
|
||||
<section id="related-guides" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Related Email Authentication Guides</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Link
|
||||
href="/guides/what-is-dkim"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">What is DKIM?</h3>
|
||||
<p className="text-sm text-neutral-600">Learn how DKIM authenticates email content.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/what-is-spf"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">What is SPF?</h3>
|
||||
<p className="text-sm text-neutral-600">Understand SPF records and server authorization.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-deliverability"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Deliverability Guide</h3>
|
||||
<p className="text-sm text-neutral-600">Complete guide to improving email deliverability.</p>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</GuideLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,337 @@
|
||||
import React from 'react';
|
||||
import {GuideLayout, InfoBox} from '../../components/guides';
|
||||
import {CodeBlock} from '../../components/CodeBlock';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function WhatIsSPF() {
|
||||
return (
|
||||
<GuideLayout
|
||||
title="What is SPF? Email Sender Policy Framework Explained"
|
||||
description="Learn how SPF records work, prevent email spoofing, and improve deliverability. Complete guide with setup examples and best practices."
|
||||
lastUpdated="2025-12-20"
|
||||
readTime="7 min"
|
||||
canonical="https://www.useplunk.com/guides/what-is-spf"
|
||||
>
|
||||
{/* Introduction */}
|
||||
<section id="introduction" className="mb-12">
|
||||
<p className="text-neutral-700 leading-relaxed">
|
||||
SPF (Sender Policy Framework) is an email authentication protocol that allows domain owners to specify which
|
||||
mail servers are authorized to send emails on behalf of their domain.
|
||||
</p>
|
||||
<p className="mt-4 text-neutral-700 leading-relaxed">
|
||||
Think of SPF as a guest list for your domain—it tells receiving servers, "These are the only servers allowed
|
||||
to send email using my domain name."
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* How SPF Works */}
|
||||
<section id="how-spf-works" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How SPF Works</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
SPF works by publishing a list of authorized sending servers in your DNS records. Here's the process:
|
||||
</p>
|
||||
|
||||
<div className="space-y-6 mb-8">
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. You Publish an SPF Record</h3>
|
||||
<p className="text-neutral-700">
|
||||
You add a TXT record to your domain's DNS that lists all IP addresses and services authorized to send
|
||||
email from your domain.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. An Email is Sent</h3>
|
||||
<p className="text-neutral-700">
|
||||
When someone sends an email claiming to be from your domain, the receiving server notes the IP address of
|
||||
the sending server.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. The Receiving Server Checks SPF</h3>
|
||||
<p className="text-neutral-700">
|
||||
The receiving server looks up your domain's SPF record in DNS and checks if the sending server's IP
|
||||
address is listed as authorized.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Pass or Fail</h3>
|
||||
<p className="text-neutral-700">
|
||||
If the IP matches, SPF passes. If not, SPF fails and the email may be flagged as spam or rejected,
|
||||
depending on your policy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="info" title="SPF Validates the Server, Not the Content">
|
||||
<p>
|
||||
Unlike DKIM which validates email content, SPF only checks if the sending server is authorized. This is why
|
||||
using both SPF and DKIM together provides stronger authentication.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* SPF Record Syntax */}
|
||||
<section id="spf-record-syntax" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">SPF Record Syntax</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
An SPF record is a TXT record with a specific format. Here's a typical example:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
language="dns"
|
||||
title="Example SPF Record"
|
||||
code={`v=spf1 include:_spf.google.com include:sendgrid.net ip4:192.0.2.1 ~all
|
||||
|
||||
# Breaking down the components:
|
||||
# v=spf1 -> SPF version (always v=spf1)
|
||||
# include:_spf.google.com -> Include Google's SPF record
|
||||
# include:sendgrid.net -> Include SendGrid's SPF record
|
||||
# ip4:192.0.2.1 -> Authorize specific IPv4 address
|
||||
# ~all -> Soft fail for all others`}
|
||||
/>
|
||||
|
||||
<div className="mt-8 space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Common SPF Mechanisms</h3>
|
||||
<div className="rounded-xl border border-neutral-200 overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-neutral-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-neutral-900">Mechanism</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-neutral-900">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-neutral-200">
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">ip4:192.0.2.1</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Authorize specific IPv4 address</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">ip6:2001:db8::1</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Authorize specific IPv6 address</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">include:domain.com</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Include another domain's SPF record</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">a</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Authorize domain's A record IP</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">mx</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Authorize domain's MX record IPs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">~all</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Soft fail (treat others as suspicious)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">-all</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Hard fail (reject all others)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="warning" title="10 DNS Lookup Limit">
|
||||
<p>
|
||||
SPF has a hard limit of 10 DNS lookups. Each <code>include:</code> mechanism counts as one lookup. Exceeding
|
||||
this limit causes SPF validation to fail. Keep your SPF record concise and avoid excessive includes.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Why SPF Matters */}
|
||||
<section id="why-spf-matters" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Why SPF Matters</h2>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 mb-8">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Prevents Email Spoofing</h3>
|
||||
<p className="text-neutral-700">
|
||||
SPF makes it much harder for spammers to send emails that appear to come from your domain. Only authorized
|
||||
servers can send on your behalf.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Improves Deliverability</h3>
|
||||
<p className="text-neutral-700">
|
||||
Emails from domains with proper SPF records are more trusted by receiving servers, leading to better inbox
|
||||
placement rates.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Protects Your Domain</h3>
|
||||
<p className="text-neutral-700">
|
||||
By specifying authorized senders, you protect your domain from being used in phishing and spam campaigns.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Required for DMARC</h3>
|
||||
<p className="text-neutral-700">
|
||||
SPF (along with DKIM) is necessary for implementing DMARC, which provides comprehensive email
|
||||
authentication and reporting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Setting Up SPF */}
|
||||
<section id="setting-up-spf" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How to Set Up SPF</h2>
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Identify All Email Senders</h3>
|
||||
<p className="text-neutral-700">
|
||||
List all services and servers that send email from your domain: your email service provider, marketing
|
||||
tools, support systems, etc.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Gather SPF Include Values</h3>
|
||||
<p className="text-neutral-700 mb-3">Each email service provides SPF values to include. For example:</p>
|
||||
<CodeBlock
|
||||
language="text"
|
||||
code={`Google Workspace: include:_spf.google.com
|
||||
Microsoft 365: include:spf.protection.outlook.com
|
||||
Plunk: include:spf.useplunk.com
|
||||
SendGrid: include:sendgrid.net`}
|
||||
showCopy={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Create Your SPF Record</h3>
|
||||
<p className="text-neutral-700 mb-3">Combine all authorized senders into one SPF record:</p>
|
||||
<CodeBlock language="dns" code={`v=spf1 include:_spf.google.com include:spf.useplunk.com ~all`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Add to DNS</h3>
|
||||
<p className="text-neutral-700">
|
||||
Add the SPF record as a TXT record in your DNS settings. The record name should be your root domain
|
||||
(e.g., "@" or "yourdomain.com").
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Verify SPF</h3>
|
||||
<p className="text-neutral-700">
|
||||
Use SPF validation tools to confirm your record is correct and doesn't exceed the 10 DNS lookup limit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="success" title="Plunk Handles This Automatically">
|
||||
<p>
|
||||
When you set up a domain in Plunk, we provide the exact SPF record you need. Just copy and paste it into
|
||||
your DNS, and we'll verify it's working correctly.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Common SPF Mistakes */}
|
||||
<section id="common-mistakes" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Common SPF Mistakes to Avoid</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Multiple SPF Records</h3>
|
||||
<p className="text-neutral-700">
|
||||
Never create multiple SPF TXT records. You can only have ONE SPF record per domain. Combine all authorized
|
||||
senders into a single record.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Exceeding 10 DNS Lookups</h3>
|
||||
<p className="text-neutral-700">
|
||||
Each <code>include:</code> mechanism counts toward the 10 lookup limit. Too many includes will cause SPF
|
||||
to fail. Consolidate where possible.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Forgetting to Update SPF</h3>
|
||||
<p className="text-neutral-700">
|
||||
When you add new email services, remember to update your SPF record. Outdated SPF records cause legitimate
|
||||
emails to fail authentication.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Using +all</h3>
|
||||
<p className="text-neutral-700">
|
||||
Never use <code>+all</code> (pass all). This completely defeats the purpose of SPF by allowing anyone to
|
||||
send from your domain. Always use <code>~all</code> or <code>-all</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Related Guides */}
|
||||
<section id="related-guides" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Related Email Authentication Guides</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Link
|
||||
href="/guides/what-is-dkim"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">What is DKIM?</h3>
|
||||
<p className="text-sm text-neutral-600">Learn how DKIM complements SPF for email authentication.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/what-is-dmarc"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">What is DMARC?</h3>
|
||||
<p className="text-sm text-neutral-600">Implement DMARC using SPF and DKIM together.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-deliverability"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Deliverability Guide</h3>
|
||||
<p className="text-sm text-neutral-600">Complete guide to improving email deliverability.</p>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</GuideLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user