How Social Media Platforms Render Link Previews
When you share a link on social media, the platform doesn't just display a bare URL. It fetches the page, reads specific meta tags, and constructs a rich preview card — typically with a title, description, domain, and image. The tags each platform reads, and how it renders the preview, varies significantly. Understanding these differences is the key to making your content look polished across every platform.
Side-by-Side: Facebook vs. Twitter vs. LinkedIn
The three major social platforms all generate link previews, but they use different protocols, different image cropping, and different fallback behaviors. Here's how they compare.
Facebook Link Preview
Facebook Preview
Facebook uses Open Graph (og:) tags exclusively. It ignores Twitter Card tags. The preview displays the og:title (truncated at ~65 characters), og:description (truncated at ~155 characters), and og:image (cropped to a 1.91:1 aspect ratio). Facebook caches previews aggressively — sometimes for 30 days — so updating your OG tags won't change an already-shared link preview until you force a re-scrape.
Twitter Link Preview
Twitter Preview (summary_large_image)
Twitter uses its own twitter: meta tags. If Twitter Card tags are present, Twitter uses them and ignores OG tags for that field. If Twitter Card tags are missing, Twitter falls back to the corresponding og: tags. The summary_large_image card type shows a large banner image above the title. The summary card type shows a smaller square thumbnail to the left of the text.
Twitter prefers a 2:1 aspect ratio (1200×600px) for large image cards, while Facebook and LinkedIn prefer 1.91:1 (1200×630px). This means the "ideal" image dimensions differ by platform.
LinkedIn Link Preview
LinkedIn Preview
LinkedIn primarily uses Open Graph tags, similar to Facebook. However, LinkedIn's image rendering engine is known for aggressive cropping — it sometimes crops images differently than Facebook even when using the same OG image. LinkedIn also has its own post inspector tool for debugging. LinkedIn caches previews for about 7 days.
Platform Comparison Table
| Feature | |||
|---|---|---|---|
| Primary Tags | og: | twitter: (falls back to og:) | og: |
| Image Ratio | 1.91:1 | 2:1 (large) / 1:1 (summary) | 1.91:1 |
| Image Size | 1200×630 | 1200×600 (large) | 1200×627 |
| Title Length | ~65 chars | ~70 chars | ~70 chars |
| Desc Length | ~155 chars | ~200 chars | ~100 chars |
| Cache Duration | ~30 days | ~7 days | ~7 days |
| Debugger Tool | Sharing Debugger | Card Validator | Post Inspector |
Complete Open Graph Tag Reference
Here are all the essential OG tags you should include on every page:
<!-- Required -->
<meta property="og:title" content="Page Title (50-60 chars)">
<meta property="og:description" content="Page description (120-155 chars)">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Image description">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/image.jpg">OG Type Values
The og:type property tells the platform what kind of content you're sharing. It affects how the preview is rendered:
| Type | Use For | Behavior |
|---|---|---|
website | Homepages, landing pages | Standard link preview |
article | Blog posts, news articles | May show author and publish date |
product | E-commerce product pages | May show price and availability |
profile | Person profiles | May show name and username |
video.other | Video content | May embed video player |
music.song | Music tracks | May show audio player |
Debugging Common OG Issues
Wrong Image Showing
This is the most common OG problem. Causes include: the image URL is relative instead of absolute (must start with https://), the image is too small (minimum 200×200 for Facebook), the image format isn't supported (use JPG or PNG, not WebP or SVG), or a social sharing plugin is overriding your OG tags with a different image. Always use absolute URLs and verify the image is accessible without authentication.
Missing or Blank Preview
Blank previews usually mean: the page returned an error (4xx/5xx), the OG tags are missing entirely, the page requires login to access, or a robots meta tag is blocking the social platform's crawler. Check that your page is publicly accessible and that you're not accidentally blocking Facebook's user agent (facebookexternalhit) or Twitter's (Twitterbot).
Stale/Cached Preview
Social platforms cache previews aggressively. To force a refresh:
- Facebook — Use the Sharing Debugger, paste your URL, click "Scrape Again". You may need to click it twice.
- Twitter — Use the Card Validator. Paste the URL and submit.
- LinkedIn — Use the Post Inspector. Enter your URL and inspect.
Image Cropping Issues
Each platform crops images differently. To minimize cropping surprises: keep important content (text, faces, logos) centered in the image with generous padding. Design your OG images with a 1.91:1 safe zone in mind. For images that must look perfect on every platform, consider creating platform-specific images and serving them via your server based on the user agent — though this is complex and usually unnecessary for most sites.
Best Practices for OG Images
- Use a consistent template — Create a branded OG image template with your logo, a consistent color scheme, and a designated area for page-specific text. Tools like Canva and Figma make this easy to scale.
- Include readable text at large size — OG images display at roughly 480px wide on mobile. Any text smaller than 40px at 1200px wide will be unreadable on phones.
- Compress images — Keep OG images under 5MB (Facebook's limit). Use JPEG quality 80-85 for a good balance of quality and file size. Use tools like TinyPNG or Squoosh for compression.
- Use absolute HTTPS URLs — Some platforms reject HTTP image URLs. Always use
https://and the full domain path. - Set og:image:width and og:image:height — Including dimensions helps platforms render the image without having to download it first, speeding up preview generation.
Using the RiseTop Open Graph Checker
Verifying that your OG tags are correct on every platform means checking each platform's debugger individually — a time-consuming process. The RiseTop Open Graph Checker extracts and validates all OG and Twitter Card tags from any URL in one click.
Check your Open Graph tags instantly — validate OG, Twitter Cards, and social previews in one place.
Try Open Graph Checker →The tool fetches any URL, extracts all meta tags (og:, twitter:, and standard HTML meta), validates them against platform requirements, and highlights any missing or problematic tags. It checks image dimensions, verifies absolute URLs, and flags common issues like missing image dimensions or incorrect type values — everything you need to ensure your content looks great when shared on any platform.
Frequently Asked Questions
Why does my link preview look different on Facebook vs. Twitter?
Facebook and Twitter use different protocols to generate link previews. Facebook uses Open Graph (og:) tags, while Twitter uses its own Twitter Card (twitter:) tags. If Twitter Card tags are missing, Twitter falls back to OG tags — but if both are present, Twitter exclusively uses its own tags. LinkedIn also primarily uses OG tags but has its own rendering engine, so the same image may be cropped differently across platforms.
What are the recommended Open Graph image dimensions?
The recommended dimensions are 1200×630 pixels with a 1.91:1 aspect ratio for Facebook and LinkedIn. Twitter prefers 1200×600 pixels with a 2:1 aspect ratio for its large image card. For maximum compatibility across all platforms, use 1200×630 pixels — Twitter will accept this ratio and display it correctly, even if there's a slight letterboxing effect.
How do I force Facebook to update my link preview?
Use Facebook's Sharing Debugger at developers.facebook.com/tools/debug/. Paste your URL, click "Scrape Again" or "Debug", then click "Scrape Again" a second time. Facebook caches link previews aggressively, sometimes for up to 30 days. The debugger forces a fresh scrape. For Twitter, use the Card Validator at cards-dev.twitter.com/validator. For LinkedIn, use the Post Inspector.
Do Open Graph tags affect SEO rankings?
Open Graph tags don't directly affect Google search rankings. Google's crawler doesn't use og: tags for indexing or ranking decisions — it relies on title tags, meta descriptions, and structured data instead. However, OG tags indirectly benefit SEO by improving social sharing click-through rates, which drives more traffic, increases brand exposure, and can lead to more backlinks — all of which positively influence search rankings over time.
What is the difference between og:image and og:image:url?
They serve the same purpose — both specify the preview image for a shared link. og:image is the original property name from Facebook's initial Open Graph specification. og:image:url was introduced later as part of the RDFa specification for more precise property definition. Some parsers recognize only one or the other. For maximum compatibility across all platforms and parsers, include both properties with the same image URL value.