The on-page error “No Twitter Preview Image” occurs when sharing your content on Twitter (now X) produces no preview graphic. This lowers your click-through rate and wastes valuable traffic.

The fix lies in correctly implementing Twitter Cards — a markup standard that controls how your links are displayed on Twitter.

What Are Twitter Cards?

Twitter Cards are meta tags in your website’s HTML code that define how your content appears on Twitter. They control the title, description, and preview image.

Without correctly implemented Twitter Cards, Twitter falls back on standard meta tags — with unsatisfying results. The preview image is usually absent entirely.

Technical Implementation

Required Meta Tags

Add the following meta tags to the <head> section of your website:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@YourTwitterHandle" />
<meta name="twitter:creator" content="@AuthorHandle" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Your Page Description" />
<meta name="twitter:image" content="https://www.example.com/path/to/image.jpg" />

The twitter:image tag is critical for displaying the preview image.

Available Card Types

Card TypeContent ValueUseSummary CardsummaryCompact display with small imageSummary Large Imagesummary\_large\_imageLarge image preview — recommended for blog postsApp CardappPromotion of mobile appsPlayer CardplayerEmbedding video or audio content

For most websites, summary_large_image is the recommended choice, as it provides the strongest visual impact.

Preview Image Requirements

Image format: JPG, PNG, or WebP
Recommended size: at least 800 × 418 pixels
Maximum file size: 5 MB
Aspect ratio: 2:1 for summary_large_image
Absolute URL required (with https://)

Error Diagnosis and Validation

Use the Twitter Card Validator

Before pushing your changes live, test your implementation with the official Twitter Card Validator:

https://cards-dev.twitter.com/validator

The validator shows you:

Whether all required tags are present
How your link will appear on Twitter
Error messages for implementation issues

Enter your page URL and review the result. The validator also refreshes the Twitter cache simultaneously.

Common Error Sources

Relative instead of absolute image path (wrong: /images/image.jpg, correct: https://www.domain.com/images/image.jpg)
Image not publicly accessible (blocked by .htaccess or firewall)
Incorrect attribute syntax (space in “twitter: card” instead of “twitter:card”)
Missing card type in the content attribute
Outdated cached data on Twitter

Fixing Cache Issues

Twitter caches link previews for extended periods. If you corrected meta tags after the fact, Twitter may still display the old version.

Fix: Use the Card Validator. Each validation automatically refreshes the cache. Run the validation two or three times if the preview does not update on the first pass.

For very old URLs, the cache can be more stubborn. In that case, wait 24 hours and validate again.

Open Graph as a Fallback

Twitter also reads Open Graph tags when no Twitter-specific tags are present. A clean implementation uses both standards:

{/* Open Graph */}
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your Description" />
<meta property="og:image" content="https://www.example.com/image.jpg" />
<meta property="og:url" content="https://www.example.com/page" />

{/* Twitter Cards */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://www.example.com/image.jpg" />

This combination works across platforms — Twitter, Facebook, LinkedIn, and other social networks.

Implementation with WordPress

For WordPress websites, an SEO plugin is the easiest path:

Yoast SEO: Separate fields for Twitter Card settings under “Social”
RankMath: Automatic Twitter Card generation with manual override options
All in One SEO Pack: Integrated social media management

These plugins generate the meta tags automatically. You only need to fill in the fields for title, description, and image.

Measurable Value

Correctly implemented Twitter Cards demonstrably improve:

Click-through rate by an average of 30–50%
Engagement rate on tweets linking to your content
Traffic quality through informative previews
Brand recognition through consistent visual presence

The few minutes of implementation effort pay off over time. Every shared link becomes a visually compelling content element.

Checklist: Implement a Twitter Preview Image

1. Set meta tag twitter:card with value summary_large_image
1. Implement meta tag twitter:image with an absolute URL path to the image
1. Provide the image at the correct size (min. 800 × 418 px)
1. Ensure the image is publicly accessible
1. Test the URL in the Twitter Card Validator
1. Refresh the cache by running the validation multiple times
1. Verify functionality with a test tweet

Following this systematic approach permanently fixes the on-page error and gives you greater visibility on Twitter.

Set Up a Twitter Preview Image