OpenGraph.io

Social Preview & Link Preview Tool — Check Your Social Media Links

Our tool ensures both Social Previews and Link Previews display correctly across Facebook, Twitter, LinkedIn, and other platforms — so your content always looks professional before you hit share.

link preview
link preview
link preview
social preview icon
social preview icon
Meta Tags and Link Previews

Unlock Unlimited Link Previews

Get more from your previews - unlock AI-powered fixes and advanced features.

100 Link Preview Credits
AI-Powered Fixes & Optimization
No Credit Card Required
Create Free Account
📊

Enter a URL and click "Check" to see analysis

We'll analyze your page's Open Graph tags, show you issues, and provide recommendations to optimize your social media previews.

Preview

Copy

What is OpenGraph.io?

OpenGraph.io is a simple API for easy and accurate Open Graph tag retrieval. OpenGraph.io's scraper interprets what a site's Open Graph tags should be, even if they aren't present.

Ready to start unfurling your links with OpenGraph.io?

Get started with 100 free Requests

social media preview example graphic

Perfect Social & Link Previews,
Every Time

Facebook link preview example

Ever shared a link only to see a broken or unoptimized preview?

Our Link Preview Tool ensures your content looks great across social media, messaging apps, and search engines.

🔍 What It Does:

  • ✓ Generates a real-time preview of how your link will appear;
  • ✓ Helps you fix missing images, titles, and descriptions before posting;
  • ✓ Ensures consistent branding and engagement across platforms.

Test your links before you share them — because first impressions matter! 🚀

FAQ

What Are Open Graph Meta Tags?

Open Graph is a protocol introduced by Facebook in 2010 to enable seamless integration between web pages and social media platforms. By using Open Graph meta tags, any web page can function as an object within the Facebook ecosystem, allowing you to control how your website content is displayed when shared on Facebook. Over time, other platforms like Twitter, LinkedIn, and Pinterest have also started recognizing and supporting Open Graph meta tags. These tags ensure that when your content is shared, both link previews and social previews show the right title, description, and image — making your content look polished across all platforms.

How to Add Meta Tags in HTML

Adding meta tags is straightforward. Here's how you can do it:

  1. Use a free tool like OpenGraph.io to generate meta tags for your webpage.
  2. Copy the generated meta tags and paste them within the <head> section of your HTML file.

Correct meta tags ensure your social previews display properly on Facebook, LinkedIn, Twitter, and other platforms.

Can Meta Tags Be Placed in the Body Element?

No, meta tags must be placed within the <head> section of your HTML document. Adding them in the <body> will result in invalid HTML markup and may cause unexpected behavior or prevent social media platforms from recognizing your meta tags.

How to Create and Add Dynamic Open Graph Images?

Manually updating Open Graph (OG) images for every page or blog post can be tedious. Instead, you can automate this process:

  • Use a dynamic Open Graph image generator tool (like OpenGraph.xyz) to create consistent, visually engaging OG images.
  • Choose from customizable templates and link them to your webpage. This allows each page to automatically display unique OG images tailored to its content. This solution ensures your content always stands out on social media without the hassle of manually designing each image.
  • Dynamic images are critical because they control how your social preview thumbnails appear when links are shared.

What are The Recommended Image Dimensions for Open Graph?

To ensure your content looks professional and sharp across platforms:

  • Use images at least 1080 pixels wide for high-resolution displays.
  • For Facebook ads and general sharing, 1:1 aspect ratio images are highly recommended for optimal performance.
  • Correct sizing guarantees that your social previews aren’t cut off or distorted.

Pro Tip: Test your images to confirm they display correctly across different platforms like Facebook, Twitter, and LinkedIn.

Troubleshooting Open Graph Issues

If you encounter issues with Open Graph meta tags not displaying correctly:

  1. Check the meta tags in your HTML code to ensure they are correctly formatted and placed within the <head> section.
  2. Re-scrape Your Website: Platforms like Facebook and LinkedIn often cache previews. Use their debugger tools to clear the cache and update the preview:
  3. Ensure your images meet the recommended dimensions and aspect ratios for optimal display on social media platforms.
  4. If your social preview looks wrong on Facebook or LinkedIn, try clearing the cache and re-scraping the URL

Additional Best Practices for Open Graph Meta Tags

To maximize the effectiveness of your Open Graph meta tags:

  • Set a Default OG Image: If a page lacks a specific image, having a default OG image prevents broken previews.
  • Optimize Image File Size: Large images may slow down load times. Compress OG images without compromising quality.
  • Include OG Type: Use the og:type tag (e.g., website, article, video) to provide context for your content.
  • Use HTTPS for Images: Always host OG images on secure (HTTPS) servers to avoid compatibility issues.

Following these best practices helps you generate consistent social and link previews across all networks.

What is a Social preview?

A Social Preview shows how your content will appear when shared on platforms like Facebook, LinkedIn, or Twitter. It includes the title, description, and image. Checking your social preview ensures your links look professional and attract clicks before you post.

How do I check my Social Media Preview before sharing?

You can paste your URL into our Social Preview Tool to instantly see how it will display across major platforms. This helps you spot missing images, cut-off titles, or incorrect descriptions before publishing.
Free Tools

More free tools

Everything you need to inspect, scrape, and convert the web — no signup required.

Web Scraping Tool

Fetch raw HTML from any public webpage — analyze structure, meta tags, and scripts instantly.

Try it free

Website Screenshot Tool

Capture pixel-perfect screenshots of any website — desktop, tablet, or mobile viewports.

Try it free

Webpage to Markdown

Convert any webpage to clean Markdown — perfect for AI pipelines, docs, and LLM ingestion.

Try it free

OpenGraph Tester

Validate and inspect the OpenGraph tags on any URL — title, description, image, and more.

Try it free

Web Data Extraction Tool

Extract structured data from any webpage using CSS selectors — text, attributes, links, and more.

Try it free