I'm trying to manually fill the Open Graph tags and I'm having some troubles in setting the content for the og:image tag.

In a single post page, I set it this way:

$thumbnailSrc = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
$image        = esc_attr($thumbnailSrc[0]);
<meta property="og:image" content="<?php echo $image ?>">

The result is this:

<meta property="og:image" content="/wp-content/uploads/image.jpg">

On the Open Graph debugger I then get this error:

Object at URL 'http://website.com' of type 'article' is invalid because the given value '/wp-content/uploads/image.jpg' for property 'og:image:url' could not be parsed as type 'url'.

How can I get the attachment so that the url is: http://website.com/wp-content/uploads/image.jpg ?


esc_attr() might not be necessary on the url retrieved by wp_get_attachment_image_src.

I have referred to a code example from the WordPress Codex page on wp_get_attachment_image_src and adapted the following code that works for me.

global $post;
$thumbnailSrc = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
if ( $thumbnailSrc ) :
  echo '<meta property="og:image" content="'.$thumbnailSrc[0].'">';

Edit: Since you are using the $post object outside of the WordPress loop you will need to declare global $post; before you use $post->ID. I have added it to the code sample above.

  • I've actually tried that. It's always echoing only /wp-content/uploads/image.jpg – Carlo Jun 20 '17 at 18:07
  • Hmmm, I have tested the code and I get an absolute url. I tested inside the WordPress loop but I see you would be placing your code outside of the loop in the <head>. You might need to make the $post object global before you use $post->ID. I have edited the answer to reflect this. – Bassscape Jun 21 '17 at 14:01
  • I tried with this, but nothing changed. I imagine I would have gotten an error if the $post variable wasn't accessible. My code is working, it retrieves the image, it just doesn't have the full path – Carlo Jun 21 '17 at 17:44

You could use has_post_thumbnail() and get_the_post_thumbnail_url() to get an absolute url for the posts feature image.

According to the Codex has_post_thumbnail() will check if the post has an image attached and get_the_post_thumbnail_url() will return the post thumbnail URL.

I have tested the code below:

global $post;
if ( has_post_thumbnail($post->ID) ) {
  echo '<meta property="og:image" content="'.get_the_post_thumbnail_url($post->ID).'">';

As mentioned in a previous comment, you are using the $post object before the WordPress loop starts and will need to declare global $post; before you can use $post->ID.

  • I just tried this and nothing. At this point, it must be something in the theme, but I don't know where to look. I'm using the Roots Sage theme, by the way – Carlo Jun 21 '17 at 17:47

To access the current post object outside The Loop, you need to declare the $post variable globally.

<?php global $post; ?>
<meta property="og:image" 
    content="<?php echo wp_get_attachment_url(get_post_thumbnail_id(($post->ID)); ?>">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.