Hello,
Thank you for contacting Rank Math and bringing your concern to our attention. I’m sorry for any inconvenience this issue may have caused you.
Could you please share the URL of the image you are using for that page?
Meanwhile, please ensure that the image file format you are uploading is only between jpeg, gif, or png as per Opengraph Standards.
Here’s a link for more information:
https://rankmath.com/kb/open-graph-image-not-displaying/#num-4-2-image-dimensions-image-format
I hope that helps.
Thank you.
Hello,
I have updated the sensitive data as requested. Can you please check further?
Thank you.
Hello,
It seems to be working fine on our end:
https://i.rankmath.com/i28qfG
Assuming you are using the latest version of all the plugins and the themes (please update if not yet), it would seem like a conflict with one of the plugins or the theme you are using.
To determine that, please follow this troubleshooting guide:
https://rankmath.com/kb/check-plugin-conflicts/
Here is a video you can follow as well: https://www.youtube.com/watch?v=FcIWRhcUP2c
Only the site admin would know and your users won’t be affected by this troubleshooting.
If the issue persists, please edit the first post on this ticket and include your WordPress & FTP logins in the designated Sensitive Data section.
Please do take a complete backup of your website before sharing the information with us.
It is completely secure and only our support staff has access to that section. If you want, you can use the below plugin to generate a temporary login URL to your website and share that with us instead:
https://wordpress.org/plugins/temporary-login-without-password/
You can use the above plugin in conjunction with the WP Security Audit Log to monitor what changes our staff might make on your website (if any):
https://wordpress.org/plugins/wp-security-audit-log/
Please do take a complete backup of your website before sharing the information with us.
We really look forward to helping you.
Hello,
I realized that the testing video provided from Prabhat, there is only one “og:image” meta tag.
However, there are two “og:image” meta tags on my website, they are “og:image” and “og:image:secure_url”. Is that normal? Any settings that I have missed and need to be set?
Hello,
Those are two different meta tags and are added intentionally. In my case, I tested the page on a local installation having HTTP protocol and that is the reason why the “og:image:secure_url” tag was not added as it required HTTPS.
I checked the source of your landing page and it has a single “og:image” tag, which is fine.
Please proceed with the conflict test and see if that helps. If not, as requested, you can share the logins so that we can have a closer look.
Looking forward to hearing back from you.
Thank you.
Hello RankMath team,
According to my company policy, I cannot share you the LIVE site login details. I have cloned the website to a temporary DEV server. The DEV site has the same OG image issue only on landing pages. Login details are updated in the Sensitive Data section. Thank you
Hello,
I have logged in to your site and while I can see the issue, I could not find what is causing it. Nevertheless, I have added a piece of code in the functions.php file of your child theme, and that should fix the issue.
This is the code I inserted:
// Fix Rank Math OG data issue.
add_action( "rank_math/opengraph/facebook/add_additional_images", function( $handler ) {
if ( $handler->has_images() ) {
return;
}
$custom = get_post_meta( $the_id, 'rank_math_facebook_image', true );
if ( ! $custom ) {
return;
}
$handler->add_image( $custom );
});
This code will add the correct og:image tag, but only if two conditions are met:
1. There is no og:image already present.
2. A custom Facebook image is selected in the Social meta area, in the Rank Math control panel.
I have tested it on the following URL: http://18.163.200.140/endocrine-and-growth-evaluation/
I selected a Facebook image for this post. Without the custom code there was no og:image tag showing in the source code, but after adding the code, it appeared.
You can also make the same change on your live site.
Hope that helps.
Thank you!!! Inspired by Balazs’s code, I modified the code as below and now the OG image can be overwritten by the featured image.
add_filter( "rank_math/opengraph/facebook/image", function( $attachment_url ) {
$get_featured_image = get_the_post_thumbnail_url($the_id);
if ( ! $get_featured_image ) {
$attachment_url = "/wp-content/uploads/2022/03/og-logo-image.png"; // fallback OG image
} else {
$attachment_url = $get_featured_image;
}
return $attachment_url;
});
One more question: is there a way to get the fallback OG image link in Rank Math? So that the developer doesn’t need to touch the code if the fallback OG image is changed in future.
Hello,
You can get the fallback og:image value, as set in Rank Math > Titles & Meta > OpenGraph Thumbnail, with the following code:
$fallback_image_url = RankMath\Helper::get_settings( 'titles.open_graph_image' );
Hope that helps.
Thank you! I can get the fallback OG image value now.
Also, I would like to show the “og:image:alt” tag. Somehow the “og:image:alt” tag is missing on LIVE site but works fine on DEV site. Can you please help to check? thanks
Hello,
You can adjust the code I shared in my first response to include the alt value. You would need to edit the following line:
$handler->add_image( $custom );
Change it like this:
$handler->add_image( [ 'url' => $custom, 'alt' => 'Your alt value' ] );
Hope that helps.
It works perfectly!! Thank you so much!! Have a great day 🙂
Hello,
Thanks for getting back.
We will keep this ticket open until you confirm that your issue is resolved. Let us know if you need any further assistance with this.
Looking forward to hearing from you.
Hello,
Since we did not hear back from you for 15 days, we are assuming that you found the solution. We are closing this support ticket.
If you still need assistance or any other help, please feel free to open a new support ticket, and we will be more than happy to assist.
Thank you.
