Add an Open Graph image for Whatsapp on your WordPress website

By Edgars AbolinsDecember 2, 2025

How to deal with a cropped Open Graph images when sharing the website on platforms like WhatsApp? You simply need to provide an alternate square-sized version of the Open Graph image on your website which will serve as an icon for social sharing platforms which do not use the full-size rectangular version of this image.

Yes, you can specify a multiple versions of the Open Graph image on your website and while I have the article about Open Graph image size and best practices where you can read more about this, here you can find a code snippet which will quickly enable you to add a square sized Open Graph image icon to your WordPress website, because such feature is not available in the popular WordPress SEO plugins.

Please create a new PHP file under wp-content/mu-plugins folder and add this code to it. This will create a new option in the WordPress Admin interface under Settings -> General section which will allow you to specify the default Open Graph icon for your website.

<?php
/**
 * Plugin Name: Open Graph Icon
 * Description: Allows to specify a default square-sized Open Graph image icon for your website
 * Version: 1.0.0
 * Author: DoInWP
 * Author URI: https://doinwp.com
 * Requires PHP: 7.4
 */

add_action('admin_init', function() {
    add_settings_field(
        'og_image_icon', 'Open Graph Icon',
        'dwp_og_icon_field_callback',
        'general',
        'default',
        ['label_for' => 'og_image_icon']
    );
    register_setting('general', 'og_image_icon', ['type' => 'integer', 'sanitize_callback' => 'dwp_validate_og_icon', 'default' => 0]);
});

// Render the field
function dwp_og_icon_field_callback($args) {
    $og_image_id = get_option('og_image_icon', 0);
    $og_image_url = $og_image_id ? wp_get_attachment_image_url($og_image_id, 'thumbnail') : '';
    ?>
    <fieldset>
        <div class="og-image-wrapper" style="margin-bottom: 10px;">
            <div id="og-image-preview" style="<?php echo $og_image_url ? '' : 'display:none;'; ?>">
                <img src="<?php echo esc_url($og_image_url); ?>" style="max-width: 150px; height: auto; display: block; margin-bottom: 10px;" alt="Open Graph Image">
                <button type="button" class="button" id="remove-og-image" style="<?php echo $og_image_url ? '' : 'display:none;'; ?>">
                    Remove Image
                </button>
            </div>
            <button type="button" class="button" id="upload-og-image" style="<?php echo $og_image_url ? 'display:none;' : ''; ?>">
                Choose Open Graph Image
            </button>
        </div>
        <input type="hidden" name="og_image_icon" id="og_image_icon" value="<?php echo esc_attr($og_image_id); ?>">
        <p class="description">
            Upload a square PNG or JPG image (512x512px to 1200x1200px, max 150KB).<br>
            <div style="max-width:600px;font-style:italic;margin-top:10px">Open Graph Icon is a square sized image which serves as a default Open Graph image for social sharing platforms
            in case the large (rectangular) version of OG image is not provided or if the platform does not support showing
            the large open graph images in the URL snippets (like WhatsApp).</div>
        </p>
        <div id="og-image-error" style="color: #d63638; margin-top: 10px; display: none;"></div>
    </fieldset>
    <?php
}

function dwp_validate_og_icon($value) {
    if (empty($value)) {
        return 0;
    }
    
    $attachment_id = absint($value);
    $file_path = get_attached_file($attachment_id);
    
    if (!$file_path) {
        add_settings_error('og_image_icon', 'invalid_attachment', 'Invalid image selected.');
        return get_option('og_image_icon', 0);
    }
    
    $mime_type = get_post_mime_type($attachment_id);
    if (!in_array($mime_type, array('image/png', 'image/jpeg', 'image/jpg'))) {
        add_settings_error('og_image_icon', 'invalid_type', 'Only PNG and JPG images are allowed.');
        return get_option('og_image_icon', 0);
    }
    
    $file_size = filesize($file_path);
    if ($file_size > 153600) {
        add_settings_error('og_image_icon', 'file_too_large', 'Image must be smaller than 150KB.');
        return get_option('og_image_icon', 0);
    }
    
    $image_data = wp_get_attachment_metadata($attachment_id);
    if (!$image_data || !isset($image_data['width']) || !isset($image_data['height'])) {
        add_settings_error('og_image_icon', 'invalid_dimensions', 'Could not read image dimensions.');
        return get_option('og_image_icon', 0);
    }
    
    $width = $image_data['width'];
    $height = $image_data['height'];
    
    if ($width !== $height) {
        add_settings_error('og_image_icon', 'not_square', 'Image must be square (same width and height).');
        return get_option('og_image_icon', 0);
    }
    
    if ($width < 512 || $width > 1200) {
        add_settings_error('og_image_icon', 'dimensions_out_of_range', 'Image dimensions must be between 512x512px and 1200x1200px.');
        return get_option('og_image_icon', 0);
    }
    
    return $attachment_id;
}


add_action('admin_enqueue_scripts', 'dwp_enqueue_og_icon_uploader');
function dwp_enqueue_og_icon_uploader($hook) {

    if ('options-general.php' !== $hook) {
        return;
    }
    
    wp_enqueue_media();


    $og_inline_script = "jQuery(document).ready(function($) {
        var mediaUploader;
        var errorDiv = $('#og-image-error');

        function og_icon_validateImage(attachment) {
            var errors = [];
            if (!['image/png', 'image/jpeg', 'image/jpg'].includes(attachment.mime)) {
                errors.push('Only PNG and JPG images are allowed.');
            }
            if (attachment.filesizeInBytes > 153600) {
                errors.push('Image must be smaller than 150KB.');
            }
            if (attachment.width !== attachment.height) {
                errors.push('Image must be square (same width and height).');
            }
            if (attachment.width < 512 || attachment.width > 1200) {
                errors.push('Image dimensions must be between 512x512px and 1200x1200px.');
            }
            return errors;
        }
        
        function showError(message) {
            errorDiv.html(message).show();
            setTimeout(function() {
                errorDiv.fadeOut();
            }, 5000);
        }
        
        $('#upload-og-image').on('click', function(e) {
            e.preventDefault();
            
            if (mediaUploader) {
                mediaUploader.open();
                return;
            }
            
            mediaUploader = wp.media({
                title: 'Choose Open Graph Image',
                button: {
                    text: 'Use this image'
                },
                library: {
                    type: ['image/png', 'image/jpeg']
                },
                multiple: false
            });
            
            mediaUploader.on('select', function() {
                var attachment = mediaUploader.state().get('selection').first().toJSON();
                var errors = og_icon_validateImage(attachment);
                
                if (errors.length > 0) {
                    showError('<strong>Invalid Image:</strong><br>' + errors.join('<br>'));
                    return;
                }
                
                $('#og_image_icon').val(attachment.id);
                $('#og-image-preview img').attr('src', attachment.url);
                $('#og-image-preview').show();
                $('#upload-og-image').hide();
                $('#remove-og-image').show();
                errorDiv.hide();
            });
            
            mediaUploader.open();
        });
        
        $('#remove-og-image').on('click', function(e) {
            e.preventDefault();
            $('#og_image_icon').val('');
            $('#og-image-preview').hide();
            $('#upload-og-image').show();
            $('#remove-og-image').hide();
            errorDiv.hide();
        });
    });";

    wp_add_inline_script('jquery', $og_inline_script);

}

function dwp_output_og_icon() {
    $og_icon_id = get_option('og_image_icon', 0);
    $og_icon = !empty($og_icon_id) ? wp_get_attachment_image_url($og_icon_id, 'full') : '';
    if(!empty($og_icon)) {
        $mime_type = get_post_mime_type($og_icon_id);
        $metadata = wp_get_attachment_metadata($og_icon_id);
        if(!empty($metadata['width'])) {
            $width = $metadata['width'];
            $height = $metadata['height'];
        }

        $alt_text = get_post_meta($og_icon_id, '_wp_attachment_image_alt', true);

        if(!empty($width) && !empty($height) && !empty($mime_type)) {
            ?>
            <meta property="og:image" content="<?php echo esc_url($og_icon); ?>">
            <meta property="og:image:width" content="<?php echo $width; ?>">
            <meta property="og:image:height" content="<?php echo $height; ?>">
            <meta property="og:image:type" content="<?php echo $mime_type; ?>">
            <?php
            if(!empty($alt_text)) {
            ?><meta property="og:image:alt" content="<?php echo esc_attr($alt_text); ?>">
            <?php
            }
        }
    }
}
add_action('wp_head', 'dwp_output_og_icon');
Leave a Comment on Add an Open Graph image for Whatsapp on your WordPress website
About the author
Edgars Abolins Edgars Abolins, author at DoinWP.com
I'm a full-stack WordPress developer with a 10+ years of solid experience in the core web development languages, development processes / techniques, web security, Linux server management and with pretty good understanding about proper semantics, UX/UI, technical SEO, good design and basic knowledge of company leadership. On top of that - a distant 5+ years experience as a computer and electronics repair technician which often enables me to understand also how the things work at the hardware level.
Your feedback matters!…
I hope you found this article helpful. Feel free to add some comments - your feedback is very important to me, as it drives my motivation and helps me to improve the content.