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

Параметры

Уникальный адрес страницы (абсолютный)

Короткий заголовок, не больше 70 знаков

2-4 предложения, не больше 200 знаков

Ссылка на изображение (абсолютная)

Использовать сниппет в: Facebook, Twitter, Google+, ВКонтакте.

Код для сайта копировать

Код необходимо вставить в

Пример социального сниппета

meta name=»twitter:card» content=»summary_large_image»> meta property=»og:type» content=»website»> meta property=»og:url» content=»http://simonenko.su/tools/snippet/»> meta property=»og:title» content=»Сделай свой социальный сниппет»> meta property=»og:description» content=»Инструмент для подготовки сниппетов в социальных сетях. Работает с Facebook, Twitter, Google+, ВКонтакте.»> meta property=»og:image» content=»http://simonenko.suhttp://i.simonenko.su/logo.jpg»>

Как это может выглядеть

Facebook Open Graph

Twitter Cards

Google+

ВКонтакте

Фишка с кнопкой в рекламной записи ВКонтакте

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

В документации Twitter и Google+ написано, что нужно использовать другие теги. Такой код точно будет работать? Open Graph — технология Facebook, но все социальные сети её понимают и могут использовать. Да, такой код точно будет работать. Моё изображение не отображается, почему?

Требования к изображениям везде разные, но можно свести к следующему: изображения должны быть больше 200 пикселей, отношение сторон должно быть равным (квадратные), максимальный размер изображения не должен превышать 1 Мб. Можно ли использовать несколько изображений? Да, вы можете дублировать og:image столько, сколько вам нужно.

Однако в социальной сети будет использовано одно изображение. Выбор этого изображения делает пользователь. Моё описание не появляется в Twitter, почему? На данный момент Twitter Cards работает только после модерации. Пройти её может каждый сайт. Для этого нужно заполнить специальную форму. Что знает социальная сеть про мою ссылку?

Есть специальные инструменты, чтобы заранее проверить информацию о ссылке. Такие сервисы есть в Facebook, Twitter и Google+. Я хочу получать статистику по моим ссылкам в Facebook, как мне добавить id приложения? Можно использовать следующий тэг: Мне нужно указать id приложения в ВКонтакте, как это сделать? Можно использовать следующий тэг: Будет ли работать сниппет без социальных кнопок на сайте?

Да, будет. Какие социальные кнопки лучше всего ставить? Можно использовать асинхронное подключение оригинальных кнопок или использовать скрипт Артёма Сапегина.

Как сделать кнопку-сниппет для заказа под постом ВКонтакте | Оформление и настройка группы ВКонтакте

Задайте свой вопрос

Алексей Симоненко

• facebook
• github
• twitter
• google plus
• pinterest
• youtube
• foursquare
• linkedin

Источник: simonenko.su

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

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

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

В итоге все будет выглядеть примерно так.

Все очень просто, давайте начнем.

Шаг 1

Для начала в фотошопе создаем файл с максимально возможным размером сниппета 537*240 и делаем кнопку. Если кто-то не может работать в фотошопе, можно поискать в интернете уже готовые кнопки.

Шаг 2

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

Если вы рекламируете интернет-магазин, как в моем случае, то лучше вставлять ссылку на товар.

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

И такой предложенный вариант изображения меня конечно же не устраивает.

Шаг 3

Нажимаем на фото (я выделил это красным цветом)

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

Не стоит этого бояться, вы на верном пути!

После того как вы нажмете на кнопку «отправить» у вас все красиво выравняется.

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

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

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

И еще один важный момент.

Протестируйте два варианта, (особенно если трафик ведет на сайт):

1) Стандартный, где изображение размером 537*240, вся картинка кликабельна.

2) Вариант со сниппетом.

Обязательно поставьте UTM метки. Для чего это нужно сделать? Помимо того, чтобы знать, с какого объявления лучше идет трафик, мы сможем проследить показатели отказов.

Если человек сидит с мобильного телефона, то он просто случайно может нажать на такое изображение (я сейчас про первый вариант) и выйти с сайта, в этом случае может быть больше переходов и намного больше отказов, но нам-то желательно нужны целевые посетители, чтоб при меньшем расходе средств получить больше лидов. По 2-му варианту такой ошибки не будет. Человек тут уже целенаправленно жмет на кнопку.

Понимаете? Т.е. мы можем ошибочно оставить более кликабельное объявление, с которого будет намного меньше целевых посетителей, и отключить менее кликабельное, но с которого будет идти только целевой трафик. А в итоге по количеству привлеченных лидов может победить вариант 2.

Источник: conversion.im

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

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

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

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

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

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

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

1. Ресурс со сниппетом обязан представлять собой интернет-магазин или другую e-commerce-платформу, дающую доступ к платным услугам. Бизнес должен быть легальным и действующим.
2. Доменное имя не может быть на русском языке. Зона .рф не подойдет из-за технических ограничений.
3. На сайте надо разместить каталог товаров или услуг и отделить его от основной части ресурса.
4. В «подвале» сайта надо разместить юридическую информацию, а также официальные контактные данные.
5. Условия приобретения товаров на сайте со сниппетами должны быть равны для всех клиентов.

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

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

• АЗС
• Аптеки
• Фитнес-центры
• Прачечные
• Гостиницы
• Детские сады
• Рестораны
• Школы
• Химчистки
• Такси
• Бары
• Бани
• Гипермаркеты
• Ночные клубы
• Кондитерские
• Кинотеатры
• Музеи
• Театры
• Автовокзалы

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

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

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

1. Адреса организации и время ее работы.
2. Видеоролики.
3. Вопросы и ответы из соответствующего сервиса компании.
4. Изображения.
5. Пошаговые рецепты приготовления еды.
6. Приложения и видеоигры.
7. Фильмы, трейлеры.
8. Учебные материалы.
9. Регион, в котором работает ресурс.

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

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

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

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

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

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

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

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

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

Довод

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

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

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

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

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

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

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

Billy Talent

Pop-Punk

Ben Kowalewicz, John Gallant, Aaron Solovonyuk, Ian D’Sa

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

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

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

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

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

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

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

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

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

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

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

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

Favicon — это мини-иконка рядом с названием сайта, которая обычно олицетворяет логотип компании. Обычно это картинка в формате .svg или .ico. Такие можно сделать на специальных сайтах или нарисовать в Фотошопе. А потом подключить к сайту.

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

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

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

Тут указывается тип изображения. Например, image/png для картинок в формате .png, image/svg для .svg. или image/x-icon для .ico

Вот как выглядит самый простой пример добавления .ico к сайту:

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

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

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

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

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

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

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

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

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

Вывод адреса

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

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

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

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

Чат

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

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

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

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

• Яндекс выдаст ресурсы значок «Защищенное соединение», если на нем используется протокол HTTPS. Правда, есть нюанс – надо, чтобы большая часть трафика шла именно через защищенное подключение.
• Значок «Популярный сайт» получат страницы с большой аудиторией и лояльными пользователями, часто заходящими на ресурс.
• «Выбор пользователей» выдают ресурсам, которые нравятся людям. Да, как и предыдущий, но тут уже Яндекс решает, что такое «нравится».
• Те, кто настроил турбо-режим, получат соответствующий значок с аналогичном названием.
• Официальные сайты и дилеры авто отмечаются галочкой, чтобы пользователи случайно не попали к мошенникам. Его выдают множеству ресурсов на основе информации из Яндекс.Справочника. Критериев много, и туда подходят магазины, авиакомпании, государственные органы и прочее в таком духе.

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

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

1. Размер должен быть не меньше 90 на 90 точек.
2. Ссылка на изображение не должна содержать каких-либо намеков на рекламу.
3. Соотношение сторон должно быть приближено к квадрату.
4. Изображение должно быть занесено в один блок с текстовым контентом страницы.

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

На этом все. Это основная база, которая нужна для настройки сниппетов. Дальше остается изучать словарь schema.org и смотреть, как поведет себя поисковой бот Яндекса. Неизвестно, что взбредет ему в голову и какие данные попадут в сниппет.

Источник: timeweb.com