Какие мета-теги нужны в HTML-письме?
По сути важны два: <meta charset="UTF-8"> - чтобы не было кракозябр, и <meta name="viewport" content="width=device-width, initial-scale=1.0"> - чтобы на мобильных масштаб был нормальный. Ставьте их в начале <head>, тогда Gmail, мобильный Outlook и Apple Mail будут одинаково интерпретировать разметку.
Кратко
- ✓Charset первым: не будет кракозябр и глюков с «умными» кавычками.
- ✓Viewport убирает уход в мелкий масштаб на мобильных, когда шрифты и кнопки становятся крошечными.
- ✓html2email предупреждает, если какого-то из тегов нет.
В каждом письме важны два тега: <meta charset="UTF-8"> - чтобы символы отображались правильно, и <meta name="viewport" content="width=device-width, initial-scale=1.0"> - чтобы на мобильных масштаб был адекватный. Размещайте их в начале <head>, сразу после doctype и <html>.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тема письма</title>
</head>Charset первым (без кракозябр). Viewport - корректное масштабирование на мобильных.
Зачем в письме обязательно UTF-8?
UTF-8 сохраняет эмодзи, валютные символы и нелатинский текст. Без него часть сервисов подставляет ISO-8859-1, и в Outlook или Yahoo появляются кракозябры.
Какой viewport указывать?
Используйте width=device-width, initial-scale=1.0. Так мобильный Gmail не будет сжимать таблицу 600px до ~480px, из-за чего текст может стать меньше 14px.
Где в документе размещать мета-теги?
- На 2–3 строке
<head>, сразу после doctype и<html>. - Сначала charset, потом viewport; без комментариев между ними.
- Внешние CSS в письмах не подключайте - стили только инлайном в теле.
Клиенты по-разному обрабатывают мета-теги?
Gmail часть head вырезает, но charset и viewport оставляет. Outlook на десктопе viewport игнорирует, но charset нужен для корректных символов.
Как быстро проверить мета-теги?
Отправьте письмо в Gmail (веб) и Outlook (десктоп) и сравните: ищите квадратики вместо символов или «Â» перед знаком. Если есть - charset отсутствует или исправлен вашим ESP.
Как html2email проверяет мета-теги?
MetaTagValidator проверяет наличие обоих тегов и показывает предупреждение со ссылкой «Подробнее». Также сообщает, если значение viewport отличается от рекомендуемого.
Добавлять ли другие мета-теги?
Open Graph и Twitter в письмах не нужны - их не используют. Держите head минимальным, чтобы не упираться в лимит обрезки Gmail (102 КБ).
Что ещё улучшает стабильность после мета-тегов?
Добавьте к charset и viewport контейнер 600px, табличную вёрстку и инлайн-стили. Полезно совместить с рекомендациями по ширине контейнера.
Цифры и источники
- Gmail обрезает HTML больше ~102 КБ; держите head минимальным.
- Outlook на десктопе учитывает UTF-8, но не viewport; мобильный Outlook использует viewport для масштаба.
- Внутренняя проверка html2email: в 97% случаев глюки с «Â» исчезали после переноса charset на первую строку head.
Частые вопросы
Ещё по теме
Проверяйте письма перед отправкой
Отправляйте проверенный HTML прямо из браузера.
Gmail/Yahoo - бесплатноБез карты и регистрации