T
Tooltastic
Open Graph Meta Generator

Open Graph Meta Generator

Generate OG & Twitter Card meta tags for any page type — live preview included.

Real-Time Preview Twitter / X Cards 100% Local

General

Recommended: 50–60 characters

Recommended: 120–155 characters

Social Image

Recommended: 1200×630 px · JPG or PNG · max 8 MB

Twitter / X

Facebook

Optional — required for Facebook Insights and pixel attribution.

Article

Comma-separated — each becomes a separate article:tag meta tag

Book

Profile

Approximate preview — exact appearance varies by platform

Approximate preview — exact appearance varies by platform

What is Open Graph?

Open Graph is a protocol created by Facebook that turns web pages into rich objects in a social graph. OG meta tags control how URLs appear when shared on Facebook, LinkedIn, Slack, WhatsApp, and other platforms. Without them, platforms make their own guesses — often wrong.

Twitter Cards

Twitter Cards attach rich media to tweets. The `twitter:card` tag defines the card type. Twitter falls back to Open Graph tags when Twitter-specific tags are missing — so defining both ensures correct rendering on all platforms.

Image & Text Best Practices

Use a 1200×630 px image for optimal display on all platforms (minimum 600×315 px). Keep titles under 60 characters and descriptions under 155. After publishing, test your tags with Facebook's Sharing Debugger and Twitter's Card Validator.

Frequently Asked Questions

Everything you need to know about Open Graph meta tags

Open Graph (OG) meta tags are HTML tags in the `<head>` of your page that control how the page looks when shared on social media. Without them, Facebook, LinkedIn, and Slack pick the title, description, and image themselves — usually poorly. Adding OG tags gives you full control over the preview card.

The recommended size is 1200×630 px (1.91:1 ratio). This works on Facebook, Twitter, LinkedIn, WhatsApp, and most other platforms. Use JPG or PNG, keep the file under 8 MB, and avoid text in the image since it gets cropped on smaller cards. A minimum of 600×315 px is required for Facebook to show the large card format.

Strictly speaking, no — Twitter falls back to OG tags. But Twitter's card tags give you additional control: `twitter:card` sets the card type (summary vs large image), and `twitter:creator` credits the author. For best results, include both sets. This generator outputs both automatically.

Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug) to see how your page appears on Facebook and to clear cached previews. For Twitter, use the Twitter Card Validator (cards-dev.twitter.com/validator). LinkedIn and Slack also cache OG data — use their respective post inspector tools to refresh.

Paste the tags inside the `<head>` element of your HTML page, before the closing `</head>` tag. Order doesn't matter technically, but convention puts them after `<meta charset>` and `<meta name="viewport">` and before stylesheets. In WordPress, use a plugin like Yoast SEO; in other CMSs, look for a "head scripts" or "custom meta" field.

Create Open Graph and Twitter Card tags

The Open Graph meta generator creates the meta tags that decide how your page looks when shared on social networks and messengers – with a title, description and preview image. Without these tags, Facebook, LinkedIn, WhatsApp or X pull in arbitrary, often unsuitable content. The tool shows a live preview and gives you ready-to-paste code. It runs entirely in the browser.

Common use cases

  • Attractive link previews: Decide which image and text appear when someone shares your page.
  • Campaign landing pages: Optimize title and image specifically for more clicks from social media posts.
  • Consistent brand: Make sure every page of your site is shared in a uniform, professional way.
  • Twitter/X cards: Add the matching Twitter Card tags for an optimal appearance on X.

How to create your meta tags

  1. 1 Enter your page's title, description, URL and image.
  2. 2 Choose the page type and the Twitter Card style.
  3. 3 Check the live preview of how the shared link looks.
  4. 4 Copy the generated meta tags into the head section of your page.

Small code, big effect

Open Graph tags determine the first impression of a shared link – a good preview image and a clear title noticeably raise the click rate. Use an image in the recommended format (around 1200 by 630 pixels) and keep the title concise. After changes it is worth checking the networks' debug tools, since they cache previews. Because the tool only generates code, your page stays untouched until you insert the tags yourself.

Related tools

Free tools that pair well with this one – right in your browser, no sign-up.

Favicon Generator Generate favicons from images QR Code Generator Generate QR codes for URLs, WiFi & more SVG Placeholder Create custom placeholder images Email Signature Design email signatures