blog-yoast-img-og

Setting a Custom Open Graph Image When Using Yoast

Published: 7th September 2018

Wordpress combined with Yoast is a pretty complete package, but there are times when you want to tweak the default settings under the hood.

We often forgo the default featured image WordPress uses on posts in favour of our own. There are plenty of reasons you might want to do this when developing a site, we normally use an ACF field with an image crop to make administering the site easier, ensuring images are the right size when rendered on the front end. The ACF approach also allows you to use the same field across custom post types and pages, ensuring continuity across the admin experience ultimately creating a more intuitive user experience. If you’ve not had a look at ACF we’d recommend taking a look, we find it very useful and easy to expand, it’s actually a prerequisite of our in-house WordPress theme.

Yoast is an even more well known plugin with millions of installs, it adds a very intuitive user interface to your WordPress site which reports and guides you on SEO issues. One of the many things Yoast takes care of is the automatic setting up of your Open Graph meta, every page on your site will have this information within its header. Open Graph meta allows external websites and search engines to quickly access all sorts of information about your website/company in a structure format. The piece of information we’re interested in is the image (og:image)! This image will be used on most platforms when sharing your content, we’re talking specifically about social platforms such as Facebook and Twitter.

Yoast will allow you to set a default image to be used within the OG meta, this will appear on all pages and we often recommend setting this to the company logo. Take a look at our home page on the Facebook debugger tool and you’ll see our logo, this will be the same for all the core pages on our site. However when sharing a blog post it’s always best to include an eye catching image, something more than the company logo, something related to the content your linking to. Now take a look at this page on the Facebook debugger.  To try accomplish this on its own Yoast will look for the WordPress default featured image we’ve talked about above, but if you’ve not used this in favour of an ACF or similar it won’t find anything and you’ll again just get the default logo.

To fix this we need to tell Yoast to look else where for the OG image when dealing with blog posts. Thankfully Yoast offers lots of hooks and actions for us to play with and this simple code snippet, placed within your functions.php file will allow us to dynamically set the image:

 

add_filter('wpseo_opengraph_image', 'og_image');

function og_image($image) {
    global $post;

    if (get_field('feature_image', $post->ID)) {
        $image = base_image_url(get_field('feature_image', $post->ID), null); 
    }
    return $image;
}

 

Let’s take a look at the above code and how you can use and expand on this. Our function is passed the default image Yoast is going to use, in this case our logo. We then check to see if our ACF field is populated on that post, if it is, we change the default image and return it. Above we mentioned that the ACF field could be used on multiple post types and pages, the above code allows for this as it’s checking the field and not the post type, you could however change this logic to suite your needs. For example, larger companies often have several departments, you could filter these by page parent or taxonomy and give each department a slight variation of the company log, or their own logo altogether.

That’s not the end of the story, the Open Graph meta data variables allow for a lot more detail to be added to your pages, explore these and find those that bring value to your project.

More from our blog

Some text goes here, more SEO and stuff yeah, woop!

Contact us today

Ready to discuss your next project?

Pick a contact method below or use the form and a member of our team will get back to you as soon as possible.

Follow us

Can't get enough? Follow us on Twitter for all our latest developments.

Our new developer, Greg, hard at work here at the #UFMedia headquarters 🐶🖥️ #Sproodle #DogsofTwittter #DevonLifet.co

RT @Moz: #SEO Competitive Analysis 101: Step 1: Identify your top competitors Step 2: Perform keyword gap analysis Step 3: Perform link ga…

@allourwellbeing Oh my goodness!! Ahh all those beauties! Are they doodles of a sort?! 😍😍

RT @sejournal: Facebook Gives a Heads-Up About a New Tool That May Affect Ad Targeting via @MattGSouthern: t.co #SMM #S

@UFMediaUK