Скрываем e-mail от роботов-ботов, улучшая SEO

У вас есть свой сайт и вы хотите указать адрес электронной почты на сайте для того, чтобы посетители могли легко связаться с вами и вместе с тем вы хотите, чтобы спам-боты не смогли распознать ваш e-mail на странице и спамер не смогли присылать спам вам на электронную почту.

Спам-боты используют обычные регулярные выражения (regular expession) в своей работе, чтобы распознавать адрес электронной почты на вашем сайте, если адрес опубликован в виде обычного текста, но вы можете обмануть ботов, скрыв ваш адрес электронной почты с помощью простых CSS и JavaScript методов. В этой статье мы их и рассмотрим.

1. Скрыть E-mail, используя CSS

1-1. CSS псевдо-классы

Можно использовать псевдо-элементы ::before и ::after для добавления имени пользователя и имени домена по обоим сторонам символа @. Боты, которые обычно не видят CSS, смогут обнаружить только знак @, в то время как браузеры будут показывать полный адрес электронной почты, который, в данном случае, является john@gmail.com. 

<style>my-email::after {
    content: attr(data-domain);
  }
  my-email::before {
    content: attr(data-user);
  }</style>

<!-- Впишите ниже в data-user и data-domain ваш логин email и домен --> 
<my-email data-domain="gmail.com" data-user="john">@</my-email>

Еще один вариант предложил @orlie, в котором также запись делается еще больше не понятной. И также используются псевдо-элементы.

<style type="text/css">my-email::after {
    content: attr(data-domain);
  }
  my-email::before {
    content: attr(data-user) "\0040";
  }</style>

<!-- Впишите ниже в data-user и data-domain ваш логин email и домен -->
<my-email data-domain="gmail.com" data-user="john"></my-email>

Недостатком этого подхода является то, что пользователи не смогут скопировать ваш адрес электронной почты и им придется записывать его вручную.

Если вы хотите использовать псевдо-элементы и хотите, чтобы пользователи могли копировать email, то можете попробовать использовать следующий подход:

<style type="text/css">.domain::before {
    content: "\0040";    /* Unicode character for @ symbol */
}</style>

john<span class="domain">abc.com</span>

1.2 Изменить направление текста

Можно написать адрес электронной почты в обратном порядке (test@abc.com изменить на moc.cba@tset) и затем используя unicode-bidi и с помощью css-свойства direction изменить направление текста. Таким образом адрес на странице будет показан в нормальном виде. Текст можно будет копировать, но он будет скопирован в обратном направлении

<style type="text/css">.reverse {
    unicode-bidi: bidi-override;
    direction: rtl;
}</style>

<!-- тут впишите адрес email задом наперед -->
<span class="reverse">moc.cba@nhoj</span>

1.3 Скрыть с помощью display:none

Можно добавить дополнительные символы/слова в адрес e-mail, чтобы запутать спам-ботов и скрыть их с помощью css-свойства display:none. Таким образом на экран выведется правильный адрес e-mail, а спам-боты увидят неправильный адрес e-mail.

<style type="text/css">#dummy {
    display: none;
}</style>

<!-- Добавте любое количество слов, которые будут невидимыми -->
john<span id="dummy">REMOVE</span>@abc<span id="dummy">REMOVE</span>.com

2. Скрыть e-mail, используя Javascript

2.1 Использование события "onClick"

Можно создать mailto гиперссылку для e-mail адреса и заменить на текст некоторые символы – точки и знак @. Затем добавить событие onClick для этой ссылки, которое будет делать замена неправильного текста на правильные символы.

<a href="mailto:infoATproverstkaDOTcomDOTua" onclick="this.href=this.href
              .replace(/AT/,'@')
              .replace(/DOT/,'.')">Связаться со мной</a>

2.2 Случайный массив

Разбейте название своего e-mail на несколько частей и создайте массив из этих частей. В javascript соедините ячейки массива в нужном порядке и выведите на страницу, используя свойство .innerHTML

<script>
  var parts = ["john", "abc", "com", ".", "@"];
  var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
  document.getElementById("email").innerHTML=email;
</script>

3. WordPress + PHP

Если вы используете CMS WordPress, то у вас есть возможность использовать функцию antispambot() для кодирования вашего e-mail адреса. Функция кодирует символы в адресе в цифровой вид (символ @ становится@, буква а –а) и при этом они будут правильно отображаться в браузере.

<?php echo antispambot("john@abc.com"); ?>

 E-mail адрес также можно преобразовать с помощью специального сервиса.

И наконец, если вы действительно хотите, чтобы спам-боты не смогли увидеть ваш адрес электронной почты, не ставьте его на страницы вашего сайта =) или используйте reCaptcha от компании Google. Скрывайте адрес электронной почты за капчей, а чтобы пользователи смогли увидеть его, они должны правильно ввести капчу.