- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
[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.
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.
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!
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!
Glad to hear you were able to make it work out!
Yes, definitely agree with you and appreciate your thorough efforts.
100% Agreed! I have started building my website again on another platfom, because I am tired of these issues not being resolved.
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.
Yes I would like this to work too
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
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
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!!!!!!
Agreed. Please fix/add this. I have an old photo that isn't even the oldest image showing up. Doens't make sense.
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.
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.
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
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.
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.
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.
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.
Hey there! What website are you seeing this on?
On all weebly websites