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."
Related
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 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.
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).
I'm having a bizarre problem with Facebook. When I share my content in MSIE 9, it successfully loads the thumbnail the first time I share a URL, but if I share it again, the thumbnail does not load (and never loads again). It just shows their animated "loading" image for several seconds, then that disappears and so do the thumbnail options.
You can see this yourself by clicking these Facebook share links in MSIE 9.
Example 1
Example 2
The same sharing functionality works fine in other browsers, and sharing other pages (e.g. Youtube videos) from the same MSIE 9 works fine every time.
Running Facebook's debugger does not resolve the problem, nor does it report any problems with the OpenGraph tags on my page. It even shows the thumbnails in question.
Looking at the Network tab of the Developer Tools in Facebook shows that the thumbnail image is being loaded each time I share the content.
Update
I've found that MSIE 9 will display the image under the following conditions:
- if I have the image in my cache already
- if the browser doesn't make a request to the server to the safe_image.php URL where the image comes from.
I've been messing around with this test page: http://www.facebook.com/sharer/sharer.php?u=http://c2a-v3-staging.s3.amazonaws.com/sparks%2Fspark_5079%2Findex_test.html
I cannot load the image if I refresh the page, as that makes a request to the server for safe_image.php. It doesn't matter whether the response is a 200 or a 304, the image does not display. However, if I then go to the location bar and press enter, that's a "navigate" event instead of a "refresh", no request is made for the image, and it is displayed (after being loaded from the cache).
I've tried serving the image from another domain, adding the og:image:secure_url tag, having Facebook crawl the HTML on a different domain, and this is the best I can do so far. Unfortunately, it's pretty useless because it means the first share from any user will never work right.
the sharer function of fb is no longer supported by facebook
you should use the feed dialog part of javascript api: https://developers.facebook.com/docs/reference/dialogs/feed/
also make sure your og meta tags contain the correct information http://ogp.me/ that could be your problem, the image size is a meta tag and the image should be 200x200 at least to optimize the scraping of the og meta data
you can also check what errors the meta data is getting from https://developers.facebook.com/tools/debug
Solved! Bizarrely enough, the issue was the dimensions of the image. If I reduce the dimensions of the og:image to fit in a 255x255 pixel box, the sharing works perfectly in MSIE9! Slightly larger sizes, like 262x262, do not work.
I had to run the URL through the Facebook debug tool to clear our their cache of it, of course.
I have another answer to your Question.
Reference: https://sparkengine.call2action.com/sparks/5186/live
The above webpage you want to share doesn't have the Facebook Opengraph protocol for the webpage's thumbnail to be used when sharing links with Facebook.
Here's what that metatag should look like:
<meta property="og:image" content="https://sparkengine.call2action.com/assets/c2a_logo_white-6396a6a536d065359780af683e66dd2a.png"/>
Read more about using this propery name HERE.
In Facebook's debugger tool, it could just be showing a thumbnail that's rendered in the debugger but not necessarily associated with the shared link process.
Although you do see a thumbnail image in the Network Tab, it's not necessarily the case that this will be used in the shared link process, hence the Facebook Opengraph protocol solves this problem, and allows further customization.
EDIT:
It appears at the moment of this writing, your webpage's template has changed. I now notice that the only previously seen og metatag names of:
og:video
og:video:height
og:video:width
now includes the og:image metatag, along with other newly added og metatag properties.
Current image file provided for og:image metatag:
https://c2a-v3.s3.amazonaws.com/sparks/spark_5186/media/thumbnails/spark_5186_09_28_2012_WgZN50Q.jpg
In Firefox web browser, but not in IE8, accessing the og:image directly in the browsers address bar produced this download box:
What also struck me odd about that download is that it's identified as a flash movie. To be sure, no issues were seen in IE8.
I then tested that image thumbnail link directly in Chromes web browser, and that caused an automatic download of that image, but it did not display in the browser, treating it like a downloaded mime type file.
This was true for both thumbnails in both your examples. Perhaps the server-side flash-to-thumbnail is saving the images with incorrect mime file-type information. Once downloaded and analyzed in IfranView, no errors were reported with the .jpg image, as IrfanView will check the file header to ensure it matches it's file-type extension automatically. I would look into how these thumbnails are created on the back-end.
DIGGING DEEPER:
I now understand that you'll have no control on how these thumbnails are made, since it's a service/process done by Amazon s3 Web Servers.
Digging deeper, I see that the main domain for this image files URL is for an XML File:
Reference: https://c2a-v3.s3.amazonaws.com
Google to the rescue. I typed in amazon thumbnail opens as file and this article mentioned to drop the protocol http://www. or https://www. when using a URL for og metatags.
The Facebook Debugger shows no errors when dropping the https:// too, even though it will be report as http:// protocol.
Try:
<meta content='sparkengine.call2action.com/sparks/5186/live' property='og:url'>
<meta content='c2a-v3.s3.amazonaws.com/sparks%2Fspark_5186%2Fmedia%2Fthumbnails%2Fspark_5186_09_28_2012_WgZN50Q.jpg' property='og:image'>
Note any Facebook user can force HTTPS requests via there settings, otherwise HTTP is assumed here.
Resulting Shared Link Generated:
http://www.facebook.com/sharer.php?u=http%3A%2F%2Fsparkengine.call2action.com%2Fsparks%2F5186%2Flive
I have a like button that works and that takes the image I have specified through the following parameter and attaches to a user liking the post on there feed.
<meta property="og:image" content="http://www.mysite.org/images/logo_50x50.gif" />
I basically want to use this image only for my users when they like an article, but when posting from a specific article "on my facebook site"..I want to be able to still select the images pulled up from that link. That doesn't happen. All I get right now is what I specified in my og:image parameter.
How would I achieve this?
You can't, you just told Facebook which image to use - it's supported to have multiple og:image tags but i'm not sure if which image to display is deterministic, random, or uses a picker like the system used when you don't specify an image