← Назад

Сайт

Соц. сети

Размещение ссылки на сайт в социальных сетях

Сложность ∙ Легко

Вы можете настроить внешний вид ссылки на сайт в соцсетях (OpenGraph), чтобы при упоминании сайта или страницы она содержала нужную информацию о вашем сайте.

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

Если OpenGraph не настраивать, то подтянется одна из картинок с вашего сайта, поэтому, чтобы картинка была релевантной её лучше создать самому.

В этой статье мы разберём, как сделать картинку так, чтобы она корректно отображалась при размещении ссылки, а так же посмотрим, как просто настроить OpenGraph в mottor и какую информацию можно размещать в описании.

Пример отображения OpenGraph Вконтакте

Выберите интересующий раздел:

Что должно содержаться в OpenGraph? →
Какой рекомендуется размер картинки для OpenGraph? →
Где можно быстро и удобно сделать картинку для OpenGraph? →
Что делать, если данные в OpenGraph сразу не обновились? →

Что размещать в OpenGraph →

Размер картинки для ссылки →

Создать картинку для OpenGraph? →

Если данные сразу не обновились? →

Аудит вашего сайта или консультация по редактору

0₽

подключенного тарифа для конструктор сайтов

+4

месяца

промокод на продвижение в сетях Яндекс

+12.000₽

тарифа чат-ботов, автоворонок и мобильных приложений

+3

Бесплатный домен в зоне .ru/.рф

0₽

Бесплатный шаблон сайта под вашу сферу бизнеса

0₽

месяца

/год

Забронировать предложение

Получите подарки от mottor при подключении тарифа

спецпредложение

Что должно содержаться в OpenGraph?

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

Пример картинки для OpenGraph

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

"Компания "ИнтерьерАрт" вот уже 10 лет создаёт картины, которые идеально подойдут для любого интерьера."

или

"Закажите картину прямо сейчас и получите скидку 20%"

Примеры текстов для OpenGraph

Примечание. На самой картинке тоже может содержаться текст, но располагать его необходимо с учётом того, что текст может срезаться по краям.

Какой должен быть размер картинки для OpenGraph?

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

Шаблон для создания картинки OpenGraph

Размер шаблона 1200x630 пикселей. Центральная часть шаблона (ярко оранжевый цвет) — это та область изображения, которая гарантировано будет видна во всех соц. сетях, при размещении ссылки на ваш сайт.

Скачать данный шаблон можно по ссылке.

Фейсбук советует использовать изображения размером не менее 600×315 пикселей, чтобы подтянулась большая картинка. Допускаются изображения размером не более 8 МБ.

ВКонтакте рекомендует использовать картинки размером от 537×240 пикселей и тогда ссылка будет сопровождаться увеличенной картинкой в сниппете на стене.

Оптимальный размер изображения 1200x630 пикселей.

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

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

Где можно быстро и удобно сделать такое изображение и не ошибиться с размером?

Сделать это можно, например, в сервисе Figma. Это удобный графический онлайн-редактор для совместной работы.

Логотип Figma

1. Создаём пространство для работы
Нажимаем на "+" в левом верхнем углу экрана

2. Выбираем размер пространства
В открывшемся окне выбираем "Blank canvas" и нажимаем на кнопку "Create file"

3. Создаём фрейм (область, где будем работать с нашей картинкой)
В левом верхнем углу редактора кликаем по кнопке и выбираем "Frame", как показано на скриншоте

• Зажимаем левую кнопку мыши в любой части серого пространства и растягиваем. Пока делаем область произвольного размера

4. Задаём размеры фрейма
Нам нужны размеры 1200x630 пикселей. Чтобы задать их, кликаем по фрейму и в открывшемся меню справа заводим параметры с клавиатуры: там, где буква W (weight - ширина) = 1200
H (height - высота) = 630

5. Теперь загрузим в этот фрейм наш шаблон
В правой панели настроек находим раздел "Fill" и кликаем по белому квадратику рядом с кодом цвета:

• В открывшемся окошке выбираем "Image"

• В итоге у нас получается готовый фрейм

6. Загружаем в этот же фрейм ещё одну картинку
Для этого в разделе "Fill" нажимаем на "+" и аналогично загружаем картинку, кликнув по белому квадратику рядом с появившимся пунктом

7. Перемещаем картинку слоем ниже, чтобы она оказалась под шаблоном OpenGraph
Наводим на пункт с картинкой, слева от неё появляются 3 полоски, зажимаем на них левую кнопку мыши и меняем элементы местами в списке

8. Если необходимо, добавляем текст
Кликаем по кнопке "T", затем кликаем в том месте фрейма, где должен находиться текст

Размер текста и шрифт можно поменять. Для этого сначала кликните по блоку с текстом, а затем задайте параметры в панели настроек справа — раздел "Text". Размещайте текст в ярко оранжевой области, не выходя за края, чтобы текст при адаптации картинки не срезался

9. Делаем шаблон OpenGraph полупрозрачным, чтобы увидеть как надпись выглядит относительно изображения, требуется ли её немного сдвинуть. В разделе "Fill" находим шаблон и настраиваем прозрачность — можно поставить, например, 50% и ориентироваться по оранжевому прямоугольнику:

10. Если требуется, немного сдвигаем текст и удаляем шаблон
Чтобы удалить шаблон OpenGraph, в разделе "Fill" нажмите на знак "—" рядом с картинкой:

Если текст на картинке плохо видно, то можно подложить под него белый прямоугольник. Для этого используйте фигуру ("Rectangle"). Выберите её в меню, а затем наведите на фрейм с картинкой, зажмите левую кнопку мыши и растяните до нужного размера:

Саму фигуру необходимо будет переместить слоем ниже. Для этого кликаем по фигуре правой кнопкой мыши и выбираем "Send to back"

Чтобы поменять цвет фигуры, кликните по ней и в разделе "Fill" выберите другой цвет:

11. Скачиваем получившуюся картинку
Кликаем по названию фрейма, прокручиваем правую панель настроек вниз, до раздела "Export", раскрываем его и нажимаем "Export frame". Картинка скачивается.

При желании можно посмотреть и другие возможности Figma и, например, создавать там графику для вашего сайта. В интернете очень много полезных видеоуроков в т.ч. на русском языке, которые помогут вам освоить данный сервис. :)

Готово! Остаётся только разместить собранную картинку и описание в настройках вашего сайта.

В mottor, например, это можно сделать в настройках страницы, раздел
"Соц. сети":

Настройки страницы в mottor, раздел Соц.сети

Настройки страницы сайта в mottor, раздел Соц.сети

В итоге у нас получается следующее:

Пример заполнения OpenGraph

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

Пример заполнения OpenGraph

Отлично. Всё готово! :)

Что делать, если данные в OpenGraph сразу не обновились?

Бывает так, что закэшировалась (сохранилась) старая информация, и новая не подхватывается. Чаще всего эта проблема возникает у ВКонтакте.

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

На страничке введите в форме внизу адрес вашего сайта и нажмите Выполнить:

Очистка кэша Вконтакте

Если данные не подхватились в Telegram, то вам поможет специальный бот @webpagebot. Просто отправьте этому боту сообщение со ссылкой на ваш сайт. После этого мессенджер автоматически обновит информацию о нем и покажет сообщение "Link previews was updated successfully. Check them out!" ("Предварительный просмотр ссылок успешно обновлен. Проверьте их!")

Итоги

Итак, в этой статье мы узнали, что такое OpenGraph и как правильно его оформлять.

Надеемся, вы примените эти знания при создании своего собственного сайта. Если что-то будет непонятно — в конструкторе сайтов mottor есть бесплатная техподдержка для всех пользователей. Вам поможет живой специалист:

— в чате на сайте lpmotor.ru
— по телефону 8 800 200 51 47 (звонки по РФ бесплатные)
— в Телеграм: https://t.me/lpmotorchat