Мой блог

Мысли. Кейсы. Работающие методики. Мои секреты в интернет-бизнесе.

5 1 1 1 1 1 Рейтинг 5.00 (1 Оценка)

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

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

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

1

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

2

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

4

Таким же образом и в 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

Вы можете найти уникальные знания по теме интернет-маркетинга в разделе