WordPress Open Graph Previewer & Safe Zone Checker
Test how WordPress featured images, Yoast SEO social cards, and RankMath Open Graph tags render across major social networks.
Displayed below main page header or above the tool container. • Zero CLS Container
OG & Twitter Card Image Safe-Zone Previewer1200 × 630 Safe Area
Audit social cards against 60px safe margin buffers, mobile cutouts & aspect ratio crops.
Configured with WordPress & Yoast / RankMath social image aspect ratios, crop boundaries, and meta tags.
Upload Social Image
PNG, JPG, WebPProcessed 100% locally in-browser with zero server uploads
Safe-Zone Overlays & Positioning
Separates the interactive tool output from the deep technical guide. • Zero CLS Container
Direct Answer: WordPress & Yoast / RankMath Social Image Safe Zones
WordPress SEO plugins (Yoast SEO, RankMath, SEOPress) automatically generate og:image tags from your post featured image. If your featured image is sized for a vertical blog header or lacks explicit 1200x630 dimensions, social platforms may downgrade the share to a small square thumbnail card or crop out essential text overlays.
Both Yoast and RankMath provide dedicated 'Social' metabox tabs on every post to upload platform-optimized 1200x630px images separate from the on-page featured image. Ensuring og:image:width and og:image:height are declared prevents social crawler timeouts on first-time shares.
Fixing Missing or Cropped Open Graph Images in WordPress
Optimizing Featured Images vs Custom Social Banners in WordPress
In WordPress publishing workflows, content creators frequently upload 16:9 (1920x1080) or custom banner images as the 'Featured Image'. While this looks great in themes, social networks require exact 1.91:1 aspect ratios.
Furthermore, Twitter's crawler enforces a 5MB image limit, while Facebook requires minimum dimensions of 200x200px (with 1200x630px recommended for high-DPI Retina feeds).
Using this tool, you can check whether your text overlays and call-to-actions sit safely inside the mobile overlay safe boundary.
WordPress functions.php Open Graph Fallback Filter
Add a filter to guarantee all posts output explicit image dimension tags for instant social caching:
add_filter('wpseo_opengraph_image_size', function() {
return array(1200, 630);
});How to Configure & Update Social Sharing Images in WordPress & Yoast / RankMath
- 1
1. Set Custom Facebook & Twitter Images in Yoast / RankMath
In the WordPress post editor, scroll to the Yoast / RankMath metabox, click the 'Social' tab, and upload a dedicated 1200x630px image.
- 2
2. Configure the Global Social Fallback Image
Navigate to Yoast > Settings > Site representation > Social sharing, and upload a default 1200x630 image used whenever a post lacks a featured image.
- 3
3. Verify og:image:width and og:image:height Tags
Check your HTML source code to confirm your SEO plugin outputs width: 1200 and height: 630. This ensures Facebook renders large landscape cards on the very first share.
- 4
4. Test Social Card Previews in Live Crawlers
Use Twitter Card Validator and Facebook Sharing Debugger to confirm correct card rendering before publishing to social channels.
Frequently Asked Questions (WordPress & Yoast / RankMath)
Why is Yoast SEO not outputting the featured image in Open Graph tags?▼
This typically occurs if the featured image is under 200x200px (which Facebook rejects) or if another social plugin (like Jetpack or theme built-in tags) is creating duplicate conflicting og:image tags.
How do I fix the 'The provided og:image properties are not yet available' error?▼
When Facebook crawls an image for the first time, it has to download and inspect it asynchronously, causing the first share to lack an image. You can fix this by explicitly declaring og:image:width (1200) and og:image:height (630) tags in WordPress.
What is the difference between summary and summary_large_image in WordPress?▼
summary displays a small 1:1 square thumbnail next to the title (ideal for square product photos), while summary_large_image displays a prominent 1.91:1 full-width horizontal banner above the title.
Related Tools & Next Workflow Steps
Complementary utilities to streamline your SEO audit, indexing, and content strategy.
Social Meta & OpenGraph Card Simulator
Preview and validate how your link previews look when shared on Twitter (X), Facebook, LinkedIn, and Discord before publishing.
Twitter Card Previewer
Simulate Twitter / X timeline card previews, validate image aspect ratios (1.91:1 & 1:1), and generate exact twitter:card meta tags.
Facebook Open Graph Debugger
Simulate Facebook desktop and mobile feed previews, validate og:image 1.91:1 ratios, and inspect Open Graph tag integrity in real time.
LinkedIn Link Previewer
Inspect LinkedIn feed cards, audit 1200x627 px images, prevent title truncations, and generate certified B2B social meta tags.
Displayed below main page header or above the tool container. • Zero CLS Container