HIFreeTools
ENES

Open Graph & Twitter Card Generator

Generate Open Graph and Twitter Card meta tags and see a live preview of how your link will look when shared on social media, then copy the tags into your page.

FreeNo sign-upPrivate — runs in your browser, nothing is uploaded

Preview
og preview
example.com
My Page Title
A short, compelling summary that shows under the title when shared.
Open Graph & Twitter Card tags
<meta property="og:title" content="My Page Title">
<meta property="og:description" content="A short, compelling summary that shows under the title when shared.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:site_name" content="Example">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Page Title">
<meta name="twitter:description" content="A short, compelling summary that shows under the title when shared.">
<meta name="twitter:image" content="https://example.com/preview.png">

Paste inside <head>. Use an image around 1200×630 px for the best preview. The actual card appearance is controlled by each platform; this preview is an approximation. Generated in your browser.

Quick answer

Open Graph (og:) and Twitter Card meta tags control the title, description, and image that appear when your page is shared on Facebook, LinkedIn, X/Twitter, Slack, and most chat apps. This generator builds those tags from your inputs and shows a live preview card, so you can confirm the look before publishing. Use an image around 1200×630 pixels for the sharpest result.

Formula & method

The tool outputs the core Open Graph properties (og:title, og:description, og:type, og:url, og:image, og:site_name) plus the Twitter Card equivalents (twitter:card, twitter:title, twitter:description, twitter:image). All values are HTML-escaped. The preview approximates a large-image share card; each platform renders slightly differently and caches the tags, so re-scrape after changes.

Examples

Example 1: Large image card
Input
twitter:card = summary_large_image + og:image
Result
Full-width preview image above the title
Why
The most eye-catching format for blog posts and landing pages.
Example 2: Article share
Input
og:type = article
Result
<meta property="og:type" content="article">
Why
Marks the page as an article rather than a generic website.
Example 3: Set the canonical share URL
Input
og:url = https://example.com/page
Result
<meta property="og:url" content="https://example.com/page">
Why
Ensures shares point to and consolidate on one URL.

When to use this tool

  • Making a page look good when shared on social media or in chat apps.
  • Adding Twitter/X Card support alongside Open Graph.
  • Previewing the share card before publishing a post.

Common mistakes

  • Using an image that's too small or the wrong ratio — aim for 1200×630 px (1.91:1) so it isn't cropped or blurry.
  • Forgetting that platforms cache OG tags; you must re-scrape (e.g. with the platform's debugger) to see updates.
  • Setting og:image to a relative path — it must be a full, absolute https URL.

Frequently asked questions

What is Open Graph?

Open Graph is a protocol (originally from Facebook) that lets any web page control its title, description, image, and type when shared, using <meta property="og:…"> tags in the page head.

Do I need both Open Graph and Twitter tags?

Open Graph alone covers most platforms, and X/Twitter falls back to OG tags. Adding the twitter:card tag lets you choose the large-image layout, so including both is best.

What image size should I use?

About 1200×630 pixels (a 1.91:1 ratio) for the large card. Keep important content away from the edges, since some platforms crop slightly.

Why doesn't my new image show when I share?

Platforms cache OG data. Use the platform's sharing debugger or link inspector to force a re-scrape after you change the tags.

Where do these tags go?

In the <head> of your page, like other meta tags. They have no visible effect on the page itself.

Is anything uploaded?

No — the tags and preview are generated in your browser.

Sources & references

External references open in a new tab. We are independent and not affiliated with these organizations.

  • ✓ Free to use
  • ✓ No sign-up required
  • ✓ Runs entirely in your browser — nothing is uploaded.
  • ✓ Formula and method shown above
Last updated: How we calculateReport a correctionDisclaimer

Provided “as is” for general information only — results may be inaccurate, so verify before you rely on them. No warranty; use at your own risk.

Built and reviewed by HIFreeTools against the formula shown above and any authoritative references cited on this page. See our methodology and editorial standards.

Related tools

Embed this tool on your site

Free to embed, no sign-up. Paste this code where you want the open graph generator to appear: