Back to Hub
Social Card Debugger

OpenGraph & Twitter Card Social Previewer

Inspect, debug, and design how your website appears across Facebook, Twitter / X, LinkedIn, Discord, and Google SERP with real-time live previews and 1-click meta tag generation.

Social Meta Editor
Social / SEO Title 0 / 60 chars
Meta Description 0 / 160 chars
Canonical URL
OpenGraph Image URL (1200 × 630 px)
Site Name (og:site_name)
Twitter / X @Handle
Twitter Card Type
Generated Social Meta Code 

            

        


        
        


            
            

            
            

            
            

            
            

            
            

        

    


    
    

        

            Complete Guide to Open Graph (OG) Meta Tags, Image Dimensions & Facebook Debugging
        

        

            When web links are shared on social platforms like Facebook, Twitter/X, LinkedIn, and Discord, the platform's crawler inspects your page's HTML <head> for Open Graph (OG) and Twitter Card meta tags. If tags are missing, misconfigured, or reference improperly sized images, the preview snippet will display blank thumbnails or distorted text, significantly lowering user engagement and click-through rates (CTR).
        


        
1. Standard Open Graph Image Dimensions & Aspect Ratios

        

            Following standard og:image dimensions ensures your preview renders in high-definition across all mobile devices and desktop feed cards:
        


        

            
                

                    Platform / Tag Type
                    Recommended Resolution
                    Aspect Ratio
                    Max File Size
                

            
            
                

                    Facebook / Meta (og:image)
                    1200 × 630 px
                    1.91 : 1
                    8 MB (Ideal < 1MB)
                

                

                    Twitter Large Summary Card
                    1200 × 628 px
                    2 : 1
                    5 MB
                

                

                    Twitter Standard Summary
                    120 × 120 px
                    1 : 1
                    1 MB
                

                

                    LinkedIn Share Post
                    1200 × 627 px
                    1.91 : 1
                    5 MB
                

            
        


        
2. Essential Open Graph Meta Tags Snippet

        
<!-- Primary Meta Tags -->
<title>Page Title | Brand Name</title>
<meta name="title" content="Page Title | Brand Name">
<meta name="description" content="Engaging 150-160 character description of page content.">

<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page-url">
<meta property="og:title" content="Page Title | Brand Name">
<meta property="og:description" content="Engaging 150-160 character description of page content.">
<meta property="og:image" content="https://example.com/assets/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://example.com/page-url">
<meta name="twitter:title" content="Page Title | Brand Name">
<meta name="twitter:description" content="Engaging description for Twitter feed.">
<meta name="twitter:image" content="https://example.com/assets/og-image.png">

    


    
    

      
Frequently Asked Questions

      

        

          What is Open Graph (OG) and why is it important?
          

            The Open Graph protocol was created by Facebook to standardize how web pages are represented when shared across social networks. OG meta tags allow you to control the thumbnail image, title, and description displayed in social feeds.
          

        

        

          What are the optimal og:image dimensions and sizes?
          

            The recommended og:image dimension is 1200 x 630 pixels (a 1.91:1 aspect ratio). The minimum supported size is 600 x 315 pixels. For sharp display on high-DPI screens, keeping images at 1200x630 with file sizes under 5MB (ideally under 1MB in JPG or PNG format) is standard practice.
          

        

        

          How does this tool compare to Facebook Sharing Debugger?
          

            Our OpenGraph Previewer provides an instant visual mockup of how your page appears not just on Facebook, but also across Twitter/X, LinkedIn, Discord, and Google Search results simultaneously, without requiring a Meta Developer login.
          

        

        

          Why is my og:image not showing up when shared?
          

            Common causes include using relative URLs instead of absolute HTTPS links (e.g. 'https://example.com/og.png'), incorrect image dimensions (below 200x200px), crawler blocking in robots.txt, or social network cache delays.
          

        

        

          What are the essential Open Graph tags for every web page?
          

            The four required OG tags are og:title (headline), og:type (usually 'website' or 'article'), og:image (URL to thumbnail), and og:url (canonical URL). Adding og:description, og:image:width, and og:image:height is strongly recommended for optimal layout.