3

I am trying to set the Featured image as the og:image

I have tried various ways and plugins (Yoast) but finding it hard to get my head around this.

The issue is that it isn't picking up the feature image at all instead it is picking up the images in the content.

This is my current pages code for the single blog post. This is the part which i need to be able to get when sharing the blog post to Facebook rather then the content images.

<div class="image-wrapper">
        <?php if( get_field('featured_image') ): ?>
        <?php $featuredImage = get_field('featured_image'); ?>
        <img rel="image_src" src="<?php echo $featuredImage['url']; ?>" alt="">
        <?php else: ?>
        <img src="http://lorempixel.com/842/458/?rand9" alt="">
        <?php endif; ?>
</div>

It does do this weird thing when a blog post hasn't got any images in the content it then picks up the feature images and images in the sidebar. I also ran the Facebook debugger but again it is only picking up the contents imagery.

I did find this snippet that targets the featured image but i have a feeling because mine is a custom post it may not be picking it up.

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

Any suggestions would be great. If you need anything else, let me know.

6

It appears that your site doesn't use the core WordPress Featured Image feature but instead uses a custom image field (probably from Advanced Custom Fields). Yoast's plugin, Jetpack, and presumably many others look for the Featured Image image when setting the opengraph meta tag. So you have two options:

  1. Use the core Featured Image feature with one of the plugins that adds the featured image to an opengraph meta tag
  2. Change your meta property to use the ACF field:

<meta property="og:image" content="<?php $featuredImage = get_field('featured_image'); echo esc_url( $featuredImage['url'] ); ?>" />


Aside: if your featured image (however it's implemented) has any meaning and is not "purely decorative," make sure your site supports a way to give it appropriate alt text for accessibility.

  • Hi, thanks for the response. You are correct, i am using a ACF for my featured image. I went for option two but the tag isn't actually picking up the image it shows like this in the view source <meta property="og:image" content=""> – Kenny Van Sittert Aug 27 '14 at 9:49
  • Got it working <meta property="og:image" content="<?php $featuredImage = get_field('featured_image'); echo $featuredImage['url']; ?>" /> Thank you for your help – Kenny Van Sittert Aug 27 '14 at 10:37
  • D'oh! Sorry about that variable naming screw up on my part. It's a general best practice to leave the esc_url() in there for sanitizing. – mrwweb Aug 27 '14 at 16:18
0

you can make your own plugin, or just use it in your functions.php

add_action('wp_head', 'dgsoft_fb');
function dgsoft_fb(){
    if( is_single() ) {
        echo '<meta property="og:image" content="'. get_the_post_thumbnail_url(get_the_ID(),'full')   .'" />';
    }
}

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.