Solved: Re: Site Thumbnails on Facebook Sharing - Page 6

JamesKiernan · ‎07-30-2019

[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.

Adam7 · ‎09-29-2020

WIth the classic Weebly drag and drop editor, you can specify a specific image by using a meta tag. Use this URL of an image file with the meta tag like this:

<meta property="og:image" content="https://www.google.com/someimage.jpg" />

Simply replace everything within the double quotes after content= with the URL of your own image, then add it the Header Code field in Settings > SEO in the website editor. You can also do this on a per-page basis by going to the Pages tab, clicking on a page, then adding it to the Header Code field found in SEO Settings. If you haven't already added the image to your site somewhere, you can also add it to a hidden page and then right-click on the image on the hidden page to copy the URL.

For sites built using the Square Online editor, you can do this for every page of your site within the website editor. Navigate to the page, then click on the gear icon on the left and choose Page settings. Go to the Social tab on the popup, then add an image to the Social image option. You can also set one for the whole site by going to Website > SEO & Social Media, click on Update social media, then adding an image on the Social tab of the popup.

Regardless of which editor you have, don't forget to publish afterward. You may also want to use the Facebook debugger to scrape your site again, since Facebook may use older cached images without doing that.

View Best Answer >

NickyLimes · ‎07-01-2016

Hello @ThemeTricks and @ChrisHurrell

I tried adding that code to my logo file on my site. From what I see this code does not work in a standard theme with a store page as the home page either. I get a choice of three of my product images.

kriskrost · ‎07-01-2016

Hi @NickyLimes

The image you're trying to use is too small. Provided og:image URL, http://www.coinsncurrency.com/uploads/4/9/5/8/49586375/coinsncurrency.jpeg was not valid because it did not meet the minimum size constraint of 200px by 200px.

It will need to be atleast 200 x 200.

NickyLimes · ‎07-01-2016

Hello @ThemeTricks

I have <meta property="og:image" content="http://www.coinsncurrency.com/uploads/4/9/5/8/49586375/coinsncurrency_2.jpeg" />

This image is 400 x 217

kriskrost · ‎07-01-2016

@NickyLimes

I downloaded your image directly from that link, and I'm showing it's 186 x 100

NickyLimes · ‎07-01-2016

@ThemeTricks

Yeah, that is our theme reducing the image size. I did however place another image on a hidden page and change the code.

ChrisHurrell · ‎07-01-2016

Thanks @ThemeTricks your explanation is plausible, but it doesn't quite explain why the meta code is being found in the header okay by Google Plus.

@NickyLimes yep i ran your site through the facebook debugger, and if you have placed the og:image meta tag line reproduced above in your header field and used http://www.coinsncurrency.com/uploads/4/9/5/8/49586375/coinsncurrency_2.jpeg as the image. then yep you are having the same problem on your site as I and others are having.

NickyLimes · ‎07-01-2016

Sweet @ChrisHurrell @ThemeTricks

I will try with a different file that is larger. It appears it is getting reduced.

ChrisHurrell · ‎07-01-2016

ooh actually @NickyLimes it could be that your logo image is too small. before being absolutely sure that you are having the same problem I am, you should add a larger pixel size version of your logo image to a blank hidden page of your site, and use the image url for that version in the header field. Facebook's scraper does omit very small images. Do a version say at least around 400x600px and see what happens.

Chris

NickyLimes · ‎07-01-2016

@ChrisHurrell

Ok, give it another try. Our theme further reduces the image size regardless of what image you place in there. I am trying a larger image on a different hidden page

kriskrost · ‎07-01-2016

@ChrisHurrell @NickyLimes

OK I was able to get your image to work on my site @ChrisHurrell http://hoverboardcity.weebly.com

I did have this theme on a custom theme, and I too was seeing that my SEO header tags were not going into the header on my custom theme. I'm an HTML expert so I'm positive I didn't make any mistakes in my HTML code. I'm going to test this theory, I think there may be a bug with custom themes. I'm going to do a few tests then I'll let you guys know.

NickyLimes · ‎07-01-2016

That is what I like to hear! Also make sure you test it on the store pages.

NickyLimes · ‎07-01-2016

Hello @ChrisHurrell

I was able to get the code to work thanks to @ThemeTricks

I did have to add the image to a different page inside an image element and hide that page from navigation. I then published and obtained the URL. I had to make sure the file size is LESS than 8mb and a resolution LARGER than 200 x 200

also @ChrisHurrell

Did you purchase that theme from a 3rd party? If so which one?

kriskrost · ‎07-01-2016

OK I was able to test, looks like the issue is with my theme. It's from a 3rd party and it's not showing the header code in the header area. I will take this issue up with my 3rd party developer. I'm guessing @ChrisHurrell is probably using a 3rd party developer as well.

I was able to get the OG HTML tags to work on a standard theme.

Ian_MacMillan · ‎07-04-2016

I was thinking about using Weebly, but this thread has put me off.

Why?

Because...

1. It looks like a simple error that could have been investigated a bit more thoroughly went on for far too long.

2. It looks like the quality controls for fundamental stuff like correct headers in "custom"/3rd party themes is a bit disjointed.

Wondering now what else is a bit flaky.....

ChrisHurrell · ‎07-05-2016

Hi @ThemeTricks and @NickyLimes sorry busy weekend

thanks for investigating, ThemeTricks, sounds promising. Don't know if its helpful to you but the other test I ran, which perhaps i described at the top of this looong thread, is manually dropping the line of code into the middle of the header in the html sheet for the relevant page type. The facebook scraper did place the tag higher up when you take this approach, but still it did no good in terms of producing the image.

Great to see my image in the OG debugger for your site, thanks - very informative: reveals that even if when we find a solution to this issue we'll still need to navigate around facebook's silly cropping of thumbnail images to what looks like 16:9 format? I guesss that reinforces the need for a dedicated field from weebly for providing site thumbnails to facebook.

NickyLimes I'm getting a bit mixed up about the order of these messages but yes, when you say:

I did have to add the image to a different page inside an image element and hide that page from navigation. I then published and obtained the URL. I had to make sure the file size is LESS than 8mb and a resolution LARGER than 200 x 200

that's what I have been doing too, sorry if that wasn't clear.

Don't know if its at all informative, but this is the header code for the html for my homepage - or at least the page type, that would have come from the custom theme (i guess)

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1">

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/files/theme/responsive.css">

<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('footer');
</script>
<link rel="stylesheet" rel='stylesheet' media='all and (min-width: 200px) and (max-width: 1024px)' href="/files/theme/mobile.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/files/theme/mobilenav.js"></script>


<link rel="stylesheet" href="/files/theme/idangerous.swiper.css">

</head>

Ando_79 · ‎04-28-2017

Thanks for the tip. This took me hours, this workaround is good enough until I can mentally get back into it. lol

Kamala2 · ‎07-05-2016

Hi @ChrisHurrell, @ThemeTricks, @NickyLimes,

I'd like to try putting images on a hidden page and then use a meta tag line of code in the Header form, like you've suggested, since it works for some people. This is my very first attempt at a website, so I'm not entirely sure how to do this. I'd love it if one of you could help me out with answering my question

Once I add the images to my hidden page, where can I find the image details to include in the code? For example, the "http://www.jameswilliamwright.net/uploads/3/0/9/9/30995353/9813722_orig.jpg" at the end of

Thank you in advance!

ChrisHurrell · ‎07-05-2016

Hi @Kamala

The only way i know to get the image URL is slightly cumbersome (actually come to think of it thats another suggestion i should make to weebly 🙂

First you want to view your hidden page. The URL of that is yourwebsite.com/hiddenpagename

ie in my case the hidden page is at http://www.jameswilliamwright.net/testing-page

once you can see your image, right click on it and open in a new tab

the URL now in your browser address bar is the one you need.

good luck!

Chris

Kamala2 · ‎07-05-2016

It worked!! Thank you so much, I really appreciate it. And I totally voted for your added feature!

Now to post it on facebook tomorrow at 3pm, because that's apparently when people check it the most.

Fantastic website, by the way!

NickyLimes · ‎07-05-2016

Hello @ChrisHurrell

Are you using a custom 3rd party theme?

kriskrost · ‎07-06-2016

Another side note, to further help with your OG image, you can specify the image size that you are using, here is an example of a 400 width x 300 height image that you can add to your header area under "Settings" > "SEO" > Header (for the whole site), or "Pages" > Click on the page on the left > Advanced > Header Code (for a specific page.)

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