What is the difference between Open Graph and Twitter Cards?

Open Graph (og:) tags power previews on Facebook, LinkedIn, Slack and most platforms. Twitter/X uses its own twitter: tags but falls back to og: tags. This tool emits both so previews look right everywhere.

What image size should I use?

Use a 1200x630 pixel image (1.91:1 ratio) for the large summary_large_image card. Keep it under 5MB and use an absolute https URL, because crawlers cannot resolve relative paths.

Do I need og:url to be absolute?

Yes. og:url and og:image must be full absolute URLs including the scheme. Relative URLs are ignored by Facebook and Twitter crawlers and will break the preview.

Why is my preview not updating?

Platforms cache scraped metadata. After changing tags, re-scrape with Facebook's Sharing Debugger or post a fresh link, since old previews can persist for hours or days.

Are article tags required?

No, they are optional enrichments. For og:type article you can add article:published_time and article:author, which some platforms display, but the core og: tags are enough for a valid preview.

What is the Open Graph Meta Tags Generator?

Generate Open Graph and Twitter Card meta tags for any page type — website, article, product or profile. Fill in title, description, image and URL, then copy clean HTML for rich social sharing previews. It runs free in your browser on Gera Tools, with nothing uploaded.

Open Graph Meta Tags Generator

Name: Open Graph Meta Tags Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Rich link previews in one paste

The Open Graph Meta Tags Generator produces the og: and twitter: meta tags that control how your page looks when shared. Without them, social platforms guess at a title and image — often badly. Fill in a few fields and copy a complete, valid block of head markup that renders a proper share card on Facebook, LinkedIn, Slack and Twitter/X.

How it works

Open Graph is a small vocabulary of <meta property="og:..."> tags read by crawlers when a link is shared. The four essentials are og:title, og:description, og:image and og:url, plus an og:type that classifies the page. Twitter layers its own tags on top:

<meta property="og:type" content="article" />
<meta property="og:title" content="My Page Title" />
<meta property="og:image" content="https://example.com/cover.png" />
<meta name="twitter:card" content="summary_large_image" />

Choosing a page type switches og:type (website, article, product, profile) and reveals type-specific extras such as article:published_time. Image and URL fields must be absolute https URLs or crawlers ignore them.

The four essential og: tags and what happens without them

Tag	Effect if missing
`og:title`	Platform falls back to `<title>` — often includes site name or is truncated
`og:description`	Platform scrapes a text snippet, often the first paragraph or navigation text
`og:image`	No image shown, or a random image from the page is used
`og:url`	The URL used may not be canonical — can cause share counts to split across URL variants

All four should be present on every page intended to be shared. The image is the most impactful — shares with a visually strong image consistently receive higher engagement than text-only previews.

Image dimensions and format

The 1200x630 pixel size (a 1.91:1 ratio) is the standard for the summary_large_image Twitter card and the Facebook large-format preview. Platforms crop or scale images that do not match this ratio:

Too tall (portrait): Twitter crops to a letterbox strip, cutting off most of the image.
Too square: Facebook adds grey padding or crops the sides.
Too small: Some platforms refuse to show small images altogether; Facebook requires at least 200x200 pixels.

Use JPEG for photography (smaller file size) and PNG when the image includes text or logos that need sharp edges. Keep the file under 5MB; some crawlers refuse larger files. Always use an absolute https:// URL — relative paths like /images/cover.jpg are not resolved by crawlers.

Platform-by-platform behaviour

Facebook and Instagram: Read og: tags. The Sharing Debugger at developers.facebook.com/tools/debug/ lets you force a re-scrape and see what Facebook actually parsed.

Twitter/X: Prefers its own twitter: tags but falls back to og: if they are absent. The twitter:card tag must be present to unlock the large image format (summary_large_image) — without it, only a small thumbnail appears. Twitter’s Card Validator at cards-dev.twitter.com/validator previews the result.

LinkedIn: Reads og: tags. LinkedIn’s Post Inspector at linkedin.com/post-inspector/ lets you refresh the cached preview.

Slack: Reads og: tags and shows a compact preview inline. Slack tends to use og:image at a smaller displayed size, so make sure the subject of your image is clear even at thumbnail scale.

iMessage / WhatsApp: Both read og: tags to generate the link preview shown in chat. A missing og:image means no preview thumbnail in message threads.

Type-specific tags worth knowing

og:type: article unlocks article:published_time, article:author, and article:section. Some platforms display these below the title.
og:type: product unlocks product:price:amount and product:price:currency, useful for e-commerce pages shared to Pinterest or Facebook Shops.
og:locale tells crawlers the language of the page (en_US, fr_FR, etc.) and enables og:locale:alternate for multilingual sites.

Tips and notes

Size your og:image at 1200x630 for the large card format.
Keep titles under ~60 characters and descriptions under ~155 so they are not truncated.
After editing tags, re-scrape with Facebook’s Sharing Debugger to clear the cached preview.
Add a og:site_name tag so platforms display your brand name beneath the title on supported card formats.