What the generator writes, and how platforms read it
Open Graph is a set of <meta property="og:..."> tags, introduced by Facebook, that tell a platform which title, description, image and URL to show when someone shares a link. LinkedIn, Slack, WhatsApp, Discord and most messaging apps read the same tags. X (Twitter) reads its own twitter: tags first and falls back to Open Graph for anything missing. When a link is first shared, the platform's crawler fetches the page, parses these tags and caches the result.
This generator takes title, type, description, URL and image, plus optional site name, locale and image alt text, and always writes two lines whether or not you fill anything in: og:type and twitter:card. The rest appear only when you provide a value.
| Field you fill in | Tags written |
|---|---|
| Type (website, article, profile) | og:type |
| Title | og:title, twitter:title |
| Description | og:description, twitter:description |
| URL | og:url |
| Image URL | og:image, twitter:image |
| Site name (optional) | og:site_name |
| Locale (optional, e.g. en_US) | og:locale |
| Image alt text (optional, needs an image) | og:image:alt, twitter:image:alt |
| (always) | twitter:card: summary_large_image with an image, summary without one |
Worked example
Title "Cast Iron Care Guide", description "How to season, clean and restore a cast iron pan", type article, URL https://example.com/cast-iron and image https://example.com/img/cast-iron.jpg produces:
<meta property="og:type" content="article" />
<meta property="og:title" content="Cast Iron Care Guide" />
<meta property="og:description" content="How to season, clean and restore a cast iron pan" />
<meta property="og:url" content="https://example.com/cast-iron" />
<meta property="og:image" content="https://example.com/img/cast-iron.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Cast Iron Care Guide" />
<meta name="twitter:description" content="How to season, clean and restore a cast iron pan" />
<meta name="twitter:image" content="https://example.com/img/cast-iron.jpg" />Paste the block inside the <head> of that one page. Open Graph is per page, so a blog post needs its own title, description and image rather than the homepage's.
Limits and mistakes to watch for
- The image must be an absolute URL. A relative path such as
/img/og.pngwill not be fetched correctly by a crawler. Aim for 1200 × 630 pixels (about 1.91:1) and keep the file comfortably small; X documents a limit of around 5 MB for card images. - The card type follows the image. With an image URL the tool writes
twitter:cardassummary_large_image; with none it writessummary, because a large-image card without an image renders poorly. - Only the common tags are generated. Image width and height are not written, and choosing "article" does not add
article:published_timeor author tags. Add those manually if you need them. The type list sticks to core Open Graph types (website, article, profile); product pages normally use a product schema or a commerce platform's own tags. - Special characters are escaped. Ampersands, double quotes and angle brackets in your text become
&,",<and>, so a title like "Salt & Pepper" stays valid HTML. - The preview is an approximation. The card shown on the page crops your image to 1.91:1 and truncates long titles, similar to how large cards look, but each platform renders differently.
- Cached previews. After changing tags, run the URL through Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a re-scrape.
Open Graph describes how a link is shared; the title and description Google shows in search come from <title> and the meta description, which the meta tag generator builds. Use the meta tag checker to verify a live page, and read structured data and Open Graph for how the two layers fit together.