Open Graph Generator

Open Graph Generator builds the meta tags that control how your page looks when it is shared on Facebook, LinkedIn, X (Twitter), Zalo, Slack and other platforms — the title, description, preview image and more. It produces both Open Graph (og:) tags and matching Twitter Card tags.

Fill in your title, description, URL and image, pick the content and card type, and copy a complete block of tags to paste into your page's <head>. A good share preview can dramatically increase clicks from social feeds.

Generated tags (Open Graph + Twitter Card)
<meta property="og:type" content="website" />

<meta name="twitter:card" content="summary_large_image" />

How to use Open Graph Generator

  1. 1

    Fill in the share preview fields

    Enter the title, description, canonical page URL and the URL of your preview image (ideally 1200×630 pixels).

  2. 2

    Choose the content and card type

    Pick the Open Graph type (website, article, product…) and whether the Twitter card should show a large image or a small thumbnail.

  3. 3

    Copy the tags into your <head>

    Copy the generated Open Graph and Twitter Card tags and paste them inside your page's <head> element.

What is Open Graph and why it matters

Open Graph is a protocol, originally created by Facebook, that lets any web page declare how it should be represented when shared. When someone pastes your link into a post or chat, the platform reads your og: tags to build the preview card — the image, title and description people actually see before deciding whether to click.

Without these tags, platforms guess: they may pick the wrong image, pull a stray line of text, or show a bare link. Defining them explicitly gives you control over your first impression in the feed, which is often where most social traffic is won or lost.

Open Graph and Twitter Card tags together

X (Twitter) uses its own twitter: tags, but it falls back to Open Graph tags when they are missing, so providing both is the most reliable approach. The most important Twitter-specific tag is twitter:card, which chooses between a large image (summary_large_image) and a compact thumbnail (summary).

For images, 1200×630 pixels is the widely recommended size for the large-image card and renders crisply across platforms. Always use absolute URLs (starting with https://) for og:url and og:image — relative paths will not resolve when another site fetches your preview.

Frequently asked questions

What image size should I use for og:image?
1200×630 pixels (a 1.91:1 ratio) is the standard for the large-image preview used by Facebook, LinkedIn and X. Keep the file under about 5 MB and use an absolute https URL so other sites can fetch it.
Do I need both Open Graph and Twitter tags?
X will fall back to Open Graph tags if Twitter tags are missing, so at minimum set the og: tags plus twitter:card. Including the full set of both gives you the most predictable result across every platform.
Why does my share preview still look wrong after I added tags?
Platforms cache previews. After updating your tags, use the platform's debugging tool — such as Facebook's Sharing Debugger or X's Card Validator — to re-scrape the page and refresh the cached preview.

Last updated: