Use og:image:width and og:image:height Open Graph tags to render image on first Facebook like/share action

[CarolineGeven]

When content is shared for the first time, the Facebook crawler will scrape and cache the metadata from the URL shared. The crawler has to see an image at least once before it can be rendered. This means that the first person who shares a piece of content won't see a rendered image.

To solve this, use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.

As taken from:
https://developers.facebook.com/docs/sharing/best-practices#images

[d3v1an7]

+1. This would be a great addition!

If any other devs are looking for a quick solution in the meantime: https://github.com/synapticism/ubik-seo/blob/master/ubik-seo/ubik-seo-yoast.php

[fgilio]

+1 this would also solve some problems with Facebook not recognizing the image properly

[Chillifish]

+1 here, currently struggling with this. My page is dynamically generated and the images are hosted elsewhere. I'm currently using the "wpseo_opengraph_image" filter and would love for it to either generate the dimensions, or allow me to enter them.

[hubdotcom]

+1 will submit sample code

[hubdotcom]

    private function get_featured_image( $post_id ) {
        if ( function_exists( 'has_post_thumbnail' ) && has_post_thumbnail( $post_id ) ) {
            /**
             * Filter: 'wpseo_opengraph_image_size' - Allow changing the image size used for OpenGraph sharing
             *
             * @api string $unsigned Size string
             */
            $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ), apply_filters( 'wpseo_opengraph_image_size', 'original' ) );

            if ( $this->check_featured_image_size( $thumb ) ) {
                // return $this->add_image( $thumb[0] );
                array_push( $this->images, $thumb );
            }
        }
    }

    public function image( $image = false ) {
        $opengraph_images = new WPSEO_OpenGraph_Image( $this->options, $image );

        foreach ( $opengraph_images->get_images() as $img ) {
            if(is_array($img)){
                $this->og_tag( 'og:image', esc_url( $img[0] ) );
                $this->og_tag( 'og:image:width', $img[1] );
                $this->og_tag( 'og:image:height', $img[2] );
            } else {
                $this->og_tag( 'og:image', esc_url( $img ) );
            }
        }
    }

[PayteR]

+1 for this. It's real issue for my wp editors. They must add daily multiple WP posts to the FB, so i created a temporary fix for this, you just need to add it somewhere in functions.php

/**
 * Temporary fix
 * OpenGraph add a og:image:width and og:image:height for FB async load of og:image issues
 *
 * https://github.com/Yoast/wordpress-seo/issues/2151
*  https://developers.facebook.com/docs/sharing/webmasters/optimizing#cachingimages
 */
if(class_exists('WPSEO_OpenGraph_Image')) {
    add_filter("wpseo_opengraph", function () {
        global $wpseo_og;

        // will get a array with images
        $opengraph_images = new WPSEO_OpenGraph_Image( $wpseo_og->options );

        foreach ( $opengraph_images->get_images() as $img ) {
            // this block of code will first convert url of image to local path
            // for faster process of image sizes later
            $upload_dir = wp_upload_dir();
            $img_src = str_replace($upload_dir['url'], $upload_dir['path'], $img);
            $size = getimagesize($img_src);

            // display of this tags with Yoast SEO plugin
            $wpseo_og->og_tag( 'og:image:width', $size[0] );
            $wpseo_og->og_tag( 'og:image:height', $size[1] );
        }

    }, 32);
}

[avantegarde]

The above code gave me an unexpected function error so based on @PayteR 's code this is what worked for me.

/**
 * Temporary fix
 * OpenGraph add a og:image:width and og:image:height for FB async load of og:image issues
 *
 * https://github.com/Yoast/wordpress-seo/issues/2151
*  https://developers.facebook.com/docs/sharing/webmasters/optimizing#cachingimages
 */
function WPSEO_OpenGraph_Image() {
  global $wpseo_og;

  // will get a array with images
  $opengraph_images = new WPSEO_OpenGraph_Image( $wpseo_og->options );

  foreach ( $opengraph_images->get_images() as $img ) {
    // this block of code will first convert url of image to local path
    // for faster process of image sizes later
    $upload_dir = wp_upload_dir();
    $img_src = str_replace($upload_dir['url'], $upload_dir['path'], $img);
    $size = getimagesize($img_src);

    // display of this tags with Yoast SEO plugin
    $wpseo_og->og_tag( 'og:image:width', $size[0] );
    $wpseo_og->og_tag( 'og:image:height', $size[1] );
  }

}
if(class_exists('WPSEO_OpenGraph_Image')) {
  add_filter("wpseo_opengraph", "WPSEO_OpenGraph_Image");
} 

[PayteR]

ah yes, it will not work on older PHP versions than 5.3 because of anonymous function

[avantegarde]

👍 Correct!

[michaelstoffer]

+1

[albarenguenatalia]

+1 for this.

[CoeusCC]

+1
Experiencing this issue now, and can't actually scrape for the new image until I add the sizes.

[cedriccharles4]

+1, same here ! Could be great to add it to the plugin ;) !

[Rarst]

I have opened PR to do this automatically for featured images.

Doing it for other cases is a little problematic to accomplish reliably, reversing URLs sucks. Saving it for later. :)

[MarcusFuto]

I am using the above code on coast-classics.com.

If you take a look at the page source; it writes the og:width and og:height twice.

Somehow the above code is duplicating it. I thought yoast might have implemented it so I removed the code, but then both of the sets of og:widht & od:height disappeared.

Could this affect negatively and how could I avoid this duplication.

[Rarst]

@MarcusFuto This is now partially implemented in the plugin (for the case when featured image is used since it's easy to determine dimensions for). I am not sure how third party snippets interact with that.

[MarcusFuto]

Thanks @Rarst.

Like I said. The snippet was removed, but then no image width or height was displayed in the code at all.

If I understand correctly, they should actually be there when I remove the snippet?

Thanks!

[Rarst]

In the case that featured image is used — yes.

[MarcusFuto]

Then that is very strange. It is mainly my products that I want to be possible to share. and all of those have the specs. Do you think that me having put in that code could have duplicated the image width and height? Could you give an example how it is supposed to look like in the page source when yoast is actually working?
see an example of mine: view-source:https://www.coast-classics.com/product/hasta-de-la-muerte

THanks! 🎱

[Rarst]

Do you think that me having put in that code could have duplicated the image width and height?

Well, yes, if plugin outputs one set and you add a code that outputs one more set then it's duplicate.

Could you give an example how it is supposed to look like in the page source when yoast is actually working?

That looks about right (sans duplicate issue). The dimensions set right after image itself is produced by the plugin, or so I would guess from how it is processed in the code.

[Pcosta88]

Please inform the customer of conversation # 184718 when this conversation has been closed.

[Pcosta88]

Please inform the customer of conversation #184767 when this conversation has been closed.

[Pcosta88]

Please inform the customer of conversation # 185083 when this conversation has been closed.

[mmikhan]

Please inform the customer of conversation # 189972 when this conversation has been closed.

[Pcosta88]

Please inform the customer of conversation # 190308 when this conversation has been closed.

[Pcosta88]

Please inform the customer of conversation # 192238 when this conversation has been closed.

[Pcosta88]

Please inform the customer of conversation # 193125 when this conversation has been closed.

[Pcosta88]

Please inform the customer of conversation # 191158 when this conversation has been closed.

[Pcosta88]

User 192238 reports that an All In One WP Security setting was preventing the page from appearing in LinkedIn as expected.

[Pcosta88]

Please inform the customer of conversation # 196023 when this conversation has been closed.

[Pcosta88]

Please inform the customer of conversation # 197492 when this conversation has been closed.

[Pcosta88]

Please inform the customer of conversation # 203504 when this conversation has been closed.

[rumejan]

Please inform the customer of conversation # 215823 when this conversation has been closed.

[drzraf]

Please add optional width/height/<any-attr> parameters to the add_image() function of class-opengraph.php
Without this, the wpseo_add_opengraph_images action is less usable since one can not provide additional custom images with their dimension (since add_image() just accept the URL string).

thank you

[rmarcano]

I've been testing this and I think this is no longer an issue. I've shared posts on LinkedIn without the og:image:width and og:image:height tag and the image is showing correctly.

[CarolineGeven]

@rmarcano You're correct. Also tested with Facebook. Closing this as this is no longer an issue.

[timocouckuyt]

It still is, tho, see attached notice in the Facebook Sharing Debugger tool:

[Rudloff]

@timocouckuyt This only happens the first time you check a page (because the images are processed asynchronously, they can't always be processed before the result is displayed). It should not happen the second time you test check the same page.

[timocouckuyt]

@Rudloff I know, but still, the dimensions aren't there :-)

[jdevalk]

A fix for this is in progress: #9418

[nandalal]

Hi i done the issue as per the above solution like -----

$thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
echo '';
echo '';
echo '';

then we get the particular image width and height, in the og:image:width & og:image:height respectively but yet i can't able to get the edited post like title or description or image. its quite sad.

The only solution is past the url of page to the below facebook debug service

https://developers.facebook.com/tools/debug/

I want its like dynamic ie i get the post when i put the 1st time. But i need when i edit the same post it must reflect what ever the title or description or image to 2nd time, when i am going to sharing the same post to the facebook

[vladislav-vladimirov]

+1 for this. It's real issue for my wp editors. They must add daily multiple WP posts to the FB, so i created a temporary fix for this, you just need to add it somewhere in functions.php

/**
 * Temporary fix
 * OpenGraph add a og:image:width and og:image:height for FB async load of og:image issues
 *
 * https://github.com/Yoast/wordpress-seo/issues/2151
*  https://developers.facebook.com/docs/sharing/webmasters/optimizing#cachingimages
 */
if(class_exists('WPSEO_OpenGraph_Image')) {
    add_filter("wpseo_opengraph", function () {
        global $wpseo_og;

        // will get a array with images
        $opengraph_images = new WPSEO_OpenGraph_Image( $wpseo_og->options );

        foreach ( $opengraph_images->get_images() as $img ) {
            // this block of code will first convert url of image to local path
            // for faster process of image sizes later
            $upload_dir = wp_upload_dir();
            $img_src = str_replace($upload_dir['url'], $upload_dir['path'], $img);
            $size = getimagesize($img_src);

            // display of this tags with Yoast SEO plugin
            $wpseo_og->og_tag( 'og:image:width', $size[0] );
            $wpseo_og->og_tag( 'og:image:height', $size[1] );
        }

    }, 32);
}

This worked for me with a small modification - it seems the $img_src is an array, and its "url" key holds the URL string ($img_src["url"]). So the code that worked for me goes like this:

/**
 * Temporary fix
 * OpenGraph add a og:image:width and og:image:height for FB async load of og:image issues
 *
 * https://github.com/Yoast/wordpress-seo/issues/2151
*  https://developers.facebook.com/docs/sharing/webmasters/optimizing#cachingimages
 */

if(class_exists('WPSEO_OpenGraph_Image')) {
    add_filter("wpseo_opengraph", function () {
        global $wpseo_og;
      
        // will get a array with images
        $opengraph_images = new WPSEO_OpenGraph_Image( $wpseo_og->options );

        foreach ( $opengraph_images->get_images() as $img ) {
            // this block of code will first convert url of image to local path
            // for faster process of image sizes later
            $upload_dir = wp_upload_dir();
            $img_src = str_replace($upload_dir['url'], $upload_dir['path'], $img);
            $size = getimagesize($img_src["url"]);

            // display of this tags with Yoast SEO plugin
            $wpseo_og->og_tag( 'og:image:width', $size[0] );
            $wpseo_og->og_tag( 'og:image:height', $size[1] );
        }

    }, 32);
}