How to change preview images / thumbnails

[musikzumm]

Hi,

are there any settings / possibilites to change my preview image / thumbnail picture when posting a link to my webiste?

It happens very often, that I post a link to my page (in facebook, mails, blog-comments or so) and there always appear unsuitable pictures. I would like to specify a picture myself, e.g. my symbol-icon / logo.

Thanks a lot and kind regards,
musikzumm

[PaulMathews]

What you'll probably want to do is add your own Open Graph image rather than allow social media to make this selection for you based on whatever it finds on the page. To do this, you'll want to upload your desired image and then add an Open Graph image reference to your site header.

What the heck are Open Graph images?

You can Google this but here's a pretty good article about this type of image and it's use in social media: https://blog.hubspot.com/marketing/open-graph-tags-facebook-twitter-linkedin. You should definitely give this a read before you start as image sizing can be of some importance for a good result.

Here's how you upload and reference your own Open Graph image to your site:

Upload your Open Graph image

1. In the Site Editor, click on the "Theme" item in the top navigation menu and then click on the "Edit HTML/CSS" button at the bottom of the left-hand sidebar.
2. In the Code Editor, scroll down the left-hand sidebar until you reach the "Assets" item. Click the "+" sign to the immediate right of Assets and select "New File."
3. Browse to the location of the file on your hard drive and upload it.
4. Click the blue "Save" button in the upper-right corner of the page.

Add a reference to the Open Graph image

1. In the Site Editor, click the "Settings" item in the top navigation menu.
2. In the left-hand sidebar, click "SEO"
3. Scroll down to the "Header Code" input box and add the reference code below

Open Graph image reference code:

<meta property="og:image" content="https://www.mysite.com/files/theme/my-og-image.jpg" />

Replace "www.mysite.com" with your site's root url. Replace "my-og-image.jpg" with the name of the image file you uploaded in the previous instruction steps.

Optional: Use a different image on a specific page or pages

1. Follow the steps above to add another image to be used for Open Graph purposes on the specific page.
2. In the Site Editor, click on the "Pages" item in the top navigation menu.
3. Click on the desired page in the left-hand pages stack.
4. Click on "SEO Settings" in the left-hand sidebar and scroll down to the "Header Code" input box.
5. Add the Open Graph image reference code above but modify it to reference the new image you uploaded in Step 1.

Use the Facebook Debugger

The Facebook Debugger is handy for you to see the Open Graph image (and other stuff) that is being scraped from the page. Find the debugger here:

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

[musikzumm]

Hi,

I tried to follow the instructions. Unfortunately, it doesnt work.

The first problem seems:

"In the Code Editor, scroll down [...] "Assets" item. Click the "+" sign to the immediate right of Assets and select "New File.""

I only can upload files by clicking "upload data" ("Hochladen von Dateien" in German). I have the "connect"-Version of weebly. Could this be the reason why the hmtl/css-section is limited? Nevertheless, I uploaded an img-file ("Logo"). This I want to use as my open graph image.

2nd:

"Add the open graph image reference code below to the "Header Code input Box""

There is already the code for the Webmaster Tools inside the Header Code input Box. Could this be the problem?

Kind Regards

[Bernadette3]

Hi @musikzumm You can actually add the og code to Settings>SEO>Header instead of going through html/css. This will prevent your site from being flagged as a "custom" theme. Having multiple codes in the header section will not be a problem. I recommend separating each code with a space to keep things nice and organized. 

Can you please add your og code to the site and publish? Let us know once you've done this and we can help you out some more. Thanks! 

[musikzumm]

Hi Bernadette,

thanks 4 your help, but:

Unfortunately, I can't get it to work;/

Although I followed the instructions. First, I uploaded the picture under "Assets" from my hard drive. It's called "Logo.jpg" (I didnt upload it in the "image"-folder, but under "objects"):

This "Logo.jpg." looks like this:

Then: I added the reference code to the Header-Code-Box and replaced the necessary elements (also with a space:

But, as you can see: Later I posted a link to my site (home page) and still the wrong/old image appears:

Where is my fault? Do you have an other idea?

Thanks and kind regards,
musikzumm

[Bernadette3]

I don't see your code, but can you add it to Settings>SEO>Header? 

[musikzumm]

I posted it in the Header Code Box:

[Adam7]

I think Facebook was using cached info. I used their debugger tool to scrape new information and it shows a new image now.

[musikzumm]

Can you please send/show me a Screenshot of this new image or of an "example-link" (how it looks like if posted on facebook/twitter/social media)?

Did I save it in the wrong folder?

I tried it with 4 different browsers, different laptops and social-media-accounts - beforehand I deleted cached images/data, cookies e.g. Still can't solve it. It shows always the same icon/previewed image (see above)

Thx.

[Kay30]

Hia 

I have no thumbnails coming up. 

I have a google chromebook which I work on. 

I cannot seem to generate an image URL to put into the code in my header to create an image thumbnail when sharing the website on any social media. 

I got the metatag code from the mata website. 

Here is the code I have. 

How can  I get the image code? 

I am going crazy with this!! Please help!!

<!-- Primary Meta Tags -->
<title>First virtual PSHCE course designed for young people of African heritage in the UK - Register your interest today!</title>
<meta name="title" content="First virtual PSHCE course designed for young people of African heritage in the UK - Register your interest today!">
<meta name="description" content="Welcome to the first fully comprehensive virtual PSHCE (Personal, Social, Health and Citizenship Education) course designed for young people of African heritage in the UK.">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.youngblackleaders.org/">
<meta property="og:title" content="First virtual PSHCE course designed for young people of African heritage in the UK - Register your interest today!">
<meta property="og:description" content="Welcome to the first fully comprehensive virtual PSHCE (Personal, Social, Health and Citizenship Education) course designed for young people of African heritage in the UK.">
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f...">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://www.youngblackleaders.org/">
<meta property="twitter:title" content="First virtual PSHCE course designed for young people of African heritage in the UK - Register your interest today!">
<meta property="twitter:description" content="Welcome to the first fully comprehensive virtual PSHCE (Personal, Social, Health and Citizenship Education) course designed for young people of African heritage in the UK.">
<meta property="twitter:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f...">

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0" nonce="FVi3E7bt"></script>

[Bernadette3]

Facebook doesn't have an image to read. Is there an image on your site (on any page) you want to show? 

[Kay30]

Yes. The only image on the site is the one I want to show. Its on the home page. 

[Kay30]

Here is the image I would like to show. Thank you

[Adam7]

It might be easiest to add that to the bottom of your content on your homepage with an image element, @Kay30. Once you do that it should be seen by most networks. In the case of some like Facebook, you might need to use their debugger to scrape the site again so they don't used cached info. 

[_annie]

Hello everyone,

Is there a simple way to change the thumbnail image that is show when sharing onsocial media?

The open graph thing doesn't seem user-friendly.

My website is: www.anniepaquetteart.com and I would like the colorful southwestern image to show as the thumbnail or the balck and white drawing of the woman. Right nowm it's the Egytology painting that shows up and I'd relly like to change that.

Thanks so much for any simple answer!

Annie

[Adam7 · Accepted solution]

This is what it would show now. There's also something wrong with the image you uploaded to your theme, so you might want to try exporting or saving it as a new jpg file and uploading again.

[musikzumm]

Yes, I`ll try it with another pic and i`ll test some other things, perhaps it works.

Thank u all for your help!

[musikzumm]

Ich schon wieder. Sorry, das Problem besteht nach wie vor:/

Ich kriege das Bild nicht getauscht. Das Hauptproblem: Als Open Graph erscheint in den mobilen Suchergebnissen auch genau dieses grüne-weiße Foto/Icon (siehe Screenshots, "..obilocle...handelsgrup..."). Es handelt sich um ein altes Fimen-Logo eines Kunden, das ich mal auf meiner Seite hatte, das aber mittlerweile gelöscht ist. Es befindet sich nicht mehr auf meiner Seite - wird aber trotzdem stets als Vorschaubild/Open Graph angezeigt. Sowohl in den SERPS der mobilen Suche als auch bei facebook.

Liegt das Problem am weebly-cache? Auch im Code finde ich es nicht. Es müsste dringend aus der Vorschau entfernt werden.

DAnke und LG

[Lo88]

I'm sorry. Can you post the detail instructions to change the image/photo that pops up with a website link? I am unable to see the solution. Thanks in advance.

[Adam7]

Add or change the images on the home page of your site, @Lo88, publish, then have Facebook scrape your site again using their debugger tool.