Search code examples
angularfacebook-sharer

Angular 9 | Facebook share button not displaying image

I have an Angular 9 SSR application - http://www.dosgamesworld.com/

In every page I have a Share Facebook button.

The issue i'm experience is that the og:image is not recognized correctly by Facebook for most of the pages.

All the images in the application are 320px X 200px.

Also the meta looks correct for all pages.

For this page it does work well - 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">

enter image description here

BUT, for other pages it does not work: for example http://www.dosgamesworld.com/game/pop

(meta looks correct, but the actual share is missing the photo)

  <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">

enter image description here

When I look into the facebook developer tools i see the following error: 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.

Solution

  • Ahh got it, look carefully. Open the pop image url in browser. Its name is pop.png but its actually an jpeg image

    Change Meta of pop from

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

    To

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

    OR

    Change pop image to actual png.