Open Graph Generator — OG Tag & Twitter Card Generator

Q: Do I need both Open Graph and Twitter Card tags?

You need twitter:card, because Open Graph has no equivalent. For the title, description and image, X falls back to the og: tags, so repeating them as twitter:title, twitter:description and twitter:image is optional. Add them only if you want different copy on X.

Q: Can I use a relative URL for og:image?

No. Use a full absolute URL such as https://example.com/og.png. Most crawlers do not resolve a relative path like /og.png, and a data: URI is not fetched at all. The generator flags both as errors.

Q: What format does article:published_time use?

ISO 8601, for example 2026-09-27 or 2026-09-27T09:00:00Z. A Unix timestamp such as 1790500000 is not valid in this tag; convert it first with a timestamp converter.

Q: Is og:title the same as the HTML title tag?

No. The tag is used by browsers and search engines; og:title is used by social platforms. They are often the same text, and this generator can write both from one field, but you can make the social headline shorter or punchier if you like.

Everything runs in your browser. Your URLs and text are not uploaded, logged, or stored.

Title 0 chars

Description 0 chars

Page URL (og:url)

Image URL (og:image)

Or preview a local image

Image alt text

Image width

Image height

Site name

Locale

og:type

twitter:card

X / Twitter handle

Include <title>, meta description and canonical Also write twitter:title / description / image (X falls back to the og: tags without them)

Preview

Approximations of each platform's layout. Platforms change their card designs without notice, so treat the crop and line counts as a guide.

Meta tags — paste into your <head>

Check an existing page: paste its HTML

What Is Open Graph?

Open Graph is a set of <meta> tags, introduced by Facebook in 2010, that tell other sites how to show your page when someone shares a link to it. When a URL is pasted into Facebook, LinkedIn, Slack, Discord, WhatsApp or iMessage, the platform's crawler fetches the page, reads the og: tags in the <head>, and builds a preview card from them: a title, a short description, an image and the site's domain.

Without those tags the crawler has to guess. It may use the <title>, pull the first paragraph as the description, or pick a random image from the page, such as a logo, an ad or a tracking pixel. Often it shows a bare link with no image at all. A card with a clear title and a 1200×630 image takes more space in the feed and gets more clicks than a plain URL, which is why social previews are worth checking before every launch.

This open graph generator does three jobs at once. It writes the tags, it previews the card for Facebook, X, LinkedIn and Slack side by side, and it loads your image to check its real pixel size against the platform minimums. Everything runs in your browser; the only request it makes is loading the image URL you give it, the same way an <img> tag would.

OG Tag Generator: Which Tags Do You Need?

The Open Graph protocol defines four required properties. In practice two more are needed for a good card, and a few are optional. The tool marks a missing required tag as an error and a missing recommended tag as a warning.

Tag	Status	What it does
og:title	Required	The headline of the card. Keep it near 60 characters; previews clip long titles.
og:type	Required	`website` for most pages, `article` for blog posts and news.
og:image	Required	Absolute URL of the preview image. The most important tag for click-through.
og:url	Required	The canonical URL. Shares of tracking-parameter variants are grouped under it.
og:description	Recommended	One or two sentences shown under the title on most platforms.
og:image:alt	Recommended	Text description of the image for screen-reader users.
og:image:width / height	Optional	Pixel size of the image, so the first share can render before the crawler has downloaded it.
og:site_name	Optional	The brand name. Slack shows it above the title.
og:locale	Optional	Language and territory, such as `en_US`. Defaults to `en_US` when absent.
article:published_time	Optional	Publication date for `og:type` article. Must be ISO 8601.

Twitter Card Generator: summary vs summary_large_image

X (formerly Twitter) reads its own twitter: tags first and falls back to the Open Graph tags for anything missing. That means you do not need to repeat the title, description and image: twitter:card is the one tag X needs that Open Graph cannot supply. The generator writes twitter:card and, if you give a handle, twitter:site. Tick the "Also write twitter:title / description / image" option only if you want X to show different copy from the other platforms.

There are two card types in everyday use. summary_large_image shows a full-width image above the link, the same wide 1.91:1 shape Facebook and LinkedIn use. summary shows a small square thumbnail beside the title and description. Switch between them in the tool and the X preview changes layout. When you pick summary, the tool also changes its image check: a 1200×630 image passes the large card but is flagged "Aspect ratio is 1.90:1. The summary card shows a square thumbnail, so this image will be cropped."

The handle is normalised for you. Type brand and the output reads <meta name="twitter:site" content="@brand">. A handle with a hyphen, or one longer than 15 characters, gets a warning because X usernames only allow letters, digits and underscores.

Open Graph Image Size: Why 1200×630

Wide link previews on Facebook, LinkedIn and X all use an image of roughly 1.91:1. 1200×630 pixels is the size Facebook recommends: large enough to stay sharp on high-density phone screens, and the right shape so nothing is cropped. When you paste an image URL, the tool loads it, reads its real dimensions, fills in the width and height fields, and checks it against these thresholds:

Image size	Result in this tool
1200×630	No problems found.
800×418	Info: it works; 1200×630 looks sharper on high-density screens.
500×300	Warning: below the 600×315 Facebook needs for a large preview, and 1.67:1 will be cropped.
150×150	Error: Facebook rejects images smaller than 200×200.
1200×675	Info: 1.78:1 (16:9) will be cropped to fit the wide card.
1200×1200	Info on the large card (cropped); no problem on the `summary` card.

Keep the important content — the headline and logo — inside the middle of the image, with some margin on every side. Each platform crops a little differently and adds rounded corners or overlays (X puts the domain name in the bottom-left corner of a large card). If you declare og:image:width and og:image:height and they do not match the file, the tool warns you, for example "og:image:width/height say 1200×630 but the image is 1000×525."

Meta Tag Generator: Title, Description and Canonical

Open Graph tags control social cards; the ordinary HTML meta tags control how the page appears in search results. With "Include <title>, meta description and canonical" ticked, the generator writes both sets from the same fields, so you have one copy-ready block for the whole <head>. Search engines and social platforms use the fields differently: Google may rewrite your title and description, while a Facebook card shows og:title exactly as written. It is fine for the two to be identical; use different wording only when you have a reason to.

Worked Example

For a blog post with a 1200×630 image, the type set to article and the handle typed as examplebrand, the tool produces:

<!-- Primary meta tags -->
<title>Open Graph Generator — Preview Social Cards</title>
<meta name="description" content="Check how a link looks before you share it.">
<link rel="canonical" href="https://example.com/blog/og-tags/">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/og-tags/">
<meta property="og:title" content="Open Graph Generator — Preview Social Cards">
<meta property="og:description" content="Check how a link looks before you share it.">
<meta property="og:image" content="https://example.com/og/og-tags.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A link preview card">
<meta property="og:site_name" content="Example Blog">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2026-09-27T09:00:00Z">

<!-- X (Twitter) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplebrand">

Values are escaped for you. A title of Tom & Jerry say "hi" <3 becomes content="Tom & Jerry say "hi" <3", which every HTML parser reads back as the original text. Line breaks and repeated spaces in a pasted description are collapsed to single spaces.

How to Add Open Graph Tags in Code

On a static site, paste the generated block into the <head> of each page. In a framework, set the same values through its metadata API so they are rendered on the server. In the Next.js App Router, for example:

// app/blog/og-tags/page.tsx
export const metadata = {
  title: 'Open Graph Generator — Preview Social Cards',
  description: 'Check how a link looks before you share it.',
  alternates: { canonical: 'https://example.com/blog/og-tags/' },
  openGraph: {
    type: 'article',
    url: 'https://example.com/blog/og-tags/',
    siteName: 'Example Blog',
    publishedTime: '2026-09-27T09:00:00Z',
    images: [{ url: 'https://example.com/og/og-tags.png', width: 1200, height: 630, alt: 'A link preview card' }],
  },
  twitter: { card: 'summary_large_image', site: '@examplebrand' },
};

To check what a live page actually serves — the HTML a crawler sees, not what your browser renders after JavaScript runs — fetch it from the command line:

curl -s https://example.com/blog/og-tags/ | grep -iE 'og:|twitter:'

Or paste the page source into "Check an existing page" at the bottom of the tool. The importer reads the og: and twitter: tags and, where they are missing, falls back to the <title>, the meta description and the canonical link, so you can see what a crawler would have to work with. It accepts og: tags written with either property= or name=.

If your site stores publish dates as Unix epoch seconds, convert them before writing article:published_time; the Unix timestamp converter shows the ISO 8601 form of any epoch value. Paste 1790500000 into the published-time field here and the tool reports "article:published_time looks like a Unix timestamp. It must be ISO 8601."

Common Open Graph Mistakes

A relative image path. og:image set to /og.png is not resolved by most crawlers. Always write the full https:// URL. The tool flags this as an error.
A data URI as the image. Inlining the image as data:image/png;base64,… works in an <img> tag, but link-preview crawlers only fetch http(s) URLs. Host the file. (Our Base64 encoder explains why data URIs are about a third larger than the file, too.)
An http:// image. Serve the image over HTTPS so it is not blocked as mixed content.
Tags added by client-side JavaScript. Most link-preview crawlers read the raw HTML and do not run your scripts. A single-page app that sets meta tags after load shows an empty card. Render the tags on the server or at build time.
An invalid date. 2026-02-30 matches the date pattern but is not a real day. The tool checks each component, so it rejects it while accepting 2024-02-29.
Changing the image and expecting the card to update. Platforms cache the preview after the first share. Change the image file name (a content hash works well — see our hash generator) and ask each platform to re-scrape.
Missing alt text. og:image:alt is how screen-reader users learn what the image shows. The tool warns when an image has no alt.

Testing and Refreshing a Cached Preview

The previews on this page are close approximations of each platform's layout, built from your fields; they cannot show what a platform has already cached. After you deploy, use each platform's own tool to fetch the live page. Facebook's Sharing Debugger shows the tags it scraped and has a "Scrape Again" button that refreshes the cache. LinkedIn's Post Inspector does the same for LinkedIn. Slack refetches when the URL changes, so adding a harmless query string such as ?v=2 to the shared link is the usual workaround for a stale unfurl.

Frequently Asked Questions

What is an Open Graph generator?

An Open Graph generator turns a title, description, URL and image into the og: and twitter: meta tags that social platforms read to build link previews. This one also previews the card for Facebook, X, LinkedIn and Slack and checks your image size. It runs in your browser, and nothing you type is uploaded.

What size should an Open Graph image be?

1200×630 pixels, a 1.91:1 ratio. Facebook needs at least 600×315 for a large preview and rejects images smaller than 200×200. For the X summary card, use a square image, because it is shown as a square thumbnail.

Do I need both Open Graph and Twitter Card tags?

You need twitter:card, because Open Graph has no equivalent. For the title, description and image, X falls back to the og: tags, so repeating them as twitter:title, twitter:description and twitter:image is optional. Add them only if you want different copy on X.

Why does my link still show the old image after I changed it?

The platform cached the preview the first time the link was shared. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to re-scrape the page, and give the new image a new file name so no cache anywhere keeps serving the old file.

Can I use a relative URL for og:image?

No. Use a full absolute URL such as https://example.com/og.png. Most crawlers do not resolve a relative path like /og.png, and a data: URI is not fetched at all. The generator flags both as errors.

What format does article:published_time use?

ISO 8601, for example 2026-09-27 or 2026-09-27T09:00:00Z. A Unix timestamp such as 1790500000 is not valid in this tag; convert it first with a timestamp converter.

Is og:title the same as the HTML title tag?

No. The <title> tag is used by browsers and search engines; og:title is used by social platforms. They are often the same text, and this generator can write both from one field, but you can make the social headline shorter or punchier if you like.