Angular 9 | Кнопка публикации в Facebook не отображает изображение

Question

У меня есть приложение SSR Angular 9 - http://www.dosgamesworld.com/

На каждой странице у меня есть кнопка «Поделиться в Facebook».

Проблема, с которой я столкнулся в том, что og:image неправильно распознается Facebook для большинства страниц.

Все изображения в приложении имеют размер 320 пикселей X 200 пикселей.

Также meta выглядит правильно для всех страниц.

Для этой страницы работает хорошо - http://www.dosgamesworld.com/game/alleycat

     <meta property="fb:app_id" content="1596858517136240">
    <meta property="og:url" content="http://www.dosgamesworld.com/game/alleycat">
    <meta property="og:type" content="website">
    <meta property="og:title" content="DOS Games World - Alley Cat">
    <meta property="og:description" content="Alley Cat is a single player platform game. The player has to assume the role of a cat, which is outside of a house and has to go through a certain track, near ">
    <meta property="og:image" content="http://www.dosgamesworld.com/assets/images/alleycat.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="320">
  <meta property="og:image:height" content="200">

НО , для других страниц это не работает: например http://www.dosgamesworld.com/game/pop

(meta выглядит правильно, но на самом деле отсутствует фотография)

  <meta property="fb:app_id" content="1596858517136240">
    <meta property="og:url" content="http://www.dosgamesworld.com/game/pop">
    <meta property="og:type" content="website">
    <meta property="og:title" content="DOS Games World - Prince of Persia">
    <meta property="og:description" content="Prince of Persia is one of the most famous and entertaining games of all time. The game is a fantasy cinematic platformer, which takes place in Ancient Persia. ">
    <meta property="og:image" content="http://www.dosgamesworld.com/assets/images/pop.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="320">
  <meta property="og:image:height" content="200">

Когда я заглядываю в инструменты разработчика facebook, я вижу следующую ошибку: Provided og:image URL, http://www.dosgamesworld.com/assets/images/pop.png was not valid because it did not meet the minimum size constraint of 200px by 200px.

Answer 1

Ага, смотри внимательно. Откройте URL-адрес всплывающего изображения в браузере. Его имя - pop.png, но на самом деле это изображение в формате jpeg

Изменить мета-значение pop с

<meta property="og:image:type" content="image/png">

на

<meta property="og:image:type" content="image/jpg"> or <meta property="og:image:type" content="image/jpeg">

OR

Заменить всплывающее изображение на фактический png.