Facebook Open Graph – crop and wrong image

  • Resolved overkill22

    (@overkill22)


    10 years, 2 months ago

    Hi guys,
    first of all, thank you for this plugin, it really rocks!

    I’m noticing an issue and can’t make it right, probably I’m missing something.

    In the Facebook Open Graph under > General settings I’ve set the Open Graph Image Dimensions: 1200×630 – cropped – from center – center.
    My Featured Image is 640×640 in the Media Library, other images in the post are 1280x(>600)

    Theoretically, Facebook shouldn’t take my featured image, but another one >1200px and show the cropped part of that picture starting from the center, without resizing it.

    Actually, it takes and crop the Featured Image in the center (from top to bottom), and align it to the left instead of the center (from left to right). Check this link

    The same result with the Featured Image 1280×1280. Check this link

    In the help you report Note that images in the WordPress Media Library and/or NextGEN Gallery must be larger than your chosen image dimensions.

    I tried to set the Open Graph Image Dimensions: 630×470 – cropped – from center – center. But the result is still the same with the Featured Image 640×640.

    CROP: why the image is cropped from the left instead of the center?
    IMAGE: why the open graph image is the Featured Image (640×640) instead of a bigger one?

    Thank you so much.

    https://wordpress.org/plugins/wpsso/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author JS Morisset

    (@jsmoriss)

    10 years, 2 months ago

    Your message is a bit confusing. Can we take it one issue at a time?

    Let’s start with https://clicksforcakes.com/goddess-affair.

    Here are the Facebook / Open Graph images that WPSSO creates:

    <!-- og:image:1 --><meta property="og:image:secure_url" content="https://clicksforcakes.com/wp-content/uploads/2015/09/Goddess-Affair-05-1200x630.jpg"/>
<!-- og:image:1 --><meta property="og:image" content="https://clicksforcakes.com/wp-content/uploads/2015/09/Goddess-Affair-05-1200x630.jpg"/>
<!-- og:image:1 --><meta property="og:image:width" content="1200"/>
<!-- og:image:1 --><meta property="og:image:height" content="630"/>
<!-- og:image:2 --><meta property="og:image:secure_url" content="https://clicksforcakes.com/wp-content/uploads/2015/09/Goddess-Affair-04-1200x630.jpg"/>
<!-- og:image:2 --><meta property="og:image" content="https://clicksforcakes.com/wp-content/uploads/2015/09/Goddess-Affair-04-1200x630.jpg"/>
<!-- og:image:2 --><meta property="og:image:width" content="1200"/>
<!-- og:image:2 --><meta property="og:image:height" content="630"/>
<!-- og:image:3 --><meta property="og:image:secure_url" content="https://clicksforcakes.com/wp-content/uploads/2015/09/Goddess-Affair-03-1200x630.jpg"/>
<!-- og:image:3 --><meta property="og:image" content="https://clicksforcakes.com/wp-content/uploads/2015/09/Goddess-Affair-03-1200x630.jpg"/>
<!-- og:image:3 --><meta property="og:image:width" content="1200"/>
<!-- og:image:3 --><meta property="og:image:height" content="630"/>
<!-- og:image:4 --><meta property="og:image:secure_url" content="https://clicksforcakes.com/wp-content/uploads/2015/09/Goddess-Affair-02-1200x630.jpg"/>
<!-- og:image:4 --><meta property="og:image" content="https://clicksforcakes.com/wp-content/uploads/2015/09/Goddess-Affair-02-1200x630.jpg"/>
<!-- og:image:4 --><meta property="og:image:width" content="1200"/>
<!-- og:image:4 --><meta property="og:image:height" content="630"/>
<!-- og:image:5 --><meta property="og:image:secure_url" content="https://clicksforcakes.com/wp-content/uploads/2015/09/Goddess-Affair-01-1200x630.jpg"/>
<!-- og:image:5 --><meta property="og:image" content="https://clicksforcakes.com/wp-content/uploads/2015/09/Goddess-Affair-01-1200x630.jpg"/>
<!-- og:image:5 --><meta property="og:image:width" content="1200"/>
<!-- og:image:5 --><meta property="og:image:height" content="630"/>

    Unless you know what you’re doing, you should not change the default maximum of 1 image (you have 5 here).

    Assuming Facebook will use the first image, it would be this one:

    https://clicksforcakes.com/wp-content/uploads/2015/09/Goddess-Affair-05-1200×630.jpg

    Is this the correct image? Correct cropping?

    BTW, this is an incorrect value:

    <!-- og:image:1 --><meta property="og:image" content="https://clicksforcakes.com/wp-content/uploads/2015/09/Goddess-Affair-05-1200x630.jpg"/>

    You should not have an https URL for that meta tag. WPSSO should have prevented this. Do you have somekind of plugin or service modifying (incorrectly) the content of your webpage?

    js.

    Thread Starter overkill22

    (@overkill22)

    10 years, 2 months ago

    Hi JS,
    after some test & trials, I realized that facebook debugger doesn’t show excactly what you will see sharing a post in the actual facebook.
    Here a screenshot of
    Debugger >
    Facebook >

    As you can see in the debugger I see the picture that is cropped but not centered, while on facebook everything goes as it should.

    For the first link https://clicksforcakes.com/goddess-affair, I did some changes and now it is working, but honestly I don’t remember what did I do. I think was a problem with the debugger and maybe the chached images. However, now it is working.

    For the problems that you raised:

    1)I’m using a plugin called WordPress HTTPS by Mike Ems, as suggested by my hosting after the installation of the SSL.
    Why should I have an http instead https for the images?

    2) I didn’t know having more images (5) would be an issue, what does it do? I thought that doing so I had the chance to choose from 5 images once I share the post. However, if you say it is better to have just one, I’ll change the setting.

    Plugin Author JS Morisset

    (@jsmoriss)

    10 years, 2 months ago

    If you’re using og:image:secure_url meta tags, you cannot have https in the non-secure versions (og:image or og:image:url). You should get that fixed, disable that plugin, or disable those meta tags on the SSO Advanced settings page (Pro version required).

    js.

    Thread Starter overkill22

    (@overkill22)

    10 years, 2 months ago

    I removed the plugin causing the redirect, but I do have the rule in the htaccess file:

    RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule .* https://mywebsite.com%{REQUEST_URI} [R,L]

    Is this one ok or should I change something else?

    Plugin Author JS Morisset

    (@jsmoriss)

    10 years, 2 months ago

    Rewrites are fine – they do not affect meta tag values.

    js.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Facebook Open Graph – crop and wrong image’ is closed to new replies.

Tags