Как сделать красивое превью ссылки для Вконтакте и Facebook

Рейтинг 5 (1 Голоса)

Если Вы когда-то сталкивались со вставкой ссылки в ВК или Facebook (далее FB), публикацией, шарингом (share - поделиться), то наверняка замечали картинки, которые публикуются вместе со ссылкой. Возьмем, к примеру, mail.ru. Если найти у них какую-то статью и попробовать поделиться ей, то запись в соц. сетях будет опубликована с картинкой, которая передает тему статьи в целом.


Берем вот эту статью - https://afisha.mail.ru/cinema/news/48375/ и пробуем поделиться ей.

Нажимаем на "ВКОНТАКТЕ". Как видите, к ссылке сразу есть изображение. Также, автоматически подтягивается название и описание (title, description). Нажимаем "Отправить" и запись опубликуется на стене страницы.

Переходим на страницу и видим запись с заголовком и картинкой. Смотрится это отлично и действительно, есть желание кликнуть на нее.

Таким же образом и в FB.


Как же сделать так на своем сайте


Для этого, существует http://ogp.me/. Разметку Open Graph используют Вконтакте, Facebook, Twitter, Google+, LinkedIn, и множество других сервисов. Данная разметка помогает регулировать сниппеты вашего сайта при публикации на различных сервисах: заголовок, описание, картинку и ее размер, ссылку, тип объекта, локализацию и много других. Нас же сейчас интересует именно картинка и ее правильные размеры. Для того, чтобы добавить разметку к себе на сайт, нужно между тегами <head></head>, разместить нужные данные разметки. По примеру Мейл.ру, размещаем картинку и ее размеры, ссылку на страницу.


<head> <meta property="og:url" content="https://afisha.mail.ru/cinema/news/48375/"/>

<meta property="og:image"content="https://pic.afisha.mail.ru/share/article

/48375/?20170413114841.1"/>

<meta property="og:image:width" content="1200"/>

<meta property="og:image:height" content="630"/> </head>


После этого, у Вас будет подгружаться нужная Вам картинка с нужными размерами. Выше указан оптимальный размер - 1200 х 630, более делать ничего не нужно. Также есть отдельные настройки сниппета для Твиттер и FB, об этом можете почитать на официальном сайте Open Graph, ссылка выше. Если у Вас Joomla или Wordpress, то можно установить специальные расширения для этого. Для Joomla - Phoca Open Graph, RSSEO и т.д., их можно найти большое количество. Для Wordpress - Yoast SEO (желательно Premium).

Оставьте первый комментарий

Не смогли найти, то что искали? Воспользуйтесь поиском

Похожие статьи

Популярные статьи

Как конвертировать контакты из Excel в vCard (VCF) бесплатно

Как конвертировать контакты из Excel в vCard (VCF) бесплатно

Оставить отзыв
Читать далее
Самые покупаемые товары в интернете: рейтинг

Рейтинг ТОП товаров наиболее продающихся в интернете

Оставить отзыв
Читать далее
EnglishDom или Skyeng? Честный отзыв ученика и промокоды в подарок

EnglishDom или Skyeng? Реальный отзыв ученика 2х школ, подробное сравнение и подарки в конце

Оставить отзыв
Читать далее
Как сделать красивое превью ссылки для Вконтакте и Facebook

Как сделать красивое превью ссылки для Вконтакте и Facebook

Оставить отзыв
Читать далее
О чем писать в своем блоге, чтобы заработать и было интересно читать

55 идей для блогера

Оставить отзыв
Читать далее
Как конвертировать аудиокниги с формата MP3 в M4B на Macbook для загрузки в itunes

Как конвертировать аудиокниги с формата MP3 в M4B на Macbook для загрузки в itunes

Оставить отзыв
Читать далее
Как раскрутить и усилить личный бренд в интернете бесплатно

51 способ усилить личный бренд

Оставить отзыв
Читать далее
Как продвигать интернет-сервис с нуля

Стратегия продвижения интернет-сервиса. 10 лучших инструментов

Оставить отзыв
Читать далее
Английский язык онлайн по скайпу с носителем бесплатно? Как посещать бесплатно разговорный клуб английского языка

Онлайн-изучение английского языка с носителем бесплатно! Реально ли? Как я посещаю разговорный клуб английского языка Skyeng бесплатно уже более 2х лет

Оставить отзыв
Читать далее
Руководство - как делать картинки для рекламы ВКонтакте

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

Оставить отзыв
Читать далее
Новые форматы изображений linkedin для оформления профиля, групп и бизнес страниц

Новые форматы изображений linkedin для оформления профиля, групп и бизнес страниц

Оставить отзыв
Читать далее
Организация онлайн-конференции своими руками

Организация онлайн-конференции. Основные шаги и этапы

Оставить отзыв
Читать далее

Add custom HTML to a Page