OG:image Tag isn't using the right image, tried everything I can think of

[Tactica_Jake]

Hi there,

As the title states, I'm slightly losing my mind right now. I've spent hours over the last few days trying to get our OG tags to work, but Meta isn't playing ball - it keeps scraping our logo instead of the page or product's image (see screenshot). We're currently using Maestrooo's Impact 4.0.2 theme, and it integrates tags as follows:

Inside the theme.liquid file, just above </head>:

{%- render 'social-meta-tags' -%}

Then, inside the social-meta-tags.liquid section:

{%- if page_image -%}
<meta property="og:image" content="http:{{ page_image | image_url: width: 2048 }}">
<meta property="og:image:secure_url" content="https:{{ page_image | image_url: width: 2048 }}">
<meta property="og:image:width" content="{{ page_image.width }}">
<meta property="og:image:height" content="{{ page_image.height }}">
{%- endif -%}

I'm no expert by any stretch of the imagination, but from what I gather this is the only mention of og:image I can find in the code. The developers are refusing to help me.

Before I started looking into it, Meta was using an image from our dropdown menu as the og:image tag. Once I deleted it, it started using the website logo. Could it be selecting the first image it sees on the page (e.g. in the header) instead of the main featured image or product image?

Are there any ideas? Should I be using a different variable than page_image?

Thanks in advance!

Jake

[PaulNewton]

The screenshot shows an error that the og:image isn't explicitly defined on the page.

What's in the code is not the same as what may be rendering.

view the source of the page (ctrl+u) in the browser and check what is actually being output.

Also validate the html for problems.

Read up on the objects behaviors:

https://shopify.dev/docs/api/liquid/objects/page_image 

https://help.shopify.com/manual/online-store/images/showing-social-media-thumbnail-images#setting-th...  

If you need this debugged you contact me by mail for services.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.

Good Hunting.

[Tactica_Jake]

Thanks for the suggestions Paul - I've already had a look at the source, and sure enough, the og:image tag is recognising the correct image, dynamically, across all product pages:

So the page is recognizing the correct image, but it's just not coming across in Meta.

You mentioned validating the html - could you please let me know how to do this? Do you think it could help?

Thank you again,

Jake

[Tactica_Jake]

OK, another update - I tried running it through https://validator.w3.org/, and  it flagged almost all of the meta code with the following:

I'll admit I'm nowhere near savvy enough to understand this, but as far as I can guess, something's changed in the way those parts are meant to be written and they're no longer valid. Again, it would be great to get help from the original devs, but they're saying they have no input on meta tag issues.

[PaulNewton]

Theme makers only support the initial structures you would have to show there is an problem inherent in the theme itself.

If you've used some sort of SEO service or app in the past good chance that's involved.

If so and a backup theme was made, check that backup with the tools.

Or install a fresh copy of the theme and check that with the tools using it's preview url.

Preferably using the same theme version or a backup of the original theme install that's the same version , otherwise your introducing more variables in the mix with a new version.

[Tactica_Jake]

Ok, I see what you mean. We have worked with some SEO optimisation services in the past, they could have changed something deeper that I'm missing. I'll try to get in touch with them and see what's up - otherwise, I guess we'll look to get it fixed by a 3rd party. Thank you so much for your help!

[PaulNewton]

Try a different service from meta to rule out a problem with them.

If working in different tools it's probably a cache issue with meta .

https://stackoverflow.com/questions/7572441/facebook-like-showing-cached-version-ogimage-way-to-refr... etc