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

Рейтинг 4.75 (4 Голоса)

Если Вы когда-то сталкивались со вставкой ссылки в ВК или 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).

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

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

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

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