Search code examples
angularfacebooksharefacebook-opengraphangular-universal

Facebook share - display wrong image


I have problem with display image while sharing link:

https://digital.nbbd.me/unit/zorica-joksimovic-from-water-and-stone-to-story-and-storytelling

Title and description display correct, but image not. When I try with debug tool, it warns that og:image parameters are missing, but they appears in source code. Also, in debug, image is displayed correctly. However, when I share it, it display logo image, not the one which is in code. I would appreciate any advice how to solve it. Project is made in Angular, also using Angular Universal.


Solution

  • The url is not set correctly:

    <meta _ngcontent-sc324="" property="og:url" content="">
    

    Also, make sure to put your OG tags before any CSS or JS, Facebook does not parse the whole Page.

    Sidenote: Not sure if it is normal in Angular, but you have 2 html tags, 2 head tags and 2 body tags in your source. Either way, make sure to put the OG tags in the main head section.