x

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

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

59,123 Views
Message 1 of 263
Report
1 Best Answer
Square

Best Answer

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 >

60,967 Views
Message 231 of 263
Report
262 REPLIES 262

Can someone help me? I have this thumbnail showing on all my pages when shared on Facebook, but only if I share my homepage (so: http://artuurbruwier.weebly.com/) there's none showing...

Thanks in advance!

10,805 Views
Message 148 of 263
Report

OMG I DID IT!!!

It only took like three hours of reading this and a few other entire threads from 2016 on and then testing and re-scraping but I DID IT

here with the final version

<img src="https://www.website.com/uploads/2/0/1/1/2011519/3adf652d-01d0-497e-985e-3a4e634da07e_orig.jpeg" style="display:none">
<meta property="og:type" content="https://www.website.com" />

<meta property="fb:app_id" content=“247739396249568" />

Facebook scraper still doesnt like the App ID - maybe because it isnt "live" just "in development"?

i had checked out of the rescraping tool to another page on develpers - when I returned to the tools I had to reenter the url to scrape and then it WORKED!

3,602 Views
Message 149 of 263
Report
Square

Glad to hear you were able to make it work out! Smiley Happy 

3,467 Views
Message 150 of 263
Report

Yes, definitely agree with you and appreciate your thorough efforts.

2,558 Views
Message 151 of 263
Report

100% Agreed!  I have started building my website again on another platfom, because I am tired of these issues not being resolved.  

10,682 Views
Message 152 of 263
Report

thanks Chris for a well thought out cogent and detailed analysis.  I feel that Weebly is saying what the judge said in My Cousin Vinny:

Judge Chamberlain Haller: That is a lucid, intelligent, well thought-out objection.

Vinny Gambini: Thank you, Your Honor.

Judge Chamberlain Haller: [firm tone] Overruled.

astonishing how a relatively simple thing like a default photo on facebook can not be handled properly.

6,126 Views
Message 153 of 263
Report

Yes I would like this to work too

6,336 Views
Message 154 of 263
Report

I've finally figured out an answer to this that works for me. 

Cause of problem:

- Weebly uses the very first image on the page to populate it's default "og:image" tag

- that default is usually the site logo

- trying to manually enter an "og:image" tag into the Header Code of an individual page will override the default "og:image", causing it not to appear at the top of the <head> tag, rather underneath all the <script> tags

Solution to problem: create a hidden image directly after the <body> tag

1) go to your HTML/CSS editor under the Theme tab

2) add a line like this DIRECTLY after the <body> tag of whatever type of page you are editing (for me it was title.html)

<img border="0" src="https://yoursourcehere" alt="hidden for FB" width="0" height="0" style="visibility:hidden;"/>

3) make sure your image is under 8mb

4) go to https://developers.facebook.com/tools/debug/ and click "Scrape Again"

5) you should now see your image appear

10,586 Views
Message 155 of 263
Report

A non-CSS literate person here - who is happy to just follow instructions however. I'm trying to get the default thumbnail changed per this fix - but am lost on actually where to start. I open up the CSS/HTML Code editor, and I see header type, styles, partial etc. I *think* I should go to styles - but no title page there. There is a main.less - is that the one I want?  The page I want to do this for is website's home page, which follows header style of my theme. Do I do this under header.html? 

Thanks for any pointers. 

Sue 

4,579 Views
Message 156 of 263
Report

Just wanted to chime and say I wish I had the ability to CHOOSE the og:image for any blog post... that would be super helpful!!!!!!

7,352 Views
Message 157 of 263
Report

Agreed. Please fix/add this. I have an old photo that isn't even the oldest image showing up. Doens't make sense. 

6,972 Views
Message 158 of 263
Report

I had success posting the meta og:image tag

<meta property="og:image" content="URL of my image"/>

into the meta tags section of either the page's or in Settings>SEO rather than in header etc.

6,447 Views
Message 159 of 263
Report

What I found was putting a <meta property="og:image"> tag in the page header *does* work, but *only* if you tell facebook this is a "website" graph type.

You can do this with an og:type meta tag in the site theme, as suggested in another post, or (better) you can do it by creating an App with the web site platform in the facebook developer console, and then putting that app's fb:app-id into your site's theme. The latter way is better because it also helps you get some nice reporting on people sharing your pages and posts.

5,470 Views
Message 160 of 263
Report

Guys, I'm new at Weebly, and I'm VERY disapointed on several things, like the fact that they won't let me use the $100 dolars for Google Ads as advertised, just because I'm from Brazil

Anyway, I was trying to be able to share a different image for each blog post on my site, and after hours of tests I finally found something that worked. I hope this help some of you.

I didn't post my link directly on the Facebook page. Instead, I went to the Facebook Power Editor, and created my post from scarp. I was able to edit every field on my post, and send it just the way I wanted.

Good luck

5,263 Views
Message 161 of 263
Report

Hey everyone, I think I just found a working solution.

I plugged the og:image code into the entry field for the image link and it appears to have worked.

4,750 Views
Message 162 of 263
Report
Square

Could you get a screenshot of what you're doing, @ahowley?

4,556 Views
Message 163 of 263
Report

As an experienced web developer who has inherited a Weebly site, I'm appreciative of how quickly I can build pages, but very disappointed that basic web best practices like OG Image for Facebook sharing have not been addressed for years! I've had to resort to a hack, which I try to avoid.

  • Create page, hide from nav, hide from search engines
  • Place my social graph image on it
  • Add social graph tags to Settings > SEO > Header.

<meta property="og:image" content="myImagePath"/>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

And this gives me a single image to represent the whole site. And of course, when I publish the site at a new domain, I'll have to update the image path, too.

Weebly devs, please fix this already.

3,105 Views
Message 164 of 263
Report
Square

Thanks for sharing that, @4midori. I agree that it would be a better experience if an image could just be uploaded and selected for this.

2,952 Views
Message 165 of 263
Report

 Sorry for reopening this issue but the issue has cropped up again because of SSL Certificates

So I've just discovered that my website og url looks like this

<meta property="og:url" content="http://www.

as oppesed to this 

<meta property="og:url" content="https://www.

Now I am not wholly sure what the affect of this is and what harm this causes to SEO or sharing?

Likewise what issue it causes me having almost duplicate og title,description and url meta properties as I have manually entered my own on all my weebly sites.

2,870 Views
Message 166 of 263
Report
Square

Hey there! What website are you seeing this on? 

2,854 Views
Message 167 of 263
Report

On all weebly websites

2,868 Views
Message 168 of 263
Report