Why is the wrong image displaying from my OG:image tags?

Shopify Discussion

Topic summary

Main issue: Link previews on Meta/Facebook were showing the site’s default logo instead of the intended Open Graph image, with the debugger claiming OG image wasn’t defined.

Context: The OG:image meta tag was placed at the top of the head and showed the correct image. The problem persisted for months, ruling out caching delays.

Key terms:

  • OG:image: Open Graph tag specifying the image used in social previews.
  • og:image:secure: HTTPS version of the image URL for secure contexts.

Troubleshooting steps and findings:

  • Waiting for “Google/raw data” refresh didn’t help.
  • Adding og:image:secure (with HTTPS) was attempted; still failed.
  • Ensured the URL used HTTPS; still failed.
  • Considered app interference; none identified.

Root cause and fix:

  • A syntax error in the meta property name: a trailing colon after “og:image” (written as “og:image:”) prevented Facebook from recognizing the tag.
  • Correcting the property to exactly “og:image” and including og:image:secure resolved the issue.

Outcome: Resolved. No evidence of a Facebook bug; the issue was a minor syntax error. Discussion closed with a confirmed fix.

Summarized with AI on January 16. AI used: gpt-5.
1

Hi all,

We’ve had an ongoing issue where our meta links show the wrong image when we send them. We’ve verified that the OG:image tag is correctly installed and is recording the correct image, as shown below. To make sure it works, we’ve even moved it to the very top of the section, so it’s the first thing that renders:

02.jpg
02.jpg1840×899 193 KB

However, for some reason, Meta is instead using the default website logo as our OG:image, and saying it isn’t defined:

01.png
01.png1061×1220 48.7 KB

Does anyone have any experience fixing these sort of issues? Any help would be appreciated!

Thanks,
Jake

2

Hi @Tactica_Jake ,

Hi @Tactica_Jake ,

After you update OG:image you need to wait some time for the Goole raw data and update.

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

1 Like
3

Thanks for the advice Oliver! Unfortunately, we’ve been dealing with this back-and-forth since July, and still no progress. I’m finally getting around to fixing it now, but it’s been in this position for over 2 months and hasn’t fixed, so I doubt it’s a matter of waiting.

4

Hello @Tactica_Jake :waving_hand:

Use og:image:secure instead of og:image for https

Try this meta tag
1 Like
5

Hi there! Thanks for the suggestion, I tried it and it didn’t work. Still the exact same error, even with the page recognizing the og:image:secure.

Tactica_Jake_0-1696477514674.png
Tactica_Jake_0-1696477514674.png1075×331 46.7 KB

Any more ideas? Thanks!

6

Sorry, I forgot https in the url, please try this
1 Like
7

Thanks again, but no luck either. Still throwing an error in the debug tool.

Tactica_Jake_0-1696482340215.png
Tactica_Jake_0-1696482340215.png1385×691 86.1 KB

We don’t have any apps for our social media specifically, but could an app be interfering with it? I’m pretty lost for solutions.

8

There should be no colon after og:image

Please try correct it to og:image

Screenshot 2023-10-05 at 13.55.26.png

After this change, if it still does not work I think there must be a bug with the Facebook system that fails to recognize the og image.

1 Like
9

That did it! Thank you so much, we’ve been dealing with this for months! I can’t believe it was something that small.

To be fair, I must have left that colon in there after an edit, because it wasn’t there in my initial post. A combination of fixing this and adding the og:image:secure seems to have fixed it.

Thanks again!

10

Glad that it works now. Hope you the best!