Получить красивые ссылки внутри соцсетей очень просто, для этого существует стандарт микроразметки Open Graph, разработанная компанией Facebook. Со временем этот стандарт приняли на вооружение многие популярные социальные сети (Вконтакте, Google+, Twitter, LinkedIn, Pinterest и др.), а также Skype.
Далее примеры, чтобы было понятнее как выглядит, для подопытной страницы: http://mototip.ru/atv/stels/stels-atv-500.html
Ссылка в личных сообщениях VK с разметкой Open Graph и без:
Ссылка на стене сообщества VK (с разметкой OpenGraph):
Skype с Open Graph:
Facebook с Open Graph:
Для наведения такой красоты, необходимо в секцию <head> html кода страницы вставить такие метатеги (пример с подопытной страницы):
|
1 2 3 4 5 |
<meta property = "og:title" content = "Квадроцикл Stels ATV-500" /> <meta property = "og:description" content = "Квадроцикл Stels ATV-500 - отзывы, фотографии, технические характеристики. Объявления о продаже мотовездехода Stels ATV-500." /> <meta property = "og:type" content = "website" /> <meta property = "og:url" content = "http://mototip.ru/atv/stels/stels-atv-500.html" /> <meta property = "og:image" content = "http://mototip.ru/assets/cache/pictures/large_og--c811--stels-atv500.jpg" /> |
Думаю из кода все понятно, но все-же поясню:
og:title — заголовок.
og:description — описание.
og:type — тип страницы, он может быть разным (website, article, video.movie и т.п.), думаю не все соцсети его одинаково поддерживают.
og:url — URL страницы.
og:image — URL картинки (обратите внимание, путь должен быть абсолютным).
На самом деле, метатегов гораздо больше, но это основные, которые нужны для управления создаваемыми сниппетами в соцсетях.
В моем примере заметно, что для Вконтактика картинка в превью получается так себе, не очень удачно. Это связано с тем, что у неё практически стандартные для фоток пропорции 3 к 2 (ширина к высоте). Более удачно использовать фотографии с пропорциями 2 к 1. Как это делать — это уже другая задача (не каждую фотографию, да еще и автоматически, можно удачно подогнать под нужные пропорции).
Еще заметил, что VK фотографию кадрирует отрезая снизу лишнее, Facebook центрует и режет сверху и низу, Skype приводит к квадрату, остальные соцсети я даже не стал смотреть, чтобы не портить себе нервы.
Стоит добавить, что если есть возможность выбрать, то для og:image лучше указать картинку с наибольшим размером. Если размер меньше 200×200 px то тот же facebook просто выдаст ошибку.
Сделал разметку, но все равно картинка в ВК тянется не корректная. В чем может быть проблема?
VK мог закэшировать предыдущую версию страницы.
https://vk.com/dev/pages.clearCache
Здесь можно почистить кеш ВК для OpenGraph паука
Создание сайтов Волгоград — https://stalingradpictures.ru