OG Preview Tester: Preview Social Media Cards for Twitter, LinkedIn, and Facebook
Open Graph meta tags determine how your pages look when shared on social media. A missing og:image means your link appears as plain text. A title over 60 characters gets truncated. A missing twitter:card means Twitter ignores your og tags entirely.
Paste any HTML meta tags and instantly see accurate previews of how your page will appear as a card on Twitter (X), LinkedIn, and Facebook - plus a detailed analysis of missing or suboptimal tags with specific fix instructions.
Each platform reads a specific combination of meta tags to build its card:
Essential OG Tags Checklist
og:title - Required. Under 60 characters. Used by all platforms.
og:description - Recommended. Under 200 characters for best display.
og:image - Strongly recommended. 1200x630px PNG or JPG. Publicly accessible URL.
og:url - Recommended. The canonical URL of your page.
og:type - Recommended. Usually 'website'.
twitter:card - Required for Twitter image cards. Use 'summary_large_image'.
twitter:image - Required for Twitter. Can be same as og:image.
Platform-Specific Differences
Twitter/X - Requires its own twitter:* tags. Falls back to og:* if twitter:* missing but may not display image. Truncates title at ~70 chars.
LinkedIn - Uses og:* tags. Aggressively caches images (clear via Post Inspector). Best image: 1200x627px.
Facebook - Uses og:* tags. Prefers images at least 600x315px. Reads og:site_name for the domain label.
Practical Examples
Blog article with perfect OG
- 1.og:title: Under 60 chars, contains keyword
- 2.og:image: 1200x630px custom image with article preview
- 3.twitter:card: summary_large_image for prominent display
SaaS landing page
- 1.og:type: website
- 2.og:image: Product screenshot or hero image
- 3.twitter:site: @yourhandle for brand attribution on Twitter
Frequently Asked Questions
What are Open Graph (OG) meta tags?
Open Graph meta tags are HTML meta tags (defined by Facebook in 2010) that control how your page is displayed when shared on social media. Tags like og:title, og:description, og:image, and og:url tell platforms like Facebook, LinkedIn, and Twitter how to build the share card for your page.
Why does my link look bad when shared on Twitter?
Twitter requires specific twitter:card, twitter:title, twitter:description, and twitter:image meta tags. Without twitter:card, Twitter falls back to a basic text link with no image. Without twitter:image, no image appears even if og:image is set.
What image size should I use for og:image?
The recommended og:image size is 1200x630 pixels (roughly 1.91:1 aspect ratio). This displays well on all platforms. Minimum is 600x315px. Images smaller than 600x315 may not display on Facebook. Twitter summary_large_image cards show images at approximately 500x261px.
What is twitter:card and which value should I use?
twitter:card defines the type of Twitter card. summary_large_image shows a large image above the text - use this for articles, landing pages, and content with strong visuals. summary shows a small square thumbnail - use this for apps or products. app and player are for specific use cases.
Does this tool actually fetch my page?
No. This tool only parses the HTML you paste manually. It does not make any network requests or fetch URLs. To test a live page, view its source code (Ctrl+U in browser), copy the head section, and paste it here.
What is og:site_name?
og:site_name specifies the name of your website as a whole, separate from the individual page title. For example, og:title might be 'How to Bake Bread' while og:site_name is 'Recipe Hub'. Facebook and LinkedIn display site_name below the card.
Why is my og:image not showing on LinkedIn?
LinkedIn has strict image caching. After updating og:image, use the LinkedIn Post Inspector (linkedin.com/post-inspector) to clear their cache. Also ensure your image is publicly accessible (not behind authentication) and at least 1200x627px for best results.
What is og:type and what values are supported?
og:type describes the type of content. Common values: website (default, for homepages and landing pages), article (for blog posts and news), product (for e-commerce), video.movie, music.song. For most pages, website is correct.