Open Graph Tester

@iannuttall // November 29, 2024 // 134 views

Preview and test your Open Graph tags to make sure your posts appear correctly on social media.

Test URL

Enter a URL to see social media previews

Test and preview your Open Graph tags

Social sharing can make or break your content's reach. When someone shares your page, platforms like Facebook, Twitter, and LinkedIn use Open Graph tags to create rich previews. Bad meta tags mean ugly previews - and fewer clicks.

Our Open Graph tester tool helps you check and preview your OG tags to see how your pages will look when shared. Just input your URL and see instant previews for all major platforms.

Why Open Graph tags matter

Social platforms look for specific meta tags in your HTML to create preview cards. Missing or incorrect tags mean your content shows up with random text and images - or worse, no preview at all.

Good meta tags help you:

  • Control how your content appears when shared
  • Increase click-through rates from social media
  • Keep your brand consistent across platforms
  • Fix preview issues before they hurt engagement

Essential meta tags

Title tags

The title appears at the top of your preview card and in browser tabs. Keep it under 60 characters for best results.

Description tags

Descriptions show up under the title in previews and search results. Aim for 155-160 characters.

Open Graph tags

Facebook and LinkedIn use these to build rich previews:

<meta property="og:url" content="https://practicalprogrammatic.com"> 
<meta property="og:type" content="website">
<meta property="og:title" content="Programmatic SEO course - Learn pSEO with real-world examples"> 
<meta property="og:description" content="Practical Programmatic SEO courses help you to learn programmatic SEO and use code & AI to scale your business."> 
<meta property="og:image" content="https://practicalprogrammatic.com/storage/og-images/example.png">

Twitter card tags

Twitter needs its own tags for optimal previews:

<meta name="twitter:card" content="summary_large_image"> 
<meta property="twitter:domain" content="practicalprogrammatic.com"> 
<meta name="twitter:title" content="Programmatic SEO course - Learn pSEO with real-world examples"> 
<meta name="twitter:description" content="Practical Programmatic SEO courses help you to learn programmatic SEO and use code & AI to scale your business."> 
<meta name="twitter:image" content="https://practicalprogrammatic.com/storage/og-images/example.png">

How our tool helps

Testing meta tags manually is slow and unreliable. Our tool:

  1. Instant preview: See exactly how your page will look on Facebook, Twitter, and LinkedIn
  2. Tag validation: Find missing or incorrect meta tags
  3. Length checking: Get alerts if titles or descriptions are too long
  4. Image validation: Test if your preview images are accessible
  5. Copy-ready code: Generate correct meta tags you can paste into your site

Stop letting bad previews hurt your social reach. Test your meta tags now and fix issues before sharing your content.

Frequently asked questions

What are Open Graph tags?

Open Graph tags are special meta tags that control how your content appears when shared on social media. Originally created by Facebook in 2010, they're now used by most social platforms including LinkedIn, Twitter, and Pinterest to create rich preview cards of your content.

Where should I put meta tags in my HTML?

Meta tags must be placed in the <head> section of your HTML document. Putting them in the <body> will make them invalid and they won't work. Here's the correct placement:

<html>
    <head>
        <!-- Your meta tags go here -->
    </head>
    <body>
        <!-- Your content goes here -->
    </body>
</html>

Why isn't my social preview updating?

Social platforms cache previews to save resources. If you've shared your page before, you might need to clear the cache using these official debugger tools:

What size should Open Graph images be?

Best practices for Open Graph images:

  • Minimum width: 1080 pixels
  • Aspect ratio: 1.91:1 (1200x630px) for most platforms
  • Maximum file size: 8MB
  • Format: JPG or PNG
  • Remember: Different platforms might crop your image differently, so keep important content centered

Do I need both Open Graph and Twitter card tags?

Yes. While Twitter can fall back to Open Graph tags, using Twitter-specific tags gives you more control over how your content appears on Twitter. It also lets you use different images or descriptions for different platforms if needed.

How can I test if my meta tags are working?

Three simple steps:

  1. Use our tool to check your current meta tags
  2. Copy the generated code and update your site
  3. Use the platform debuggers listed above to verify the changes

How often should I update my meta tags?

Update your meta tags whenever you make significant changes to your:

  • Page title or main headline
  • Page content or focus
  • Featured images
  • Target audience or messaging

What happens if I don't use Open Graph tags?

Without Open Graph tags, social platforms will try to guess what content to show in previews. This often results in:

  • Wrong images being shown
  • Outdated or irrelevant descriptions
  • Missing or incorrect titles
  • Poor formatting in social feeds

Can I use different previews for different platforms?

Yes. While Open Graph tags serve as a default, you can customize appearances per platform:

  • Use og: tags for Facebook and LinkedIn
  • Use twitter: tags for Twitter
  • Each can have unique titles, descriptions, and images

Do Open Graph tags affect SEO?

While Open Graph tags don't directly impact search rankings, they can:

  • Improve social engagement, leading to more backlinks
  • Increase click-through rates from social media
  • Help with brand consistency across platforms
  • Provide additional context to search engines