Не подтягивается изображение для ВКонтакте

Владислав Томин

24 июня 2018, 21:50

Здравствуйте!

Почему-то не подгружается нужное изображение с сайта на странице шаринга записи https://vk.com/share.php.

Я делюсь ссылкой на сайт https://tominy.ru с помощью кнопок социальных сетей от Яндекса на этом сайте. Выбираю социальную "ВКонтакте", но при переходе не страницу шаринга - изображение к ссылке автоматически не подгружается.
В специальном атрибуте "data-image" ссылка на изображение указана, как того требует документация по виджету социальных кнопок от Яндекса: https://tech.yandex.ru/share/doc/dg/add-docpage/.
Также я специально добавил на сайт разметку OpenGraph, в которой в атрибуте "og:image" тоже указал ссылку на нужное изображение: https://tominy.ru/storage/image.jpg. Но изображение все равно почему-то не прикрепляется к ссылке (само изображение доступно и открывается по указанному адресу).

Помогите пожалуйста разобраться в проблеме.

Заранее спасибо!

7 комментариев

Авторизуйтесь, чтобы оставить комментарий

sameoldmadness

24 июня 2018, 21:54

Насколько я вижу, сейчас изображение подтягивается. Получилось разобраться?

Viproma95

22 февраля 2020, 01:12

у меня тоже уже как 4 года именно на моём акк вк не прикрепляется. только в ЛС

Андрей Д.

18 ноября 2020, 17:14

У меня тоже самое стало происходить на сайтах https://egypt-turism.ru и https://blog-obovsem.ru, когда я стал использовать для их редактирования новую версию Web Builder, а именно 16-ю. До этого 5 лет все работало нормально! Если в ВК просто вставить ссылку на страницу сайта, то все теги og:, в т.ч. и изображение подтягиваются нормально?

Андрей Д.

18 ноября 2020, 19:51

Вот как Web Builder формировал код раньше:

<meta property="og:title" content="Египет&Туризм - Дорога">
<meta property="og:description" content="Сайт для любителей отдыха...">
<meta property="og:type" content="article">
<meta property="og:image" content="https://egypt-turism.ru/images/Sfinks.jpg">

А вот как этот же код формирует Web Builder 16:

<meta property="og:title" content="Египет и Туризм - Дорога">
<meta property="og:description" content="Сайт для любителей отдыха...">
<meta property="og:type" content="article">
<meta property="og:url" content="https://egypt-turism.ru">
<meta property="og:image" content="https:/images/Sfinks.jpg">

ВКонтакте на прямую при вставке ссылки новый код понимает, а через кнопки Яндекса изображение уже не проходит! Что можно сделать и нужно ли что-то делать? Может лучше подождать пока что-то доработает Яндекс?

Обновлено 18 ноября 2020, 19:56

Сергей Тощилин

Сотрудник Яндекса18 ноября 2020, 20:21

Андрей Д.,

добрый вечер!

Как видно из приложенного Вами примера, ссылка на картинку в meta-тэге og:image формируется некорректно.

При вставке ссылки напрямую скраппер ВКонтакте разбирает сайт и ищет картинку самостоятельно.
При поделении через API ВКонтакте (которое используется в нашем Блоке "Поделиться"), картинка подставляется из адреса. Сейчас в мета-тэге ссылка на картинку некорректная, и ничего не подставляется. За корректностью ссылки лучше обратиться в поддержку Web Builder.

Есть решение в обход корректного указания мета-тэгов. В Блоке "Поделиться" можно кастомизировать передаваемый контент. Картинку можно указать явно с помощью атрибута data-image. Код будет выглядить примерно следующим образом: <div data-image="https://egypt-turism.ru/images/Sfinks.jpg" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,gplus,twitter,blogger,delicious,digg,reddit,evernote,linkedin,lj,pocket,qzone,renren,sinaWeibo,surfingbird,tencentWeibo,tumblr,viber,whatsapp,skype,telegram" class="ya-share2">. В этом случае Блок "Поделиться" возьмет ссылку на картинку из переданного атрибута и прокинет в адрес, который формируется для поделения во ВКонтакте или другую социальную сеть.

Также кастомизировать можно индивидуально для каждой социальной сети, если это необходимо. Подробности в документации https://yandex.ru/dev/share/doc/dg/add.html/

Андрей Д.

19 ноября 2020, 19:33

Сергей Тощилин,

Спасибо за ответ! Но я разобрался в чем дело конкретно в Web Builder 16. Надо при указании og:url в карточке программы указывать URL со знаком "/" в конце, т.е. не так https://egypt-turism.ru, а так https://egypt-turism.ru/. В предыдущих версиях нормально работало без "/", а вот в 16-ой теперь надо вот так указывать, чтобы был корректный адрес og:image! Написал решение, потому что может это еще кому-то понадобится!

Сергей Тощилин

Сотрудник Яндекса21 ноября 2020, 16:28

Андрей Д.,

большое спасибо, что поделились решением!