Как сделать сниппет с картинкой

Содержание

Как настроить сниппеты в Яндексе

33ab924ff00ad981a69fe40c5efa8edf

Правильная подача сайта в поисковой выдаче — половина успеха. Красивая и информативная карточка привлекает аудиторию и повышает шансы на результативное посещение со стороны потенциальных клиентов. Поэтому надо познакомиться со сниппетами и научиться их правильно настраивать.

Что такое сниппет в Яндексе?

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

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

Каким сайтам разрешено использовать сниппеты?

У Яндекса есть ряд требований к страницам, которые хотят размещать в поисковой выдаче сниппеты:

Ресурс со сниппетом обязан представлять собой интернет-магазин или другую e-commerce-платформу, дающую доступ к платным услугам. Бизнес должен быть легальным и действующим.

На сайте надо разместить каталог товаров или услуг и отделить его от основной части ресурса.

В «подвале» сайта надо разместить юридическую информацию, а также официальные контактные данные.

Условия приобретения товаров на сайте со сниппетами должны быть равны для всех клиентов.

Подходите под вышеизложенные требования? Тогда ознакомьтесь с условиями сотрудничества и приступайте к настройке.

Неполный список подходящих ресурсов

Все, что зарабатывает деньги, грубо говоря. Узнать, подходит ли ваш сайт под требования Яндекса, можно на сайте поисковика.

Данные, которые можно передать в сниппет

Сам поисковик говорит о том, что в сниппет можно занести:

Адреса организации и время ее работы.

Вопросы и ответы из соответствующего сервиса компании.

Пошаговые рецепты приготовления еды.

Приложения и видеоигры.

Регион, в котором работает ресурс.

Как настроить сниппет?

Это действие делится на два этапа: формирование через код страницы и настройка в соответствии с негласными правилами создания красивого и эффективного сниппета.

Инструкция по подключению

Часть данных Яндекс берет прямо из HTML-разметки страницы. В первую очередь туда попадают элементы title и description. Поисковик использует их в поисковой выдаче по умолчанию.

То есть настраивать что-то дополнительно даже не нужно. Все происходит без участия администратора.

Отдельно учитывается текст на странице. Причем как данные, отмеченные стандартными атрибутами, так и элементы микроразметки из словаря schema.org.

Также Яндекс собирает информацию для сниппетов из дополнительных источников. В их числе Яндекс.Маркет и Яндекс.Каталог, где уже проставлены нужные теги и откуда поисковику проще выудить актуальную и релевантную для пользователей информацию.

Настройки микроразметки

С помощью микроразметки можно вручную вносить в сниппет нужный формат данных. Делается это с помощью внедрения в код страницы дополнительных блоков в формате:

Так выглядел бы условный сниппет с описанием фильма «Довод» и его трейлером.

Чтобы лучше адаптировать получившийся блок под поисковик, можно указать и другие атрибуты:

Режиссер: Кристофер Нолан (род. 30 июля 1970 г.) Фантастика Трейлер

itemscope говорит поисковому боту, что у нас есть блок с информацией для сниппета.

itemtype=«http://schema.org/Movie» говорит о том, что это за блок, ссылаясь на статью в словаре schema.org.

На этом все не заканчивается. Из словаря можно вытащить и дополнительную информацию. Приведем в пример музыкальную группу.

Атрибут itemprop указывает на конкретный тип информации. В нашем случае речь идет о музыкальном жанре описываемой группы.

Критерии хорошего сниппета

Как я уже писал выше, в сниппете надо размещать актуальную и полезную информацию. Лучше не пускать на самотек и предусмотреть ряд моментов при оформлении сниппета.

Подходящий заголовок

Это первое, что увидит потенциальный посетитель сайта. Надо вставить сюда что-то понятное и простое. А еще это понятное и простое должно влезать в предел между 60–70 знаками с учетом пробелов. Иначе может обрезаться часть полезного текста. Это будет некрасиво и неудобно для пользователей поисковика.

Читайте также:  Как сделать диаграмму рассеяния в excel

Вписывается заголовок в атрибут title. Ничего дополнительно настраивать и вводить не нужно.

Многие рекомендуют делать заголовок каким-то красивым и привлекающим внимание, но это все вкусовщина. Лучше сделать его понятным, чтобы удовлетворить потребности клиента, а не SEOшников с их вечно меняющимися стандартами.

Грамотное описание

Робот Яндекса сам решит, что пойдет в описание под заголовком. Это будет либо кусок текста со страницы, либо текст, который вы занесли в атрибут description. И тот, и другой варианты — ок. Просто надо будет подправить информацию в нужном месте.

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

Текстом в описании можно управлять вручную. Для этого надо разместить тег !–noindex в участке, который нужно выкинуть из сниппета. Он запретит роботу анализировать и использовать «скрытый» контент.

Вписывающаяся фавиконка

Для этого надо вставить в html-код основной страницы строчку, в который будут указаны тип ресурса, адрес и тип данных.

icon указывает на тип используемого ресурса

Здесь указывается путь до файла. Можно ввести ссылку до сервера или внешнего каталога

Добавляем значок в корневую директорию ресурса (туда же, где вы оставили index.html).

Потом открываем index.html и вписываем в head строчку.

Теперь поисковик найдет значок и вставит его в сниппет.

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

Есть плагины типа YoastSEO для WordPress, где есть отдельный раздел настроек для вложенных ссылок. А есть словарная статья на сайте schema.org, описывающая свойства breadcrumbs для ручной настройки.

Тут уж на ваш выбор. Зависит от личной технической оснащенности.

Корректные быстрые ссылки

Быстрые ссылки — набор страниц, которые робот Яндекса считает наиболее релевантными для запроса пользователя. С помощью них человек может перескочить через все ненужные блоки сайта и перейти сразу к искомому.

Вставить туда ссылки на свой вкус нельзя. Все решает поисковик. Можно лишь исключить некоторые страницы через интерфейс Яндекс.Вебмастера в подменю «Быстрые ссылки».

Вывод адреса

Адрес обычно вписывается в раздел «Контакты». А он прописывается в «шапке» или «подвале». Лучше всего прописывать его через микроразметку schema.org.

Думаю, без дополнительных пояснений понятно, какое из свойств за какой тип информации отвечает.

Удобное размещение цен

Яндекс умеет выводить стоимость товаров по своему желанию, если информация о них есть в условном Яндекс.Маркете или прописана в параметрах Яндекс.Вебмастера. Главное, вовремя ее обновлять.

В Яндекс.Диалогах можно завести себе чат-платформу для сайта. Через нее можно контактировать с посетителями сайта. Причем кнопка для начала диалога появится прямо в поисковой выдаче.

Поисковик поддерживает и другие чаты, используемые в вебе.

Значки Яндекса

Поисковик выставляет их автоматически, если ресурс соответствует одному или нескольким соответствующимм критериям:

Яндекс выдаст ресурсы значок «Защищенное соединение», если на нем используется протокол HTTPS. Правда, есть нюанс – надо, чтобы большая часть трафика шла именно через защищенное подключение.

Значок «Популярный сайт» получат страницы с большой аудиторией и лояльными пользователями, часто заходящими на ресурс.

«Выбор пользователей» выдают ресурсам, которые нравятся людям. Да, как и предыдущий, но тут уже Яндекс решает, что такое «нравится».

Те, кто настроил турбо-режим, получат соответствующий значок с аналогичном названием.

Официальные сайты и дилеры авто отмечаются галочкой, чтобы пользователи случайно не попали к мошенникам. Его выдают множеству ресурсов на основе информации из Яндекс.Справочника. Критериев много, и туда подходят магазины, авиакомпании, государственные органы и прочее в таком духе.

Правильно настроенные картинки

Поисковик сам выбирает, какие картинки будут использованы в сниппетах, но есть ряд технических требований, на которые он точно обратит внимание:

Размер должен быть не меньше 90 на 90 точек.

Ссылка на изображение не должна содержать каких-либо намеков на рекламу.

Соотношение сторон должно быть приближено к квадрату.

Изображение должно быть занесено в один блок с текстовым контентом страницы.

Но предугадать, что за изображение попадет в выдачу, нереально. Это множество раз подтверждали представители Яндекса.

Источник

Как сделать расширенный сниппет: подробное руководство для чайников

Время чтения: 15 минут Нет времени читать? Нет времени?

Расширенный поисковый сниппет – это визитная карточка вашего сайта на странице выдачи Google или «Яндекс». Он служит не просто для красоты, а приносит дополнительные переходы пользователей. Если вы еще не используете этот инструмент, потому что боитесь лезть в код сайта или путаетесь в типах разметки – это руководство для вас. Здесь есть все что нужно, даже если вы никогда не имели дела с HTML-кодом.

Читайте также:  Как сделать короткие шнурки на кроссовках

Что такое расширенные сниппеты и зачем они нужны

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

2015 11 11 tex 02

Поисковые системы формируют сниппет автоматически. В качестве источника роботы используют контент страницы или мета-тег description. Стандартный сниппет ограничен приблизительно 160 символами с пробелами. Это два или три коротких предложения.

1

Зачем нужны расширенные сниппеты

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

Если вы заинтересованы в целевом трафике, немедленно внедряйте расширенные описания и они обязательно дадут новые продажи. А информация, приведенная ниже, поможет сделать это правильно.

Какие существуют словари и типы синтаксиса микроразметки

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

2015 11 11 tex 04

Каждый язык микроразметки вы можете реализовать с помощью разных типов синтаксиса:

Какой язык и синтаксис выбрать

Выбирайте язык и синтаксис в зависимости от цели и задач, которые вы хотите решить. Если вам нужны расширенные сниппеты на страницах поисковой выдачи, оптимальным выбором будет Schema.org. Этот тип микроразметки поддерживают все крупные поисковые системы. Используя его, вы можете описать множество разных сущностей и получить разные типы расширенных сниппетов. Реализовать такую разметку вы можете с помощью синтаксиса microdata или JSON-LD.

Если вам необходимо управлять описаниями ссылок в социальных сетях, внедрите Open Graph. Чтобы реализовать эту разметку, вы будете использовать формат RDFa. Язык Microformats.org также заслуживает внимания благодаря простоте использования.

Как получить расширенные сниппеты с помощью Schema.org

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

Не старайтесь запомнить наизусть порядок указания атрибутов. Вам необходимо понять принцип работы со Schema.org. Для практической повседневной работы лучше пользоваться инструментами, которые перечислены ниже.

Сервис Schema Markup Generator

Веб-сервис Schema Markup Generator – простой и удобный генератор микроразметки, который доступен абсолютно бесплатно на сайте международного агентства Merkle. Чтобы его использовать, не требуется знать веб-программирование. Для работы с сервисом желателен английский (на базовом уровне), но устроит и онлайн-переводчик. Кроме этого, нужно знать, куда и как вставить подготовленный инструментом код.

Предположим, вы хотите с помощью Markup Generator разметить страницу одного из авторов блога. Для этого нужно выбрать тип разметки «Персона» (Person).

2

На открывшейся странице укажите данные о человеке: имя и фамилию, ссылку на личную страницу, ссылку на фотографию, социальные сети (нужно выбрать несколько в меню), должность и компанию.

3

Чтобы проверить, что получилось, нужно нажать на оранжевую иконку Google в правом верхнем углу и выбрать Structured Data Testing Tool. В новой вкладке откроется инструмент «Проверка структурированных данных» Google Search Console c вашим описанием сущности Schema.org. Это поможет найти ошибки, покажет предупреждения и результат ввода данных для сниппета.

4

Нажатие на голубую кнопку «Копировать» (Copy) помещает код разметки в буфер обмена, чтобы вы могли его вставить на страницу сайта с помощью редактора вашей CMS.

Обратите внимание: если пользуетесь CMS с возможностью редактировать страницу в визуальном формате и формате HTML, обязательно выберите второй вариант. В качестве примера используется набором данных типа «Книга», но для других сущностей Schema.org.

5

Если вы вставите код в визуальном редакторе, он некорректно отобразится на странице.

6

В режиме редактирования HTML вы можете выбирать, в каком месте страницы вставить код. Например, вы можете оформить его в качестве врезки в середине текста или резюме в конце статьи.

7

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

2015 11 11 tex 10

Вы можете реализовать микроразметку Schema.org с помощью синтаксиса JSON-LD. Для этого воспользуйтесь инструкцией. С помощью JSON-LD вы сможете внедрить на сайт только несколько типов микроразметки: Article, Person, WebSite, searchAction и некоторые другие. Синтаксис JSON-LD имеет важное преимущество перед микроданными: с его помощью можно создавать разметку, которую «видят» только поисковые системы.

Как разметить страницу с помощью маркера Google

Вы можете получить расширенные сниппеты, разметив страницу с помощью «Маркера» из старой версии Search Console, недоступной с сентября 2019 года. В новой версии у него пока нет аналога, но его можно открыть по этой ссылке – для перехода вам потребуется использовать аккаунт Google.

Читайте также:  Как сделать сеялку для чеснока

8

На открывшейся странице нажмите кнопку «Начать выделение».

9

Введите URL страницы, которую планируете разметить. Выберите необходимый тип разметки. Поставьте флажок напротив опции «Отметить только эту страницу», если планируете вставить разметку только на одной странице. Если вы хотите одновременно разметить несколько страниц, оставьте опцию по умолчанию «Отметить эту и похожие страницы».

2015 11 11 tex 13

Выбранная страница должна открыться в режиме маркировки. Теперь вы можете выделять курсором нужные фрагменты контента и добавлять значения к атрибутам.

2015 11 11 tex 14

Убедитесь, что значение атрибута отобразилось корректно. Оно должно появиться в блоке «Мои элементы данных».

2015 11 11 tex 15

Таким же способом разметьте остальные данные. Если вы размечаете страницу с описанием фильма, укажите режиссера, исполнителей главных ролей, жанр, год выхода и т.п. После выделения нужных данных нажмите кнопку «Опубликовать».

2015 11 11 tex 16

После очередного индексирования сайта Google учтет изменения и отобразит в выдаче расширенный сниппет.

Как получить расширенный сниппет с помощью мастера разметки структурированных данных Google

С помощью мастера разметки вы можете добавить структурированные данные на страницы сайта или в HTML-код электронных писем. Авторизуйтесь в системе и укажите URL страницы, которую планируете разметить. Выберите тип данных и нажмите кнопку «Начать разметку».

2015 11 11 tex 17

На открывшейся странице выделяйте курсором данные и присваивайте значения атрибутам, как при работе с маркером.

2015 11 11 tex 18

После завершения разметки нажмите кнопку «Создать HTML». Скопируйте выделенный фрагмент с кодом разметки и вставьте на страницу сайта.

2015 11 11 tex 19

Как получить расширенные сниппеты с помощью микроформатов

С помощью микроформатов вы можете отображать в сниппете контактные данные человека или организации, кулинарные рецепты, отзывы и информацию о товарах. Для некоторых типов микроформатов существуют автоматические генераторы кода:

Чтобы разметить страницу с контактными данными, укажите необходимую информацию в генераторе кода hCard. В поле preview вы можете предварительно просмотреть карточку с персональной информацией, которая будет отображаться на странице сайта. Если данные указаны корректно, скопируйте код и вставьте его на сайт. Расширенный сниппет появится после очередной индексации ресурса поисковиками.

2015 11 11 tex 22

Как получить расширенные описания в социальных сетях

Универсальный инструмент для решения этой задачи — протокол Open Graph. Его «понимают» наиболее популярные социальные сети, включая «ВКонтакте», «Фейсбук», «Твиттер», Google+ и другие.

2015 11 11 tex 23

Обратите внимание, в выпадающем меню Type необходимо выбирать подходящий тип контента: статья, видео, книга и так далее.

Чтобы получить привлекательные описания в Twitter, вы можете воспользоваться Twitter Cards. Вам поможет подробная инструкция по использованию этого инструмента.

Обратите внимание на следующие инструменты:

Если вы по каким-то причинам не хотите пользоваться универсальными веб-генераторами разметки Open Graph, установите на сайт подходящий плагин или расширение.

Какие сниппеты использовать в зависимости от типа сайта

Ответ на этот вопрос зависит от цели и задач, которые вы решаете, а также от типа вашего сайта. Начните с базовых типов разметки. К сожалению, Google больше не поддерживает разметку Authorship, поэтому не тратьте на нее время. Если вы не хотите ограничиваться базовой разметкой, ориентируйтесь на особенности проекта.

Если вы открыли интернет-магазин, то вам будут полезными следующие типы сниппетов:

2015 11 11 tex 24

Для контент-проектов можно использовать такие типы разметки:

Администраторам корпоративных сайтов можно подумать о следующих типах расширенных сниппетов:

Также обратите внимание на типы разметки и сниппетов, подходящие сайтам с узкой тематикой:

Обратите внимание, внедрение микроразметки не гарантирует отображение расширенного сниппета в поисковой выдаче. «Поисковики» не показывают расширенные описания из-за некорректной разметки, спама в сниппетах, попытки скрыть разметку от пользователя. Проверить корректность разметки можно с помощью инструмента Google или «Яндекс». Не отказывайтесь от микроразметки, если поисковые системы не отображают расширенное описание сразу после ее внедрения. Публикуйте контент и создавайте новые страницы с разметкой. Скорее всего, «поисковики» рано или поздно заметят ее и дадут вам расширенный сниппет.

Получить расширенный сниппет просто

Для этого нужно выбрать тип описания, который вы хотите показывать в поисковой выдаче. Затем вам нужно выбрать язык разметки, с помощью которой вы передадите поисковым системам структурированную информацию. Оптимальным вариантом считается словарь Schema.org, который можно реализовать с помощью микроданных или связанных данных JSON-LD.

Не тратьте время на создание кода вручную. Воспользуйтесь автоматическими генераторами разметки, например, Schema Markup Generator. Если вы создаете страницы с разметкой ежедневно, установите на сайт плагин или расширение для создания семантической разметки. Обязательно внедрите Open Graph для получения расширенных описаний в социальных сетях. Помните, поисковики не гарантируют отображения расширенного сниппета, даже если вы корректно разметили страницы сайта.

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

Источник

Поделиться с друзьями
admin
О том как сделать своими руками
Adblock
detector