Skip to content

Open Graph generator: social meta tags with a live preview of every card

This Open Graph generator turns a short form into the og: and twitter: meta tags for your head, and draws the card Facebook, LinkedIn, X, Slack and WhatsApp would build from them as you type.

The headline of the card. Up to 60 characters shows everywhere.

One or two sentences; apps show about 200 characters, Facebook two lines.

The address you want shares counted on, usually the canonical one.

A 1200 by 630 pixel JPG or PNG under 1 MB, served over https.

What the image shows, for screen readers on Facebook and X.

Shown above the title in Slack and Discord.

Your site’s handle, with or without the @.

Such as en_US or hr_HR. Leave empty for English.

X card (twitter:card)

Large shows the image full width with the title over it; small shows a square thumbnail beside the text.

Generated in your browser. Nothing is uploaded.

How the share would look

The image loads from the address you typed, in your browser. Its size is not measured here: after publishing, run the social preview checker to measure it.

  • Facebook and LinkedInlarge card
    example-shop.hrDrava Classic sneakersCanvas sneakers with a natural rubber sole, made in Croatia. Free delivery over 50 €.

    Built from og:title, og:description, og:image.

  • Xlarge card
    Drava Classic sneakers

    From example-shop.hr

    • No twitter:image: X falls back to og:image.
    • No twitter:title: X uses og:title.
    • The large card shows the title over the image; the description is not shown.

    Built from og:title, og:image.

  • Slack and Discordlarge card
    Example ShopDrava Classic sneakersCanvas sneakers with a natural rubber sole, made in Croatia. Free delivery over 50 €.

    Built from og:title, og:description, og:image.

  • WhatsAppsmall card
    example-shop.hrDrava Classic sneakersCanvas sneakers with a natural rubber sole, made in Croatia. Free delivery over 50 €.

    Built from og:title, og:description, og:image.

Your tags

Paste inside <head>, before any other og: tags. Yoast SEO and Rank Math set these under the page’s Social tab instead.

og-tags.html
<meta property="og:title" content="Drava Classic sneakers">
<meta property="og:description" content="Canvas sneakers with a natural rubber sole, made in Croatia. Free delivery over 50 €.">
<meta property="og:url" content="https://example-shop.hr/shop/drava-classic/">
<meta property="og:image" content="https://example-shop.hr/images/products/drava-classic-share.png">
<meta property="og:image:alt" content="Blue canvas sneaker, side view, on a white background">
<meta property="og:site_name" content="Example Shop">
<meta property="og:type" content="product">
<meta property="og:locale" content="hr_HR">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@exampleshop">
  • Free, no account
  • Runs in your browser
  • og:*, twitter:*, 4 platform cards

What the Open Graph generator writes

Fill in the fields, watch the cards, copy the block. It is generated in your browser; nothing is uploaded.

  • Updates as you type

    The meta tags and the four cards change with every field, and every empty field is left out of the block.

  • Four platform cards

    Facebook and LinkedIn, X, Slack and Discord, and WhatsApp, each drawn with the tags that app reads and the fallbacks it uses.

  • Image rules

    Warns when the image address is not https, when it is missing, and when there is no og:image:alt for screen readers.

  • X card types

    Pick the large image or the small thumbnail; the X card changes to match, and the tag is written for you.

  • Site name and language

    og:site_name for the first line of Slack unfurls and og:locale in the ll_CC form apps expect.

  • Copy or download

    One block, ready for the head of the page or the Social tab of your SEO plugin.

Show 2 more checks

  • Site name and language

    og:site_name for the first line of Slack unfurls and og:locale in the ll_CC form apps expect.

  • Copy or download

    One block, ready for the head of the page or the Social tab of your SEO plugin.

How the Open Graph generator works

  1. Fill in the fields

    Title, description, the page address, the image address and the rest. The example shows a filled product page; clear it to start from yours.

  2. Check the cards

    Each card says which tags it was built from and what the app would show, so a missing tag is visible before you publish.

  3. Copy the block

    Paste the meta tags inside the head of the page, or into the Social tab of Yoast SEO or Rank Math, then publish.

The tool does not fetch or measure the image; the social preview checker does that once the page is live.

Open Graph generator questions

Which og:type should I use?

Use website for the home page and most pages, article for blog posts and news, product for a product page, and profile for a page about one person. The type changes little about the card itself; it tells the platform what kind of thing the page is, and some, such as Pinterest, use it to pick which properties to read. When in doubt, website is safe.

Do I need Twitter card tags when I already have Open Graph tags?

One: twitter:card. X reads twitter:title, twitter:description and twitter:image first and falls back to the Open Graph tags for each one it does not find, so complete og: tags are enough for the content. Without twitter:card, though, X shows a plain link and no card at all. Set it to summary_large_image for the wide image or summary for a small thumbnail, and add twitter:site if you want the card linked to your account.

What is og:image:alt and do I need it?

og:image:alt is a short description of the share image, read aloud by screen readers on Facebook and X when the card is shown. It is not displayed and does not change the card. Add it whenever you set og:image: one sentence about what the picture shows, not the page title again. Keep it under 100 characters.

Where do the Open Graph tags go?

In the head of the page, as meta tags with a property attribute, before any other og: tags so the first one wins. In WordPress, Yoast SEO and Rank Math set them from the Social tab of each post, so paste the values there rather than adding a second set. Shopify, Webflow and Squarespace have a social sharing section per page. Then share the address once in a private chat to see the card.

Why does my share still show the old card?

Platforms cache the card for days. After changing the tags, paste the address into Facebook’s Sharing Debugger and click Scrape Again, which also refreshes Messenger and Instagram. LinkedIn’s Post Inspector does the same for LinkedIn. X, Slack and WhatsApp refresh on their own schedule; adding a query string to the link, such as ?v=2, forces a new fetch there.

Is this Open Graph generator free?

Yes, with no sign-up, and it runs in your browser, so nothing you type is sent anywhere. getReport is funded by donations, not plans. Once the page is live, the social preview checker fetches it, measures the image and shows the real cards; the full report adds the other six modules, also free.

Related free tools

All 59 tools →

Free, funded by the people who use it

No account, no paid plan. Donations keep it running.

Chip in