I want to update the thumbnail image that Facebook send button uses. I realize that this is cached by Facebook and am trying to update the cache using the debugger tool
I tried using http://domain.com/path_to_image.jpg?fbrefresh=CAN_BE_ANYTHING on the debugger tool
However, the old image is still displayed. It appears that the image is being stored at https://fbexternal-a.akamaihd.net/safe_image.php?id=path_to_image/image.jpg
Any ways to clear the cache since fbrefresh=CAN_BE_ANYTHING is not working or am i typing in the wrong url ?
I have also tried adding
<meta property="og:image" content="http://domain.com/new_image.jpg"/> in my header.php file (I am using Wordpress)
Any idea as to why the image is not updated / cache not cleared?
The image gets refreshed after a day by the above procedure.
Again, go to the debugger tool
Type in http://domain.com/path_to_image.jpg?fbrefresh=CAN_BE_ANYTHING
Great explanation here and clarification that you use debugger on the "FB post" URL (not just the image) and once resolved, use the "rescrape" to force updates on the thumbnail.
http://info.tmrdirect.com/bid/105994/How-To-Change-Facebook-Link-Thumbnail-and-Description
One tip: in the Debugger tool, I found it only worked if I wrote the URL using HEX for characters (but that might be because that's how my original post was formatted). e.g.: https%3A%2F%2Fwww.domain.com%2blog2%2F
Related
Every times I post any web page from my website on facebook, I expect its main image to be displayed for better communication rank and this is ok in the preview page, when I'm pasting the post url immediatly as you can realize it from the attached image. but when it's saved, the images goes off as you can see from another attached image.
After searching a while on google in order to know what is wrong with my web page, I realize that the page can be debugged via this tool provided by facebook, but even when I followed all the recommended step, I still face the same issue. (anyone can try it and see the result).
When continuing my research I find that there would be some issues with og:image as facebook debugger shows in the following message:
Inferred Property
The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags. but the truth is that I really don't know what to do exactly to fix this.
Any help will be appreciated.
I use wordpress.org and bluehost. My site url is http://www.midnightmassmusic.com , and everytime I share an article either through text message, or onto fb, it doesn't display an image. I used facebook debugger and it keeps say there's no og description, and it's an invalid content type. How do I fix this? I even added facebook and google to hotlink protection, wondering if that was causing it. It didn't help. I use Yoast, didn't help. Is it possibly my image optimizer (Ewww) plugin interfering? Or are my image files not formatted correctly? Bluehost won't help me because they claim it's Facebook's problem..but it's not. The same error is occuring when sharing through text.
First of all, there is no og:decription tag in your source, so Facebook is right about that. That being said, your og:image is not accessible in public. I get a 403 error when i try to load it in the browser: https://midnightmassmusic.com/wp-content/uploads/2019/01/20181230_1552042-1-e1547951786467.jpg
Btw, your image size would be 600x800, which is not an appropriate aspect ratio for og images. You should use 1200x630 according to the docs.
I have my blog (wordpress) web site hosted at bluehost.com. A few months ago I decided to enable Cloudflare (through CPanel).
It's all working well (and I am seeing better overall performance etc) BUT I have a small issue I am dealing with.
I posted this blog some 10 days ago: http://it20.info/2016/01/why-docker-containers-and-docker-oss-docker-inc/
A few days later I had to change picture #2 (of 3) to tweak it a bit. The old picture says "Unikernel" in the red rectangle and the new picture (I uploaded) says "Unikernel/vm".
Note that inside the blog post I make an external reference to the picture (in the html code):
http://www.it20.info/misc/pictures/WhyDocker-ContainersAndDockerOSS-DockerInc2.jpg
If you point STRAIGHT to the picture you will see the new version (so I know I have updated it properly).
However the blog post still shows the old picture (as if Cloudflare is caching it indefinitely).
If in the blog post I right click on the image and do a "view image" (Firefox) it points to: http://i0.wp.com/www.it20.info/misc/pictures/WhyDocker-ContainersAndDockerOSS-DockerInc2.jpg?resize=640%2C392
(which shows the OLD image).
Funny enough if I remove the "?resize=640%2C392" it shows the proper picture.
I am trying to figure out a proper procedure to 1) write a blog post that refers to pictures as external links 2) possibly update said picture via an FTP upload and 3) have Cloudflare render the updated picture.
Thanks.
The root of your problem could be that query string after the image URL:
?resize=640%2C392
In CloudFlare, go to the caching settings and check if your current caching level is standard. If yes try changing to either no query string or ignore query string.
As far as a proper proceedure for future posts where images could change, as an alternative to purging all your site files in CloudFlare, or selectively purging just the image file in question, woudl it be feasible for you to simply change the name of the updated image file, or keep the same name but upload it to a different directory? And of course update the image src in your HTML as well.
Good luck
The past week, Facebook has been getting every article feature image wrong on my site. The og:image is clearly defined, worked fine for the past few months and even the debugger shows the correct image, yet it chooses to use the same incorrect image across all new articles now.
Article
http://www.highwaysindustry.com/causeway-creating-a-competitive-edge/
Facebook Debugger:
https://developers.facebook.com/tools/debug/og/object/
URL: http://www.highwaysindustry.com/causeway-creating-a-competitive-edge/
The meta tag, which clearly provides/defines the correct image Facebook should be using:
<meta property="og:image" content="http://www.highwaysindustry.com/wp-content/uploads/2015/05/Causeway-image-1.jpg" />
When on the debugger, if you Fetch New Scrape Information it will fix the issue. However I am currently having to do this on every single article that is posted. Why it's getting the wrong image in the first place I don't know.
In case someone runs the 'fetch new scrape information', here it is at the moment for that URL provided:
https://www.dropbox.com/s/8t4o9h3o1p9uxhv/debugger-fb.png?dl=0
I am using WordPress and Yoast SEO.
There's a warning. And it's going to take some time to update the latest information but for now you might have to fetch new scrape information yourself.
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. Image 'http://www.highwaysindustry.com/wp-content/uploads/2015/02/Dorman00001-e1423681471392.jpg' will be used instead.
I am in charge of updating a large e-commerce website, tedbrownmusic.com. We hired an outside web developer to code the website, so I'm not very familiar with the back-end side of things.
My problem: The front page requires multiple manual refreshes in order for newly posted content to show up.
The front page is an ASP.NET storefront, separate from the rest of the site (which is run on Wordpress). The Wordpress site loads properly, but on the front page, I have to hit F5 a bunch of times for new stuff to show up (I am using the newest version of Chrome). In IE, it refuses to refresh at all. The cache has to expire before a user in IE can see new content.
The web developer said there was nothing he could do about it. But that doesn't seem like normal website behavior to me.
I have tried adding "no-cache" META tags to force the page to refresh every time it is visited, but it didn't work.
Any thoughts? I appreciate it.
If you are using css/js files, you can try to force browsers to load the latest CSS file by changing a version number. I think its called as css versioning.
<link rel="stylesheet" href="yourwebsitescsslocation/style.css?v=1324491378" type="text/css" />
if you change 1324491378 to some other value it will force browser to load css again rather than from cache. You can use changeset number or current timestamp as version number and make sure that it changes everytime you make changes to css.
see below article for some additional help:
http://www.codeproject.com/Articles/203288/Automatic-JS-CSS-versioning-to-update-browser-cach