You've written a great article, hit publish, and shared the link on LinkedIn — only for it to appear as a plain text URL with no image, no title, and no description. This happens because your page is missing Open Graph tags, or they're incorrectly configured. Before you share any link publicly, use the Open Graph Preview Generator to see exactly what the preview will look like and fix any issues in minutes.
Why Open Graph Tags Matter
Open Graph (OG) is a protocol created by Facebook in 2010 that allows web pages to become rich objects in social graphs. Today it's used by virtually every major platform to generate link previews:
- Facebook and Instagram: Show a card with image, title, and description when a link is shared.
- LinkedIn: Displays a prominent image and text preview in the feed — posts with rich previews get significantly more engagement.
- Slack: Unfurls links in channels with an image thumbnail and description.
- iMessage and WhatsApp: Show a rich preview card when you paste a URL in a conversation.
- Discord: Displays the OG image and description when a link is posted.
A page without OG tags relies on each platform's own scraping logic, which often results in wrong images being pulled (like a logo or an unrelated photo), truncated or irrelevant text, or no preview at all.
The Required Open Graph Properties
og:title
The title of your content as it should appear in the preview. This can differ from your page's HTML title tag — use a more compelling, social-friendly version if needed.
og:description
A short description of 2–3 sentences. Facebook shows roughly 200 characters; LinkedIn may show less. Front-load the most important information.
og:image
The image displayed in the preview card. The ideal size is 1200×630 pixels (a 1.91:1 ratio). Facebook recommends a minimum of 600×315 px, but 1200×630 ensures a sharp display on high-density screens. Use JPEG or PNG, and keep the file under 8 MB. Avoid putting critical text near the edges — Facebook and Instagram may crop images on mobile.
og:url
The canonical URL of the page. This should match your canonical link tag and avoid query parameters.
og:type
Defaults to website. For blog articles, use article. For products, use product. The type affects which additional OG properties are relevant.
Twitter Card Tags
Twitter uses its own tag set alongside OG tags. The most important is twitter:card, which should be set to summary_large_image for full-width image previews. Add twitter:site with your Twitter handle to attribute the card to your account. If OG tags are present and Twitter Card tags are missing, Twitter will fall back to the OG values — but explicit Twitter tags give more control.
How to Use the Open Graph Preview Generator
- Go to the Open Graph Preview Generator.
- Enter the URL of the page you want to preview, or manually input the OG tag values.
- Click Preview to see how the link will appear on Facebook, LinkedIn, and Twitter.
- Check for issues: Is the image displaying correctly? Is the title complete, not truncated? Is the description compelling?
- If something is wrong, update the OG tags in your page's HTML
<head>and regenerate the preview.
How to Fix Missing or Broken Previews
If the preview is broken after adding OG tags, the issue is usually one of three things:
- Caching: Facebook, LinkedIn, and Slack cache previews aggressively. Use Facebook's Sharing Debugger (
developers.facebook.com/tools/debug) or LinkedIn's Post Inspector to force a cache refresh. - Image URL issues: The og:image URL must be absolute (starting with https://), publicly accessible, and must not require authentication. Test the image URL directly in a browser.
- Missing og:image dimensions: Some platforms downrank or skip previews if the image doesn't meet minimum size requirements. Stick to 1200×630 px.
A Real-World Example
A software company writes a case study about how a client reduced churn by 40%. Without OG tags, sharing on LinkedIn shows the company logo as the image and "Case Study" as the title — generic and easy to scroll past. After adding a custom OG image (a clean graphic showing "40% churn reduction" in large text) and a compelling og:title and og:description, the same post generates 3× more clicks. The content didn't change — only the preview did.
FAQ
Do I need separate images for Facebook and Twitter?
Not necessarily — 1200×630 px works well for both. However, Twitter's summary card crops to a square on some views, so avoid putting the most important visual information in the corners.
How long does it take for updated OG tags to appear in previews?
Facebook caches previews for several days. Use the Sharing Debugger to force an immediate refresh. LinkedIn's Post Inspector also has a manual scrape option. Twitter typically refreshes within hours.
Can OG tags hurt my SEO?
No. OG tags are not a ranking factor for Google. They only affect how your page appears when shared on social platforms.
What if I don't have an og:image?
Platforms will attempt to find an image on your page automatically. This often results in a logo, advertisement, or unrelated photo. Always specify an og:image explicitly for consistent, controlled previews.