386+ Tools Comprehensive Tools for Webmasters, Developers & Site Optimization

Social Share Preview - Preview Open Graph and Twitter Cards

Social Share Preview

Enter any URL to see how it will appear when shared on social media
What are Social Share Previews?

When you share a link on social media platforms like Facebook, Twitter, or LinkedIn, these platforms don't just show the raw URL. Instead, they display a rich preview card with a title, description, and image. These previews are generated from special meta tags in your webpage's HTML—specifically Open Graph tags (for Facebook and LinkedIn) and Twitter Card tags (for Twitter).

This Social Share Preview tool extracts and displays these meta tags, showing you exactly how your webpage will appear when shared on different social platforms. It helps you verify that your social metadata is correctly configured and creates attractive, engaging previews.

Why Social Meta Tags Matter

Properly configured social meta tags are crucial for:

  • Click-Through Rates: Attractive previews with compelling images and descriptions get more clicks
  • Brand Control: You control exactly what users see, rather than letting platforms guess
  • Professional Appearance: Rich previews look more polished and trustworthy
  • Traffic Generation: Better social sharing leads to more referral traffic
  • Content Marketing: Optimized shares amplify your content's reach
How to Use This Tool
  1. Enter the URL of the webpage you want to preview.
  2. Click Preview Social Cards to fetch and analyze the page.
  3. Review the Open Graph tags (for Facebook/LinkedIn) and Twitter Card tags.
  4. Check the preview boxes to see how your content will appear on each platform.
  5. Copy the results for documentation or share with your team.
Understanding the Results

Open Graph Tags: Used primarily by Facebook, LinkedIn, and other platforms. Key tags include:

  • og:title - The title that appears in the share preview
  • og:description - The description text below the title
  • og:image - The image displayed in the preview (recommended: 1200×630 pixels)
  • og:url - The canonical URL of the page
  • og:type - The type of content (website, article, product, etc.)
  • og:site_name - Your website or brand name

Twitter Card Tags: Twitter-specific tags that work alongside or override Open Graph tags:

  • twitter:card - The card type (summary, summary_large_image, etc.)
  • twitter:title - Title for Twitter (falls back to og:title if not specified)
  • twitter:description - Description for Twitter
  • twitter:image - Image for Twitter
  • twitter:site - Your Twitter handle (@username)
  • twitter:creator - The content creator's Twitter handle
Example Implementation

Here's what a properly configured webpage's <head> section should include:

<!-- Open Graph Tags --> <meta property="og:title" content="10 Tips for Website Performance" /> <meta property="og:description" content="Learn proven techniques to speed up your website and improve user experience." /> <meta property="og:image" content="https://example.com/images/performance-tips.jpg" /> <meta property="og:url" content="https://example.com/performance-tips" /> <meta property="og:type" content="article" /> <meta property="og:site_name" content="Web Dev Blog" /> <!-- Twitter Card Tags --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="10 Tips for Website Performance" /> <meta name="twitter:description" content="Learn proven techniques to speed up your website and improve user experience." /> <meta name="twitter:image" content="https://example.com/images/performance-tips.jpg" /> <meta name="twitter:site" content="@webdevblog" />
Real-World Use Cases

Scenario 1: Blog Post Optimization
You've written a comprehensive blog post and want to maximize its social media reach. You use this tool to verify that your Open Graph and Twitter Card tags are correctly configured, showing the right title, compelling description, and attractive featured image. You make adjustments until the preview looks perfect.

Scenario 2: E-commerce Product Pages
You're launching a new product and want shares to look great on social media. This tool helps you verify that product images, titles, and descriptions are properly configured for social sharing, ensuring potential customers see professional, appealing previews.

Scenario 3: Content Marketing Campaign
Before launching a content marketing campaign, you use this tool to check all landing pages. You discover some pages are missing og:image tags, resulting in poor previews. You add appropriate images to all pages before the campaign launches.

Scenario 4: Client Website Audit
As a consultant, you're auditing a client's website. This tool reveals that their pages have no social meta tags at all, meaning shares show generic, unappealing previews. You recommend implementing proper Open Graph and Twitter Card tags across their site.

Scenario 5: Debugging Share Issues
Users report that when they share your homepage, the wrong image appears. You use this tool to check what social platforms are seeing and discover an outdated og:image URL. You update it and verify the fix.

Best Practices for Social Meta Tags
  • Always Include Core Tags: At minimum, include title, description, and image for both OG and Twitter
  • Image Specifications:
    • Facebook/OG: 1200×630 pixels (1.91:1 ratio)
    • Twitter Summary Card: 120×120 pixels minimum, 1:1 ratio
    • Twitter Large Image: 280×150 pixels minimum, 2:1 ratio
  • Use Absolute URLs: Always use full URLs for images (https://example.com/image.jpg), not relative paths
  • Keep Descriptions Concise: 155-160 characters work best for most platforms
  • Unique Tags Per Page: Each page should have unique, relevant meta tags
  • Test Before Publishing: Always verify tags before launching important content
  • Update for Campaigns: Refresh tags for time-sensitive promotions or seasonal content
Common Mistakes to Avoid
  • Missing Images: No og:image tag results in generic, unappealing shares
  • Wrong Image Size: Images that are too small appear pixelated or are rejected
  • Relative Image URLs: Social platforms need absolute URLs to fetch images
  • Generic Descriptions: Using the same description across all pages
  • Title Too Long: Titles over 60 characters may be truncated
  • Incorrect Card Type: Using wrong Twitter card type for your content
  • Not Updating Cache: Forgetting that platforms cache metadata (need to refresh via debugging tools)
Refreshing Cached Social Metadata

Social platforms cache your metadata to improve performance. If you've updated your tags but still see old previews, use these debugging tools:

These tools let you force-refresh the cached metadata and see updated previews.

Dynamic Social Meta Tags

For dynamic websites (blogs, e-commerce, etc.), generate meta tags programmatically:

  • Use your CMS or framework to dynamically insert tags based on page content
  • For WordPress, use SEO plugins like Yoast or Rank Math
  • For custom sites, use server-side templating to inject appropriate tags
  • Ensure each product, post, or page has unique, relevant metadata
Measuring Social Sharing Success

After optimizing your social meta tags:

  • Monitor referral traffic from social platforms in Google Analytics
  • Track click-through rates on social posts using platform analytics
  • A/B test different images and descriptions to see what resonates
  • Use UTM parameters in og:url to track specific campaigns
  • Monitor engagement metrics (likes, shares, comments) on social posts
Related Tools