Как задать картинку для сайта при публикации в соцсетях или мессенджерах

AdmiraО сайтах и блогах1 Comment

Как задать картинку для сайта при публикации в соцсетях или мессенджерах

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

Вывод картинки, текста и описания для сайта, осуществляется благодаря разметке Open Graph. Она создана для того, чтобы вместо обычно УРЛа пользователи в ленте соцсетей видели картинку, название и краткое описание для размещенной ссылки. Так же красивее, понятнее и намного эффективнее.

Возникает вопрос — откуда берется разметка Open Graph, особенное если вы ее не добавляли на сайт?

Все просто! Когда вы используете какую-то SMC (систему управления контентом),  вы устанавливаете плагины, модули и дополнения, и они автоматически определяются параметры для вывода Open Graph. Либо вы сами прописываете все это в настройках сайта или какого-то плагина, даже не задумываясь, где это будет использовано.

К примеру, у WordPress, в этом вопросе самый популярные плагины — SEO by Yoast или All in One SEO. Кроме того, в WordPress  часто все формируется автоматически, даже если нет ни плагинов, ни разметки.

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

У меня, например, выскакивал как-то флажок с переключателей языков или изображение копилки «подайтехристаради на развитие проекта» :)

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

1
2
3
4
5
<meta property="og:title" content="">
<meta property="og:site_name" content="">
<meta property="og:url" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">

И для  каждого МЕТА-тега заполнить параметр content=»».

Вот подробности, за что отвечает каждый из них:

  • og:title — Заглавие страницы, он же тайтл. Можете скопировать из тега <title>…</title>.
  • og:site_name — Название сайта.
  • og:url — Ссылка страницы, где вы добавляете этот код. Если это лендинг и у него одна страница, то это просто ссылка на главную сайта. если сайт самописный и у него много страниц, то вам придется для каждой указать свой тег, со своей ссылкой.
  • og:description — Описание страницы. Можете скопировать из тега description для страницы, на которую добавляете теги.
  • og:image — Ссылка на картинку, что характеризует страницу. Если это тот же лендинг, то можете указать ссылку на лого сайта, или нарисовать конкретную картинку для этих целей. На сайте, этой картонкой выступает изображение для статей и тд.

Готовый вариант может быть примерно таким:

 
 
 
 
 
<meta property="og:title" content="Особенности установки мультисайта на УкраинаХост ">
<meta property="og:site_name" content="mArjArI. Создание сайтов">
<meta property="og:description" content="Решение проблем с мультисайтом при установке на хостинге УкраинаХост. ">

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

Описанный метод отлично подходит для лендингов или сайтов-визиток, где всего одна или небольшое количество (до десяти) страниц. Здесь задать разметку Open Graph страницам не составит труда, зато продвижение их в соцсетях будет успешным.

One Comment on “Как задать картинку для сайта при публикации в соцсетях или мессенджерах”

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *