Generate Open Graph Meta Tags for Social Sharing

You pasted your link into Slack or LinkedIn and got a naked blue URL, no title, no image, no description. That flat preview is why people go looking for how to generate Open Graph meta tags for social sharing. Open Graph is the protocol that tells Facebook, LinkedIn, Slack, Discord, and dozens of other platforms what card to render when someone shares your page.

Get the tags right once and every share turns into a title, a description, and a thumbnail. Get them wrong and you leak reach on every link.

What Open Graph Meta Tags Actually Do

Open Graph tags are <meta> elements in your page <head>, each with a property attribute starting with og: and a content value.

Four tags carry most of the weight. Here is the minimum a shared link needs to render a full card:

<meta property="og:title" content="Generate Open Graph Meta Tags for Social Sharing" />
<meta property="og:description" content="Build, size, and test OG tags so every shared link renders a full preview card." />
<meta property="og:image" content="https://example.com/og/social-sharing.png" />
<meta property="og:url" content="https://example.com/blog/open-graph-tags" />
<meta property="og:type" content="article" />

A crawler fetches your page, reads those tags, and builds the preview from them. It does not run your JavaScript in most cases, so the tags must exist in the HTML the server returns, not in markup a client-side framework injects after load.

og:url should hold the canonical URL. When the same article is reachable at several addresses, that tag tells the scraper which one owns the share count.

Generate Open Graph Meta Tags for Social Sharing in the Browser

Writing five tags by hand is easy to get wrong, since a single typo in a property name silently drops that field from the card. A generator removes the guesswork.

Open the Open Graph Generator and fill in the title, description, image URL, and page URL. The tool emits a clean block of <meta> tags you paste into your <head>.

Three habits keep the output honest.

Use absolute image URLs. og:image must be a full https:// address, because the scraper has no page context to resolve a relative path against.

Set og:url to the canonical, not the current querystring-laden address a visitor happened to land on.

Fill og:description with copy written for a human skimming a feed, not a keyword-stuffed string.

Paste the generated tags, deploy, and move to testing before you trust the result. What a generator produces is only correct until a scraper disagrees.

What Is an og:image and the Correct Size

The og:image is the thumbnail that dominates the card, and it is the tag people get wrong most often.

Use 1200 by 630 pixels. That 1.91:1 ratio is what Facebook and LinkedIn crop to, and matching it exactly avoids the platform slicing off your text or logo.

Keep the file under 5 MB, and prefer PNG or JPG. Some scrapers skip images above 8 MB entirely, leaving you with a card that has a title but a blank image slot.

Put critical text near the center. Different platforms pad and crop the edges differently, so a headline pinned to the bottom edge can vanish on one network while surviving on another.

Set the companion dimension tags so the platform can reserve layout space before the image finishes loading:

<meta property="og:image" content="https://example.com/og/cover.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Diagram of Open Graph meta tags in a page head" />

The og:image:alt value describes the image for screen readers on platforms that surface it. Skipping it does not break the card, but including it is a cheap accessibility win.

Open Graph vs Twitter Card Meta Tags

People assume X needs a completely separate tag set. It mostly does not.

X reads Open Graph tags as a fallback. If you have og:title, og:description, and og:image, a shared link already renders a basic card on X without a single twitter: tag.

Two Twitter-specific tags are worth adding on top. twitter:card picks the layout, and summary_large_image gives you the big-thumbnail format most people want:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />

Note the difference in attribute name. Open Graph uses property="og:...", while Twitter cards use name="twitter:...". Mixing those up is a common reason platforms ignore a tag, so a quick find-and-check in your <head> pays off.

Skip duplicating twitter:title and twitter:description unless you genuinely want different copy on X. The OG values already cover both.

How to Test Open Graph Tags Before Publishing

Never trust tags you have not seen a scraper parse. Caching makes this non-negotiable, because most platforms cache your card for days after the first fetch, so a broken first impression sticks.

Run the page through the OG Tag Debugger to see exactly which tags a crawler extracts and how the card will render. It surfaces missing fields, relative image URLs, and length problems before a real platform caches them.

Then validate og meta tags for Facebook sharing with the official Sharing Debugger in Meta's developer tools. It has a "Scrape Again" button that busts the platform cache, which is the only reliable way to force a refresh after you fix a tag.

Preview the X layout separately with a Twitter Card preview, since X crops and sizes differently from Facebook.

A fast local sanity check with curl confirms the tags exist in the server response, before a scraper ever sees the page:

curl -s https://example.com/blog/open-graph-tags \
  | grep -Eo '<meta property="og:[^>]+>'

If that command returns nothing, a client-side script is injecting your tags and most scrapers will never see them. Fix that first, because no debugger can find a tag the server never sent.

Meta Tags for Link Preview Thumbnails and Character Limits

Length matters, because platforms truncate long fields mid-word and the cut is ugly.

Keep og:title under about 60 characters so a narrow card doesn't clip it. Keep og:description in the 110 to 160 character range, enough to be useful without the tightest layout truncating it.

Respecting og:title and og:description character limits is the difference between a card that reads cleanly and one that ends in a dangling ellipsis. Write the copy, count the characters, trim to fit.

One more failure mode worth naming: an unescaped quote or ampersand in a content value can break the whole tag. If your title contains a double quote, the attribute closes early and you lose the rest of the value. Escape it as " or switch the attribute to single quotes.

While you are in the <head>, the HTML minifier trims the surrounding markup without touching the meaning of your tags, so the page a scraper fetches stays lean.

Ship Cards That Actually Render

Generate Open Graph meta tags for social sharing, size the og:image to 1200 by 630, add two Twitter tags for X, and test with a debugger before you publish. That sequence turns every shared link into a real preview card instead of a bare URL.

Ready to build yours? Use the free Open Graph Generator to produce the tags in your browser, then confirm them with the OG Tag Debugger before the first share caches. No account, no upload, no guesswork.