Open Graph Preview
Fetch any URL to preview its Open Graph and Twitter Card meta tags with live social media mockups.
About This Tool
The Open Graph Preview tool lets you see exactly how any URL will appear when shared on social media platforms like Facebook, Twitter (X), LinkedIn, and Slack. Instead of publishing a link and hoping it looks right, you can inspect and debug your Open Graph and Twitter Card meta tags before anyone sees them.
Open Graph is a protocol originally created by Facebook in 2010
that allows web pages to control how their content is represented
in link previews. By adding a handful of
<meta> tags to your page's
<head> section — such as
og:title, og:description, and
og:image — you determine the title,
description, and preview image that appear in the social card.
Without these tags, platforms fall back to heuristics that often
produce ugly or misleading previews.
Twitter introduced its own Twitter Card system that works
similarly but adds card types (summary and
summary_large_image) along with creator and site
attribution via twitter:site and
twitter:creator. When Twitter-specific tags are
missing, most platforms gracefully fall back to the Open Graph
equivalents, which is why setting both sets of tags provides the
widest compatibility.
This tool fetches the HTML of the URL you provide from our server and parses all relevant meta tags. It then displays a table of every tag found, renders pixel-accurate mockups of Facebook, Twitter, and Google search previews, and flags any issues — such as missing images, titles that are too long, or descriptions that are too short. Character counters help you stay within the recommended limits (50–60 characters for titles, 150–160 for descriptions).
Whether you are a developer verifying a deploy, a marketer crafting a campaign, or a content creator optimizing your blog posts for social sharing, this tool gives you instant visibility into how your links will be presented across the web. It pairs perfectly with the <a href={getLocalePath(locale, "/tools/meta-tag-generator")} className="text-primary hover:underline"> Meta Tag Generator if you need to create or update your tags from scratch.
How to Use
- Enter the full URL you want to preview into the input field. The
https://prefix is added automatically if missing. - Click Fetch or press Enter to retrieve the page's meta tags.
- Review the Social Media Previews section to see how your page will appear on Facebook, Twitter, and Google.
- Check the Warnings panel for any missing or suboptimal tags. Fix the flagged issues in your HTML.
- Use the Extracted Meta Tags table to inspect every tag and its content.
- Click Copy HTML (or press Ctrl+Shift+C) to copy all discovered tags as HTML markup to your clipboard.
FAQ
What are Open Graph tags?
Open Graph tags are <meta> elements placed in the <head> of an HTML page. They tell social media platforms what title, description, image, and URL to display when someone shares a link. Common tags include og:title, og:description, og:image, and og:url.
What is the difference between Open Graph and Twitter Cards?
Open Graph was created by Facebook and is used by Facebook, LinkedIn, Slack, and many other platforms. Twitter Cards are a separate system by Twitter (X) that supports card types like summary and summary_large_image. When Twitter-specific tags are absent, Twitter falls back to Open Graph tags, so it is best to define both.
Why is my image not showing in the preview?
The most common reasons are: the og:image URL is a relative path instead of an absolute URL, the image URL returns a 404, the image is blocked by the server's robots.txt or CORS policy, or the image dimensions are too small (Facebook recommends at least 1200x630 pixels).
What is the recommended title length?
For search engines and social platforms, a title between 50 and 60 characters is ideal. Titles longer than 60 characters may be truncated in Google search results and in social media cards. This tool shows a character counter to help you stay within the optimal range.
What is the recommended description length?
Meta descriptions between 150 and 160 characters tend to perform best. Shorter descriptions waste available space in search results and social previews, while longer ones get truncated. The tool flags descriptions outside this range with a warning.
Does this tool send my URL to a server?
Yes. Because browsers cannot directly fetch arbitrary URLs due to CORS restrictions, the URL is fetched through a lightweight server-side proxy hosted on the same domain. Only the HTML is parsed for meta tags -- no data is stored, logged, or shared with third parties.
Can I test pages that require authentication?
No. The server-side proxy fetches the page as an anonymous bot, similar to how social media crawlers work. If your page requires login, the fetcher will receive the login page instead. To test authenticated pages, deploy a publicly accessible staging version first.
Related Tools
Meta Tag Generator
Generate HTML meta tags, Open Graph, and Twitter Card tags with live SNS preview.
URL Encode/Decode
Encode and decode URLs, parse query parameters, and build query strings.
HTTP Status Codes
Browse, search, and learn about all HTTP status codes with detailed explanations.
Robots.txt Generator
Generate robots.txt files with a visual editor for user-agents, allow/disallow rules, and sitemap entries.
Favicon Checker
Upload a favicon and preview how it looks at all standard sizes (16, 32, 180, 192, 512).