og:image showing instead of og:image:url on facebook

[webel]

Hi,

Feeling stupid as ever as I can't figure out how to get rid of the og:image in the meta tags when we're on a product page, when I share a product page to e.g. facebook or similar it'll always just show the store logo.

Here's an example link; https://re-tail.store/products/mossa-gra-dog-mom?Color=Gr%C3%A5

This is what the meta tags look like;

   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <meta property="og:image" content="https://cdn.shopify.com/s/files/1/0786/2635/7597/files/logo_512_512.png?v=1720263058">
   <title>Dog Mom Warm Beanie | Re-Tail</title>
   <link rel="canonical" href="https://re-tail.store/products/mossa-gra-dog-mom">
   <meta name="description" content="Mysig Mössa som är stickad, ett måste för hundmammor! Stickad i Akryl, Broderad snygg text: DOG MOM">
   <meta property="og:image:url" content="https://cdn.shopify.com/s/files/1/0786/2635/7597/files/6d897ff1-3a05-421f-aa81-0e9ac0b488c4.webp?v=1719913920">
   <meta property="og:image:height" content="800">
   <meta property="og:image:secure_url" content="https://cdn.shopify.com/s/files/1/0786/2635/7597/files/6d897ff1-3a05-421f-aa81-0e9ac0b488c4.webp?v=1719913920">
   <meta property="og:image:type" content="image/jpeg">
   <meta property="og:image:width" content="800">
   <meta property="og:description" content="Mysig Mössa som är stickad, ett måste för hundmammor! Stickad i Akryl, Broderad snygg text: DOG MOM">
   <meta property="og:title" content="Dog Mom Warm Beanie | Re-Tail">
   <meta property="og:url" content="https://re-tail.store/products/mossa-gra-dog-mom">

The og:image:url is the correct image to show, but it'll always show og:image.

[webel]

I'm losing it, locally that og:image tag doesn't turn up. As soon as I push to production, there it is with the store logo as the value. It's above all the other meta tags and the title tag as you can see... where is it coming from?!

I've tried overwriting it like this too on the product page;

export const meta = ({matches, data}: MetaArgs<typeof loader>) => {
  const helperMeta =
    getSeoMeta(...matches.map((match) => (match.data as any).seo)) || [];

  // helperMeta is an array of meta tags, now we want to add an override for the og:image tag
  // to use the product image instead of the default logo on facebook
  return [
    ...helperMeta,
    {
      property: 'og:image',
      content: data?.product?.selectedVariant?.image?.url,
    },
  ];
};

Which doesn't help. Any ideas?

[webel]

This ended up solving itself 🤷‍♀️ I still found that adding the og:image manually helped facebook show the right metadata when sharing a link.