Что сайт отдаёт соцсети при репосте

Бывает так: на сайте хорошие статьи, есть посещаемость, кнопки «поделиться» стоят, а из соцсетей почти никто не приходит. Часто дело не в статьях и не в кнопках, а в том, как ссылка на страницу выглядит в ленте. Эта статья о том, что соцсеть берёт со страницы при репосте, как сделать, чтобы она брала правильное, и как это проверить.

Как выглядит ссылка в ленте

Когда человек делится страницей, соцсеть сама заходит на неё и собирает превью — карточку из трёх частей:

• картинка;
• заголовок;
• описание — две-три строки под заголовком.

Эту карточку видят друзья того, кто поделился. Именно по ней они решают, переходить ли на сайт. Статью они ещё не читали, вашего сайта, скорее всего, не знают — у них есть только картинка, заголовок и пара строк.

Команда сервиса социальных кнопок Grrow, которая ставила свои кнопки на несколько десятков сайтов разной тематики и смотрела, что эти сайты отдают в соцсети, называет это главной причиной пропавшего трафика. По их наблюдению, 80% владельцев сайтов уверены, что их сайты подготовлены для соцсетей, но на деле карточки выходят такими, что по ним никто не переходит.

Картинка: не та, логотип или ничего

Самая частая беда — картинка. По словам той же команды, примерно в 60% случаев при попытке поделиться в карточке оказывается не та картинка, и нужную приходится выбирать, листая варианты. Часто нужной нет вовсе. Соцсеть хватает первую попавшуюся: баннер, кнопку, аватарку автора комментария.

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

И третья — несовпадение. Человек увидел в ленте интересную фотографию, перешёл, а на сайте картинка другая. Возникает моментальное ощущение, что его обманули, и он уходит.

Что делать:

1. У каждой статьи должна быть своя картинка, связанная с содержанием. Статья «Как выбрать палатку» — фотография палатки, а не логотип магазина.
2. Эта картинка должна явно указываться для соцсетей (как — ниже, в разделе про Open Graph).
3. Картинка должна быть крупной и горизонтальной: маленькую картинку соцсети растягивают или показывают крошечной иконкой сбоку.

Заголовок: для сайта и для ленты — разные задачи

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

Как сильно это влияет, видно по проекту Upworthy, о котором пишут в Grrow: он почти не создаёт своих материалов, а берёт готовые и подбирает им заголовки — и собирает стомиллионную аудиторию и сотни тысяч репостов.

Хуже всего с заголовками у интернет-магазинов. Попробуйте сами: зайдите в любой магазин, нажмите «поделиться» у товара и посмотрите на карточку. Часто заголовок там — название товара с артикулом, вроде «Палатка 3-местная арт. 45781», а картинка грузится не та. По такой ссылке из ВКонтакте не перейдёт никто.

Пример, как то же самое можно подать для ленты:

Цитата:

Плохо: «Палатка 3-местная арт. 45781»

Лучше: «Палатка, в которой не страшен ливень: три места и вход с двух сторон»

Совет команды Grrow для магазинов: посмотрите, что пишут покупатели в отзывах к товару, что им нравится и за что они его ценят. Из этого получается заголовок, который говорит языком покупателя, а не складской программы.

Описание: две секунды на решение

Описание — это две-три строки под заголовком, своего рода «социальный сниппет» (сниппетом называют короткий кусок текста, который показывают вместе со ссылкой). Здесь проблем, по наблюдению Grrow, больше всего: в описание попадают первые слова меню, куски комментариев, служебный текст или вообще ничего.

Расчёт простой: на то, чтобы заметить запись в ленте, у вас примерно секунда, и ещё пара секунд — на то, чтобы человек прочитал описание и решил, переходить или нет. Значит, описание должно за две строки сказать, что человек получит, перейдя по ссылке.

Пример для той же палатки:

Цитата:

Плохо: «Главная / Каталог / Туризм / Палатки. Войти. Корзина пуста.»

Лучше: «Ставится одним человеком за несколько минут и не промокает в ливень. Внутри — фото и отзывы покупателей.»

Всё, что обещает описание, конечно, должно быть правдой и подтверждаться на самой странице.

Open Graph: как сказать соцсети, что брать

Чтобы соцсеть не угадывала, а брала то, что нужно, есть Open Graph — набор служебных строк в коде страницы, где вы прямо указываете картинку, заголовок и описание для карточки. Его понимают Facebook, ВКонтакте, Одноклассники и многие другие сервисы. Строки ставятся в раздел head страницы и выглядят так (в квадратных скобках — то, что подставляете вы):

• og:title — заголовок для карточки: meta property="og:title" content="[заголовок]";
• og:description — описание в две-три строки;
• og:image — полный адрес картинки, начиная с http;
• og:url — адрес самой страницы, чтобы все репосты считались для одного адреса.

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

Если сайт на готовом движке — блоге, форуме, CMS, — проверьте, нет ли у него настройки или дополнения для Open Graph: часто достаточно указать картинку для каждой записи. Если сайт сделан вручную, строки дописываются в шаблон страницы один раз, а для каждой статьи меняются только значения. На сайтах без Open Graph соцсети берут обычный заголовок страницы (тег title) и описание из тега description, поэтому заполнить их стоит в любом случае.

Как проверить, что отдаёт ваш сайт

Проверка занимает пять минут:

1. Возьмите три страницы: главную, обычную статью и страницу без картинок.
2. На каждой нажмите «поделиться» в той сети, где ваши читатели, и дойдите до окна публикации. Публиковать не обязательно — карточку видно и так.
3. Посмотрите на карточку глазами постороннего: та ли картинка, понятен ли заголовок, есть ли в описании причина перейти. Задайте себе вопрос: я бы сам перешёл по такой ссылке?
4. Если что-то не так — поправьте Open Graph или title и description и проверьте снова.

Учтите, что соцсети запоминают карточку. Если вы поправили страницу, а превью осталось старым, значит, сеть показывает сохранённую копию. У Facebook для этого есть страница отладки ссылок, где можно попросить заново считать адрес; в других сетях обновление обычно происходит само через некоторое время.

Не только карточка

Есть и ещё одна сторона: люди делятся не только из-за текста. В разборе компании SeoPult приводится западный эксперимент с метрикой «минуты внимания» — она учитывает, насколько человек увлечён страницей: запускает ли видео, двигает ли мышь. Оказалось, что делятся охотнее не только те, кто изучил всё до конца, но и те, кто просмотрел страницу лишь частично. Авторы делают осторожный вывод: на желание поделиться влияет не столько сам текст, сколько оформление всей страницы — вёрстка, удобство, формат. Аккуратная страница с понятной структурой и хорошей картинкой вверху получает больше репостов, чем такой же текст сплошной простынёй.

Итог команды Grrow стоит запомнить: SMO — это адаптация сайта под людей, а не под соцсети. Карточка в ленте — первое, что видит человек, и делать её нужно для него.

Коротко

• При репосте соцсеть берёт со страницы картинку, заголовок и описание — по этой карточке друзья решают, переходить ли.
• У каждой статьи должна быть своя крупная картинка по теме, без логотипов-заглушек.
• Заголовок для ленты должен звать перейти, а не повторять артикул или название раздела.
• Описание за две строки говорит, что человек получит на странице.
• Указывайте всё это через Open Graph и заполняйте title и description.
• Проверяйте карточку сами: нажмите «поделиться» и посмотрите, перешли бы вы.

---

Источники: Тонкости SMO. Не удивляйтесь что у вас нет социального траффика (Хабр, 2014); Трафик из социальных сетей: самые современные методы привлечения, возврата и анализа (Хабр, 2014).