Facebook OG images. Grrrr!
7 January 2013
I have probably wasted a lot of time today trying to solve a minor, yet annoying, problem. Facebook, it’s all your fault!
Whenever I share a link to a PhotoPhaff post on my Facebook timeline, the blog thumbnail that appears is not the image that I would like it to share. In theory, the image that accompanies any link to photophaff.wordpress.com should be my blavatar.
Haven’t heard of a blavatar? Neither had I, until a couple of weeks ago. “Blavatar” is the name for that little thumbnail image that shows up next to a link when you share it; or sometimes in the address bar in your browser when you are on the website, sort of like a website’s badge. In the case of a WordPress blog, assigning an image to be used as a blavatar is very easy: even I managed to do it inside about five minutes.
My blavatar is a cropped version of the image I have on PhotoPhaff’s homepage; as is my gravatar (image that accompanies my WordPress profile).
However, Facebook, in its wisdom, makes use of an image cache when deciding upon the thumbnail it will display for any link. They seem to reside at www.fbcbn.net. The source of the image that Facebook uses for my PhotoPhaff thumbnail is here. (This is the image that I originally uploaded as a homepage image when I was first attempting to build PhotoPhaff. I quickly decided I didn’t like it that much after all, and replaced it with the current image.)
How do I know this? Facebook’s image debugger. If you go to this site and enter the URL of any image, it will display to you a whole lot of information, 90% of which I don’t understand (as it’s designed for website developers who understand how to read and write website-building code. Given that my “programming” knowledge comprises solely of one year of sixth-form computer studies back in the Dark Ages where we learned something called Pascal–or was it Pascale?–my lack of understanding will come as no surprise.) However, the bit that I do understand is where Facebook is sourcing the image (right click on the image displayed by the debugger and select properties; the URL will be displayed. Or, at the bottom of the page where it says <meta property=”og:image” content= the bit in the immediately following quote marks will be the URL of the image it is using.) The result of this scintillating insight is that I now know that when I post a link to PhotoPhaff in Facebook, it is taking the image from its cache site, http://external.ak.fbcdn.net/, NOT from the blavatar that I have assigned within PhotoPhaff. Furthermore, when I copy into the debugger the permalink to the image in my PhotoPhaff media library, the debugger tells me it “Could not retrieve data from URL”… although, at the same time, it does display a thumbnail of the image at the bottom of the page! Nuts!
So, I have two problems:
1) I don’t know how to wipe clean or reset Facebook’s image cache; and
2) I have no idea how to insert the appropriate meta data into my PhotoPhaff (or individual images) to identify them to Facebook as Open Graphic (OG) images. (Which is, apparently, the easy way to fix the problem.)
But I am not beaten yet. Whilst writing this post I have been (female, as I am) multitasking–and have stumbled upon a WordPress plugin that promises to enable the addition of meta tags to my posts and images. There will be a momentary hiatus in post production (ha ha) while I attempt to acertain how to apply said plugin.
Back soon (hopefully…)
OK, so, I’m back. That was a dead end. The plugin is solely for website owners who make use of WordPress.org, not WordPress.com. Difference? Don’t know–presumably people pay to have their site hosted on the .org option.