Довольно часто при публикации статьи (или при ее перепосте) в Facebook неверно отображаются изображения. Приходится удалять публикацию и повторно ее размещать, либо загружать свое собственное изображение с компьютера. Это вызывает определенные неудобства, хотя и является распространенной проблемой. Но, к счастью, это легко исправить с помощью отладчика Facebook.
В сегодняшней статье мы рассмотрим основные причины проблемы, а также пути их решения с помощью отладчика Facebook.
Существует довольно много причин этой проблемы, и иногда их тяжело определить. Самой распространенной причиной является неправильное использование тегов og (теги Open Graph, например для картинок используется тег og:image).
Когда вы делитесь статьей, Facebook пытается подобрать нужную картинку и делает он это с помощью тегов og. Если этот тег отсутствует, это может вызывать проблему.
Другой вероятной причиной может быть использование неверного размера изображения. Facebook распознает изображения размером не менее 200×200 пикселей, предпочитает большие изображения размером не менее 600×315 пикселей, а для больших экранов использует разрешение 1200×630 пикселей.
Данная проблема может быть решена несколькими способами. Один из вариантов – загрузить нужное изображения вручную. Это только частичное решение, возможно, лучшее решение – это устранить проблему с помощью Отладчика репостов Facebook (Facebook Sharing Debugger).
Отладчик репостов доступен в наборе инструментов Facebook для разработчиков. С помощью этого инструмента вы сможете просканировать нужную страницу, выявить мета-теги и увидеть ошибки. Он даже может проверить ваш HTML код.
Чтобы использовать данный инструмент, вставьте URL-адрес нужной страницы и нажмите кнопку Отладка. В результате вы увидите ошибки (при их наличии), а также советы по их устранению. После исправления ошибок, нажмите кнопку Повторить скрапинг (Scrape Again), чтобы очистить кеш и Facebook увидел вашу новую картинку.
Изображение должно быть предварительно закэшировано, прежде чем оно будет отображаться в приложении для репоста. Вам придется либо предварительно закэшировать изображение, запустив его в Отладчике репостов, либо использовать теги Open Graph (og:image:width и og:image:height), чтобы сканер-бот мог получить его без предварительной обработки.
Информация по теме: Пошаговая инструкция использования дебаггера (отладчика) для начинающих (VS Code + PHP / JS)
Если для страницы не задано изображение (в основном главная картинка поста), бот выбирает следующее найденное изображение. То же происходит, если изображение задано, но его размеры меньше требуемых. В таких случаях желательно размещать основное изображение выше других на странице, а также, чтобы оно имело размеры не меньше чем 600×315 пикселей.
Даже если такое изображение указано как картинка страницы, Facebook его проигнорирует. В таких случаях следите, чтобы оно имело размеры не меньше чем 600×315 пикселей (а лучше 1200х630).
Картинки – это только одна из потенциальных проблем при репостах в Facebook. Основные предупреждения, которые вы увидите, включают теги og. Это означает, что мета-теги, которые нужны Facebook, отсутствуют. Если для своего сайта вы используете CMS, такую как WordPress, тогда самым простым решением будет использование подходящего плагина, например, такого как Facebook Open Graph. Этот и подобные плагины автоматически устанавливают og теги, основываясь на html коде страницы. Размещение нужных тегов og на странице позволит Facebook нормально ее обработать и правильно провести рендеринг картинки и ссылки этой страницы.
Отладчик репостов Facebook – это простой способ узнать, что вызывает проблемы, с которыми вы или ваши читатели сталкиваются при попытке репоста публикации. Стоит приложить дополнительные усилия для того, чтобы ваши публикации были правильно отформатированы и правильно определялись Facebook. Хорошо отформатированные публикации получают больше взаимодействия и привлекают к себе больше внимания.
В мире веб-разработки мы постоянно сталкиваемся с проблемой: "А у меня на компьютере все работает!".…
На заре моей карьеры веб-разработчика все было относительно просто: установил локальный сервер (помните Denwer?), положил…
Если вы когда-либо интересовались, как ускорить свой сайт на WordPress, вы, наверное, слышали о "кешировании".…
Когда мы говорим о веб-разработке, первое, что приходит на ум — это HTML и CSS.…
В мире SEO есть фраза, которую повторяют так часто, что она уже стала клише: "Content…
Создание бизнеса — это как рождение ребенка. Вы вкладываете в него душу, время и деньги.…