OG Previewer
DeveloperPreview and generate Open Graph meta tags with live previews.
Discussion
Join the discussion
Sign in to share your thoughts and engage with the community.
About this tool
What is the OG Previewer?
When a URL is shared on Facebook, Twitter/X, LinkedIn, Slack, or iMessage, the platform fetches the page's Open Graph (OG) metadata and renders it as a rich link card — with a title, description, and image. Whether that card looks polished or broken depends entirely on whether the page has correct OG tags in its <head>.
The OG Previewer lets you fetch and inspect the OG metadata of any public URL, edit the values, and preview exactly how the link card will appear on different platforms — before sharing or deploying.
How to Use the OG Previewer
- Enter a URL and click Fetch. The tool requests the page's metadata and extracts all OG tags it finds.
- Review the parsed tags. The tool displays every
og:property found on the page — title, description, image, URL, type, site name, locale, and any others. - Edit any values. Override the fetched values to test how different titles, descriptions, or images would look — useful for planning copy before deploying changes.
- Check the platform previews. The tool renders how the link card will appear on Facebook, Twitter/X, and LinkedIn, accounting for each platform's different card dimensions and text truncation rules.
- Copy the generated HTML. The tool outputs the complete set of
<meta>tags ready to paste into your page's<head>.
Open Graph Tags Explained
og:title — the title displayed in the link card. This can and often should differ from the page's <title> tag — it should be written for sharing rather than for the browser tab.
og:description — the subtitle or body text in the link card. Keep it under 160 characters; most platforms truncate longer descriptions.
og:image — the image displayed in the card. This is the single most important OG tag for engagement — links with images get significantly higher click rates than those without. Recommended size: 1200×630 pixels.
og:url — the canonical URL of the page. Should match the actual page URL to avoid confusion when content is accessed through redirects or tracking parameters.
og:type — the type of content: website, article, video.movie, etc. Affects how some platforms display the card.
og:site_name — the name of the site, displayed separately from the title in some platform card layouts.
Twitter/X Card Tags
Twitter uses its own card tags alongside OG tags. The key ones:
twitter:card— card type:summary,summary_large_image,app, orplayertwitter:title— falls back toog:titleif not settwitter:description— falls back toog:descriptionif not settwitter:image— falls back toog:imageif not set
The previewer shows both OG and Twitter card rendering, including the difference between summary (small square image) and summary_large_image (full-width image) card formats.
Common Issues and Fixes
Image not showing — the image URL must be absolute (https://), publicly accessible, and ideally at least 200×200 pixels. Social crawlers don't follow redirects for images.
Stale cache — platforms cache OG data aggressively. After updating tags, use Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a re-fetch.
Wrong title or description — if a platform is showing different text than your OG tags, it may be using the page <title> or <meta name="description"> as a fallback. Make sure OG tags are present and correctly formatted.
Privacy
URL fetching is done to retrieve public metadata only. No URLs entered or metadata retrieved are stored or logged.