Facebook share scraping image selector open graph woes

So, the share buttons on my website have been giving blank images, or the wrong images for a while. You’re meant to go and add a whole bunch of OpenGraph meta tags, but W.T.F the tag for the image to use must be absolute. wat

No, really, WAT. For double fun wat, it must include the protocol too! You have to use a second tag if you want to use https!

So, using the “modern” og:image tags is just right out then. (for realz, who the fuck though absolute urls were a good idea. I generate galleries, the galleries just run on disk, you don’t need to know where in the site they’re mounted or anything) Web browsers themselves are perfectly capable of loading a relative url image. Facebook’s Object Debugger on the other hand, not so much. It will take an img with src=../blah.jpg" and turn it into http://domain/blah.jpg, completely ignoring the path sections.

However… it can deal with relative urls that don’t have .. in them. “src=img/blah.jpg” is perfectly ok. Dumb, dumb and dumber.

<img src="../blah.jpg"> FAIL
<img src="blah.jpg"> GOOD
<img src="relative/blah.jpg"> GOOD


Leave a Comment

NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>