Open Graph Preview

Social media preview & meta tag generator

100% Offline

📝 Open Graph Data

Title (og:title)16/60

Description (og:description)88/160

Image URL (og:image)

Recommended: 1200×630 pixels

URL (og:url)

Site Name

Type

Locale

🐦 Twitter Card

Card Type

@site

@creator

Quality Score90/100

Warnings:

• Title is short (16/30 min)

👁️ Preview: Facebook

example.com

My Great Article

An engaging description that encourages users to click. Ideally 155-160 characters long.

📋 Meta Tags

<meta property="og:title" content="My Great Article" />
<meta property="og:description" content="An engaging description that encourages users to click. Ideally 155-160 characters long." />
<meta property="og:image" content="https://picsum.photos/1200/630" />
<meta property="og:url" content="https://example.com/artikel" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="My Website" />
<meta property="og:locale" content="en_US" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@myhandle" />
<meta name="twitter:creator" content="@myhandle" />
<meta name="twitter:title" content="My Great Article" />
<meta name="twitter:description" content="An engaging description that encourages users to click. Ideally 155-160 characters long." />
<meta name="twitter:image" content="https://picsum.photos/1200/630" />

How to Preview Open Graph Tags

Enter your page title, description, and image URL
Add optional fields: URL, site name, type, locale
See live previews for Facebook, Twitter, and LinkedIn
Check for validation warnings and errors
Copy the generated meta tags for your HTML

Frequently Asked Questions

What is Open Graph?

Open Graph is a protocol that controls how URLs are displayed when shared on social media. It defines the title, description, image, and other metadata shown in link previews.

What's the ideal OG image size?

The recommended size is 1200×630 pixels (1.91:1 ratio). This works well across Facebook, Twitter, and LinkedIn. Minimum recommended: 600×315 pixels.

Why doesn't my preview match what I see on Facebook?

Facebook caches OG data. Use Facebook's Sharing Debugger to clear the cache. Also ensure your image URL is absolute (starts with https://) and publicly accessible.

Do I need both OG and Twitter Card tags?

Twitter falls back to OG tags, but for best results, include both. Twitter Cards offer additional features like large image cards and app cards.

Where do I put these meta tags?

Place OG meta tags in the <head> section of your HTML, before any other content. They should be on every page you want to be shareable.

Category:

Developer Tools →