Как создать кликабельную ссылку на email

Чтобы сделать адрес электронной почты кликабельной ссылкой, используйте протокол mailto: перед адресом. В HTML это выглядит так: <a href="mailto:[email protected]">Написать нам</a>, а в Markdown: [Написать нам](mailto:[email protected]). При клике у пользователя автоматически откроется почтовый клиент с уже заполненным полем получателя.

Что такое mailto-ссылка и зачем она нужна

Ссылка типа mailto — это специальный гипертекстовый указатель, который сообщает браузеру или операционной системе, что действие должно быть обработано почтовым приложением (Outlook, Apple Mail, Gmail и др.).

Основные преимущества:

• Ускорение связи: Пользователю не нужно копировать адрес, открывать почту и вставлять его вручную.
• Конверсия: Снижает барьер для обращения в поддержку или отдел продаж.
• Мобильность: На смартфонах клик сразу перекидывает в приложение почты.

Способы создания email-ссылок

1. В HTML-коде

Базовый синтаксис использует тег <a> с атрибутом href.

<a href="mailto:[email protected]">Написать в поддержку</a>

Добавление темы и текста письма: Вы можете предзаполнить поля «Тема» (subject) и «Тело письма» (body). Параметры разделяются символом &, а пробелы кодируются как %20.

<a href="mailto:[email protected]?subject=Вопрос%20по%20заказу&body=Здравствуйте,%20меня%20интересует...">
  Задать вопрос по заказу
</a>

2. В Markdown

Если вы пишете статью в блоге, документацию или комментарий на GitHub, используйте стандартный синтаксис ссылок.

Простая ссылка:

[Связаться с нами](mailto:[email protected])

Ссылка с параметрами:

[Заказать консультацию](mailto:[email protected]?subject=Консультация)

3. В конструкторах сайтов (Tilda, WordPress, Wix)

В визуальных редакторах (WYSIWYG) процесс обычно сводится к следующим шагам:

1. Выделите текст или кнопку, которая должна стать ссылкой.
2. Нажмите значок «Вставить ссылку» (цепочка).
3. В поле URL введите mailto:ваша@почта.com.
4. Сохраните изменения.

Лучшие практики и безопасность

Доступность (Accessibility)

Текст ссылки должен четко описывать действие. Избегайте формулировок вроде «Нажми сюда».

• Плохо: Клик
• Хорошо: Написать директору

Для скринридеров можно добавить атрибут aria-label, если визуальный текст короткий: <a href="mailto:sale@..." aria-label="Отправить письмо в отдел продаж">Пишите</a>

Защита от спама

Прямые mailto-ссылки легко собираются парсерами. Если адрес критически важен, рассмотрите альтернативы:

• Контактная форма: Пользователь пишет сообщение на сайте, а вам приходит письмо. Адрес скрыт.
• Обфускация через JS: Адрес собирается скриптом только при клике, что усложняет жизнь простым ботам.
• Изображение: Вставка адреса картинкой (неудобно для мобильных, но защищает от копирования).

Валидация и тестирование

• Проверяйте отсутствие опечаток в домене (.com вместо .ru, лишние пробелы).
• Тестируйте работу на мобильных устройствах: некоторые телефоны могут спрашивать, какое приложение использовать для открытия ссылки.
• Не перегружайте ссылку длинным текстом в параметре body — некоторые почтовые клиенты имеют лимит на длину URL.

Частые ошибки

FAQ

Работает ли mailto, если у пользователя не установлена почтовая программа? Нет, ссылка ничего не сделает или браузер предложит выбрать приложение. Поэтому на важных страницах (например, «Контакты») дублируйте возможность связи через форму обратной связи.

Можно ли указать несколько получателей в одной ссылке? Да, перечислите адреса через запятую без пробелов: mailto:[email protected],[email protected]. Однако это работает нестабильно в некоторых клиентах, лучше использовать поле cc или bcc, если поддержка позволяет: [email protected].

Влияют ли email-ссылки на SEO? Сами по себе они не влияют на ранжирование, но улучшают поведенческие факторы (UX), помогая пользователю быстрее связаться с вами. Главное — не спамить ими в тексте статьи.