Wiki · Социальные сети

SMO

5 мин чтенияАвтор: Илья КозловСоавторы: Евгений Баев

SMO (Social Media Optimization) – это настройка сайта и контента под социальные сети. Задача SMO в том, чтобы страницами было удобно делиться, а ссылки во ВКонтакте, Telegram и других мессенджерах выглядели аккуратной карточкой с картинкой, заголовком и описанием.

Отправьте ссылку на свою статью в чат и посмотрите на превью. Если там логотип на половину экрана и обрезанное «Главная | ООО Ромашка», человек вряд ли по ней кликнет. Если там обложка статьи и понятный заголовок, кликнет скорее. Вот это и есть SMO на самом простом уровне.

О терминах. В русскоязычной практике SMO иногда называют всю бесплатную работу в соцсетях, а SMM только рекламу. Мы используем более точное значение: SMM работает внутри соцсетей, а SMO готовит к ним сайт.

Что входит в SMO

Разметка Open Graph: какие заголовок, описание и картинку покажет соцсеть при публикации ссылки.
Кнопки «Поделиться» на страницах, которыми действительно делятся: статьи, подборки, акции, товары.
Ссылки на сообщества компании на сайте и ссылки на сайт в профилях соцсетей.
Контент, который хочется переслать: чек-листы, калькуляторы, понятные инструкции, подборки.
UTM-метки на ссылках из соцсетей, чтобы видеть эти переходы в аналитике.

Open Graph: как ссылка становится карточкой

Когда вы публикуете ссылку, соцсеть или мессенджер заходит на страницу и читает мета-теги Open Graph в блоке head. Протокол Open Graph называет четыре обязательных свойства: og:title, og:type, og:image и og:url. Описание og:description необязательное, но обычно его тоже заполняют. Пример для условной статьи:

<meta property="og:title" content='Как подготовиться к УЗИ брюшной полости'>
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.ru/stati/uzi-podgotovka/">
<meta property="og:image" content="https://example.ru/upload/uzi-cover.jpg">
<meta property="og:description" content='Что можно есть накануне, когда приходить и что взять с собой'>

Если тегов нет, площадка возьмёт что найдёт: первую картинку на странице, обрезанный title, кусок текста из меню. Теги Open Graph похожи на description для поиска, только отвечают за вид ссылки не в выдаче, а в ленте и чате.

Сравнение превью ссылки в соцсети без разметки Open Graph и с ней: случайная картинка против заданной обложки и заголовка — Как ссылка выглядит в соцсети

Адреса в og:image и og:url указывайте полностью, с протоколом и доменом. Для каждой страницы нужна своя картинка: если на всём сайте стоит один логотип, все ссылки выглядят одинаково, и их перестают различать. На сайтах на CMS теги обычно выводятся шаблоном из названия, анонса и картинки страницы, их достаточно один раз правильно настроить.

Почему превью не обновилось

Соцсети запоминают превью ссылки. Вы поменяли картинку, а во ВКонтакте по-прежнему старая. Для таких случаев у ВКонтакте есть метод API pages.clearCache: он очищает сохранённую версию внешней страницы, и при следующей публикации данные загрузятся заново. В Telegram превью обновляют через служебного бота @WebpageBot. Проверять превью удобнее всего так: отправьте ссылку себе в мессенджер до публикации.

Каким контентом делятся

Разметка делает ссылку красивой, но переслать её захотят, только если внутри польза. Лучше всего расходится то, что решает конкретную задачу читателя или его знакомого:

клиника: памятки по подготовке к анализам и процедурам, которые пациенты пересылают родственникам;
магазин: подборки и сравнения товаров, которые обсуждают в семейном чате перед покупкой;
услуги: калькулятор стоимости или чек-лист «что проверить перед ремонтом».

Такие страницы стоит оформлять особенно тщательно: своя обложка, короткий понятный заголовок для og:title, описание, которое объясняет пользу. Заодно проверьте, что ссылки на ваши сообщества есть в шапке или подвале сайта и на странице контактов, а в профилях соцсетей стоит ссылка на сайт с UTM-меткой.

Кнопки «Поделиться» и скорость

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

На сайте медцентра «Медюнион» ссылки на соцсети и кнопки «Поделиться» добавили вместе с другими UX/UI-доработками: в шапке закрепили телефон, адрес и кнопки записи. Подробнее в кейсе «Медюнион».

Чек-лист SMO для сайта: теги Open Graph, картинки, полные адреса, проверка превью, кнопки поделиться и UTM-метки — Что проверить на сайте по SMO

Что портит превью ссылок и пользу от SMO

Один og:image на весь сайт.
В og:title только название компании. В ленте такая карточка ничего не говорит о том, что внутри.
Относительный адрес картинки вроде /upload/cover.jpg: площадка его не откроет.
Кнопки всех соцсетей подряд, включая те, где вашей аудитории нет.
Ждать от SMO роста позиций в поиске. Его польза в переходах из соцсетей и мессенджеров и в том, что материалы расходятся по чатам.

Open Graph, превью и связь SMO с поиском

Что указывать в og:type?

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

Как настроить Open Graph сразу на сотнях страниц?

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

Почему в превью подтянулся логотип, а не обложка статьи?

Скорее всего, в og:image стоит общая картинка сайта или тега нет вовсе, и площадка взяла первое изображение на странице. Пропишите статье её обложку полным адресом с доменом. Если тег уже исправлен, а карточка старая, сбросьте сохранённое превью: во ВКонтакте методом pages.clearCache, в Telegram через @WebpageBot.

Как SMO помогает SEO, если позиции от разметки не растут?

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

Кто делает SMO: SMM-специалист или разработчик сайта?

Обычно оба. Разработчик выводит теги Open Graph в шаблоне, ставит лёгкие кнопки «Поделиться» без внешних виджетов и следит за полными адресами картинок. Маркетолог или редактор решает, какие страницы готовить к репостам, пишет для них заголовки и описания и размечает ссылки в профилях UTM-метками. У нас это закрывают SMM-продвижение и доработка сайта.

Настройку разметки и доработку сайта под соцсети делаем в услугах SMM-продвижение и доработка существующего сайта.