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. This is often different from your page's
<title>tag, which may include your site name. - og:description:A brief summary of the page content. Aim for 55-200 characters. Platforms truncate anything longer, and shorter descriptions may not fill the preview card.
- og:image:The preview image URL. This must be an absolute HTTPS URL (not a relative path). The recommended size is 1200x630 pixels for optimal display across all platforms. Images must be publicly accessible. Authentication-protected images won't load.
- og:url:The canonical URL of the page. This should match your
<link rel="canonical">tag.
Additionally, include og:type (usually "website" or "article"), og:site_name, and og:image:alt for accessibility. For Twitter, add twitter:card set to "summary_large_image" for the best visual impact.
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. Keep file sizes under 200KB when possible for faster loading on mobile connections.
Common OG tag mistakes
- Using relative image URLs:
/images/og.jpgwon't work. Social crawlers need full absolute URLs likehttps://example.com/images/og.jpg. - HTTP instead of HTTPS:All major platforms now require HTTPS for OG images. HTTP images are silently blocked and result in grey placeholder cards.
- Images behind authentication:If your image requires login or returns a 403, social crawlers can't access it. OG images must be publicly accessible from any IP address.
- Wrong image dimensions:Images smaller than 200x200px may not display at all on Facebook. For the best results, always use at least 1200x630px.
- Not testing after deployment:Social platforms cache OG data aggressively. Facebook caches for ~30 days, LinkedIn for up to 7 days. Always test your tags after deploying changes.
- Missing Twitter Card tags:While X falls back to OG tags, you lose control over how your content appears in tweets. Always add
twitter:cardandtwitter:imagefor full control.
How the OG Score is calculated
Our OG Score is a 0-100 rating that measures how well your page's Open Graph tags are configured for social sharing. The score is split into two categories: Essential tags (worth up to 80 points) and Supplementary tags (worth up to 20 points).
Essential tags (80 points)
These are the four tags every page must have. Each is worth 20 points. A fully passing check earns the full weight; a warning (e.g. title too long) earns half; a fail earns zero.
| Tag | Weight | What we check |
|---|---|---|
og:title | 20 pts | Present, between 15-70 characters |
og:description | 20 pts | Present, between 55-200 characters |
og:image | 20 pts | Present, absolute HTTPS URL, at least 1200x630px, publicly accessible |
og:url | 20 pts | Present, valid absolute HTTP/HTTPS URL |
Supplementary tags (20 points)
These tags improve your social previews and give you finer control across platforms. They're individually worth 2-3 points each, but together they make the difference between a good and a perfect score.
| Tag | Weight | What we check |
|---|---|---|
og:type | 2 pts | Present (e.g. "website", "article") |
og:image:alt | 3 pts | Alt text provided for the OG image (accessibility) |
| Image dimensions | 2 pts | og:image:width and og:image:height declared for faster rendering |
twitter:card | 3 pts | Present (e.g. "summary_large_image") |
twitter:title | 2 pts | Present (warn if missing, since X falls back to og:title) |
twitter:image | 3 pts | Present (warn if missing, since X falls back to og:image) |
og:site_name | 2 pts | Present — identifies your site in preview cards |
| Canonical URL | 3 pts | <link rel="canonical"> present in the <head> |
Scoring logic
- Pass = full points for that check
- Warning = half points (e.g. title present but too long)
- Fail = zero points
The final score is the sum of all earned points, capped at 100. A score of 80+ means your essential tags are solid. A perfect 100 means every tag is present, properly formatted, and optimized for all platforms.
We also fetch and analyze your actual og:image — checking its real dimensions, file size, format, HTTPS status, and accessibility — so the score reflects what social platforms will actually see, not just whether a tag is present.
Frequently asked questions
- What is the ideal og:image size?
- 1200x630 pixels is the recommended size that works well across all major platforms. This gives you a 1.91:1 aspect ratio that Facebook, LinkedIn, and X all display correctly without cropping.
- Do I need both OG tags and Twitter cards?
- Yes, for maximum control. X (Twitter) will fall back to OG tags if Twitter-specific tags are missing, but you may want different titles, descriptions, or images for different platforms. Implementing both gives you full control.
- How do I clear cached OG data on social platforms?
- Facebook: Use the Sharing Debugger tool to scrape fresh data. LinkedIn: Use the Post Inspector. X/Twitter: The Card Validator allows re-scraping. Each platform caches independently, so you need to clear each one separately.
- What happens if og:image is missing?
- The platform will either show a grey placeholder or try to pick a random image from your page. This often results in logos, ads, or irrelevant images being shown, which significantly reduces click-through rates.
- Do OG tags affect SEO?
- OG tags are not direct Google ranking factors. However, they significantly impact click-through rates from social sharing, which drives traffic and engagement signals. Better social previews lead to more shares, more clicks, and more brand visibility.
- Why does my OG preview look different on each platform?
- Each platform has its own rendering engine, image crop ratios, and character limits for titles and descriptions. A 1200x630px image will be displayed differently on Facebook (1.91:1 crop) versus X (2:1 crop). That's why testing across multiple platforms is important.