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]

Hi, 

A belated adendum to this thread:

@ThemeTricks a further observation that seems to tie in with what you were investigating. 

I've just been playing around with video backgrounds today, and it appears to confirm something about the way in which the template i'm using may be conflicting with the weebly platform header area. 

I bought this template aages ago because one of the key features I was looking for was different backgrounds for each page. 

It looks to me like whatever that designer did in order to be able to deliver different backgrounds to different pages of a weebly site, conflicts with Weebly's header. My reason for thinking this is as follows:

Today I've placed this code:

<div id="cp_widget_0f0b4ee2-bfae-450d-9b36-3dc376204056">...</div><script type="text/javascript">
var cpo = []; cpo["_object"] ="cp_widget_0f0b4ee2-bfae-450d-9b36-3dc376204056"; cpo["_fid"] = "AwJAiotkcQk1";
var _cpmp = _cpmp || []; _cpmp.push(cpo);
(function() { var cp = document.createElement("script"); cp.type = "text/javascript";
cp.async = true; cp.src="//www.cincopa.com/media-platform/runtime/libasync.js";
var c = document.getElementsByTagName("script")[0];
c.parentNode.insertBefore(cp, c); })(); </script><noscript>Powered by Cincopa <a href='http://www.cincopa.com/media-platform/podcast-player'>Podcast Hosting</a> for Business solution.<span>New Gallery 2016/7/23</span><span>bitrate</span><span> 290 kb/s</span><span>height</span><span> 360</span><span>duration</span><span> 00:00:27.00</span><span>fps</span><span> 24</span><span>width</span><span> 640</span><span>originaldate</span><span> 2016-06-21 11:35:52</span></noscript>

into the header field for one of hidden pages for a site that I built that does not use the template in question, and it delivers this result http://www.tanarts.com/hiddenvideo.html#

which is pretty cool

but when i try to paste the same code into the same page header field for the site under discussion in this thread, it doesnt' display the video background, it continues to display my manually set background image. Now even if i use the background settings to NOT save the image to that particular page, all it does is revert to the default bacground image originally provided with the template. Make sense? I'm not technical enough to really be able to explain it further, but it suggests to me that something in the template is causing the contents of the header field NOT to be displayed/loaded, and i wonder whether its having that effect on all header content, regardless of whether you add it at the settings page, or manually to the html doc, or as here, within the page/seo settings/header code. 

Going back to the template designer is not an option it was forever ago. In any case the fact that i am not the only one with this problem suggests to me that its not necessarily something that they did wrong. It suggests more to me that there is something systemic in the weebly platform that creates an imperfect interaction with third party templates such as the one used here. 

 it would be intersting to know whether using custom background images - irrespective of the particular template delivering that functionality is where the root of the problem lies. 

Cheers
Chris

[kriskrost]

Hey @ChrisHurrell,

Custom 3rd party themes are usually highly modified and can have issues with being compatible with Weebly or any other 3rd party plugins. This would be an issue with your theme, not the Weebly system. I have confirmed the issue you were having with the OG Image Meta tags was due to the custom theme, I have a custom 3rd party theme as well, and I was able to narrow the issues down to that theme. It seems some of the 3rd party theme provider's code has broken the header tags. This is something you would definately want to reach out to your 3rd party theme developer to have a look at. They may be able to see why it's not working. I'd also be willing to see if I see anything strange, what's the URL to the site? Also where did you buy the theme from? 

[ChrisHurrell]

Thanks for your reply @ThemeTricks

As I say the 3rd party developer is long gone unfortunately, at least i'm pretty sure. Their support responses slowed down after a while, then stopped altogether. I can't now remember who it was, I'd have to go through my records. The thing that is most irritating with all this though, is that this whole problem is not a problem on google plus. 

Take this site www.kerifuge.com - Try to post it on google plus and there's no problems. As first preference, Google Plus detects the image i have created as a custom thumbnail, hidden on an unused page of the site and then pointed to in the Header Code Field. No problem. The only problem is that nobody uses Google Plus. I just wish Facebook would do the same when you post it there! 

And if its true that the third party code has broken weebly's header tags - then why I wonder does it work okay on Google Plus? 

C

[kriskrost]

@ChrisHurrell What's the URL to your site? I can take a look and show you where the broken code is at. Each social media platform works differently, Google plus may be just grabbing an image off your page, or it may be smart enough to scan all the code not just the head area. The problem with my 3rd party theme was the head tags were messed up.

[kriskrost]

@ChrisHurrell Oh sorry just noticed you posted the URL. So yes the problem is with this theme, that your head information isn't going into the <head></head> tags. See this screenshot I have posted from your code. The area that has a red box around it, should be inside the <head></head> tags. 

[ChrisHurrell]

Yes I see, 

And i can confirm that even manually pasting the OG tag in between the header tags of the .html file that generates the template for that page does not solve the problem.  

I assume therefore that Google Plus's crawler is able to detect the OG tag within the body, whereas facebook's becomes befuddled when it can't find it beween the header tags. 

Incidentally, the html file actually has quite a bit of code betwen the header tags - see screenshot. I wish i knew enough to understand why none of that code is being read by the browser, and why the site still functions fine despite this fact!

Thanks for your help. 

[kriskrost]

I would need to login to your account as an editor and take a look at your HTML code to further diagnose the issue. You can add me as a site editor to your site, I'll DM you my email. 

[kriskrost]

Hi @ChrisHurrell

I took a look at your test site, and I figured out the issue. If you go into your custom code editor, then edit index.html and change <html lang="en"> to just <html> it will fix the problem. If you want to declare a language, you should do this with Meta Tags in the head area instead like this. <meta name="language" content="english"> 

I have fixed the index.html file in your code on your test site, used the facebook debugger to rescan your page (https://developers.facebook.com/tools/debug), and it shared perfectly for me, also now I see the code showing under <head></head> 

So you'll want to go though each Header type in your code editor, and replace <html lang="en"> with just <html>. 

[ChrisHurrell]

wow thats great! how weird. Is there any particular reason why the language should be specified? 

Thanks!

[ChrisHurrell]

Halleluja!

Thanks to @ThemeTricks for taking a looking and finding what it was in my template that was causing Weebly's headers tags to break, resulting in this problem. 

To confirm and expand on his solution above for anyone else looking into this problem. The HTML files for the various page layouts in the custom theme I use, begin like this:

<!DOCTYPE html>
<html lang="en">
<head>

followed by the header code. Evidently this is no good. By changing the opening lines to:

<!DOCTYPE html>
<html>
<head>

All of the variations on placing an OG image meta tag in the page header become workable. 

i.e. using this line of code: <meta property="og:image" content="http://kerifuge.weebly.com/uploads/3/0/9/9/30995353/4646924_orig.jpg" />

You can place it

a) in settings/seo/header code 

or

b) in pages/(desired page)/seo settings/header code

or

c) you can paste it directly into the html file

I have re-tested all this approaches and they are now successful. N.B. It does appear that if you want the site thumbnail to be universal (ie to represent the site when shared, irrespective of which page is being shared) you will need to adopt strategies b or c for each and every page. In my testing so far, providing the code in settings/seo/header code - does not attribute it to all pages - only the homepage. 

I guess the nature of the disruption to header code causing this error might be different for other users, but I suggest that whatever the case, you investigate the viability of reverting to a clean 

<html>
<head>

sequence for all your html files as a first step. As @ThemeTricks points out, I am going to have to use a different technique to specify site language if i want to retain that, but for the moment i have no idea why it would have been necessary in the first place. 

Thanks for all contributions to this thread and especially @ThemeTricks my hero of the hour. 

Chris

[kriskrost]

Hi @ChrisHurrell,

No problem Glad we figured out what the issue is. I will also contact my 3rd party theme developer with this issue as it appears his themes are doing the same thing. 

[UniversidadUK]

@ThemeTricks- are you able to help solve this issue on my website please? 

[ChrisHurrell]

Oh and to any one who is trying to create their own custom thumbnails for facebook consumption - make them 16:9 aspect ratio. Undoubtedly Facebook's scraper is pretty clumsy compared to Google plus's - and one of its shortcomings is it doesn't know how to handle a regularly shaped image!

[Adam7]

The reason I mention Facebook is because they and anything else that will be looking at the og:url tag will simply follow the redirect (we forward anything from http to https). The og:image tag is created from images you added to your site. It looks like the image on your homepage isn't large enough to be used for sharing (on Facebook, at least), so you'd need to add a larger image and re-publish.

https://developers.facebook.com/tools/debug/sharing/?q=danexchauffeurslondon.co.uk

[Sevilon]

Can someone please help me?  I am really new at creating a webpage, and I keep trying the things I am reading on here but they are not working.  Either I am doing them wrong, or they don't work for what I need.

I just want a thumbnail to show up when I post to Facebook.

When I go to a facebook debugger, and enter my page url, I get the following: 

• Inferred Property

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

  The 'fb:app_id' property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.
• Inferred Property

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

  Any help, please?

[Queso]

Hey Sevilon! The information there would be referring to Facebook's markup, which is code that would tell Facebook what images and content to display when a link to the site is placed on Facebook. We couldn't advise you on that directly, but you can find more under Facebook's developer help section.

[Robin12]

Hello @ChrisHurrell and everyone else 🙂

Google+ vs Facebook
Google+ and Facebook are definitely not one in the same, specifically when it comes to scanning for content.

Google+ and Facebook each use different methods for determining what content to use or not to use.. Google+ scans for everything and anything. The minimum image size released by Google+ is 120x120 pixels. 

You can learn a lot more about how Google+ functions here:
https://developers.google.com/+/web/+1button/#plus-snippet
and create your own custom snippets here:
https://developers.google.com/+/web/snippet/

Facebook, seeks out OG Images and size variations. They have a minimum of 200x200 pixels. They play by their own rules and getting them to change it, will not happen. No matter who is doing the asking. Facebook treats images in a similar fashion that search engines do H1, H2 tags; larger images have a higher value. Facebook is much stricter than Google+ and if their scanners do not see any images that meet the minimum size on the page shared, then a picture isn't displayed. Always ee sure that your photos are larger than the minimum required.

Muliple images on a single page and it wont share the right one?

If you have multiple images on a single page, and you want a particular image to appear on Facebook, Then that image must  be the largest image on the page. And by largest, I am referring to the original pre-upload dimensions (height x width), not the file size. Large photos will resize to fit the area after being uploaded. In some cases, they will all appear to be the same size. Especiallly, if you are using a gallery or slideshow element.

Do you want the same photo shared every time? To make life easier, perhaps?

If you have a single image, that you want to be shared every time on Facebook; you can use simple HTML to make that happen. Basically, the HTML code places a hidden image in the header of your website across all pages. Making it the first thing that it sees.

To get started: If the image is already on the site, go to the picture on the live version. Right-click on the photo and copy the link location, then skip the next paragraph.

If you have a custom theme and the image isn't  already on the site, upload it using the HTML/CSS editor, into "Assets/Images". Go to the image after uploading in the editor and right click it to copy the link location. Skip the next paragraph.

If you do not want a custom theme, you can still upload the photo by highlighting a single letter in a text article, click the link icon and choose the file upload option. Upload the photo and return to the letter that you linked. Copy the link location and finally, remove the link, via the small popout menu. The image will remain on the website's file list, even after removing the link. Note! Deleting the element that is holding the article you used to upload the photo, will remove the picture too. Please keep that in mind.

After you have your photo uploaded or the link to the photo, go to the Settings >SEO tab. And paste the following code into the header field. Change the ENTER THE FULL URL TO THE IMAGE HERE are to your photo's link. Be careful not to delete the quotation marks. They must be there or the code will not work.

<img src="ENTER THE FULL URL TO THE IMAGE HERE" style="display:none">

Save the changes and publish. Facebook will then pick up the hidden image first. Please understand that placing the hidden image in the header under the 'Settings>SEO>Header' area. Will span the image across all pages in your site. That includes current and future pages.

If you place an image on a secondary page or blog entry in the site that is much larger, it is possible that Facebook will choose that image first. Due to the dimensions I mentioned earlier. Typically, this doesn't happen, but it has in the past. If it does, delete the larger image element, resize and rename the file, upload again and republish the entire site.. Renaming the file is done because Facebook caches their photo URLs asynchronously. Facebook's scanners will see it as an entirely different picture for two reasons.

1.) It is a different size 

2.) It has a different URL, due to the file name change.

If Facebook doesn't behave and you still see the old image after clearing your own browser's cache. You may use the Facebook debugging tool to remove the cache stored by Facebook here: https://developers.facebook.com/tools/debug

Enter the page's URL and click the fetch new scrape data button after the initial debug to clear the cache. If the preview doesn't update, you can press it a couple more times, till it does. If it still fails, republish the entire site again, not just the blog entry (if it was a blog entry) and try the debugger once more.
Note: Pressing fetch new scrape data too many times can get your page blocked for a few hours. Facebook sees it as a potential security threat.
If that happens, give it a few hours and reach out to us for suggestions on getting the right photo to appear.

 How to choose the right size photo?

The following third party website by Louis Meyers,  is full of invaluable information and is a great asset to have when sharing to social media. Including, Twitter, Linkedin, Facebook, Google+, etc.

http://louisem.com/3367/facebook-cheat-sheet-sizes-dimensions

 Buffer is also a great resource for social media information, you don't want to miss out on.

https://blog.bufferapp.com/ideal-image-sizes-social-media-posts#google

Be sure to sign up for their newsletters. It is well worth it. 🙂

Buffer.com can be used to create and schedule social media posts across a number of networks. It is a handy tool.

[HelenB11]

Wonderful. It worked. Thank you very much.

[stem]

Tried your suggestion and got these error messages form the Facebook scrape.

So far I have spent about two hours reading through these threads and trying the offered solutions - to no avail.

I have the photo that I want sitting in a separate hidden page on the site - that is the url

the photo size is 55kb and 667 x 1000 pixels

I am using a standard weebly theme - nothing custom

• Image Unavailable

Provided og:image, https://www.sarahgagarin.com/uploads/2/0/1/1/2011519/3adf652d-01d0-497e-985e-3a4e634da07e_orig.jpeg could not be downloaded. This can happen due to several different reasons such as your server using unsupported content-encoding. The crawler accepts deflate and gzip content encodings.

• Missing Properties

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

I had a fb:app_id in there before and it said it was invalid.  I copied the id directly from the fb app so NO IDEA what the problem was with that.  Was hoping your solution since it didnt involve a fb:app_id - would solve that issue but apparently not!

THis is maddening - can anyone help with a solution for 2020??

[ChrisHurrell]

Thanks! Good to know about the 3pm thing 🙂

[NateMcClain_Art]

Hi all,

Here's a fix that I found worked for my Weebly site www.natemcclain.com

1.  Enter your page into Facebook debugger:

https://developers.facebook.com/tools/debug/

2.  If you don't see an image, then enter this line of code into Settings --> SEO --> Header Code

<meta property="og:type" content="website" />

3.  Go back to Facebook debugger and Rescan your page and the image should appear!