web analytics
Skip to main content

Relative url in og:image using WordPress Facebook plugin

I was struggling one of these days trying to figure out why my WordPress blog posts didn’t show the proper image when shared in Facebook.

I had already tried some different Facebook plugins, including the official Facebook plugin for WordPress, but I couldn’t find the reason. When I used the Facebook debugger, I always got an error message like this one:

Object at URL ‘http://mysite.com/mypost-path’ of type ‘website’ is invalid because the given value ‘/images/my_image.jpg’ for property ‘og:image:url’ could not be parsed as type ‘url’.

Strange, because my wordpress blog configuration looked fine, my theme (Atahualpa) supported featured thumbnails, and my posts had a featured thumbnail set.

After researching a little bit, I found that the problem was, in fact, the content of the og:image property, which was being assembled with a relative URL instead of an absolute URL, something like that:

<meta property=”og:image” content=”/images/my_image.jpg” />

And the thing is, Facebook doesn’t like relative URLs.

But, wait: ALL the Facebook plugins that I used added a relative URL to the og:image property. Even the official plugin!  How could that be? How were the supposed to work at all?

Then I started to debug the Facebook official plugin to see where it got the image URL from. I found that it got the URL through the wp_get_attachment_image_src function. And this function was returning a relative URL, instead of an absolute one. Gotcha! I found the culprit!

After a bit more of googling, I discovered an obscure WordPress configuration option called “Full URL path to files” at the “Settings > Media” page, that was responsible for changing WordPress image URL from absolute to relative. For some reason, my blog had this option set to “/images”, and this made all my image URLs having a relative instead of absolute path.

So, all I have to do was to leave this option blank, and gotcha! My image URLs started to show up in the way Facebook understands them: absolute! Like that:

<meta property=”og:image” content=”http://mysite.com/images/my_image.jpg” />

Nevertheless, I got perplexed when I later found out that the “Full URL path to files” was removed from the “media” settings in WordPress 3.5! My blog had already been updated to 3.8, but the option was still there!

However, that same option is not present in other blogs that I have. The only explanation that I find for this strange behavior is that, since I had previously filled the option with some value, when I later upgraded my blog to WP 3.5, the option was left in the media configuration page. At the other side, in the blogs where the option was left blank, it was removed when I upgraded to WP 3.5.