og:image:width and og:image:height Open Graph tags missing when Facebook Image is specified

[janvitos]

What did you expect to happen?

When specifying a Facebook Image for a post, the og:image:width and og:image:height Open Graph tags should be populated.

What happened instead?

The tags are missing.

How can we reproduce this behavior?

Specify a Facebook Image for a post (different than the post thumbnail) and save the post.

Can you provide a link to a page which shows this issue?

Technical info

• WordPress version: 4.7.5
• Yoast SEO version: 4.8

[janvitos]

I'm my opinion, the problem arises because the dimensions are not stored for the Facebook Images.

When debugging and checking the value of $opengraph_images->get_dimensions() on a post with a Facebook Image, the returned value is null.

[aamadmin]

Hi Janvitos, Thanks for the reply..

Dimension which i used to used earlier 1200 x 630 as suggested by Yoast SOE. Also tested with other lesser dimensions but nothing worked.

Even my old website posts are not showing up images !

Example : http://www.tulucinema.com/6-tulu-films-to-look-forward-to-in-2017/ http://www.tulucinema.com/shivu-ujire-biography/ http://www.tulucinema.com/tulu-film-namma-kusalda-javanyer-audio-release-held/

[janvitos]

Here is a filter that you can add to your functions.php that will add og:image:width and og:image:height to Facebook / OpenGraph images:

/**
 * Add og:image:width and og:image:height for Facebook OpenGraph images
 */

if ( class_exists( 'WPSEO_OpenGraph_Image' ) ) {
    add_filter( 'wpseo_opengraph', function () {
        function get_image_id( $image_url ) {
            global $wpdb;
            $attachment = $wpdb->get_col( $wpdb->prepare( "SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url ) );
            return $attachment[0];
        }
        global $wpseo_og;
        $opengraph_images = new WPSEO_OpenGraph_Image( $wpseo_og->options );

        foreach ( $opengraph_images->get_images() as $img ) {
            // check if image already has dimensions so it doesn't output duplicate tags
            if ( empty( $opengraph_images->get_dimensions() ) ) {
                $ogimg = wp_get_attachment_image_src( get_image_id( $img ), 'original' );
                $wpseo_og->og_tag( 'og:image:width', $ogimg[1] );
                $wpseo_og->og_tag( 'og:image:height', $ogimg[2] );
            }
        }
    }, 32);
}

[aamadmin]

@janvitos above two solutions u are also suggesting for me to do ?

[stodorovic]

Related to: #4313

First post with code is example of changing of Yoast SEO plugin which isn't recommended (it'll be overwritten in next update, etc...) and maybe it's better to @janvitos removes it to avoid confusing of visitors.

@aamadmin Second code is possible to add into functions.php (child theme) which is only correct solution for you. If you don't have child theme, you can create simple plugin - http://www.wpbeginner.com/beginners-guide/what-why-and-how-tos-of-creating-a-site-specific-wordpress-plugin/

[janvitos]

Hi @stodorovic, I'll remove the first code snippet, though I simply provided it to show a working solution.

[janvitos]

@aamadmin, you can try using the solution I provided above. Put that piece of code in your functions.php file if you have a child theme and see if it fixes your problem.

[aamadmin]

No luck on me.. i have added above code in functions.php, og:image:height, og:image:width appears but still i am getting same error when i debug....

http://www.tulucinema.com/shivu-ujire-biography/

Provided og:image URL, http://www.tulucinema.com/wp-content/uploads/2017/05/SHIVU-UJIRE-Biography.jpg could not be downloaded because it exceeded the maximum allowed sized of 8Mb, wherein my image size is 200kb.

[thulshof]

Closing - this issue is a duplicate of https://github.com/Yoast/wordpress-seo/issues/2151

[janvitos]

Hi @thulshof, I believe this issue is different than #2151. That ticket was to add the og:image:width and og:image:height tags to featured images, which has been done and works, but my ticket is to add those tags to the explicitly specified Facebook Images that you can seperatly specify when creating a post. Like @stodorovic mentioned, it is related to #4313.

Please look at this screenshot for clarification: http://www.ipnoze.com/screenshot.jpg

Thank you.

[janvitos]

@aamadmin, your issue seems unrelated to this ticket, but I can provide some guidance.

After visiting your link, I found out that your og:image is 300x300, which is too small and the wrong size for Facebook featured images.

This is the image that Facebook sees: http://www.tulucinema.com/wp-content/uploads/2017/05/Shivu-Ujire-300x300.jpg

As mentioned in an article written by Facebook itself found here https://developers.facebook.com/docs/sharing/best-practices, "Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images. Images can be up to 8MB in size."

Your image should be 1200 x 630 pixels, or at least 600 x 315, and NOT 300 x 300. I believe that's why Facebook is throwing the error message.

If you want to verify yourself, please check your links using the Facebook debugger tool located here: https://developers.facebook.com/tools/debug/sharing/

Further troubleshooting is outside the scope of this ticket.

[aamadmin]

@janvitos debugger suppose to use this og:image i set in Yoast SEO http://www.tulucinema.com/wp-content/uploads/2017/05/SHIVU-UJIRE-Biography.jpg

Error i am getting is og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'http://www.tulucinema.com/wp-content/uploads/2017/05/Shivu-Ujire-300x300.jpg' will be used instead. Consult http://developers.facebook.com/docs/sharing/webmasters/crawler for more troubleshooting tips.

This issues i am facing from last two weeks, earlier i was using plugin without any errors! but now all of my old articles also not showing my images which has size 1200 x 630.

We tried to go more smaller in this new article with size (802 x 420) http://www.tulucinema.com/film-namma-kusalda-javanyer-audio-launch/ not at all working..

[janvitos]

@aamadmin, try using this file instead and see what happens : www.ipnoze.com/SHIVU-UJIRE-Biography-NEW.jpg

I simply opened your file in Photoshop and saved it again as JPG with Quality setting of 80.

Maybe Facebook is not recognizing your images because of the format or quality settings.

[aamadmin]

@janvitos thanks for the quick reply... presently image is showing blank...

https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fwww.tulucinema.com%2Fshivu-ujire-biography%2F

Please check this link also showing a wrong.. this is a latest article.. http://www.tulucinema.com/film-namma-kusalda-javanyer-audio-launch/

[janvitos]

@aamadmin, it's working fine for me, see screenshot : http://www.ipnoze.com/screenshot_002.jpg

But you should have download the image I provided and uploaded it to your server first, not used the actual link from my site !

It seems like you will need to re-save your images as JPG and set the quality setting to 80 (100 might be too much for Facebook to handle).

Try that and see how it goes.

[aamadmin]

Re scraped working fine now!! i need a one more favour from u @janvitos http://www.tulucinema.com/wp-content/uploads/2017/06/Namma-Kusalda.jpg please upload and share link just to test ? i guess facebook wont accept sizes which is more thn 200 KB ! this image is 245 kb ! if possible pls ? this image quality is 70 .

[janvitos]

The problem is not the size of the image, it's the quality setting. You need to set the JPG Quality to 80 or less in Photoshop when saving your images. NOT more than 80. I recommend setting it to 80. I always set mine to 80.

Here is your second image: http://www.ipnoze.com/Namma-Kusalda-NEW.jpg

Please download the image first before using it on your site, because I will be deleting those images when our conversation is over.

[aamadmin]

@janvitos its working with your link ! a image which i saved recently quality was http://www.tulucinema.com/wp-content/uploads/2017/06/Namma-Kusalda.jpg 70 quality jpeg! i guess have to check with my host ?

[aamadmin]

same image i used here in my post got an error saying

Provided og:image URL, http://www.tulucinema.com/wp-content/uploads/2017/06/Namma-Kusalda-NEW.jpg could not be downloaded because it exceeded the maximum allowed sized of 8Mb.

any suggestion @janvitos ?

[janvitos]

@aamadmin, there is clearly a problem between your host and the Facebook scraper, because it seems like Facebook cannot download images from your server. But that is way beyond the scope of this post, so unfortunately, I cannot help you any further.

You should verify with your host if they are blocking anything related to Facebook, like Facebook user agents (facebookexternalhit/1.0 or facebookexternalhit/1.1), or any kind of URL related to Facebook.

[aamadmin]

@janvitos thank you so much for your help..

i don't have any idea about facebook user agents (facebookexternalhit/1.0 or facebookexternalhit/1.1).

anyways thank you so much..

if possible please keep my images for two days me to troubleshoot.