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

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

1162
Как сделать красивое превью ссылки для Вконтакте и Facebook
Рейтинг: 3.67, голосов - 3

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

Возьмем, к примеру, mail.ru. Если найти у них какую-то статью и попробовать поделиться ей, то запись в соц. сетях будет опубликована с картинкой, которая передает тему статьи в целом.

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

1

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

2

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

3

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

4

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

Для этого, существует 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).

5

comments powered by HyperComments
Top