0

I have created a plugin with a custom post type and the single post template pulls in photos from an external site. I would like to programmatically set the source for one of these images as the og:image meta data in the page header. At the moment, it is defaulting to the sites default image.

The gallery of images is retrieved using an ajax call from the single post template. I would like to set the meta tag value based on the first image returned.

The single post template calls get_header() so the header is already built before the gallery is returned. So I need a means to replace or override the one entry in the header. Everything else in the header is as I would like it but that is all based on static data set at the time the post is created/edited.

I am not even sure what I am trying to achieve is possible but would be extremely grateful if anyone has any useful ideas.

1 Answer 1

0

You could eventually get what you said to happen but it wouldn't work reliably.

In other words, you could replace the tag in the header with one of your images. But by that point most scrapers (social media scrapers, and anything interested in og: tags) will have already come and gone.

So, you have to replace it before those tags get written. The good news is you can! You just have to do with PHP instead of with AJAX. The bad news is it can quickly grow complex.

So, before WordPress has written the section, you need to have already fetched your first image URL with PHP and told WordPress you would like to add something there -- your og: meta tag. Whatever you were loading with AJAX (a list of image URLs filtered by a parameter?) you'll replicate with PHP -- just whatever you need to get that first image URL. Then you write it to the header.

For example, assuming a remote source that returns a JSON array of images might look like this:

function so325454_add_meta_tag(){

    $images = file_get_contents('...');
    if ( !$images ){ return; } //in case file fails

    $list_of_images = @json_decode( $images );
    if ( is_null( $list_of_images ) 
    || !is_array( $list_of_images ) 
    || count( $list_of_images ) < 1 ){ return; } //no content or bad JSON or empty array

    $image = $list_of_images[0]; 
    echo "<meta property='og:image' content='$image' />";
}
add_action( 'wp_head', 'so325454_add_meta_tag' );

Sadly you may have to be cautious of other plugins writing og tags, even the same og tags. In other words writing your tag there isn't stopping any others.

3
  • Thank you. This has enabled me to add the meta tag that I need but the theme (I presume) is adding another, which overrides mine. The other tag was coming later in the HTML source, so I have set the priority in the call to add_action to PHP_INT_MAX. This has enabled my meta tag to be written after but it hasn't solved the problem in the sense that Facebook is still picking the wrong image when I try to share any of my posts. It would be good if I could override the other meta tag, rather than adding another. At least I would have a better chance of getting Facebook to pick the right image.
    – GeeC
    Jan 14, 2019 at 13:41
  • A priority of PHP_INT_MAX, that's pretty extreme because nobody, not even yourself, will be able to top it. Usually you see a priority of like 11, or 20, if you're trying to top something. Anyways that's the problem I mentioned at the end of my post. Sounds like you need to dig through and find out where it's coming from, then you can determine if there's a way to disable it or filter it out. I would download the entire site directory if you haven't, then do a file contents search to help you identify it (i.e. search for og:image for instance)
    – tmdesigned
    Jan 16, 2019 at 10:06
  • I agree the PHP_INT_MAX is extreme but I found the code that was adding the og:image and it was using 9999 as the priority. It was in a third-party plugin. I have since been able to change settings in that plugin to stop it outputting the image metadata. My code that adds the og:image is called only for the single template of my custom post type, so it is highly unlikely to interfere with anything else.
    – GeeC
    Feb 21, 2019 at 3:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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