OpenGraph Preview - Preview OG Tags Online

Preview meta tags when sharing links on social networks

OpenGraph Preview - Meta Tags Preview Tool When Sharing Links on Social Networks

Tool to preview OpenGraph meta tags of any URL online for free. Shows the preview exactly like Facebook and Twitter will show when you share a link. Check og:title, og:description, og:image, og:url, og:site_name, og:type. Detect missing or suboptimal meta tags. Debug social sharing issues. Optimize CTR when sharing links on social media.

Outstanding features

Fetch and display all OpenGraph meta tags from the URL
Preview main exactly as Facebook will display it
Preview main exactly as Twitter Cards will display
Display og:title - title when sharing
Show og:description - description when sharing
Show og:image - preview image
Show og:url, og:site_name, og:type
Warning if important meta tags are missing
Fallback to title and meta description without OG tags
Display domain from URL
Processing via proxy to bypass CORS
No login required, completely free

What is OpenGraph and why do we need to check before sharing?

OpenGraph (OG) is a protocol created by Facebook in 2010, allowing websites to control how they are displayed when shared on social networks. When a you shares a link to Facebook, Twitter, LinkedIn, Slack, Discord... these platforms will read OpenGraph meta tags to create a preview card with title, description and image. If the meta tags not correct or missing, the article belonging to you will display badly: Does not have an image, title is cut off, description don't attractive - leads to fewer people clicking. OpenGraph Preview tool helps you check exactly how the link will display BEFORE sharing, so you can fix issues and optimize CTR.

Benefits when used

  • •Increase CTR when sharing links - beautiful preview = more clicks
  • •Debug social sharing issues - find out why the preview is not correct
  • •Optimal og:image - ensures the image displays correctly
  • •Test before launching - no embarrassing sharing
  • •Compare Facebook vs Twitter - see previews on both platforms
  • •Save time - no need to share the real thing to test

How to use OpenGraph Preview

  1. 1Enter the URL of the website to check ando the input box
  2. 2Press Enter or click the search button
  3. 3Wait for the tool to fetch the page's HTML (it may take a few seconds)
  4. 4View Meta Data panel: all OG tags extracted
  5. 5See Facebook Preview: exactly as Facebook will display it
  6. 6View Twitter Preview: exactly as Twitter Cards will display
  7. 7Check for missing tags (shows 'Do not have')
  8. 8If you need to fix it, update the meta tags on the website and test again

Frequently Asked Questions (FAQ)

What is OpenGraph?

OpenGraph (OG) is a metadata protocol created by Facebook in 2010. It allows websites to control how they are displayed when shared on social networks. Main tags: og:title (title), og:description (description), og:image (image), og:url (canonical URL), og:type (content type), og:site_name (website name).

What is the optimal og:image size to be?

Facebook recommends 1200x630 pixels (ratio 1.91:1). Twitter Cards optimized at 1200x600 pixels. Minimum size: 200x200 pixels. Maximum file size: 8MB. Format: JPG, PNG, GIF (not animated). Photos that are too small will not be displayed or will be cropped badly.

Why doesn't Facebook display the correct preview after updating?

Facebook caches OpenGraph data very strongly. After updating the meta tags, you MUST go to Facebook Sharing Debugger (developers.facebook.com/tools/debug) to: 1) Enter the URL, 2) Click 'Debug', 3) Click 'Scrape Again' to force Facebook to fetch again. Otherwise, Facebook will use the old data.

How is Twitter Cards different from OpenGraph?

Twitter has its own system of meta tags: twitter:card (card type), twitter:title, twitter:description, twitter:image. However, Twitter will fallback to OpenGraph if there are no Twitter tags. Best practice: includes both OG tags and Twitter tags for optimization on all platforms.

What values ​​does og:type have?

Common values: 'website' (default), 'article' (blog posts), 'product' (e-commerce), 'video.movie', 'music.song', 'book', 'profile'. og:type helps platforms understand the type of content and can display the appropriate UI.

Is og:url needed?

Have. og:url should be the page's canonical URL. It helps Facebook consolidate likes/shares when the same content has many URLs (http vs https, www vs non-www, trailing slash vs not). og:url should match the canonical tag.

How to test preview for a site that is not yet public?

This tool needs to fetch HTML from public URL. For a site that has not yet been deployed, you can: 1) Deploy to the staging environment, 2) Use ngrok to expose localhost, 3) Manually review meta tags in the HTML source.

Do LinkedIn, Slack use OpenGraph?

Have. LinkedIn, Slack, Discord, Telegram, WhatsApp and most platforms read OpenGraph tags. Some have proprietary tags (LinkedIn: linkedin:owner) but OG tags are foundation. Optimize OG tags = optimize for all platforms.

Related keywords

opengraph previewog tags checkerfacebook previewtwitter card previewsocial media previewmeta tags checkerog:image testershare preview toolfacebook debugger alternativesocial sharing preview

Cooperate immediately with Mavis Digital

We not only design websites, but also help businesses build strong digital brands. Providing comprehensive website design services from design to SEO optimization. Please contact Mavis Digital immediately to create breakthrough, effective and sustainable technology solutions for your business in Ho Chi Minh.

Tools SEO Tools related

Backlink Checker

Check the backlinks of the website.

Canonical Checker

Check the canonical URL tag.

Heading Analyzer

Structural analysis of H1-H6.

Image Crawler

Crawl images from website.

Keyword Density

Analyze keyword density.

Meta Checker

Check Title & Description length.

Meta Refresh Checker

Check meta redirects.

Meta Tag Generator

Create SEO standard meta tags.

OG Image Generator

Generate OpenGraph image from URL.

Redirect Checker

Check the URL redirect string.

Robots Meta Checker

Check noindex/nofollow.

Robots.txt Validator

Check the robots.txt file.