Preview Your Social Media Links with a Social Preview Tool

Our Social Preview Tool ensures your Facebook, LinkedIn, and Twitter posts look perfect before you share. Test and optimize your social media links for maximum engagement.

📊

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

Perfect Social & Link Previews,
Every Time

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 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.

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:

Use a free tool like OpenGraph.io to generate meta tags for your webpage.
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:

Check the meta tags in your HTML code to ensure they are correctly formatted and placed within the <head> section.
Re-scrape Your Website: Platforms like Facebook and LinkedIn often cache previews. Use their debugger tools to clear the cache and update the preview:

Ensure your images meet the recommended dimensions and aspect ratios for optimal display on social media platforms.
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.