How do I specify an image for sharing on social media?

[JamesKiernan]

[Note: The title of this post has been edited by a moderator.]

How can I change website thumbnail? It is defaulting to a certain photo on my site but I want to select a more specific photo/logo that represents our brand and makes a better first impression when sending the link to potential clients. I googled how to do it and found some code that includes the url for the photo that I want to use and placing that in the page header but didn't work for me.

[tanyasaatzerart]

When I share the link to my website or a specific page in my site I do not like the pictures that display with it. It seems like they are randomly chosen from off of my site. I would like to pick specific pictures to display. How do I do this?

Example: When I share https://www.tanyasaatzerart.com/pet-portraits.html on my facebook post it is displaying a picture that I would rather not share. I want to know how I can get a different picture to display.

Any help is greatly appreciated!

Thanks

[Adam7]

Hey @tanyasaatzerart!

Since Facebook chooses a picture automatically when you use our built-in sharing feature, you'll have to share the URL yourself directly at Facebook to pick a picture.

Before you try that, though, you'll need to clear Facebook's cache of the page with their debug tool:

https://developers.facebook.com/tools/debug/

Enter your URL in that, then click the button to scrape new info.  Once done, go to your Facebook page and share your page.  You should be able to pick from available images and share the post.

[soundmemories]

I have just tried doing this and it hasn't made any difference. When I put the link in, it show with no picture and then when I post it it comes up with the wrong picture entirely. I want it to show the picture in my header on the website but it shows my gofundme label ... I have tried debugging and it has not worked.

Any other suggestions?

Thanks

Cheryl

[Mellowdee]

me too - same issue

[#6]

I understand this is for facebook, what about on LinkedIn and Tumblr?

[Bernadette3]

I haven't heard of a similar debugger tool for Linkedin or Tumblr. Although I'm sure they would have more information on their pages.

[visualkern]

I actually have similar problem, but it's not only on Facebook, but also in messenger, imessenger, linkedin, etc. It basically pics the first picture from my website, and I want it to be my logo. Here's my website anyakern.com. 

[Bernadette3]

Thanks for posting the website name @visualkern Facebook doesn't read logos as valid og images, but it's super easy to add it. First you will want to add a new page to your website and check the box that says "hide in navigation". Then add an Image element and upload your photo. You may need to resize the image based on Facebook's recommendations. Publish the website and navigate to your hidden page by typing in: yourdomainname.com/hiddenpagename.html

Then you will right click on the image and copy the image address. 

Last step will be to go back into the editor, click on Settings, then SEO. In the Header section you will copy/paste this code (don't forget to replace your image url):

<meta property="og:image" content="http://example.com/rock.jpg" />

Then Save and Publish. You may need to run Facebook Debugger and re-scrape your URL, but that should allow the logo to show. Please let me know if you have any questions at all about this. 

[Mirja]

Hi, I followed all your steps and it still doesn't work in Linkedin. I think it's the last step that I am not doing correctly. This is my image url:  www.responsiveleadership.com/uploads/3/8/3/8/38381667/icon-web_orig.png

I tried several ways of copy/pasting it in the header code, including the one below. But non worked. Can you tell me how exactly I have to copy/paste the code in the header section of the SEO? Thanks!

<meta property="og:image" content="http://responsiveleadership.com/uploads/3/8/3/8/38381667/icon-web_orig.png" />

[Mirja]

Hi everyone, 

I just found this great article that describes how to do it for Linkedin. After following all the steps Benadette describred, you have to add /?latest to your domain. www.yourdomain.com/?latest and then it will show correctly. For more info this is the article:

https://www.linkedin.com/pulse/how-clear-linkedin-link-preview-cache-ananda-kannan-p/

Cheers,

Mirja

[Adam7]

Thanks for sharing, @Mirja!

[Acey]

Hello there!

I am having difficulty going to the below part, please find my questions after the instructions provided. I also attached screenshots. I hope you could help me.  

Publish the website and navigate to your hidden page by typing in: yourdomainname.com/hiddenpagename.html--- Where to go from here? is it under "PAGE NAME" from the new page I added?

Then you will right click on the image and copy the image address. -- Where? from the folder where I got the image or on the page I created?

Last step will be to go back into the editor, click on Settings, then SEO. In the Header section you will copy/paste this code (don't forget to replace your image url):------ is this correct? <meta property="og:image" content="http://hollywoodfashionmerchandise.com/hfm2.jpg" />

Thank you,

Ace

[Adam7]

The hidden page name is based off whatever you named the page, so if you called it "Hidden Page", then it would be hidden-page.html. Once you are viewing that page, you right-click the image on the page and copy the URL from that. The general format you have for your meta tag is correct although you'll need to replace that image URL with whatever you copy from the the hidden page.

[Acey]

Hello Adam,

So I tried following your advise, however when i get to the part of "Once you are viewing that page, you right-click the image on the page and copy the URL from that. The general format you have for your meta tag is correct although you'll need to replace that image URL with whatever you copy from the the hidden page."---- It doesnt show the link I needed. Screenshot attached. Website is https://www.hollywoodfashionmerchandise.com/

I am sorry, I guess I am a bit lost  

[Adam7]

Oh! You'll need to visit that page on the published site and right-click the image there, @Acey. 

[Acey]

Hello Adam,

Got it already! Our logo is now showing i the thumbnail. I am happy  

Thank you for the effort,

Acey

[Bernadette3]

Thanks for letting us know, @Acey

[Breonna]

So I did everything that I was supposed to and now it says on the debugging the following: "The following required properties are missing: og:type, fb:app_id"

I am using this for the Header code: <meta property="og:image" content="https://www.groundedbeautybar.com/uploads/1/0/1/1/101171032/gbbfinal_orig.jpg" />

Please help! 

[Adam7]

You can ignore that warning, @Breonna - it will work regardless of that message. It looks like you only needed to have Facebook scrape the site again; I just did that and now the debugger shows that image (it looks great!).

[filmonaday]

Thanks. I stuck with the thread and your answer really clinched it. Awesome guide.