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

Вот так, например, теперь выглядят твиты из нашего портфолио (вместо мелкой надписи из 160 символов):

Twitter Card из портфолио
Это была затравочка, а теперь по делу.

Про саму кнопку и чем плохо ее обычное поведение

Кнопка “Поделиться”, о которой я говорил выше, выполняет простое действие - открывает специальную страницу “Поделиться” соответствующей соц. сети и передает ей ссылку на текущую страницу. А дальше социальная сеть загружает себе вашу страницу и пытается на основе нее создать пост, который увидят ваши друзья и подписчики.

И все бы ничего, но иногда этот процесс работает плохо. Например, в пересланном материале отображаются совсем не те картинки. Это первая причина, почему недостаточно просто добавить на сайт блок “Поделиться”, а необходимо настроить микроразметку у ссылок для социальных сетей. Ниже пара примеров.

Пример 1. Александр Демидов хотел поделиться с подписчиками в Facebook новостью о партнерской конференции. Угадайте какую картинку Facebook использовал в качестве анонса?
  Баг при расшаривании программы конференции
Пример 2. Степан Овчинников вставил в пост на Facebook ссылку на рейтинг партнеров 1С-Битрикс (никаких лиц там нет).
Ошибка микроразметки в сообщении со списком партнеров Битрикс
Вторая причина - какой бы умной ни была социальная сеть, она не в состоянии понять о чем написано на странице:
  • какие из картинок на странице относятся именно к текущему контенту, а какие ко всему сайту;
  • кто автор материала (чтобы на него можно было подписаться в соц. сети);
  • на каких языках доступен контент.
А если сообщить ей (соц. сети) такую информацию — можно получить несколько интересных “плюшек”. Тем более такая техническая возможность — существует.

Основная из этих плюшек: более симпатичный/заметный сниппет и как следствие - больше переходов на ваш сайт из социальных сетей.

Как указать социальной сети, что отображать

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

Технически, способы передачи дополнительной информации поисковым и “социальным” роботам называются “Семантическая разметка” и очень хорошо освещены в статье Яндекса “Как устроен мир семантической микроразметки”.
Семантическая разметка страниц
Из всего этого многообразия большинство социальных сетей (Facebook, Google+, LinkedIn) воспринимают только Open Graph Protocol. Это семантическая разметка, разработанная в Facebook.

В Twitter решили что их контент весьма специфичен и изобрели свой “велосипед”, который назвали Twitter Cards.

В конце этого списка идет наш соотечественник — “ВКонтакте”. В этой сети практически отсутствуют способы передачи дополнительной информации. Единственное что можно сделать - добавить на страницу несколько невидимых тегов img_src в которых указать какие картинки относятся именно к этой странице.

На собственном опыте

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

Ну и конечно же мы хотели выжать побольше из возможностей самих социальных сетей (более красивые твиты, например).

Мы посмотрели в сторону легкого способа, который все везде советуют: просто добавьте пару тегов “og:...”, “og:url”, “og:image” ( статья на likeni.ru, автотесты для Монитора качества 1С-Битрикс).

На первый взгляд все просто. Как всегда есть НО. Но все эти замечательные советы упускают детали реализации соответствующей микроразметки ссылок. Например, в OpenGraph языком, на котором доступен контент по умолчанию считается английский.

А еще нужно подписывать указания пространств имен (иногда в тег head, а иногда в тег html). Получается что “руками” можно сделать такую работу только на троечку. Или она становится слишком трудоемка.

Итого: документацию никто не читает, поддержка не полная, трудоемкость высокая, никто не уделяет внимания мелочам. А в итоге время от времени у нас и не только появляются кривые твиты/посты с некрасивыми сниппетами.

Но — не беда, мы все автоматизировали.

Так на свет появился модуль для 1С-Битрикс “Open Graph и Twitter Cards” (будет доступен по ссылке http://marketplace.1c-bitrix.ru/solutions/intervolga.smo/ ). Он уже используется на нашем сайте для постов в блоге, работ в портфолио, семинаров и живой ленты.

Модуль платный, стоит 3000 р. Есть тестовый период - 1 месяц. Внутри модуля 2 компонента. Про их детальную настройку микроразметки для социальных сетей я расскажу в следующем посте.
Оцените статью
01.04.2015
Понравилась статья?
Поделитесь ссылкой с друзьями и коллегами!

Статьи по теме

Автоматизация и оптимизация бизнес-процессов — лонгрид, чтобы не запутаться Статья будет полезна всем, кто хочет улучшить эффективность своего бизнеса или узнать больше о возможностях автоматизации бизнес-процессов для повышения ко...
10 обязательных задач поддержки сайта на БитриксСтатья посвящена организации поддержки сайтов на Битрикс. Здесь не только про решение технических проблем и устранение багов. Здесь про развитие живых проектов...
B2B-SaaS или B2B-система (платформа+CRM) на вашем сервере: плюс и минусы, что выбрать? Введение Эта статья для коммерческих директоров, руководителей отделов продаж производственных и оптово-торговых компаний, которые ищут инструменты для ро...
Обзор международных исследований о тенденциях развития B2B-сегмента Важность темы — рост B2B-продаж в онлайне В современном бизнесе наблюдается стремительный переход в online оптовых продаж. Это стало одной из ключевых тен...
Несколько способов сделать оптовый заказ на портале — Обновление B2B-платформы (v2.0) Коллеги, спешим поделиться важной новостью! Мы обновили один из наших флагманских продуктов — готовую платформу оптовых продаж. B2B-платформа v2.0 сочетает...
Как аптеке получать больше заказов? Разбираем кейсы Мегамаркета (Сбер) и МегаптекиОбобщили для вас наш опыт разработки API в фармацевтике. Рассказываем как наши клиенты стали получать больше заказов от интеграции с агрегаторами/маркетплейсами...
Мы работаем по одному из двух форматов:
  • аренда команды (от 2 человек, не менее 3 месяцев);
  • итерации с фиксированной ценой (1-3 месяца длительностью).
ИНТЕРВОЛГА предоставляет:
  • регулярные онлайн-планерки с заказчиком;
  • квалифицированных специалистов;
  • организованную команду (находятся в одном помещении, что упрощает решение рабочих вопросов);
  • полную прозрачность и регулярность отчетов о результатах.
Ключевые услуги:
  • нагруженный интернет-магазин;
  • личный кабинет;
  • оптовые продажи — B2B-платформа;
  • маркетплейс;
  • технический аудит сайта;
  • Битрикс24 — корпоративные HR-порталы;
  • Битрикс24 — построение CRM-системы;
  • Битрикс24 — личные кабинеты сотрудников;
  • Битрикс24 — аудит портала;
  • 1С — интеграция с другими системами;
  • 1С — доработка системы;
  • маркетинг — комплексное интернет-продвижение;
  • маркетинг — продвижение для B2B.
Хотите получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишитесь на рассылку — спамить не будем