This guide comes from a real experience with Alex Makowski’s website. Dennis Yu posted on Twitter. The Open Graph (OG) image for the link showed a play media button overlay, even though there was no video on the page. We needed to investigate and fix the issue. Here’s exactly what happened and how you can resolve or prevent this problem on your own WordPress site.
Introduction
Sharing your website on social media should be seamless and visually appealing. However, unexpected issues like an incorrect overlay on your Open Graph (OG) images can disrupt your content's presentation. For example:
-
Without proper OG tags, your social post might look like this :
-
With proper OG tags, your social post will look like this:
Before we proceed, let's clear some misconceptions. Many might confuse OG tags with Featured Image. OG tags and featured images are not the same, but they are often related. Here’s the difference:
-
Featured Image: A featured image is an image you set in your content management system (e.g., WordPress) to represent a specific post or page. It’s primarily used on your website (e.g., blog posts, articles).
-
OG Tags: OG (Open Graph) tags are snippets of code that control how your content appears when shared on social media. Some tools simplifies this process—instead of manually adding code, you can simply upload or select an image in the plugin settings. An example here is Rank Math Pro.
While the featured image is often used as the default og:image for social sharing, they serve different purposes. You can customize the og:image separately to use a different image for social media if needed.
Note that when you remove or don’t specify an og:image tag, social media platforms (like Facebook and Twitter) look for a fallback image to display. Here’s why this happens:
- Fallback Behavior: Social media platforms require an image for link previews. If no og:image is provided, they default to your website logo or another generic image from your site.
- SEO Plugin Settings: Many SEO plugins (e.g., Rank Math, Yoast) automatically use your website logo as a fallback when no og:image is specified.
The Investigation
Back to our issue here with OG image for the link showing a play media button overlay, even though there was no video on the page. We needed to investigate and fix the issue. Here’s exactly what happened and how you can resolve or prevent this problem on your own WordPress site.
1- Initial Tests:
-
-
We used OpenGraph.xyz and DNSChecker Open Graph Preview to inspect the OG tags.
-
The preview confirmed that the play button was being overlaid on the image.
-
2- SEO Plugin Settings:
-
-
The website uses the Rank Math SEO plugin, so we dove into its settings under Titles & Meta.
-
There's a setting called Default Thumbnail Watermark with three options:
-
Off
-
Play icon
-
GIF icon
-
-
-
The default selection, "Play icon," was causing the issue by overlaying the play button on all OG images.
-
The Fix
3- Update the Rank Math Setting:
-
-
We changed the Default Thumbnail Watermark setting from Play icon to Off.
-
Saved the changes to apply the update.
-
-
Clear the Cache:
-
Cleared the website cache using the WP Rocket cache plugin.
-
-
Retest the Link:
-
Returned to OpenGraph.xyz and DNSChecker Open Graph Preview to confirm the fix.
- Shared the link again on social media—this time, the correct image appeared without the play button.
-
Lessons Learned
-
Why It Happened: The Rank Math SEO plugin's setting for "Default Thumbnail Watermark" caused the play button overlay.
-
Preventing the Issue: Always review and customize default settings in your SEO plugin.
-
Tools to Use: Test OG tags using tools like OpenGraph.xyz and DNSChecker.
If you found this guide helpful and want to dive deeper into structured frameworks for personal and business success, check out our course “The 9 Triangles” on our academy platform. This course provides insights into essential strategies, including personal efficiency, marketing funnels, leadership principles, and more. Learn how to apply concepts like Learn-Do-Teach (LDT) and specialist-business-partner roles to excel in your career and business.