Network & Web Tools
Open Graph Preview Online Free
Extract common Open Graph and Twitter Card fields from pasted HTML and review a practical social sharing preview.
Preview Open Graph metadata
Paste a page's HTML source to extract common Open Graph and Twitter Card fields locally.
Website preview
No title detected
No description detected
No canonical sharing URL detected
Missing recommended fields
og:title, og:description, og:image, og:url
- title
- Not found
- description
- Not found
- image
- Not found
- url
- Not found
- siteName
- Not found
- type
- Not found
- twitterCard
- Not found
About this tool
Open Graph metadata controls how a page may appear when shared on social networks, messaging apps and collaboration tools. This browser-based inspector helps catch missing titles, descriptions, images and URLs before publishing.
Common use cases
- ✓ Review metadata during a website launch.
- ✓ Check social cards before sharing a blog article.
- ✓ Compare title and description length at a glance.
- ✓ Audit HTML generated by a CMS or framework.
How to use it
- Copy the page HTML source.
- Paste it into the editor.
- Review the extracted fields and preview card.
- Add or correct missing metadata in your page template.
Important interpretation notes
- • Social platforms may cache an older card after your page changes.
- • Use absolute HTTPS image URLs that are publicly accessible.
- • The final crop and text truncation vary by platform and device.
Related Network & Web Tools
Frequently asked questions
What is Open Graph metadata?
Open Graph tags describe the title, description, image, URL and content type that social platforms may use when a page is shared.
Does this tool fetch a live webpage?
No. Paste the page HTML source and it is parsed locally in your browser.
Which tags are most important?
A clear og:title, og:description, absolute og:image URL and canonical og:url form the core sharing card.
Why can a social platform show an old preview?
Platforms often cache metadata and images, so changes may require a platform-specific refresh or debugger tool.
Does the preview exactly match every social network?
No. Each platform crops images and truncates text differently; this is a practical content preview.
What is twitter:card?
It tells X/Twitter which card layout to consider, such as summary or summary_large_image.