Open graph meta generator

Generate Open Graph + Twitter meta tags

All computation runs locally in your browser

Last updated: February 2, 2026

CreatorFrank Zhao

General information

Page type

Title

Description

Page URL

Image

Image url

Image alt

Width

Height

Twitter

Card type

Site account

Creator acc.

Your meta tags

<!-- og meta -->
<meta property="og:type" value="website" />

<!-- twitter meta -->
<meta name="twitter:card" value="summary_large_image" />

Social previews are picky: one missing tag or a slightly wrong image URL can turn a great link into a boring box. This guide shows what this Open Graph Meta Generator does, how to fill it out fast, and how to avoid the common “why isn’t my preview updating?” traps.

→Introduction / overview
→How to use / quick start
→Real-world examples
→Common scenarios
→Tips & best practices
→Calculation method
→Related concepts
→Frequently asked questions
→Limitations / disclaimers
→External references

Introduction / overview

This Open Graph Meta Generator creates the HTML <meta> tags used by platforms like Facebook, LinkedIn, and X to build link previews. You enter the information you want people to see (title, description, image), and the tool outputs clean tags you can paste into your site.

Social previews aren’t “SEO magic” — they’re mostly about sending the right metadata. A good set of tags improves click-through by making your shared links look intentional and trustworthy.

Who is this for?

Developers adding proper Open Graph metadata to landing pages and blog posts.
Marketing teams wanting consistent previews across platforms without hand-writing tags.
Creators validating a “share card” setup before publishing a new campaign.

If you’re also cleaning URLs or escaping HTML, these tools pair well: URL parser and Escape/unescape HTML entities.

How to use / quick start

Pick the page type

For most sites, start with “Website”. Use “Article” for blog posts or news pages.

Fill in title, description, and URL

Use a real, public URL. Most platforms want an absolute URL (including $https$ ).

Set your image (recommended)

Add an image URL and (optionally) width/height so previews render consistently.

Copy and paste into your site

Copy the generated tags and place them in your page <head> section.

Worked example (with numbers)

Suppose your share image is $w = 1200$ px wide and $h = 630$ px tall. The total pixel area is:

A = w\,h

=

1200\times 630

=

756000\ \text{px}^2

And the aspect ratio is $r = \frac{w}{h} = \frac{1200}{630} \approx 1.90$ . That’s close to the common “wide preview” shape used across platforms.

How to read the output: Open Graph tags use property (for example, $\text{og:title}$ ), while Twitter tags use name (for example, $\text{twitter:card}$ ). In most cases, paste the full generated block.

Pro tip: Use the Share button below the calculator if you want to send someone a link to this tool. If you include results, only share non-sensitive inputs.

Real-world examples / use cases

Blog post preview

Background: you’re sharing a specific article and want the preview to show the correct headline.

Inputs: type “Article”, image $1200\times 630$ px, and the canonical article URL.

Result: $r = 1200/630 \approx 1.90$ and tags like $\text{og:title}$ / $\text{og:image}$ .

How to apply: paste the tags into that article page’s <head>.

Product page share card

Background: you want the product photo to look crisp in chat apps.

Inputs: image $800\times 800$ px (square) and alt text.

Result: $r = 800/800 = 1$ and $\text{og:image:alt}$ for accessibility.

How to apply: keep image URLs stable; if your URL has tracking params, sanity-check it with the URL parser.

SaaS landing page

Background: multiple teams share the same landing page link, often with UTM parameters.

Inputs: type “Website”, image $1200\times 630$ px, and a clean canonical URL.

Result: a stable $\text{og:url}$ so the preview stays consistent.

How to apply: set $\text{og:url}$ to your canonical URL (not a UTM variant).

Job posting share

Background: hiring links get forwarded a lot; you want them to stay recognizable.

Inputs: banner $1200\times 628$ px and a clear title.

Result: $r = 1200/628 \approx 1.91$ and a consistent preview headline.

How to apply: include the location in the description so it appears in the preview snippet.

If you’re debugging a preview, start with the basics: the URL must be public and the image URL must return a real image file. Many preview problems are just redirects or blocked requests.

Common scenarios / when to use

New page launch

Add tags before you announce the page so the first share looks good.

Image refresh

Swap the image URL (or update dimensions) to improve clarity in feeds.

Marketing campaign

Align share text with your campaign headline and CTA.

Sensitive pages

Be careful: don’t put private info in shareable metadata.

Preview debugging

Use the generated tags to isolate whether the issue is HTML vs caching.

Team handoff

Share a link to the tool with inputs so teammates can paste the same tags.

Not a good fit: if your site already generates tags dynamically per route, you’ll probably implement this in your framework’s metadata system instead of pasting static tags. The generator is best for quick drafts, prototypes, and validation.

Tips & best practices

Practical checklist

Use absolute URLs for $\text{og:url}$ and $\text{og:image}$ .
Keep descriptions readable (think: one sentence, not a paragraph).
Add $\text{image:alt}$ for accessibility and better previews on some platforms.
Prefer stable image URLs (avoid temporary signed URLs that expire).

Avoid common mistakes

Don’t put secrets in share links (the Share modal can include inputs in the URL).
Don’t rely on relative image paths — crawlers may resolve them differently.
If previews don’t update, it’s often caching, not your tags.

Calculation method / formula explanation

There’s no “hidden scoring” here: the tool is a structured formatter. It turns your inputs into two blocks of HTML tags — Open Graph tags (using property) and Twitter card tags (using name).

Two simple relationships the generator follows

\text{og:KEY} \Rightarrow \langle meta\ property=\"og:KEY\"\rangle

\text{twitter:KEY} \Rightarrow \langle meta\ name=\"twitter:KEY\"\rangle

For convenience, the tool can generate Twitter equivalents when you only fill Open Graph. Conceptually:

\text{if }\text{twitter:title}\text{ is missing, set }

\text{twitter:title}

\leftarrow

\text{og:title}

Same idea for description and image. It’s a “helpful default,” not a requirement — you can still override Twitter fields explicitly.

Related concepts / background info

Open Graph is a metadata convention that helps services understand your page as a shareable object (title, description, image). Twitter Cardsdo the same for X.

If you’re building URLs by hand or debugging query strings, the URL parser is a good companion. If you need to safely include special characters in HTML attributes, use HTML entities.

What typically controls the preview?

Title: $\text{og:title}$ (and often $\text{twitter:title}$ )
Description: $\text{og:description}$
Image: $\text{og:image}$

Frequently asked questions (FAQs)

Do I need both Open Graph and Twitter tags?

It’s strongly recommended. Many platforms read Open Graph; X uses Twitter tags. When in doubt, include both.

What image size should I use?

A common wide share image is $1200\times 630$ . The key is consistent aspect ratio and a readable design on mobile.

Why doesn’t my preview update after I change tags?

Usually caching. Platforms cache previews aggressively. Changing $\text{og:image}$ may not refresh immediately.

Can I use relative URLs like /img/cover.png?

It’s safer to use absolute URLs (including protocol). Crawlers often expect absolute URLs for $\text{og:image}$ .

Is it safe to share a link with “results included”?

It depends on the inputs. Titles and descriptions are usually fine, but don’t include anything sensitive or private.

Where do I paste these meta tags?

Put them in the HTML <head> of the page you’re sharing.

Limitations / disclaimers

This tool generates tags; it does not validate whether social platforms can fetch your URLs.
Preview appearance can vary by platform and can change over time.
Platforms may cache previews; updates might not appear immediately.
Sharing “results included” links can expose your inputs. Treat shared URLs as public.

External references / sources

Related Calculators

Chronometer

Use a simple chronometer (stopwatch) to track elapsed time down to milliseconds. Runs locally in your browser.

Try Now

Email normalizer

Normalize email addresses to a standard format for easier comparison. Useful for deduplication and data cleaning. Runs locally in your browser.

Try Now

ETA calculator

Estimate the time needed to consume a total amount at a constant rate, and get an expected end time. Runs locally in your browser.

Try Now

JWT parser

Parse and decode your JSON Web Token (JWT) and display its content. All computation runs locally in your browser.

Try Now

MIME types

Know which file extensions are associated to a MIME type, and which MIME type is associated to a file extension. Includes a full MIME types table.

Try Now

Lorem ipsum generator

Generate random Lorem Ipsum placeholder text with customizable paragraphs, sentences, and word counts. Runs locally in your browser.

Try Now