Scholar

Site Thumbnails on Facebook Sharing

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');

 

67 REPLIES
Community Manager

Re: Site Thumbnails on Facebook Sharing

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.

- Adam
Senior Community Specialist
Scholar

Re: Site Thumbnails on Facebook Sharing

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

 

 

Explorer

Re: Site Thumbnails on Facebook Sharing

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.

Explorer

Re: Site Thumbnails on Facebook Sharing

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?

Community Manager

Re: Site Thumbnails on Facebook Sharing

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 Smiley Happy ).

 

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

- Adam
Senior Community Specialist
Scholar

Re: Site Thumbnails on Facebook Sharing

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

 

 

Professor

Re: Site Thumbnails on Facebook Sharing

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/

Tourist

Re: Site Thumbnails on Facebook Sharing

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?

Community Manager

Re: Site Thumbnails on Facebook Sharing

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

- Adam
Senior Community Specialist