How to assign og:image

User 2503578 Photo


Registered User
90 posts

Facebook uses the file designated by og:image as the icon aligned with your website link. I thought it would work if I changed the Favicon in Structure Data/Page Manager in Site Designer. But that doesn't seem to work. Does anyone know how to designate the file for og:image?

More info using Facebook Scraped URL:

Facebook sees this (and this IS the file I want it to use):
<link rel="icon" href="./images-100x100/wine%20glass.png" type="image/png">

Facebook uses this for og:image:
<div class="responsive-picture picture-logo"><picture><img alt="Placeholder Picture" src="./images/ThreeOaksWebsite.png"></picture></div>

User 2503578 Photo


Registered User
90 posts

FYI - the og:image shows up when you share your website link on Facebook. I wasn't happy with the image Facebook automatically selected, so I needed to assign a value to og:image. I resolved the problem by editing the HTML directly prior to uploading to my website. I'm not sure of a good way to do this within Site Designer.
User 187934 Photo


Senior Advisor
19,161 posts

That's a fine way to do it. It could probably be done with a JQuery script on page load.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2503578 Photo


Registered User
90 posts

Hi Eric,
Thank you for your response. I'm back to having the problem, so I'll give your recommendation a try!

Diana
User 283347 Photo


Registered User
377 posts

Diana,

If you find a jQuery that works, will you please share it and a bit on how to use it?
Thanks,
Mark
User 187934 Photo


Senior Advisor
19,161 posts

Put this in the head of page under custom code settings.
<meta property="og:image" content="https://mydomain.com/images/the-image-i-want-fb-to-use.jpg">

Adjust link to your actual location.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 283347 Photo


Registered User
377 posts

Thanks, Eric!
User 2503578 Photo


Registered User
90 posts

Thank you! That's so much easier!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.