Когда вы собираетесь поделиться ссылкой на сайт, социальные сети и мессенджеры формируют превью (виджет предварительного просмотра) этой страницы на основе формата микроразметки Open Graph.
16 марта 2022 года Разное
2 минуты, 8 секунд читать
Расскажем, как настроить красивое и эффективное превью, чтобы люди захотели перейти по этой ссылке на ваш сайт.
Обычно превью формируется из:
1. заголовка ссылки
3. изображения (рекомендуемый размер: 968×504 пикселей)
Микроразметка по умолчанию автоматически формируется исходя из данных, указанных в обложке вашего сайта. Если вы используете нестандартный формат в разных местах, уделите особое внимание настройкам Open Graph.
Если ранее ссылка на ваш сайт уже отправлялась в соцсети или мессенджеры, вероятно, превью будет закэшировано. Это означает, что новые данные не отобразятся, пока вы не очистите кэш.
Как добавить обложку на видео в ВКонтакте | Превью для видео в ВКонтакте
Как сбросить кэш в социальной сети:
· ВКонтакте
2. Вставьте ссылку на страницу, которая отображается неправильно,
3. Кликните «Выполнить».
· Facebook, Instagram и WhatsApp
В этих приложениях очистка кэша проводится через инструмент Facebok.
2. Вставьте ссылку на сайт,
3. Нажмите на «Scrape Again».
· Телеграм
1. Откройте мессенджер
3. Отправьте ему URL-ссылки страниц,
4. В ответном сообщении от бота нажмите «Update preview again».
· Twitter
2. Вставьте ссылку на вашу страницу и кликните «Preview card».
Как проверить очистку кэша
После выполнения процедуры в нужной социальной сети вставьте ссылку на свой сайт и убедитесь в том, что все изменения отображаются корректно.
Источник: bezlimit.ru
Как сделать красивое превью ссылки для Вконтакте и Facebook
Если Вы когда-то сталкивались со вставкой ссылки в ВК или Facebook (далее FB), публикацией, шарингом (share — поделиться), то наверняка замечали картинки, которые публикуются вместе со ссылкой. Возьмем, к примеру, mail.ru. Если найти у них какую-то статью и попробовать поделиться ей, то запись в соц. сетях будет опубликована с картинкой, которая передает тему статьи в целом.
Нажимаем на «ВКОНТАКТЕ». Как видите, к ссылке сразу есть изображение. Также, автоматически подтягивается название и описание (title, description). Нажимаем «Отправить» и запись опубликуется на стене страницы.
КАК СДЕЛАТЬ ГРУППУ ПО ДИЗАЙНУ В ВК И НАЧАТЬ ЗАРАБАТЫВАТЬ? КАК ДОБАВИТЬ ТОВАРЫ И ОФОРМИТЬ ГРУППУ?
Переходим на страницу и видим запись с заголовком и картинкой. Смотрится это отлично и действительно, есть желание кликнуть на нее.
Таким же образом и в FB.
Как же сделать так на своем сайте
Для этого, существует http://ogp.me/. Разметку Open Graph используют Вконтакте, Facebook, Twitter, Google+, LinkedIn, и множество других сервисов. Данная разметка помогает регулировать сниппеты вашего сайта при публикации на различных сервисах: заголовок, описание, картинку и ее размер, ссылку, тип объекта, локализацию и много других. Нас же сейчас интересует именно картинка и ее правильные размеры.
Для того, чтобы добавить разметку к себе на сайт, нужно между тегами , разместить нужные данные разметки. По примеру Мейл.ру, размещаем картинку и ее размеры, ссылку на страницу.
После этого, у Вас будет подгружаться нужная Вам картинка с нужными размерами. Выше указан оптимальный размер — 1200 х 630, более делать ничего не нужно. Также есть отдельные настройки сниппета для Твиттер и FB, об этом можете почитать на официальном сайте Open Graph, ссылка выше. Если у Вас Joomla или WordPress, то можно установить специальные расширения для этого.
Для Joomla — Phoca Open Graph, RSSEO и т.д., их можно найти большое количество. Для WordPress — Yoast SEO (желательно Premium).
Источник: khomichenko.com
Как настроить превью ссылки вашего сайта
Когда вы делитесь ссылкой на сайт, социальные сети и мессенджеры формируют превью (виджет предварительного просмотра) этой страницы. Выглядит это вот как-то так:
Превью ссылки в социальной сети ВКонтакте
Превью ссылки в мессенджере Telegram
Формируется это превью на основе формата микроразметки Open Graph. Мы не станем углубляться в технические подробности, а расскажем как вам настроить превью, чтобы оно было красивым и главное эффективным. Главная цель — чтобы люди, которые его увидят, захотели перейти по этой ссылке, на ваш сайт.
Для формирования превью используется, как правило:
По умолчанию, микроразметка формируется автоматически исходя из тех данных, которые вы указали в обложке вашего сайта. Но зачастую информация не может быть универсальной и работать одинаково эффективно в разных местах и в разных форматах. Именно поэтому мы рекомендуем уделить внимание настройки Open Graph.
Внимание!
Если ссылка на ваш сайт ранее отправлялась в социальной сети или мессенджере, скорее всего превью будет закешировано и новые данные не будут отображаться, пока вы не очистите кеш.
Очистка кеша
Вконтакте
- Перейдите на страницу https://vk.com/dev/pages.clearCache
- В поле url вставьте ссылку на ваш сайт и нажмите Выполнить
- Перейдите на страницу https://developers.facebook.com/tools/debug/og/object/
- Вставьте ссылку на ваш сайт и нажмите Получить новую информацию о URL
- Перейдите на страницу https://cards-dev.twitter.com/validator
- Вставьте ссылку на ваш сайт и нажмите Preview card
Telegram
Проверка
После того как выполнена очистка кеша — вставьте ссылку на свой сайт, в этих социальных сетях, чтобы убедиться, что все изменения учтены и отображаются корректно.
- Примеры страниц
- Тарифы и цены
- База знаний
- Связаться с нами
Источник: tapid.ru