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.

[ChrisHurrell]

I can see that this issue has been discussed at length, but as the increasingly frustrated conversation between

Weebly customers on Facebook indicates https://www.facebook.com/weebly/posts/10151259167552472 –

there is still no satisfactory resolution, despite the fact that this issue has been a problem for people for four years.

Here is the issue as I am encountering it.

My sites all rely on background images for the main visual content on the homepage. As background images,

these are not detected by Facebook’s Open Graph parameters and so are not identified as potential thumbnail images.

Similarly the site logo, if used only in the menu bar, is not detected by faceook’s scraping.

So I want to specify an image that Facebook should detect for the OG:Image parameter.

Weebly users online have tried the following three logical solutions to achieve this.

However I have tried all of these solutions in various of my sites and none of them are working:

1. Place code such as the following into The Weebly/Settings/SEO/header field:

<meta property="og:image" content="http://www.jameswilliamwright.net/uploads/3/0/9/9/30995353/9813722_orig.jpg" />

2. Place the same code in the Advanced/Header code field for the page itself.

3. Manually write the same code into the HTML sheet for the home page.

(ie the HTML for the page type in my template that is being used to style the homepage.)

Consider the code excerpt that Facebook is reading when scraping the homepage of one of my sites

where I have tried option 2 above:

Two things are noticeable.

1. The meta code snippet above does appear, but buried down after the script calling the stylesheet.

2. Facebook IS accurately identifying Weebly’s meta data from both the general and SEO pages of the site

settings and inferring the appropriate OG value, however, it is not doing so for the image meta tag above,

regardless of whether you place it in the advanced header field for the page as in this example, or in the

SEO header field in weebly settings, as in other cases I have tried. This seems more surprising and frustrating

given that facebook is detecting the description and meta keywords, which are the fields immediately preceding

the footer and header code.

Attached also are excerpts from the code facebook is scraping from the URLs of two of my other sites, in which

I have tried the other strategies above- 1 and 3. When placed in the site header, the meta tag is buried even

further in the body. When manually placed in the html for the page, the tag appears in what one would expect

to be the correct position in the header, but STILL facebook is unable to identify the image and returns the

error messages cited below. 

I am aware that Weebly users have been receiving the ‘its not our problem its facebook’s’ response from

Weebly staff. I am also aware that the solutions above DO specify the image successfully for Google Plus’s crawler.

However, given the omniprescence of the Facebook platform, and Weebly’s positioning itself as a

website-building platform that automates these sort of technical issues, an easy solution needs to be found.

Lots of people like me have invested many hours in creating weebly-based products that achieve a

highly professional web presence for our clients, and drive much business to weebly in the process,

and then find those efforts undermined by something as simple yet apparently insoluble as professional-looking

facebook sharing.

Can Weebly and Facebook not communicate with each other to resolve this?

It would seem the obvious solution is for Weebly to engineer a dedicated field in the site settings for

“site thumbnail” that specifically tags the content of that field with the OG:Image value. So that even

inexperienced weebly users can easily control the visual representation of their site when shared on facebook.

This failure of integration between weebly and facebook is discouraging me and my clients from

promoting our sites on facebook, thus devaluing the investment we have put into building such sites.

How can you explain the failure of either of the header fields (site or page) when populated with the

correct meta tag to deploy that code in a way that it can be read by facebook as being in the header?

Facebook offers the following warning notifications which appear relevant to this problem:

• Inferred Property

The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

• Meta Tags In Body

Your page has meta tags in the body instead of the head. This may be because your HTML was

malformed and they fell lower in the parse tree. Please fix this in order for the tags to be usable.

As the facebook discussion posted above, this problem has been a source of frustration to weebly

customers for a long time. And people feel that are being ignored by Weebly on this issue.

Thats why i have posted in detail, and I expect weebly to similary investigate and respond to

this in appropriate detail. A solution must be found. 

Chris Hurrell

URL Scrape when OG:image meta is placed in Weebly's Page Header Field

<!DOCTYPE html>
<html><body><htmllang><meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Gerrard McArthur - Actor-Director - Home</title>
<meta property="og:site_name" content="Gerrard McArthur - Actor-Director">
<meta property="og:title" content="Gerrard McArthur - Actor-Director">
<meta property="og:description" content="Professional Profile of actor and director Gerrard McArthur">
<meta property="og:url" content="http://gerrardmcarthur.weebly.com/">
<meta name="description" content="Professional Profile of actor and director Gerrard McArthur">
<meta name="keywords" content="Howard Barker, Gerrard McArthur, Theatre, Actor, Director, Shakespeare, London,">
<meta charset="utf-8">
<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">
<!-- IE 8 --><script type="text/javascript">
		 document.createElement('header');
		 document.createElement('nav');
		 document.createElement('section');
		 document.createElement('footer');
		</script><link 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><meta property="og:image" content="http://gerrardmcarthur.weebly.com/uploads/3/0/9/9/30995353/9633734.jpg?770">
<link id="wsite-base-style" rel="stylesheet" type="text/css" href="//cdn2.editmysite.com/css/sites.css?buildTime=1466186010">
<link rel="stylesheet" type="text/css" href="//cdn1.editmysite.com/editor/libraries/fancybox/fancybox.css?1466186010">
<link rel="stylesheet" type="text/css" href="/files/main_style.css?1466260947" title="wsite-theme-css">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,700,400italic,700italic&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css">

URL Scrape when OG:image meta is placed in Weebly's SITE Header Field

<!DOCTYPE html>
<html><body><htmllang><meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Keri Fuge - Soprano - Home</title>
<meta property="og:site_name" content="Keri Fuge - Soprano">
<meta property="og:title" content="Keri Fuge - Soprano">
<meta property="og:description" content="Official website of operatic countertenor Russell Harcourt. Based in London, Australian countertenor Russell Harcourt performs in Australia, New Zealand, the United Kingdom and Europe in works by Handel, Monteverdi, Vivaldi and more">
<meta property="og:url" content="http://kerifuge.weebly.com/">
<meta name="description" content="Official website of operatic countertenor Russell Harcourt. Based in London, Australian countertenor Russell Harcourt performs in Australia, New Zealand, the United Kingdom and Europe in works by Handel, Monteverdi, Vivaldi and more">
<meta name="keywords" content="opera, countertenor, handel, vivaldi, monteverdi, australia, baroque">
<meta charset="utf-8">
<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">
<!-- IE 8 --><script type="text/javascript">
		 document.createElement('header');
		 document.createElement('nav');
		 document.createElement('section');
		 document.createElement('footer');
		</script><link 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><!-- Insert Script Part 1 Here --><!-- Swiper Script Code --><link rel="stylesheet" href="/files/theme/idangerous.swiper.css">
<meta property="og:image" content="http://kerifuge.weebly.com/uploads/3/0/9/9/30995353/4646924_orig.jpg">

URL Scrape when OG:image meta is manually written into the header in the page HTML file in Weebly. 

<!DOCTYPE html>
<html><body><htmllang><meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>James Wright - Actor - Home</title>
<meta property="og:site_name" content="James Wright - Actor">
<meta property="og:title" content="James Wright - Actor">
<meta property="og:description" content="Official website of Australian actor James William Wright">
<meta property="og:url" content="http://www.jameswilliamwright.net/">
<meta name="description" content="Official website of Australian actor James William Wright">
<meta name="keywords" content="actor, theatre, film, television">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<meta property="og:image" content="http://www.jameswilliamwright.net/uploads/3/0/9/9/30995353/9813722_orig.jpg">
<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">
<!-- IE 8 --><script type="text/javascript">
		 document.createElement('header');
		 document.createElement('nav');
		 document.createElement('section');
		 document.createElement('footer');

[Adam7]

Hey @ChrisHurrell!

Thanks for posting your question as well as your work-arounds.  As much as we'd like Facebook to function in different ways that would work how you or I would like, it's not likely they'd make changes just for a single web host.

If there's something you want us to add on our end that will simplify things so you don't need to add additional meta tags, I'd recommend posting that on our Vote on Features board:

https://community.weebly.com/t5/Vote-on-Features/idb-p/IdeaExchange

Other Community members can vote on your post and show that they'd like us to add it, which helps our team know which features are most requested.  I'd also recommend searching because there might be relevant posts up there regarding sharing to Facebook.

[ChrisHurrell]

Adam thanks for your reply, but I'm sorry this is not satisfactory. I specifically asked that someone read my post carefully and respond in detail. Your comment:

"Thanks for posting your question as well as your work-arounds."

demonstrates that you have not done what I asked. As I cearly stated, none of the proposed workarounds that i have taken the trouble to gather together here so that your engineers can properly address this fault, are working! 

And as with other users experience, you, on behalf of weebly, have given me the 'its facebooks problem' fob-off. This is also something that I pre-empted in my post. Its not on.  And frankly, telling me that oh facebook won't "make changes just for a single web host", as if weebly is some little backyard web-hosting operation is also a fob-off. 

If Weebly truly believes its has done all it possibly can to ensure that weebly site meta data is presented in such a way that major web-crawlers like facebook's should be able to read it, then it needs to be communicating to facebook that there is a technical problem with their platform. 

In the meantime, weebly needs to provide to its users a work around that actually works!

Or are you seriously telling me that Weebly prefers for sites created on its platform to look like amateur rubbish every time they are promoted on facebook? 

As should be very very clear from my intial post, I have gone to a great deal of trouble and time to lay out the existing problem in as much detail as possible. A fob-off and an instruction to go through the whole process again in a different forum is woefully poor customer service. 

This is a fault. it needs to be fixed. its not a cute idea that I can post to the community forum and wait to see if it gets enough votes for you guys to decide that it might be a fun optional extra. Please don't give me another polite fob-off, but escalate this issue to teh appropriate department. 

Chris

[sicksentz]

Having the same problem. I'll definitly be moving on to a different host soon if this isn't fixed. Considering a portion of my salary comes via social media marketing and content, I should have a blog that includes images when shared to facebook. This looks amateur and I avoid sharing blog posts to Facebook completely because of it. Please fix this, it's a core issue.

[MsRella]

I'm glad that I've read this article. I'm in the process of building several sites on Weebly, I've published one and will be working on the others soon. I haven't gotten to the building the blog yet. However, if the images related to the blog are not going to show up on Facebook, then I might as well stop here and jump ship.

If it's a Facebook problem, then how are the photos of other non-Weebly blogs showing up on Facebook?

[Adam7]

Hey guys - thanks for commenting on this thread.  I want to take this opportunity to clarify things regarding Facebook sharing.

When you share a blog post or page to Facebook, whether with our built-in sharing tools or directly on Facebook, Facebook scapes your page for any images that meet the criteria for sharing.  What criteria is that? At least 200 pixels by 200 pixels - anything smaller is ignored by Facebook.

If you don't have any images in your post, then there's nothing for Facebook to use and you have a text-only share whether you use our tools or just go right to Facebook and share it yourself.

There are things you can do to mitigate this.  Some people will get the URL of the site logo or some other image, and use that with an open graph tag in the Header Code field of their blog page or their whole site.  This will make it so that image is always available for use with a share whether you have other images on your blog post or not.  And like everything I've mentioned above, this is true of a site whether you build at Weebly or not; it's all part of dealing with how Facebook shares work.

I suggested a post on the Vote on Features board because adding a feature to the Settings tab to specify a default sharing image would be simpler than adding a META tag.  If you agree I definitely recommend posting that (and thank you in advance ).

Thanks for reading my lengthy post guys, and if you want more in-depth info take a look at this post I made recently:

https://community.weebly.com/t5/Site-Editor/Weebly-Tip-of-the-Week-Blog-Posts-Images-and-Sharing-to-...

[ChrisHurrell]

Hi, thanks for this response

It does feel like we're trapped in a maze though.  

Adam writes: "Some people will get the URL of the site logo or some other image, and use that with an open graph tag in the Header Code field of their blog page or their whole site." 

and also

"adding a feature to the Settings tab to specify a default sharing image would be simpler than adding a META tag"

Sure, it would be easier, but (and perhaps this is my fault for structuring a long initial post in too linear a manner) but there are actually TWO separate issues here:

Yes, A default sharing image field in Weebly settings would solve my problem (though not the problems other responders are having with blog post images), and, ok, i will now post again in that forum. 

But the second issue, is that the work around of putting the meta tag in the header field is not working. The purpose of this post, and of my attempts to resolve this issue through Weebly Help Center live chat, is to find out how on earth one persuades the Weebly development team that there is  a technical issue here that, as Sicksentz comments below, relates to core functionality, that warrants investigation. 

I am putting the meta tag in the header field, and getting an error message from facebook's debugger saying that there is a meta tag in the body not the header. I quote:

"Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree. Please fix this in order for the tags to be usable."

Now the trade off with Weebly is that clients get the easy-to-use interfacece, but we don't get total control of the html driving the sites we create. Consequently I can't fix this myself.

I have now posted in the new idea forum and linked back to this post. https://community.weebly.com/t5/Vote-on-Features/Default-site-Thumbnails-on-Facebook-Sharing/idi-p/1...

Thanks

Chris

[kriskrost]

Hi Chris,

Using HTML OG Meta tags in the header will work. Make sure you're adding your tag to "Settings" > "SEO" > "Header Code". Also make sure you save with the green "Save" button on the bottom right, then after hit the orange "Publish" button on the top right. 

Once you do this, you'll need to go to the Facebook Debugger and rescan your site. The debugger will then pick up the new HTML OG tags you've added. https://developers.facebook.com/tools/debug/

[keyadigital]

This solution is only for the site level not the page level. Do you have a page level solution so that each page can have a separate og image?

[stem]

This is not working for me either and it is now February of 2020!

<meta property="fb:app_id" content=“12345" /><meta property="og:type" content="website" /><meta property="og:image” content=“https://www.mywebsite.com/uploads/2/0/1/1/2011519/photo-1-of-1_1.jpg" />

Warnings That Should Be Fixed

• Inferred Property

  The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
• Missing Properties

  The following required properties are missing: og:image
• Invalid App ID

  The specified 'fb:app:id' property is not a valid app ID.

[bhavana]

It is August 2020, and I'm also having problems with this. 

This is the code I have in my sitewide header: <meta property="og:image" content="http://www.bhavanaflowyoga.com/fbpreview.html" />

Facebook is saying: 

• Invalid Image Content Type

  Provided og:image URL, http://www.bhavanaflowyoga.com/fbpreview.html could not be processed as an image because it has an invalid content type.
• Invalid Image Content Type

  Provided og:image URL, http://www.bhavanaflowyoga.com/fbpreview.html could not be processed as an image because it has an invalid content type.
• Missing Properties

  The following required properties are missing: og:type, fb:app_id

[walteradamson]

Hi, thanks for laboring on this for so long! I found a post which said that when they used http instead of https it worked.

I tried that and it appears to work.

<!-- OG CODE -->
<meta property="og:image" content="http://www.walteradamson.com/uploads/1/2/2/7/122717058/background-images/126370761.jpg" />
<meta property="og:url" content="http://www.walteradamson.com/index.html" />
<!-- END OF OG CODE -->

Then I used heymeta.com and inserted this, which seems to work as well.

Walter

<!-- HTML Meta Tags -->
<title>Walter Adamson > Helping You Make the Choice to Live Longer Better</title>
<meta name="description" content="70+ T2D Cancer survivor -  I'll motivate you to include exercise in your life because you want to, so that you can thrive.">

<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="Walter Adamson > Helping You Make the Choice to Live Longer Better">
<meta itemprop="description" content="70+ T2D Cancer survivor -  I'll motivate you to include exercise in your life because you want to, so that you can thrive.">
<meta itemprop="image" content="http://www.walteradamson.com/uploads/1/2/2/7/122717058/background-images/126370761.jpg">

<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://www.walteradamson.com">
<meta property="og:type" content="website">
<meta property="og:title" content="Walter Adamson > Helping You Make the Choice to Live Longer Better">
<meta property="og:description" content="70+ T2D Cancer survivor -  I'll motivate you to include exercise in your life because you want to, so that you can thrive.">
<meta property="og:image" content="http://www.walteradamson.com/uploads/1/2/2/7/122717058/background-images/126370761.jpg">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Walter Adamson > Helping You Make the Choice to Live Longer Better">
<meta name="twitter:description" content="70+ T2D Cancer survivor -  I'll motivate you to include exercise in your life because you want to, so that you can thrive.">
<meta name="twitter:image" content="http://www.walteradamson.com/uploads/1/2/2/7/122717058/background-images/126370761.jpg">

<!-- Meta Tags Generated via http://heymeta.com -->

Hope that helps. Unfortunately, Weebly aren’t known for giving any serious thought to SEO or the construction of their pages, as any SEO checker will quickly show you.

[avila2308]

This did not work for me. I added a thumbnail size and a 400x400 and then a 200x200 and still nothing. I cant believe this is still an issue with weebly but not other blogs?

[Adam7]

If you already shared the URL before adding the image it might be cached. What is the URL that you shared on Facebook, @avila2308?

[katelynmphoto]

I 100 % agree with the creator of this thread, it's conmpletely ridiculous that this hasn't been fixed by Weebly yet.

In an effort to make it display what I wanted in the thumbnail I got rid of text that was previously on my homepage and changed my site name. Now even though I have published it multiple times and refreshed more times than I can count it's displaying in the thumbnail what used to be on my homepage even though that text has been deleted! I've checked thar it saved my site name as well and still it's displaying my old site name in the thumbnail.

Will be seeking private web design and hosting because my patience with Weebly is shot.

Dissatisfied 

[Bernadette3]

Hi there. Sorry for the frustration. I checked your url in the Facebook Debugger tool and after re-scraping the text has updated. Can you confirm this for me? 

[jdem]

I use facebook debugger and it scrapes your page and finds an image for your blog post when posting the link. That's been the way I've done it.

[Francis2]

Hats off to you for doing all this work and handing them this issue that affects their customers on a silver platter. I got the same treatment when I explained how their contact form messages were being delayed or killed when sending to multiple gmail accounts. They simply said this is on Gmail, not us. Dude, it's Gmail... yes if people are losing business for messages sent to something as universal as GMAIL accounts, that are healthy and active, it's your problem, regardless of where the technical hold ups are. 

I'm trying to get my logo image to come up on Facebook shares and as you pointed out, it doesn't work. Dude clearly didn't read your original post carefully. I'm thinking of moving to Wix for my marketing business. Never tried it, but I don't know if it can be more frustrating than this. Just wanted to give you a pat on the back.

[NickyLimes]

Hello @Francis and @ChrisHurrell

Does the suggestion that @ThemeTricks offered work? Adding OG meta tag in Settings>Seo>Header code with the direct URL of your logo image. If it does I would like to use it to help others until a solution for automation exists.

[ChrisHurrell]

Hi @NickyLimes and @ThemeTricks

and thanks to everyone who's chipped in on this thread.

Just to clarify

a meta tag line of code in the form:

<meta property="og:image" content="http://www.jameswilliamwright.net/uploads/3/0/9/9/30995353/9813722_orig.jpg" />

placed in the SEO Header code field in Weebly and saved and published correctly as suggested above, absolutely does not resolve this issue for any of my sites. And yes I do verify the failure by re-scraping in the facebook debugger. I am aware that there are some users online who report success with this approach, and its absolutely maddening that it doesn't work reliably because it absolutely logically should, but it doesn't work for me, nor for many others who have reported in various online forums. Facebook advises that the line of code needs to be placed in the site header. the SEO header code field is the only avenue Weebly offers its users for placing code in the header, and yet as the debugger scraping shows, placing the code in that field is not placing it in the site header - at least not in a way that facebook, for one, understands.

@NickyLimes part of the intense frustration this issue causes is that when people like me who a) have demonstrated that they know at least a little bit what they talking about and b) have gone to a lot of time and trouble to test the issue and lay out the data, we really expect someone who works for Weebly to say 'we have reported this fault to our developer team for investigation' but instead, your colleagues on the 'help' desk refuse POINT BLANK to escalate this issue. And evidently my direct pleas in both this thread and its sister thread in the new feature ideas forum (also written by me) https://community.weebly.com/t5/Vote-on-Features/Default-site-Thumbnails-on-Facebook-Sharing/idi-p/1... for someone from the Weebly developer team to please please read these threads and respond, have been completely ignored. I am willing to believe that the party most at fault in this issue is Facebook, because as my other post shows, placing the meta tag in the header field DOES solve the problem for Google Plus, but given that its the WEEBLY PRODUCT that the facebook scraper's shortcomings are making look like amateur crap, wouldn't the weebly developer team like to investigate, confirm that there really truly is nothing more they can do, and then pick up the phone to the facebook developer team and say 'Hey Facebook! your URL scraper is crap! fix it!' ?


Meanwhile, I guess I just continue to howl at the wind, and take some small consolation from the fact that a growing number of users on this forum have let me know that they agree with me.

Chris

[kriskrost]

Hi @ChrisHurrell @NickyLimes

The reason it's not working for you is becuase you have modified your site to make it a custom theme. Something you did in the modification changed your theme so the header area is messed up. The code that should be in the header area is not showing up there. If you were to switch from your custom theme back to a standard theme, and then try the HTML OG tags, they will work for you then.

You can switch themes from "Theme" > "Change Theme" and choose any standard theme that's not under "custom theme"

If you need further help, let me know you can add me as an editor and I can fix it for you.