Эмодзи в сниппетах

Методы указания emoji

Разместить символ emoji в HTML-коде страниц можно тремя способами: символом, десятичным кодом и шестнадцатеричным кодом. Причем поисковые системы поддерживают все три способа и в случае с кодовым (а не символьным) обозначением сами преобразовывают код в символ для своих сниппетов.

Самый простой способ - размещение символом, при нем вы просто копируете символ и вставляете в код. Но, к сожалению, не всегда так можно сделать: часто кодировка базы данных, где содержатся мета-теги и контент страниц, позволяет использовать лишь ограниченный набор символов, в который не входят символы emoji. В таких случаях и выручает использование шестнадцатеричного и десятичного кода символа.

Чтобы быстро найти код для нужного символа, воспользуйтесь поиском Google, где в качестве запроса укажите сам символ и добавьте к нему фразу «decimal code» для получения десятичного кода, либо «hexadecimal code» для получения шестнадцатеричного кода. В 90% случаев Google покажет быстрый ответ с табличкой, в которой будет указан нужный код.

Пример результата поиска по запросу «🌟 hexadecimal code»:

Зоны сниппета с emoji

В сниппете существует множество зон, в которые мы можем добавить emoji. Давайте разберемся какие зоны у него есть и на основе чего они формируются.

Заголовок сниппета

Заголовок сниппета - это самая заметная зона в сниппете, куда можно включить символ emoji. Дело в том что он находится выше всех остальных блоков сниппете (а как известно читаем мы сверху вниз, по F-паттерну), а также имеет наибольший размер шрифта.

Формируется заголовок сниппета на основе содержимого тега title или тега h1, а также на основе внешних ссылок и других источников. Пример такого сниппета в Яндексе:

В Яндексе заголовок сниппета часто формируется на основе содержимого поля title микроразметки Open Graph. Такой вариант указания emoji отлично подходит тем SEO-специалистам, которые не хотят включать лишние символы в содержимое тега title, что ухудшает его текстовую релевантность целевым запросам.

Вид в поиске Яндекса:

Вид в HTML-коде:

Описание сниппета

Описание сниппета - это большой блок текста под заголовком сниппета. Формируется описание на основе содержимого мета-тега description (чаще всего в Google именно так), а также на основе контента и других источников.

Список в описании

Список в описании сниппета - особый блок с маркированным списком, который отображается в сниппетах Яндекса. Формируется он на основе HTML-списков (ol-li, ul-li и dl-dd).

Вид в поиске:

Вид в HTML-коде:

Навигационная цепочка

Навигационная цепочка (хлебные крошки) - это блок ссылок, отражающих положение страницы в структуре сайта. Формируется этот блок на основе микроразметки хлебных крошек (Microdata или JSON-LD) и внутренней перелинковки сайта.

Ни разу не встречал включение emoji в навигационную цепочку в Яндексе, зато в Google попадается регулярно.

Вид в поиске Google:

Вид в HTML-коде:

Быстрый ответ

Быстрый ответ - это расширенный сниппет, показываемый в результатах поиска на нулевой позиции (до всех остальных результатов). Быстрые ответы существуют в обеих поисковых системах, но чаще всего встречаются в Google.

Вид в поиске:

Вид в HTML-коде:

Часто задаваемые вопросы

Часто задаваемые вопросы - это блок расширенного сниппета в Google, содержащий спойлеры с популярными вопросами и ответами на них. Из-за того что вебмастеры слишком сильно спамили в этом блоке символами emoji, Google стал вырезать символы в случае если они не отображаются на странице.

Вид в поиске до вмешательства Google:

Вид в поиске после вмешательства Google:

Вид в HTML-коде:

События

События - это ещё один блок расширенного сниппета в Google, формирующийся на микроразметке Event и её дочерних схемах (например, SaleEvent). Указав эмоджи в названии каждого события микроразметки мы увидим их в сниппете.

Вид в поиске Google:

Вид в HTML-коде:

Списки параметров

Поисковая система Google также может выводить расширенные сниппеты с параметрами, в которые можно включить эмодзи. По данной теме для участников Rocket Club у нас даже написано отдельное большое руководство и сделан закрытый инструмент, используя которые можно получить такой сниппет:

Проблема поддерживаемости emoji

Стоит понимать, что ваши emoji могут не всегда отображаться так как вам хочется. А иногда вообще могут не отображаться у пользователей.

Некорректное отображение

Вид символа emoji в первую очередь зависит от устройства на котором его просматривают. Чаще всего основные платформы вроде Windows, Android и MacOS/iOS создают схожие изображения для символов эмоджи, но бывают и случаи когда вид его значительно отличается в зависимости от платформы. Как например, в данном случае отличается цвет и форма символов:

Бывает что отображение отличается так сильно, что теряется ощущение, которое передает символ. В следующем примере есть милый фиолетовый пиксельный инопланетянин на MacOS/iOS, который превращается в опасного зубастого зеленого монстра при просмотре в Windows.

Отсутствие поддержки

Если вы не гонитесь за последними айфонами новинками техники, то наверняка встречались с ситуацией, когда вместо символа эмодзи у вас отображался пустой квадрат. Это связано с тем, что на вашем устройстве ещё не поддерживается та версия Unicode, в которую включен этот символ.

Какой сниппет мы хотим получить:

Какой сниппет видят 32% пользователей:

Почему это вообще проблема? Потому в указанном примере рост CTR сниппета будет на 32% меньше, чем мог бы быть при выборе поддерживаемого символа.

Чтобы выяснить какие символы emoji поддерживает большинство популярных операционных систем, я поставил их себе на компьютер и проверил отображение. Получилась большая табличка, часть которой показана на скриншоте.

После чего свел эти данные с популярностью операционных систем в мире и получил поддерживаемость каждой версии Unicode с символами emoji (100% - отображается везде, 0% - не отображается нигде).

Да, всё верно, если в момент публикации этой статьи вы попробуйте открыть набор emoji входящий в Unicode версии 13.0, то увидите что ни один символ не отображается.

Популярные ошибки

Изо дня в день встречаю одни и те же ошибки при использовании emoji у SEO-специалистов и вебмастеров.

Экранирование амперсанда и точка с запятой

Во многих CMS осуществляется автоматическое экранирование вводимых спецсимволов, в частности символа амперсанда «&». То есть вводимый символ & заменяется на &.

Если при это вы используете код символа emoji (например, 🌟) и забыли указать точку с запятой в конце, то амперсанд в начале при экранировании будет заменён и получится что-то вроде &#127775, что приведёт к тому что в сниппете появится не нужный нам символ, а его код, как в следующем примере.

Вид в поиске:

Вид в HTML-коде:

После размещения emoji в CMS проверять его в HTML-коде страницы, чтобы избежать такой обидной ошибки.

Введение пользователей в заблуждение

Не стоит пытаться вводить пользователей в заблуждение своими символами emoji. Опытные пользователи это заметят в Яндексе, а Google просто вырежет emoji из сниппета. Например, Джон Мюллер уже признавался что Google вырезают последовательность символов звездочек из сниппета, так как они похожи на рейтинг в сниппете.

Сниппет, вводящий в заблуждение (Яндекс):

Сниппет той же страницы в Google:

В итоге данный сайт имеет CTR у сниппетов в Google значительно ниже того, который мог бы быть.

Агрессивность

Излишняя агрессивность сниппетов - отталкивает, не стоит пытаться на коммерческом сайте сделать что-то вроде такого.

Ведь, согласитесь, такая реклама же у вас не вызывает доверия:

У пользователей поиска тоже не вызывает. А значит не надо так.

Сложность восприятия

Злоупотребляя различными символами эмодзи в сниппетах мы усложняем его восприятие пользователями поиска. Гораздо лучше использовать 1-2 тематических символа в одном цвете, чем нашпиговать сниппет всем подряд.

К слову, это даже не моё мнение, а результаты проведенного мной опроса. Спросив коллег и знакомых, по какому из двух сниппетов они скорее всего бы кликнули (сами сниппеты представлены на скриншотах далее), оказалось что 67% опрошенных больше доверяют сайтам с лаконичными сниппетами.

Кейс по внедрению emoji

Чтобы проверить эффективность использования эмодзи в Google, мной был взят свой статейный сайт с идеями подарков (ru.giftbox.pro). На нём уже больше года ничего не делалось, а потому это лучшая площадка для проведения достоверного эксперимента, на результаты которого не будут влиять другие работы по сайту.

Были проработаны мета-теги Description, куда в качестве разделителей пассажей были включены символы эмодзи (в виде их десятичного кода).

Пример Description:

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

Пример микроразметки BreadCrumbs:

Далее были отправлены все измененные страницы на переобход (это более 100 статей), в результате чего символы стали выводиться в сниппете.

Сниппет до внедрения:

Сниппет после внедрения:

Согласитесь, сниппет стал более заметным, особенно на фоне скучной серо-синей выдачи Google. Эффект от этого можно заметить в фактических данных, CTR сниппетов сайта вырос в 2 раза, а также значительно выросла средняя позиция сайта. И самое приятно - доход с AdSense вырос на 33%.

Результаты:

Так как выросли позиции и кликабельность сниппетов, то должен был вырасти и поисковый трафик с Google. И он действительно вырос:

Хейтеры скажут, что это фотошоп сезонность, ведь сайт про подарки и время - декабрь. Но, нет, так как Google вырос в том числе и на фоне Яндекса.