I write a blog but now nothing about programming.
Until some time ago, whenever I shared a new post on FB it chooses the first image of the post and that was fine (although I'd prefer to control which one to share every time). And it also got the title of the post correctly.
Now it always chooses the header picture of the blog and inserts the blog's title and description instead. Also, if I try to share the blog itself it chooses not the header picture but some old one from one given post...
FB debugger gives me this:
"og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image meta tag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'http://1.bp.blogspot.com/-vVHBaAssg-E/VdiSUEICydI/AAAAAAAAApw/Tsmhu4ZefTk/s1600/dpca%2Bblog%2Bcover%2Bv3.png' will be used instead. Consult (...) for more troubleshooting tips.
To find the object, these are the redirects we had to follow"
But the pictures in the post (or the blog's header) are in fact larger than 200x200.
I've added code as suggested in FB and bloggers tutorials but still no juice...
What's wrong?
I'm using AddThis as the sharing "platform".
Example post: http://doportocomamor.blogspot.pt/2016/02/brincar-com-o-fogo.html
thanks a lot in advance
Related
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 write movie reviews and share them on Facebook. At first the facebook thumbnails would show the pictures I wanted for my reviews, like the movie poster. However, now they only show my blogger profile picture every single time I post a link. It's very frustrating because I want to be taken seriously and I don't want my blogger profile picture showing up every time I post a link. I tried the facebook developers debugging tool and it did nothing. Does anyone have any other suggestions?
Thanks!
I don't know to what extent you can modify the HTML code of a Blogger blog, but you can use Open Graph tags to define the exact image you want Facebook to show, for example the tag you want is the following:
which must have a 100px x 100px size at least. Note that this tag goes into the Head section of the site.
It has taken some time, but I think I have worked out what is happening, thanks to Facebook Debugger. Put the post URL in and then scroll down to "OPen Graph Warnings That Should be Fixed". You may see something like this -
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.
Chances are your image is too small and that is why it is grabbing the profile image. I played around with my posts until I got it right, checking it through Debugger each time. It was a pain, but it worked.
As you may noticed, Facebook Timeline now follow shorts URL (e.g. bit.ly, goo. gl) on your timeline.
Indeed, in the previous version, when you shortened and posted an URL (for example a post or a video), Facebook let the short link intact, and even if a small illustration of your final content appeared just below, a click on the picture OR the link quite simply follow your shot URL.
But now, when you post a short URL, even if your link is preserved, the link on the small illustration is the original non-shortened link! So Facebook seems to follow short URLs.
Can this be avoided? (keeping the small illustration is useful to arouse people curiosity)
In some cases (in particular to audit links), it can be very interesting to keep a link shortened. And I'm pretty sure that people click on the picture rather than the link you post. (>90%)
One solution would be to come up with your own URL shortener. Imagine you want the URL:
http://the-url-you-want-to-hide.com
to be shortened to
http://ash-short-url.com/xxxx
You have to make http://ash-short-url.com/xxxx load up a page with the following content:
<script>window.location="http://the-url-you-want-to-hide.com"</script>
The Facebook crawler will not execute scripts, so it will not follow that.
Despite the meta tags (the first one I never used before, but it came up in the addthis forums);
And the debug tool getting the data in a correct manner:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.mondiales.nl%2F
The facebook sharer code does not use the image specified. No images show up at all, there is no thumbnail chooser.
Looking at the HTML of the facebook sharer page, the image is actually there! The thumbnail chooser has a display:none. And when posting the damn thing, no image shows up on the wall.
Stop using addthis and implement a like function using the just the Facebook API? But from what I read, Facebook does a request for the page to get it's data so the JS part should not be the issue, should it?
Did I overlook something?
There's a restriction on the width/height ratio of images shared, the ratio must be less than 3.0
Your image is too wide (211/66 = 3.19) - add some vertical whitespace and it'll share OK i think
For future reference this is mentioned on both the old Share Button docs and the Open Graph protocol docs (under 'og:image')
I've found that once I've posted something to my wall from the sharer or the app, if I try to repost it, it will remember the original image (or no image in your case).
It might be worth clearing the whole cache/cookies from your browser and see if that does the trick.
If not, you'll find that if you log in as another user of Facebook and they try to post it, it will pick up on the new image on their account and not yours.
I'm not exactly sure how Facebook caches the images.
I know this thread is old but this may help someone else with the same issue. FB caches shared urls along with the thumb images and descriptions. To update the cache, add a bogus parameter to your shared query string, like, "?v=1". This gets the latest og tags.
When we first put up a blog post, Facebook often (but not always) gets confused about what the page is. Specifically, if you try to use the Like button on the blog page OR if you try to share via the Share link on your profile, Facebook will see the root blog page rather than the actual post page.
For example, we recently posted:
http://thisorthat.com/blog/2010-song-of-the-year-round-1-results
If the user "likes" it, it returns the title for:
"http://thisorthat.com/blog"
When you run the post URL through the FB Linter, you can see the problem.
"http://developers.facebook.com/tools/linter?url=http://thisorthat.com/blog/2010-song-of-the-year-round-1-results"
In the Debug section it shows an extra og:title, og:url, description and og:image (the last 4 rows of the Debug section). This is the meta data from the root directory. What we cannot figure out is why. Why is Facebook seeing the correct meta data on the page and then also pulling the meta data from the root directory (and using that incorrectly to populate the data for the Like button and the Share URL tool)?
One other oddity. FB "figures it out" after a few days. Of course, by that time relatively few people are viewing the post.
UPDATE -- I want to thank Peter Bailey again for his answer, but we also discovered that there was another issue that we had to resolve before the Like button worked.
The issue was that we were displaying the Facebook the Like button on a post that was not yet published. The problem with this is that FB then can't resolve the URL and "guesses" as to the correct URL. In our case, it always guesses thisorthat.com/blog. Unfortunately, it then caches that guess for a number of days and that cache cannot be cleared by the Linter. So the ultimate solution was to both fix the og:type as Peter suggested, but also to remove the Like button from the blog post preview. It's very important that you don't show FB a page before it's published or if you do, change the URL.
Pretty sure it's your Open Graph type that's the problem.
<meta content="website" property="og:type"/>
Per the documentation
Use article for any URL that
represents transient content - such as
a news article, blog post, photo,
video, etc. Do not use website for
this purpose. website and blog are
designed to represent an entire site,
an og:type tag with types website or
blog should usually only appear on the
root of a domain.