Previewing your content before publishing is a vital step in maintaining a professional WordPress site. However, many users face the frustrating problem of WordPress show on preview issues, where images, formatting, or layout don’t appear as expected. These glitches can disrupt your workflow, cause delays, and even affect the way your content looks when it goes live. Identifying why the preview isn’t accurate is the first step to fixing the problem.
The good news is that most WordPress show on preview issues are easy to resolve with the right approach. Whether it’s clearing your cache, disabling a conflicting plugin, or adjusting theme settings, simple tricks can quickly restore your preview functionality. In this guide, we’ll walk through effective methods to troubleshoot and fix these issues, ensuring your content displays exactly the way you intend before hitting publish.
What Determines the Preview Image in WordPress?
When WordPress generates a preview, it selects the image based on various factors that depend on your site’s context and settings. The image displayed can be influenced by
- Featured Image: If a post or page has a featured image set, WordPress will use that as the preview image.
- Open graph tags: Plugins like Yoast SEO or Rank Math add Open Graph meta tags to your site. These tags define the image to be displayed in social media previews.
- Default Site Image: If no featured image or Open Graph tag is set, the preview may show a default image, set by your theme or a plugin.
- First Image in the Content: In some cases, WordPress or social platforms will use the first image in your post or page.
- No Image: If none of the above are available, some platforms may show a blank preview or a generic placeholder.
Why Is the Preview Image Important?
Preview images are your content’s face. They can make or break user engagement, especially on Facebook, Twitter, or LinkedIn, where visuals rule.
Benefits:
- Grab Attention: Images are attention-grabbing and get clicks.
- SEO: Properly optimized preview images improve search rankings.
- Social Engagement: Relevant and nice images get shares and likes.
How to Set the Preview Image in WordPress
Here’s how you can make sure the right image appears in your previews:
1. Set a Featured Image
The easiest way to control your preview image is by setting a featured image for your post or page.
- Go to the post editor in WordPress.
- Look for the Featured Image section in the sidebar.
- Upload or select an image and save your post.
2. Use an SEO Plugin to Add Open Graph Tags
To have more control over your preview images, use an SEO plugin. Plugins like Yoast SEO or Rank Math allow you to set Open Graph meta tags.
- Install and activate the plugin.
- Go to the SEO settings of your post.
- Add a custom image in the Social Media section.
3. Set a Default Fallback Image
For posts without a featured image, set the default image that WordPress will use for previews.
- Use a plugin like All in One SEO or write custom code in your theme’s functions.php file to define a fallback image.
Which Open Graph Tags should you use?
Facebook lists 17 OG tags in their official documentation, plus dozens of object types. We’re not going to discuss all of these. Only four are required for Facebook to understand the basics of your page, and there are a couple of others that sometimes help.
Let’s go through these.
1. og:title
- The title of your page.
Syntax
<meta property="og:title" content="Open Graph Meta Tags: Everything You Need to Know" />2. og:url
- The URL of the content.
Syntax
<meta property="og:url" content="https://ahrefs.com/blog/open-graph-meta-tags/" />3. og:image
- The URL of an image for the social snippet.
Syntax
<meta property="og:image" content="https://ahrefs.com/blog/wp-content/uploads/2020/01/fb-open-graph-1.jpg" />4. og:type
- The type of object you’re sharing. (e.g., article, website, etc.)
Syntax
<meta property="og:type" content="article" />5. og:description
- A brief description of the content.
Syntax
<meta property="og:description" content="Learn about 13 features that set Ahrefs apart from the competition." />6. og:locale
- Defines the content language.
Syntax
<meta property="og:locale" content="en_GB" />Preview Image Troubleshooting
Sometimes WordPress doesn’t show the expected image in previews. Here’s how to fix it:
1. Clear Cache
- Caching plugins or social platforms may be storing an old version of your page. Clear your cache using a plugin or the platform’s debugger tool.
2. Check Open Graph Tags
- Use Facebook’s Sharing Debugger or Twitter’s Card Validator to see if the Open Graph tags are correct.
3. Resize Images
Social media platforms have specific dimensions for previewing images. Make sure your image is the recommended size:
- Facebook: 1200×630
- Twitter: 1200×675
- LinkedIn: 1200×627
Tips for Preview Images
- High-Quality Images: Low-quality images are blurry and unprofessional.
- Text and Branding: Add your logo or a short text overlay to your image.
- File Size: Compress your images without losing quality.
- Platform Guidelines: Each platform has its own rules; follow them.
FAQs – What Image Does WordPress Show on Preview?
What if I don’t set a featured image?
If you don’t set a featured image, the WordPress Show on Preview function will usually display the first image found in your content. Some themes or plugins may insert a default fallback image instead, so the preview always has a visual element.
Why is my preview image not showing up on social media?
When the WordPress Show on Preview image isn’t appearing on social media, it’s often caused by cache issues, missing Open Graph tags, or using images that don’t meet required dimensions. Optimizing image size and clearing caches can usually resolve the problem.
Can I have different preview images for different platforms?
Yes, it’s possible to assign different images for each platform. With SEO plugins like Yoast, you can configure the WordPress Show on Preview settings to specify unique images for Facebook, Twitter, and other platforms, ensuring your content looks tailored everywhere.
How can I see my preview image before sharing it?
To check how your WordPress Show on Preview image appears before posting, use tools like Facebook’s Sharing Debugger or Twitter’s Card Validator. These platforms allow you to verify the correct image is attached and troubleshoot any missing or misconfigured metadata.
Can I auto-select a preview image?
Yes, you can automate this process. The WordPress Show on Preview feature can be enhanced with plugins or custom code that applies rules for selecting preview images automatically. This ensures every post gets a consistent, attractive preview without manual setup.
Conclusion
Dealing with WordPress Show on Preview issues can be frustrating, especially when the wrong image, layout, or content appears. Thankfully, these problems often have simple solutions, such as clearing your cache, adjusting featured images, or updating theme and plugin settings. By following easy troubleshooting steps, you can quickly identify the cause and restore accurate previews without unnecessary stress.
When you address WordPress Show on Preview errors properly, you improve both your workflow and your website’s presentation. Consistent previews ensure that what you design is exactly what your visitors see, boosting professionalism and user trust. With the right fixes, your site remains smooth, reliable, and SEO-friendly.
Leave a Reply