Open Graph tool

Open Graph Meta Tag Generator

I use Open Graph tags when I want a shared link to show the right title, description, image, and URL. This generator does one thing: it turns those fields into copyable HTML for your page's head.

Generate the tags

Preview

My page title

A short description that explains the page before someone clicks.

https://example.com/page

HTML

<meta property="og:title" content="My page title" />
<meta property="og:description" content="A short description that explains the page before someone clicks." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:site_name" content="Example" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My page title" />
<meta name="twitter:description" content="A short description that explains the page before someone clicks." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />

What these tags control

Open Graph's core fields are title, type, image, and URL. I add description and site name for normal website pages because Facebook, LinkedIn, Slack, Discord, and messaging apps all need enough context to build a useful card.

What this does not fix

Meta tags only help if crawlers can fetch the HTML and image. If your server blocks bots, redirects strangely, or serves a huge image, the shared preview can still fail.

When to automate it

Hand-written tags are fine for a few pages. For blogs, docs, products, and programmatic pages, I use MyOG.social so every URL gets a fresh generated OG image.

Check the page after you publish

Copying the HTML is only the first pass. Publish the page, then run the public URL through the checker so you can see the crawler response, image dimensions, file size, Twitter/X fallback, and platform previews.

cdf733b534ea2f2ed964d150330b323c44837e4f