Make your links
look right.
Open Graph and link preview guides for the title, image, and description people see when you share a page.
Something broken? Start with the link preview troubleshooting guide, or check your public URL first.
Foundations
Understand the tags before changing them.
- What Is Open Graph?
Understand the tags behind a shared link.
- How to Add Open Graph Tags
Set up page metadata in HTML, a CMS, or a framework.
- Open Graph vs Twitter Cards
Understand the two sets of sharing metadata.
- Open Graph and SEO
Separate sharing metadata from search appearance.
- Common Open Graph Mistakes
Find conflicting tags, missing values, and bad URLs.
Troubleshooting
Follow the symptom to the page, image, or platform.
- Discord Link Preview Not Working
Check settings, permissions, and website metadata.
- OG Image Not Showing on LinkedIn
Inspect image access and LinkedIn’s fetched result.
- Slack Links and Previews Not Working
Separate a click problem from a missing unfurl.
- Twitter / X Card Image Not Showing
Work through card metadata and image fetching.
- WhatsApp Link Preview Not Updating
Check the live page before investigating stale previews.
- Facebook Sharing Debugger Alternatives
Understand which tool can verify which result.
- How to Investigate Open Graph Cache
Compare live metadata with a platform’s stored preview.
- Link Preview Not Working? Find Where It Breaks
Diagnose a missing or wrong link preview by checking the page response, metadata, image URL, redirects, and platform cache in order.
- Facebook Link Preview Not Showing? Check These Layers
Find why Facebook shows no link image or an old preview. Check the exact URL, Sharing Debugger, page HTML, image response, and publishing context.
Images
Check the asset behind the preview.
- Open Graph Image Size Guide
Choose dimensions and keep important content visible.
- OG Image URL Invalid or Unreachable? Check the Response
Troubleshoot an invalid or unreachable og:image URL: direct image responses, redirects, permissions, expired signatures, and public accessibility.
Implementation
Get the right metadata into the page response.
- Cloudflare Blocking Link Previews
Investigate crawler access and security events.
- Open Graph Tags in Next.js
Configure page metadata and dynamic share images.
- Next.js Metadata Not Updating
Trace stale output through rendering and caches.
- Open Graph Tags in React and Vite: Fix Missing Previews
See why React or Vite meta tags can appear in DevTools but fail in link previews, and choose static HTML, prerendering, or server rendering.
- Why Every Page Shows the Same Link Preview
Fix product, profile, and article links that all show your homepage preview. Compare route HTML, inherited metadata, redirects, and og:url.
- How to Test Open Graph Tags on Localhost
Check Open Graph metadata locally, then use a public preview deployment or tunnel to test external fetching without confusing localhost and image URLs.
Put the guide to work.
Link preview checker · Meta tag generator · OG image checker · All tools