Добавить og:image:width, og:image:height и og:image:type в теги OpenGraph

Внести вклад Функция
1

Я мигрирую с phpBB на Discourse и обнаружил, что в реализации OpenGraph в Discourse отсутствуют некоторые важные теги, от которых зависит Facebook для корректного отображения изображений.

Проблема

При публикации тем Discourse в Facebook изображения не отображаются в превью ссылки. Однако при публикации постов phpBB с того же форума изображения отображаются корректно.

Используя Отладчик совместного использования Facebook, я выяснил, что:

phpBB включает:

<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="768">
<meta property="og:image:type" content="image/jpeg">

Discourse включает:

<meta property="og:image" content="https://example.com/uploads/.../image.JPG" />

Отладчик показывает изображение корректно и возвращает HTTP 200, но Facebook не отображает его в реальном превью совместного использования без метаданных о размерах и типе.

Почему это важно

Согласно спецификации протокола OpenGraph:

Тег og:image имеет несколько необязательных структурированных свойств, включая og:image:width, og:image:height и og:image:type.

Хотя эти свойства технически необязательны, краулер Facebook, похоже, требует или настоятельно предпочитает их для надежного отображения изображений. Это задокументировано в различных источниках и влияет на совместное использование в социальных сетях для всех сообществ Discourse.

Предлагаемое решение

Discourse должен автоматически добавлять эти три дополнительных мета-тега всякий раз, когда присутствует og:image:

  1. og:image:width — фактическая ширина изображения в пикселях
  2. og:image:height — фактическая высота изображения в пикселях
  3. og:image:type — MIME-тип (image/jpeg, image/png и т. д.)

Поскольку Discourse уже обрабатывает и оптимизирует изображения, у него есть доступ к этой информации, и он может легко включить её в вывод OpenGraph.

Влияние

Это улучшит совместное использование в социальных сетях для всех сайтов Discourse, сделав общие ссылки более визуально привлекательными и увеличив вовлеченность при публикации контента Discourse в Facebook, LinkedIn и других платформах, использующих данные OpenGraph.

Дополнительный контекст

6 лайков
2

Спасибо за отчёт @shortmort37 :+1: Это будет исправлено в

6 лайков
4

Спасибо за решение этой проблемы!

Однако не могли бы вы объяснить, почему og:image:type не будет включён? phpBB это делает.

Дэн

3 лайка
6

Потому что я неправильно прочитал спецификацию и подумал, что она необязательна… Но поскольку ширина и высота изображения тоже указаны, я не вижу причин не добавлять это поле.

6 лайков
7

Теперь это отлично интегрируется с Facebook после последнего обновления Discourse. Большое спасибо!

— Дэн

4 лайка
8

Хочу выразить ещё больше признательности! Недавно я развернул превосходный компонент темы «Topic List Thumbnails» Дэвида Тейлора. Это потрясающе, что я могу генерировать миниатюру для любой темы — и, более того, могу выбрать изображение, из которого будет создана эта миниатюра, добавив тег «|thumbnail» в конец объявления изображения.

Возможно, это связано с тем, что базовая архитектура использует этот тег как для og:image, так и для компонента темы; но я был в восторге, обнаружив, что при изменении миниатюры автоматически обновлялось и свойство OpenGraph og:image, а значит, и то, что отображалось в Facebook. Два зайца одним выстрелом, и всё так просто! :zany_face:

Отличная работа!
Дэн