og:image is not displayed while sharing a post to WhatsApp

Hi @sajjadbaqri

To show the image, can you kindly head to WordPress dashboard > edit the post and head to Yoast SEO metabox > Social tab and check the image you have added for social image field? Make sure you have the preferred image added in this field and then save the post.

I have not set the image in the social tab. However, what if, I want my social image be the featured image of all of my posts in wordpress. Is there any way that the social image is automatically chosen the same as the featured image of the post? Setting the image twice from two different places (Featured image and social image) is not very user-friendly. I want to set the featured image only and it must automatically be selected as the social image. Please note that I know no coding and I cannot add a custom code to the plugin by myself.

Hello @sajjadbaqri

When sharing on WhatsApp, the social image is used which you’ll see as the og:image tag when you view your page source. This tag is only populated when the page contains a valid image based on the following hierarchy:

• A user-defined image “Social image” in the Social tab of the Yoast metabox.
• A user-defined “Featured image” for the page (only for posts).
• A prominent image from the page’s content.

So I ran the two URLs in your original post through the Facebook sharing debugger and got this error:

The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

This means you have to upload an image to the social image field as Facebook requires this. I know you are sharing to WhatsApp, but the two platforms use the same protocol – Open Graph

This thread was marked resolved due to a lack of activity, but you’re always welcome to re-open the topic. Please read this post before opening a new request.

The problem got fixed by adding the following code to the functions.php:

function set_featured_image_as_social_and_og_image() {
if (is_single() || is_page()) {
global $post;

    // Check if the post has a featured image
    if (has_post_thumbnail($post->ID)) {
        $featured_image_url = get_the_post_thumbnail_url($post->ID, 'full');

        // Set the featured image as the social image for Yoast SEO
        update_post_meta($post->ID, '_yoast_wpseo_opengraph-image', $featured_image_url);
        update_post_meta($post->ID, '_yoast_wpseo_twitter-image', $featured_image_url);

        // Add Open Graph tags if they don't exist
        add_action('wp_head', function() use ($post, $featured_image_url) {
            global $wp_filter;

            // Check if Yoast SEO is adding the og:image tag
            $yoast_exists = false;
            if (isset($wp_filter['wpseo_opengraph'])) {
                foreach ($wp_filter['wpseo_opengraph']->callbacks as $priority => $functions) {
                    foreach ($functions as $function) {
                        if (strpos($function['function'][1], 'og_image') !== false) {
                            $yoast_exists = true;
                            break 2;
                        }
                    }
                }
            }

            // Add Open Graph tags if Yoast SEO is not adding them
            if (!$yoast_exists) {
                $title = get_the_title($post->ID);
                $description = get_the_excerpt($post->ID);
                $url = get_permalink($post->ID);

                echo '<meta property="og:title" content="' . esc_attr($title) . '">' . "\n";
                echo '<meta property="og:description" content="' . esc_attr($description) . '">' . "\n";
                echo '<meta property="og:url" content="' . esc_url($url) . '">' . "\n";
                echo '<meta property="og:image" content="' . esc_url($featured_image_url) . '">' . "\n";
                echo '<meta property="og:type" content="article">' . "\n";
            }
        }, 5);
    }
}

}
add_action(‘wp’, ‘set_featured_image_as_social_and_og_image’);