Wordpress-seo: og:image:width and og:image:height Open Graph tags missing when Facebook Image is specified (NOT a duplicate of #2151)

Created on 6 Jun 2017 · 7Comments · Source: Yoast/wordpress-seo

PLEASE DON'T CLOSE THIS TICKET AS THIS IS NOT A DUPLICATE OF #2151

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

PLEASE DON'T CLOSE THIS TICKET AS THIS IS NOT A DUPLICATE OF #2151

wait for feedback

Source

janvitos

👍1

Most helpful comment

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);
}

janvitos on 6 Jun 2017

👍4

All 7 comments

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);
}

janvitos on 6 Jun 2017

👍4

As I already wrote in #7199, it's related to #4313.

In #2151, it's partially implemented. (_for the case when featured image is used since it's easy to determine dimensions for_).

Social image (custom selected which is different than featured image) are saved as URL (which could be external) and it's basic issue. @thulshof you can see in #4313:

Because of the requirements of og:image we need to supply a width and height of the image. When the image is located on another domain we cannot (easily) retrieve the dimension information.

Do we have any idea how common it is for people to use image that are not local attachments for that? I agree that ID makes life way easier, but also breaks what's possible with established workflow.

I hope that helps for better understanding.

stodorovic on 7 Jun 2017

@stodorovic, why not just implement the custom selected OpenGraph image exactly the same way as the featured image? Then you could simply use a function similar to the featured image one for the custom selected OpenGraph image.

janvitos on 7 Jun 2017

I don't know primary reason why they used URL, but it's complex to change it now. You can read more in #4313

It's possible that someone uses external URL, but we can't (easily) find how many users use images _which are not local attachments_?

Class WPSEO_OpenGraph_Image supports everything, but there are java scripts and admin classes which should be changed. Probably, Yoast SEO needs to save both fields (ID and URL). I can't say more at this moment. Maybe we can create PR, but it needs a lot of testing.

stodorovic on 8 Jun 2017

Thanks for the info @stodorovic.

I guess I'll be using my patch in the meantime.

janvitos on 9 Jun 2017

👍1

Thank you for reporting this issue. First, let me apologize for not responding until now. Could you let me know why you would want the width and height to be populated? Is there a bug you are currently experiencing?