I'm developing a WordPress site and using the yoast seo plugin to generate an og image on a dynamic page. However, I think this is not related to that. The og image link appears perfectly, but if I click on the share button, no image is included unless I have already clicked on the share button before, or used the facebook developer tool to scrape the page first.
Is this a facebook issue, or a server issue perhaps?
You can avoid this by either getting your content “pre-scraped” by triggering a scrape via API as soon as you publish it, or by specifying the image dimensions via OG meta tags as well.
https://developers.facebook.com/docs/sharing/best-practices#precaching:
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
There are two ways to avoid this and have images render on the first Like or Share action:
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.
The second one is probably easier to implement; although you might have to modify your plugin that generates the OG meta tags (or choose a different one) if it doesn’t provide an option to output the image dimensions as well already.
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've seen this is a common issue here on stack but it seems that the answer is always dependent on the specific scenario. I'm looking for a fellow coder to give me that "AHA" moment.
Problem: Ads posted to my website do not show the og:image content when shared to facebook until the ad is shared at least 4 times
I have thought about/ tried the following things
Checking the image size to make sure it's not large (128kb) is the norm. I compress all uploads.
Giving the ad some time to marinate before sharing (perhaps the fb crawler takes a while to cache the page)
I tried using the debug crawler tool on fb to see if I could reproduce the problem and I indeed could.
I tried sharing the ad to my own page regardless of the missing image to see if the image showed up on my wall. It did not.
The image will not show up on ANY shares until someone has clicked on the share icon on an ad at least 4 times. It seems to me like it might be some latency issue on facebook's part.
What could cause og:image to only show on subsequent share clicks?
Edit
Here's a test ad.
https://www.jdmxchange.com/Classifieds/Details/6ae72690-14d8-4bab-b039-3a2d79923794
Reading https://developers.facebook.com/docs/sharing/best-practices I found this, which might be just what you're looking for:
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.
This means, if you set the width and height of your og:image with tags, the image will show straight away.
UPDATE
Actually debugging your URL shows like this URL is redirecting to another page, and then another. Which makes me suspect the Facebook crawler is not able to access the actual OG meta tags you're using.
As a random test, I would add OG metatags to that last URL and see if Facebook uses them. But the actual solution would be to use URLs which are actually reachable to FB (no credentials necessary).
I'm developing a WordPress site and using the yoast seo plugin to generate an og image on a dynamic page. However, I think this is not related to that. The og image link appears perfectly, but if I click on the share button, no image is included unless I have already clicked on the share button before, or used the facebook developer tool to scrape the page first.
Is this a facebook issue, or a server issue perhaps?
You can avoid this by either getting your content “pre-scraped” by triggering a scrape via API as soon as you publish it, or by specifying the image dimensions via OG meta tags as well.
https://developers.facebook.com/docs/sharing/best-practices#precaching:
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
There are two ways to avoid this and have images render on the first Like or Share action:
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.
The second one is probably easier to implement; although you might have to modify your plugin that generates the OG meta tags (or choose a different one) if it doesn’t provide an option to output the image dimensions as well already.
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