Основы

Как настроить красивое отображение страниц сайта в соцсетях

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

Задать отображение различных элементов страницы в соцсетях можно при помощи специальных тегов Ореп Graph. В коде страницы, эти метаописания имеют такой вид:

Open Graph Tags

Вряд ли вам будет интересна всякая техническая скукота о стандартах, поэтому, удобнее показывать все на примерах.

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

Если добавить страницу такого сайта в Facebook, отображаться она будет в таком вот неприглядном виде:

В общем, какая-то совсем несимпатичная фигня, а вместо превюшки подтягивает первую попавшуюся картинку.

А вот как выглядит один из постов известного сайта Adme.ru:

adme post

И превюшка, и текст анонса – все гармонично и в тему!

Добиться такого же результата для сайта, который работает на WordPress, поможет плагин Yoast SEO. Я тестировал аналогичную возможность и в All-in-One SEO Pack, но там она работает с глюками и не всегда выводятся заданные значения описания. А вот в Yoast все работает как часы.

Теперь, при создании записи, кроме вкладки для заполнения привычных Title (заголовок страницы) и Description (описание страницы), станет доступной и вкладка, в которой можно указывать метаданные для социальных сетей.

Yoast SEO meta

Для Facebook, VK и Google+ они одинаковые, а Twitter можно добавлять по желанию. У меня включено, так как у каждого из проектов, над которыми я работаю, там есть потенциальная аудитория. Получается тоже симпатично:

primer twita

Относительно заполнения полей, все просто:

  • в поле Facebook Title указываем название страницы, которое мы хотим, чтобы отображалось в этой соцсети;
  • в поле Facebook Description указываем текст, который выводится в предварительном описании;
  • а в Facebook Image указываем изображение, которое будет использоваться в качестве превьюшки.

Пример:

Относительно рекомендации загружать изображения размером 1200 х 628 пикселей, её можно не придерживаться, главное, чтобы все хорошо масштабировалось в ленте. Я использую картинки размером 720 х 480 пикселей и этого вполне хватает. В качестве примера использовалась фотография именно такого разрешения.

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

Вводим адрес странички в поле, и нажимаем кнопку «Grade My URL». Любуемся предпросмотром анонса в каждой из популярных социалок:

All Social Debugger

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

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

Так что лучше потратить немного времени, но, придумать действительно интересный заголовок, описание, и подобрать привлекательную картинку.