Open Graph Preview
Preview how your content looks when shared on social media.
Open Graph Preview
Preview how your content looks on social media
Open Graph Tags
46/60 characters
108/160 characters
Recommended: 1200x630px
Meta Tags
<!-- Open Graph / Facebook --> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com"> <meta property="og:title" content="Amazing Product - Best Solution for Your Needs"> <meta property="og:description" content="Discover our amazing product that helps you achieve your goals faster and more efficiently than ever before."> <meta property="og:image" content="https://via.placeholder.com/1200x630/3b82f6/ffffff?text=Open+Graph+Image"> <meta property="og:site_name" content="Example Site"> <!-- Twitter --> <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://example.com"> <meta property="twitter:title" content="Amazing Product - Best Solution for Your Needs"> <meta property="twitter:description" content="Discover our amazing product that helps you achieve your goals faster and more efficiently than ever before."> <meta property="twitter:image" content="https://via.placeholder.com/1200x630/3b82f6/ffffff?text=Open+Graph+Image">
Social Media Previews
https://example.com
Amazing Product - Best Solution for Your Needs
Discover our amazing product that helps you achieve your goals faster and more efficiently than ever before.
Twitter / X
Amazing Product - Best Solution for Your Needs
Discover our amazing product that helps you achieve your goals faster and more efficiently than ever before.
example.com
Amazing Product - Best Solution for Your Needs
example.com
What are Open Graph Tags?
Open Graph (OG) tags are HTML meta tags in the <head> of your page that control how your content appears when shared on social media. Facebook created the protocol, and it has since been adopted by LinkedIn, Twitter (via its own Twitter Card variant), Slack, iMessage, and most messaging apps that generate link previews.
Without OG tags, platforms use heuristic guesses — often picking the wrong image or the first few words of body text as the description. Setting them explicitly means your link previews show the right headline, image, and description every time, which significantly improves click-through rates from social shares.
Essential OG Tags to Set
og:titleThe title of your page as it appears in the preview card. Keep it under 60 characters.
og:descriptionA 1–2 sentence summary. Around 155 characters is optimal before truncation.
og:imageThe preview image URL. Recommended size: 1200×630px. Use an absolute URL.
og:urlThe canonical URL for this page — important for de-duplicating shares.
twitter:cardSet to summary_large_image for a big image preview on Twitter/X.
Frequently Asked Questions
Why doesn't my new OG image show on Facebook after updating it?
Facebook caches link previews aggressively. Use the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and click "Scrape Again" to force a cache refresh. LinkedIn has its own Post Inspector tool.
What image size should I use for OG images?
1200×630px is the universally recommended size for og:image. It displays well on Facebook, LinkedIn, and Twitter. Avoid images smaller than 600px wide as they may render as small thumbnails.
Do OG tags help with SEO?
OG tags are not direct ranking signals for Google. However, they improve click-through rates on social media, which drives traffic that can indirectly improve SEO signals like dwell time and backlinks.
Frequently Asked Questions
Common questions about Open Graph Preview