I have a page with a fb share widget and sharing via this one the image associated with the link correctly gets read from my <meta property="og:image" ....
However, when a user manually pastes a link to the page on facebook, the associated thumbnail is not taken from the meta tag, but there are images from the page available for selection.
Shouldn't the meta tag overwrite that behaviour and only my selected og:image be available? How can I make my specified image the default also for manual link sharing?
When debugging via http://developers.facebook.com/tools/debug there is a message:
Open Graph Warnings That Should Be Fixed
og:image should be larger: Provided og:image is not big enough. Please use an image that's at least 200x200 and preferably 1500x1500. (Maximum image size is 5MB.) Image 'htt...jpg' will be used instead.
It turns out my small icon image was good for the sharing on page, but the manual sharing of a link on facebook requires a big enough image to use that defined image instead of any image fetched from the page.
Related
We use the Facebook Share option on a website with newsarticles. The website is build with PHP and uses Smarty. We generate a unique URL (stripped like /news/headline-of-the-article) and have the meta properties defined.
When the owner shares a links with an image that was previously uploaded, everything is fine. When he uploads a news image, inserts it into the article and shares, Facebook takes another pictures, the pictures that it finds first on the source-code. Altho, in the preview-box just before you publish, it shows the correct image. Once placed, it's the wrong one.
The Facebook Debug Tool shows as og:image tag > og:image domain/UserFiles/images/news/standard_14.jpg
But when I look at the RAW tags og:image shows > domain/UserFiles/images/news/bosuil_1.jpg
So the og:image tag does it job and generates the correct URL, but facebook still posts the wrong image. When I force Facebook (manually) to scrape again, it shows everything good and also shares it correct.
I don't get it...
I had the same problem and found these best practices on facebook's developer wiki: https://developers.facebook.com/docs/sharing/best-practices#precaching
Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image dimensions to the crawler so that it can
render the image immediately without having to asynchronously download
and process it.
After specifying the width and height we have not had a problem with facebook crawling the right picture immediately.
I just recently launched a game on steam, and when I share a link in facebook the preview image doesn't appear.
I ran the object debugger.
From the results, in the og:image field, I can see the image correctly, however in the preview itself the image is broken.
Any ideas?
Edit: Since this is a steam page, my ability to influence it is limited. I can only change some images, but I cannot add meta tags.
I did find, however, in this post, that a <link rel="image_src" href="/myimage.jpg"/> tag should also be identifiable by facebook as a preview image. For some reason in my page facebook either ignores this or treats the image as invalid (although it is larger than 200x200)
og:image could not be downloaded or is too small
og:image was not defined, could not be downloaded or was not big enough.
Please define a chosen image using the og:image metatag, and use an image
that's at least 200x200px and is accessible from Facebook.
'http://store.akamai.steamstatic.com/public/images/game/game_highlight_image_spacer.gif' will be used instead.
Consult http://developers.facebook.com/docs/sharing/webmasters/crawler for more troubleshooting tips.
So we do have the reason why it is blank (spacer.gif is blank)
This is the same for other pages as well...
http://cdn.akamai.steamstatic.com/steam/apps/455980/header.jpg?t=1459222551 <-- Can be found in the header...
So lets have a closer look at the image itself...
The images are creatd ondemand (so it seems) and you (a.jpg) is the same as Cities Skylines (b.jpg)
So no idea at all... Maybe a problem with Steam's CDN (FB is unable to find the image. Did you update the image recently?)
Sorry not to be able to help. The image itself cannot be faulty IMHO as stream is processing the image every time...
Cannot say more :/
When content is shared for the first time, the Facebook crawler will scrape and cache the metadata from the URL shared. The crawler has to see an image at least once before it can be rendered. This means that the first person who shares a piece of content won't see a rendered image:
Pre-cache the image with the URL Debugger
Run the URL through the URL debugger to pre-fetch metadata for the page. You should also do this if you update the image for a piece of content.
Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.
Source: https://developers.facebook.com/docs/sharing/best-practices#images
I have no clue why the image is not featuring ,
Here is a link, but the same is happening with other wordpress pages..
http://www.alcireland.ie/find-a-consultant/
<meta content="http://www.alcireland.ie/wp-content/uploads/2014/06/home-map.jpg" property="og:image">
http://www.alcireland.ie/external-links/
<meta content="http://www.alcireland.ie/wp-content/uploads/2014/07/logo.png" property="og:image">
Are there certain criteria to be met that Im not meeting? I dont necessarily want the image to actually be on the page, I just want it to be included when the page is shared.
Two things: First the image is too small. Second, Facebook caches the pages so it will need scraping again before any changes are reflected on facebook.
I forced a new scrape using their tool which you should use for checking OG properties:
https://developers.facebook.com/tools/debug/
Before I forced a rescrape it was reporting that it couldn't detect the og:image property, now it is reporting that the image declared is too small:
"Provided og:image could not be downloaded or is not big enough. Please use an image that's at least 200x200px and is accessible from Facebook. Image 'http://www.alcireland.ie/wp-content/themes/surgetheme/images/logo.png' will be used instead."
One of the problems I face while sharing a link of my blogger post on facebook or linkedin is that the thumbnail shared is my picture (which is the only picture on the page). I would prefer no thumbnail being shared.I tried using
<meta property="og:image" content=""
I.e the content is kept as blank, yet it shows a thumbnail. How do i set it to no picture?
You can't. Facebook/Linkedin will crawl your site and decide on it's own what images to offer the user. The og:image meta tag is just a suggestion and not a directive.
The only way to share without image is for the user to remove it.
Update: there is another way. You could detect (on the server) FB/LinkedIns crawler and serve them HTML that does not contain any images. That way they wouldn't have anything to display (just text). I don't know if that's possible on blogger. And if you go down this path, check FB/LinkedIn's TOS if this is allowed (doing this with google, for instance, will get you banned).
When I wanna add a link on facebook wall, Facebook make search for photos under pasted link. But it gets only first 6 photos.
I'm curiouss if there is some class, id or rel atributte important for facebook which will indicate exactly what image we want to show?
You can define the og:image meta property to assign images to be used on liked and shared items on Facebook, like this:
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
It's described as:
og:image - An image URL which should
represent your object within the
graph. The image must be at least 50px
by 50px and have a maximum aspect
ratio of 3:1. We support PNG, JPEG and
GIF formats. You may include multiple
og:image tags to associate multiple
images with your page.
For more information have a look at the documentation here. You can use the Facebook URL Linter to inspect where it is fetching the different meta data, such as the images.