Некорректная обработка картинок на ВКонтактовской стене

И так, о чём же это я? Тот кто пользуется ВКонтактом, тот знает, что если вставить ссылку на сайт, то под ссылкой появится просторный комментарий в котором будет участвовать информация со вставляемого сайта. Там выводится title, description и первая картинка со странички. Всё бы замечательно, но какая первая картинка на моём сайте? Правильно логотип! Вставляем ссылку на страничку с огромным количеством картинок (я выбрал страничку с похода в заповедник) и получаем следующий вариант комментария.

С какого такого перепуга страничка, с полусотней картинок заповедника, наиболее качественно характеризуется именно логотипом моего блога? Такое ощущение, что алгоритм выборки фотографий выглядит как поиск первого вхождения img и это первое вхождение уже становится превьюшкой просматриваемого сайта. Но сие, совершенно не правильный подход, ибо у подавляющего большинства сайтов первое вхождение картинки — это логотип. Ради интереса посмотрел как дело обстоит с самим ВКонтактом. У него логотип выводится из подключаемого скрипта. Но я не понимаю зачем мне лишнее обращение к подключаемому скрипту, да и скорости обработки это не придаст, а наоборот замедлит. Прошёлся по пачке других сайтов и самописных блогов. Практически везде есть проблема с тем, что вместо характеризующей фотографии, со страницы выхватывается первая картинка.

Но так как известен алгоритм работы парсера, то всегда есть возможность его обмануть. Я решил, что парсер ориентируется только на вхождения тэгов img. Исходя из этого, я решил вывести логотип в виде фонового изображения внутри пустого контейнера. До изменения метода показа логотипа страничка выглядела так:

После редактирования я запостил комментарий на стену и оказалось, что фотографии с выставки кошек, где тоже несколько десятков фотографий, характеризуются картинкой маленького принтера. Я использовал логотип маленького принтера перед словом «распечатать». Даже не предполагал, что разработчики парсера могли пропустить такую проблему. Дело в том, что на некоторых блогах от WordPress, стоит плагин который превращает смайлики в небольшие картинки рожиц. Это будет забавно если страничка с серьёзным контентом будет с логотипом смеющейся рожицы. Сейчас я не беру в расчёт то, от куда на серьёзном сайте взялись смайлики, я о том, что маленькие пиктограммы следует пропускать, ибо маленькая картинка ну ни как не может являться картинкой характеризующей контент сайта или блога. Чтобы не будить в себе зверя и не издеваться над CSS сайта, я просто удалил иконку принтера.

После того как я убрал все препятствия между парсером ВКонтакта и возможными картинками на страничке, я опять «скормил» стене ВКонтакта ссылку на страничку посещения заповедника и получился более вменяемый результат.

Сама соль подобного результата в том, что выведена не первая фотография из всего массива фоток, а одна из фотографий по середине всего массива фотографий. Видимо, парсер ВКонтакта нашел серию однотипных картинок и выбрал из них только центральную. Но почему этот алгоритм нельзя применять ко всей выборке с сайта? В общем странный подход у создателей парсера. В другой же лапе — это хоть какой-то метод защитить своих пользователей от некорректной ссылки. Люди могут получить приблизительную оценку предлагаемого контента и принять решение о том, стоит ли посещать подобный ресурс или не стоит.

После редактирования шаблона сайта возникло два вопроса. Во-первых, так как нет явной картинки, то нет возможности сделать ссылку. Сей вопрос я решил очень просто, взял и назначил событие перехватывающее нажатие на область с логотипом. Во-вторых, раз нет объекта (картинки-то нет, есть только фоновое изображение, но оно не объект) со ссылкой, то на нём не отображается курсор в виде руки. Этот вопрос я решил через CSS и назначил вывод курсора в виде руки над областью с фоном. Ех, всё это больше похоже на костыли и на хаки под партию разношёрстных сайтов. Все эти хаки и костыли потом вытекают в то, что сайты некорректно отображаются в старых браузерах. По поводу старых браузеров я уже писал, по этому я просто повторюсь и скажу, что в некорректном получении информации виноваты сами пользователи, которые играют роль герантофилов интернета.

Если вы тоже столкнулись с проблевой некорректного вывода фотографий с вашего блога или сайта, то я рекомендую выводить картинку либо скриптом, либо используя CSS. В любом случае ВКонтактовский парсер не должен видеть лишних тэгов img. Он ориентируется только на те картинки, что явно заявлены в скачиваемой страничке.

Тэги: SEO

Отредактировано:2020-09-26 10:30:38