Как оформить внешний вид сайта в результатах поиска
Приемы для повышения кликабельности сайта
Понравится и работать с нами.
Каким бы ни был дизайн сайта, в поисковой выдаче пользователь увидит только небольшой стандартный блок: ссылку, заголовок, описание страницы и ещё несколько элементов. Всё это вместе называется сниппет.
Кажется, что сниппеты более или менее одинаковы у всех страниц в поиске, но нет – это краткое описание сайта можно сделать чуть информативнее и красивее, получив дополнительное преимущество в SEO-продвижении. Рассказываем, как выигрышно представить сайт в поисковиках.
Как формируется сниппет и из чего он состоит
Поисковые системы формируют сниппеты автоматически на основе содержимого страницы и микроразметки (о ней ниже).
Из каких элементов обычно состоит сниппет:
Так выглядят элементы сниппета в поисковой выдаче.
Также поисковые роботы обращают внимание на дополнительные источники информации о сайте: Яндекс.Каталог, Яндекс.Маркет или внешние ссылки.
Как привлечь пользователей с помощью сниппета
В прямом смысле слова оформить сниппет нельзя: поисковики составляют его сами. Но опираются они всегда на ваш контент, метатеги, микроразметку, поэтому косвенно влиять на внешний вид и содержание сниппета можно. Расскажем, как это делаем мы в «Эврике».
Создаем заголовок Н1 и тег title
Работу начинаем с заголовка, ведь это самый заметный элемент сниппета. Чаще всего поисковики формируют заголовок на основе Н1 (видимый заголовок на странице сайта) и метатега title (расширенный заголовок, видимый только поисковикам), поэтому прописываем их сами.
Обратите внимание: они должны отличаться! Стандартная длина title – не более 50-70 символов, заголовок H1 обычно еще короче.
Пример заголовка Н1 для карточки товара в интернет-магазине подарков.
А так выглядит мета-тег title для этой же страницы – в нем немного больше информации.
Для сниппета в этом примере Яндекс использовал видимый заголовок Н1 в том виде, в каком он прописан на странице.
А вот другой пример, когда основа заголовка – мета-тег title.
Пишем релевантные описания – description
Описание страницы дает пользователю примерное представление о ней и содержит часть самой важной информации. Мы советуем самостоятельно прописывать привлекательное описание в метатеге description, иначе поисковик просто возьмет с сайта фрагмент текста, который посчитает отвечающим запросу (но не всегда этот выбор удачен).
Каким должен быть дескрипшен:
Пример описания, взятого Яндексом из метатега description (главная страница косметологической клиники).
Добавляем фавиконку
Небольшой и яркий логотип компании сразу бросается в глаза, а еще помогает вашим постоянным клиентам быстро узнать бренд в выдаче.
Фавиконка для интернет-магазина дверей.
Работаем над структурой сайта и позициями в ТОПе, чтобы в сниппете появились быстрые ссылки
Быстрые ссылки – элемент навигации в сниппете, который есть только у 3 первых страниц в поисковой выдаче. Ссылки на другие страницы сайта нельзя добавить в сниппет самостоятельно, но можно проработать четкую структуру и повысить шансы на получение этого элемента.
Ссылки на какие страницы поисковики добавляют в сниппет:
В интернет-магазине подарков можно перейти по быстрым ссылкам к разделу доставки и оплаты, а также к проигрывателям, шкатулкам и другим товарам в каталоге.
Если в сниппет автоматически попали нежелательные ссылки, их можно убрать в панели вебмастера.
Обращаем внимание на навигационную цепочку
Внутренние страницы иногда отображаются в выдаче с навигационной цепочкой – так пользователь может быстро оценить структуру сайта и место, которое занимает в ней найденная страница.
Этот элемент получают в сниппете не все сайты, но можно повысить шансы на появление цепочки:
Пример вложенности на сайте магазина подарков: URL страницы отражает цепочку «Категории» – «Ретро».
Используем дополнительные фишки
И еще несколько способов привлечь к вашему сайту внимание пользователей и выделиться в общей выдаче:
Можно использовать значок телефона, чтобы визуально выделить контактную информацию.
Например, GorMed – имя сайта клиники.
Как улучшить сниппет с помощью микроразметки
Отдельно расскажем про микроразметку: она тоже помогает улучшить внешний вид сайта в поисковой выдаче.
С помощью микроразметки вы указываете поисковым роботам, какая именно информация есть на странице и как она структурирована. Поисковики видят, где у вас указан адрес, телефон или цены и какая из картинок на сайте – ваш логотип.
Почему мы советуем использовать микроразметку:
Пример расширенного сниппета для завода дверей.
Два самых популярных стандарта микроразметки сайтов:
Идеальное представление, или как Яндекс.Вебмастер радеет за красивый сниппет
Как часто вы обращаете внимание на то, как выглядит сайт в выдаче поиска? Лично я — часто. Сразу обращаю внимание, когда представлен номер телефона организации, адрес электронной почты для связи или другая нужная информация. Это удобно, красиво и структурировано.
В этой статье мы рассмотрим новый раздел в Вебмастере «Представление в поиске» (необходима авторизация и не менее одного добавленного сайта в Вебмастер). Это свод рекомендаций для наиболее привлекательного сниппета в выдаче поиска. Также покажем, какие настройки произвести, чтобы увеличить шансы одобрения роботом.
Яндекс не гарантирует показ расширенных сниппетов в выдаче. Решение остается за алгоритмом.
Справа мы видим зеленые галочки напротив некоторых разделов. Это значит, что сниппет подключен.
Например, на скриншоте показано, как представлен официальный сайт сети супермаркетов «Слата». Как мы видим, рядом со ссылкой на сайт есть знак качества «навигационный ответ». Также есть фавиконка, описание того, что представляется на сайте, адрес одного из супермаркетов, его рейтинг в Яндекс.Справочнике со ссылкой на отзывы, а еще быстрые ссылки с наиболее посещаемыми страницами.
Или возьмем наш сайт — 1PS.RU. Заголовок отображается отдельным блоком, название написано большим размером шрифта и справа выводятся популярные статьи из блога.
И далее фавиконка, адрес организации, номер телефона, рейтинг со ссылкой на отзывы и быстрые ссылки.
По порядку, пожалуйста
Да, давайте по порядку: от колдунщика до рейтинга.
Колдунщик турбо-страниц. Блок справа от поиска, который отвечает на конкретный вопрос пользователя. У меня сайт развлекательный, соответственно, пример будет извне. Например, задаем вопрос про здоровый сон, и, помимо прямого ответа, справа отображается часть статьи и ссылка на турбо-версию страницы с вероятным ответом и рекомендациями. Если у меня низкая скорость соединения, я, конечно же, прочту статью именно через турбо-версию сайта. О том, как подключить турбо-страницы, вы узнаете чуть ниже.
Организация. В данном блоке отображается информация о компании. Стоит добавить ее в Яндекс.Справочник, если вы не сделали ранее. Это позволит отображать в сниппете время работы, адрес и отзывы.
На странице добавления компании вводим всё согласно правилам. О том, как правильно разместить организацию в Яндекс.Справочнике, мы писали ранее.
Мою компанию опубликовали через 2 дня после подачи заявки.
Сайт у меня совсем новый, а для индексации требуется время, поэтому приведу в пример гипермаркет «Лента».
Если у вас кафе или ресторан, и компания добавлена в Яндекс.Справочник, при этом профиль максимально подробно заполнен, то в сниппете будут отображаться не только контактные данные, но и меню, а также возможность заказать через сервис Яндекс.Еда.
Новости. Если у вас новостной портал, то вы можете стать партнером Яндекс.Новостей, и ваши материалы будут в выдаче по запросу «новости ».
У меня сайт не новостной, так что просто вводим запрос «новости Иркутска» и видим, что «Комсомольская Правда» является партнером Яндекс.Новостей.
На этой странице можно подать заявку на партнерство с Яндекс.Новостями. Там же полный свод правил для успешного сотрудничества.
Заголовок и описание. Заголовок главной страницы берется из title, а описание из description, поэтому соблюдайте правила написания заголовков и описания. Напомню, title может содержать от 40 до 70 символов с пробелами, а description от 150 до 250 символов с пробелами. Подробнее о том, как составлять title и description, мы писали в статье.
Возьмем для примера сайт на WordPress. Прописываем метатеги для отображения названия и описания в поиске. Для этого устанавливаем плагин Yoast SEO для WordPress. Кстати, в нем же можно отредактировать robots.txt и настроить карту сайта.
Для применения параметров необходимо некоторое время. Но есть пример от Stopgame.
И проверяем ответ сервера через прямую ссылку. Получили ответ 200? Значит, все отлично.
Знаки качества. Для более привлекательного сниппета используются знаки качества, они помогут пользователю сориентироваться по запросу, будь это точное попадание в выдаче или обозначение проверенных ресурсов.
Существуют следующие знаки качества:
О каждом подробно рассказывали в нашем материале, но на более важном остановимся чуть подробнее.
Турбо-страницы. Эта технология позволяет при медленной скорости соединения быстро открывать страницы сайта.
Для подключения необходимо обратиться к rss-фиду. Для его получения я установил плагин Яндекс.Турбо. Он автоматически формирует ленту.
Далее в Вебмастере, в разделе Источники Турбо-страниц, вставляем ссылку на ленту, жмем «Добавить» и ждем пока лента проверяется. В течение нескольких дней мой фид прошел проверку. Статус: «Без ошибок». Проверяем — работает!
При подключении турбо-страниц в мобильной выдаче также будут отображаться самые популярные статьи ресурса с соответствующей иконкой.
Также предпросмотр турбо-страниц доступен на соответствующей странице в Вебмастере.
Т.к у нас интернет-магазин, турбо-страницы можно подключить и к нему. На этой же странице в вебмастере выбираем YML для интернет-магазинов и вставляем ссылку на YML фид. Ждём, пока фид проверяется. Кстати, товарные сниппеты также будут отображаться в поиске в виде отдельного товара с изображением.
Более подробный материал о турбо-страницах для интернет-магазинов находится по ссылке.
HTTPS. Защищенное соединение — это очень важно не только для красивого сниппета, но и для безопасности сайта. Про переезд на https мы рассказывали в нашем блоге.
Для этого на хостинге TimeWeb я приобрел бесплатный SSL-сертификат на 3 месяца и переключил ползунок на «Использовать безопасное соединение https://» => переезд на https. Но это случай частный, и для каждого хостинга свои правила.
Опять же сайт я создал совсем недавно, поэтому трафика недостаточно для отображения знаков. Но вот как это выглядит у нашего сайта.
Картинки. Если в статье есть галерея картинок, то их можно разметить с помощью микроразметки schema.org. В справке Яндекса опубликована подробная инструкция.
Пример изображения, для которого применяется микроразметка:
Быстрые ссылки. Формируются автоматически с помощью алгоритма Яндекса, и для их появления придется выждать какое-то время. Вы никак не можете повлиять на их формирование, зато потом высокий трафик на сайт практически гарантирован.
Пример известной пиццерии Papa Johnes. Ниже можете видеть самые популярные разделы и товары сайта.
Галерея статей. Если подключены турбо-страницы, то в выдаче будут отображаться наиболее популярные статьи с сайта с изображениями. Все это также формируется автоматически.
Тут уже на примере тестового сайта можно посмотреть, как это выглядит. Для формирования такого сниппета потребовалось около двух недель.
Товар и списки товаров. Сниппеты формируется, если на сайте подключены турбо-страницы для интернет-магазинов, и на фид передается полный каталог товаров. В карточке товаров должно быть не менее пяти изображений. Первый сниппет показывается по запросу конкретного товара. Второй строится автоматически на основе популярных товаров.
Рейтинг, телефон и адрес. Все аналогично второму пункту — организация. Если компания добавлена в Яндекс.Спарвочник, в сниппете будет отображаться вся необходимая контактная информация.
А что дальше?
После всех вышеперечисленных манипуляций, спустя небольшое время, при положительном решении алгоритма Яндекса мы можем увидеть в выдаче красивый сниппет при практически любых запросах пользователя.
Выглядит эстетично, не правда ли? Возможно, пользователю будет достаточно информации в сниппете. А если и нужно будет зайти на ресурс, то ваша «дверь» будет одна из самых красивых, ведь первое впечатление сформировывается на основе внешних данных.
Не знаете, с чего начать и к отображению какого сниппета стоит стремиться? Мы вас уже ждем — с радостью поможем!
