Open Graph Generator

What are Open Graph tags?

Open Graph tags are <meta> elements with a property attribute starting og: that describe a page as a shareable object: its title, type, canonical URL and preview image. Facebook created the Open Graph protocol, and most apps that build link previews (Facebook, LinkedIn, messaging apps, many CMS embeds) read these tags when someone pastes your URL.

This generator turns six fields into those tags. You type the title into the main box; the rest are optional.

Field-by-field output

The type dropdown has three choices: website, article and product. The first two are global types on ogp.me. product is not on that list, so treat it with care.

Example: a review article

Filling every field for a gear review:

<meta property="og:title" content="Trail Running Shoes for Wet Rock">
<meta property="og:type" content="article">
<meta property="og:description" content="We tested 9 shoes on wet granite. Here is what gripped.">
<meta property="og:url" content="https://example.com/reviews/wet-rock-shoes">
<meta property="og:image" content="https://example.com/img/wet-rock-1200x630.jpg">
<meta property="og:site_name" content="Example Outdoors">

The order is fixed: title and type first, then whichever optional tags you filled. Spaces at either end of a field are trimmed, and &, <, > and " are escaped as HTML entities (&, <, >, "), so a title like Tips & Tricks or an image URL with a query string such as ?w=1200&h=630 produces valid attribute values that scrapers decode back to the original text. Nothing is validated, though, so a typo in the image URL goes straight into the output.

Leave everything but the title blank and you get just two lines, og:title with your text and og:type set to website. That's valid HTML but falls short of the four required properties.

Getting a preview that looks right

1. Use absolute URLs. Write og:url and og:image with https:// and the full host. A path like /img/cover.jpg has no host for a scraper to resolve against.
2. Point og:url at the canonical address. ogp.me defines it as "the canonical URL of your object that will be used as its permanent ID in the graph", so use the same URL as your rel="canonical" link, without tracking parameters. The canonical URL checker shows what a live page declares.
3. Pick a page-specific image. Check its pixel dimensions with the image size analyzer before you publish.
4. Paste the tags inside <head>. The ogp.me examples also add prefix="og: https://ogp.me/ns#" to the <html> element.
5. Test the live URL in the platform's own debugger before announcing the page.

Facebook's webmaster guide asks for og:url, og:title, og:description and og:image on every page, says the type defaults to website when missing, and recommends declaring the image's width and height so the preview renders correctly on the first share. It also notes images are cached by URL, so a replacement image needs a new filename.

Tags you'll need to add by hand

The generator covers the core set only. These are common additions from the ogp.me spec:

• og:image:width and og:image:height, the image size in pixels.
• og:image:alt, which ogp.me describes as "a description of what is in the image (not a caption)".
• og:locale, in language_TERRITORY form, defaulting to en_US.
• og:image:secure_url if you serve an alternate HTTPS image address.

Article pages can also carry type-specific properties such as publication time and author, defined under the article type on ogp.me.

Open Graph and X

X reads its own twitter: tags first and falls back to og:title, og:description and og:image when they're missing. You still need a twitter:card tag to choose the card layout, which the Twitter Card generator provides. To give people a ready-made way to share the page once the tags are live, build links with the share link generator.