OG Tag Previewer
Check how your pages look when shared on social media. Preview across Google, Facebook, X, and LinkedIn. With validation and an OG Score.
What are Open Graph tags?
Open Graph (OG) tags are snippets of HTML meta data that control how your web pages appear when shared on social media platforms like Facebook, X (Twitter), LinkedIn, and messaging apps. Originally created by Facebook in 2010, the Open Graph protocol has become the universal standard for social sharing previews.
When someone shares a link, the platform's crawler visits the URL and reads the OG meta tags from the page's <head> section. These tags tell the platform what title, description, and image to display in the link preview card. Without them, platforms will guess, often poorly, by pulling random text and images from your page.
Twitter (now X) extends OG tags with its own twitter:card meta tags that control how links appear in tweets. If Twitter-specific tags aren't present, X falls back to standard OG tags. For maximum control over your social presence, implement both.
Essential OG tags for every page
Every page on your website should include at minimum these four OG tags:
- og:title: The headline shown in the preview card. Keep it between 15-70 characters.
- og:description: A brief summary of the page content. Aim for 55-200 characters.
- og:image: The preview image URL. Must be an absolute HTTPS URL. Recommended size is 1200x630px.
- og:url: The canonical URL of the page.
Additionally, include og:type, og:site_name, and og:image:alt for accessibility. For Twitter, add twitter:card set to "summary_large_image".
Platform-specific requirements
Each platform has different requirements for OG images and content display:
| Platform | Image Size | Aspect Ratio | Title Limit |
|---|---|---|---|
| 1200x630px | 1.91:1 | ~60 chars | |
| X (Twitter) | 1200x675px | 2:1 | ~70 chars |
| 1200x627px | 1.91:1 | ~120 chars | |
| N/A (SERP) | N/A | ~70 chars |
For maximum compatibility, use 1200x630px images in JPEG or PNG format, under 5MB.
Common OG tag mistakes
- Using relative image URLs: Social crawlers need full absolute URLs.
- HTTP instead of HTTPS: All major platforms now require HTTPS for OG images.
- Images behind authentication: OG images must be publicly accessible.
- Wrong image dimensions: Images smaller than 200x200px may not display on Facebook.
- Not testing after deployment: Social platforms cache OG data aggressively.
- Missing Twitter Card tags: Always add twitter:card and twitter:image for full control.
How the OG Score is calculated
Our OG Score is a 0-100 rating. The score is split into Essential tags (up to 80 points) and Supplementary tags (up to 20 points).
Scoring logic
- Pass = full points
- Warning = half points
- Fail = zero points
A score of 80+ means your essential tags are solid. A perfect 100 means every tag is present, properly formatted, and optimized.
Frequently asked questions
- What is the ideal og:image size?
- 1200x630 pixels is the recommended size that works well across all major platforms.
- Do I need both OG tags and Twitter cards?
- Yes, for maximum control. Implementing both gives you full control over how your content appears on each platform.
- How do I clear cached OG data?
- Facebook: Sharing Debugger. LinkedIn: Post Inspector. X: Card Validator. Each caches independently.
- What happens if og:image is missing?
- The platform will show a grey placeholder or pick a random image from your page.
- Do OG tags affect SEO?
- Not directly, but they significantly impact click-through rates from social sharing.
- Why does my preview look different on each platform?
- Each platform has its own rendering engine, image crop ratios, and character limits.