Open Graph Previewer

Enter Website URL

Preview Open Graph Card

Facebook Preview

EXAMPLE WEBSITE

Page Title Example

This is an example description of the page content that would appear when shared on social media.

https://example.com/page

Twitter Preview

Page Title Example

This is an example description of the page content that would appear when shared on social media.

example.com

website

Meta Tags Generator

<!-- Primary Meta Tags -->
<title>Page Title Example</title>
<meta name="title" content="Page Title Example" />
<meta name="description" content="This is an example description of the page content that would appear when shared on social media." />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="Page Title Example" />
<meta property="og:description" content="This is an example description of the page content that would appear when shared on social media." />
<meta property="og:image" content="https://images.unsplash.com/photo-1591696331111-ef9586a5b17a?q=80&w=1200&auto=format" />
<meta property="og:site_name" content="Example Website" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://example.com/page" />
<meta property="twitter:title" content="Page Title Example" />
<meta property="twitter:description" content="This is an example description of the page content that would appear when shared on social media." />
<meta property="twitter:image" content="https://images.unsplash.com/photo-1591696331111-ef9586a5b17a?q=80&w=1200&auto=format" />

How to use Open Graph Previewer

1
Enter a page URL
Paste the full URL of the page you want to check into the website URL field.
2
Fetch the OG data
Click "Fetch OG Data" to pull the page's existing Open Graph title, description, image, and site name.
3
Edit manually if needed
Switch to Edit Manually to adjust the title, description, image URL, type, and other fields and see the preview update.

4
Preview and copy tags
Review the Facebook and Twitter card previews, then copy the generated meta tags to add them to your page.

Frequently asked questions

What are Open Graph tags and why do they matter?

Open Graph meta tags tell social platforms which title, description, and image to show when your page is shared, so well-set tags produce richer, more clickable link previews on Facebook, X, LinkedIn, and more.

How does the Facebook and Twitter preview work?

The tool renders mock Facebook and Twitter cards using your Open Graph values so you can see how the title, description, and image will appear before you publish or share the link.

Can I generate tags without an existing page?

Yes, use Edit Manually to fill in the title, description, image URL, site name, URL, and type from scratch, then copy the ready-made meta tags for your HTML.

Why might fetching a URL fail or return no data?

Some sites block automated requests, require login, or have no Open Graph tags at all; in those cases switch to manual mode and enter the values yourself.

Is the tool free, and what happens to the URL I enter?

The tool is free with no registration. To read tags from a live page it fetches the URL through our server proxy (needed to bypass browser cross-origin limits), so only the public page address is requested; manual editing and the previews run in your browser.

Related tools

Keep going with these handy tools

Meta Tag Generator

Robots.txt Generator

HTML Entity Encoder/Decoder

HTTP Header Viewer

URL Redirect Chain Checker

Sitemap URL Extractor