Skip to content
Devtoolry

Open Graph Generator

Generate Open Graph and Twitter Card meta tags and preview how your link looks on Facebook, X, LinkedIn, WhatsApp and Slack before you share it. Copy the HTML.

Runs in your browser · Nothing uploaded · No sign-up

Something not working, or missing a feature? Send feedback

About the Open Graph Generator

The Open Graph Generator writes the og: and twitter: meta tags that decide how a link looks when it is shared, and previews the card on Facebook, X, LinkedIn, WhatsApp and Slack. It reads the image's real size to warn about blurry or badly cropped pictures, and can import the tags of an existing page from its HTML.

Files and tags are generated in your browser; nothing you enter, including unpublished URLs and titles, is sent to a server.

How to use the Open Graph Generator

  1. Enter the title, description, page URL and image URL (or try a local image to see how it crops).
  2. Pick the page type and the X card size, and add alt text for the image.
  3. Check the previews and the warnings, then copy the tags into the <head> of the page.

Common mistakes

  • A relative image path. og:image must be a full https:// URL. A path such as /images/og.png is not fetched, so the link is shared without a picture.
  • Text near the edges of the image. Some apps crop the card to a square or 2:1. Keep logos and headlines in the centre of a 1200 × 630 image.
  • One image for every page. A generic site logo on every link makes shares look alike. Per-page images (generated automatically if needed) get more clicks.

Works well with the Open Graph Generator

Frequently asked questions

What size should an Open Graph image be?

1200 × 630 pixels (a 1.91:1 ratio) works on every major network. Keep important text away from the edges, because some apps crop to a square or 2:1.

Why does Facebook or LinkedIn still show the old preview?

Networks cache previews. After changing the tags, ask them to fetch the page again with Facebook's Sharing Debugger or LinkedIn's Post Inspector.

Do I need twitter: tags if I have og: tags?

Mostly not. X reads og:title, og:description and og:image. You only need twitter:card to choose the large image card, plus twitter:site for your account.