Социальное чтиво

Когда пользователь делится в соцсети ссылкой, то в ленту добавляется виджет с заголовком соответствующей страницы, ее описанием и изображением.

Эти данные VK и Facebook получают, посылая запрос на страницу и анализируя ее HTML-код. Если разработчик хочет добиться предсказуемого поведения и контролировать содержимое виджетов, то ему необходимо использовать специальные метатеги.

Например, для указания изображения используется метатег <meta property="og:image" content="URL" />. Если его не разместить, то картинки в виджете либо не будет вообще, либо краулер соцсети сам возьмет первую подходящую из кода страницы. А это может быть что угодно, даже какой-нибудь рекламный баннер, не имеющий отношения к содержимому, которым делился пользователь.

В метатеге og:image нужно указывать абсолютный URL изображения с протоколом и доменом. Чтобы картинка загрузилась, при самом первом шейре страницы нужно добавить метатеги og:image:width и og:image:height с соответствующими размерами изображения.

Сделано в Лаборатории Студии Чулакова

Студия Олега Чулакова

Дизайн-студия № 1 в России по версии Tagline, лучший usability / UX в стране по версии Золотого Сайта.

Специализируется на создании сложных систем и сервисов для крупных компаний. Среди клиентов Студии Tele2, ИКЕА, МегаФон, БКС Банк, Yota и другие крупнейшие российские бренды.