Open Graph Generator

Open Graph Generator: Turn Plain Links Into Click-Worthy Cards

Paste a bare link into Slack and you usually get a flat blue URL. Paste a link that carries Open Graph tags and you get a card: a 1200×630 image, a bold headline, a one-line summary, and your domain underneath. That card is the difference between a link people scroll past and a link they tap. The Open Graph Generator builds the exact <meta> tags that produce it, so you control how every shared link looks on Facebook, LinkedIn, WhatsApp, Slack, Discord, and X.

You fill five fields — title, description, image URL, page URL, and type — and the tool hands back a clean, copy-ready block you drop into your page <head>. It assembles the snippet in your browser, so nothing about an unpublished page or a pre-launch campaign ever leaves your machine. Wiring up a single blog post or standardizing previews across a 500-page store, this is the fastest path from "sad gray box" to a preview that earns the click.

See It Work: One Worked Example, Start to Finish

Theory is easy to skim past, so start with a real run. Say you are publishing a blog post titled "7 Espresso Mistakes Killing Your Morning Coffee." You fill the fields like this:

• og:title: 7 Espresso Mistakes Killing Your Coffee (40 characters — safely under the cutoff)
• og:description: The grind, dose, and timing errors that flatten your shot — and the quick fixes that bring it back. (98 characters)
• og:url: https://beanlab.com/blog/espresso-mistakes
• og:image: https://beanlab.com/img/og/espresso-mistakes.jpg (sized 1200×630)
• og:type: article

The generator returns this block, ready to paste:

<meta property="og:title" content="7 Espresso Mistakes Killing Your Coffee">
<meta property="og:description" content="The grind, dose, and timing errors that flatten your shot — and the quick fixes that bring it back.">
<meta property="og:url" content="https://beanlab.com/blog/espresso-mistakes">
<meta property="og:image" content="https://beanlab.com/img/og/espresso-mistakes.jpg">
<meta property="og:type" content="article">
<meta property="og:site_name" content="BeanLab">
<meta property="og:locale" content="en_US">

Share that URL and Facebook builds a large card: the espresso photo across the top, the headline in bold, the grind-and-dose line beneath it, and "beanlab.com" as the source. The title sits at 40 characters and the description at 98 — both comfortably inside the truncation limits, so nothing gets clipped on a phone.

Want a product card instead? Change two things. Set og:type to product, point og:image at a clean shot of the item on a plain background, and write a benefit-led title like Stainless Pour-Over Kettle — 1L, Gooseneck. The same five-field workflow now produces a storefront listing inside a WhatsApp group, which converts far better than a logo and a stripped link.

What Open Graph Actually Is

Open Graph is a protocol Facebook introduced in 2010 that lets a web page describe itself as a rich object using special <meta> tags. When a platform's crawler — Facebook's, LinkedIn's, Slack's link unfurler — fetches your URL, it reads these tags and builds the preview card from them. Without Open Graph tags, the crawler guesses: it scrapes a random heading, grabs the first image it finds (often a logo, an avatar, or an ad), or shows nothing at all. The generator removes that guesswork by feeding crawlers the exact values you want them to use.

The Tags That Matter, and What Each One Controls

Every tag is a property/value pair placed in the head. The ones worth setting:

• og:title — the bold headline on the card. It can differ from your HTML <title> if you want a punchier share line.
• og:description — the supporting sentence under the title. It frames the page in plain language.
• og:image — the absolute URL of the thumbnail. This single tag has the largest effect on click-through.
• og:url — the canonical address, which keeps every share pointed at one URL and consolidates engagement.
• og:type — the object kind: website, article, product, profile, video, and more.
• og:site_name — the readable name of your brand or site.
• og:locale — language and region, such as en_US or fr_FR.

If a page is translated, you do not pick one locale and abandon the rest. Set the primary with og:locale and list alternates with repeated og:locale:alternate tags — for example fr_FR and es_ES beneath an en_US default — so Facebook knows which audiences each version serves.

Generating Your Tags Step by Step

The whole workflow takes under a minute:

1. Open the tool. Load it in any browser. Nothing to install, no account.
2. Enter the title (og:title). Type the headline for the card. Keep it near 40-60 characters so it does not get clipped.
3. Write the description (og:description). One or two clear sentences, roughly 110-160 characters — the gray subtext under the title.
4. Paste the page URL (og:url). Use the canonical, absolute address, e.g. https://example.com/article.
5. Add the image URL (og:image). A full, public link to a 1200×630 graphic.
6. Pick a type (og:type). website for most pages, article for posts and news, product for shop items.
7. Set site name and locale (optional). Add og:site_name and a locale like en_US for extra polish.
8. Copy the generated block and paste it inside <head>...</head>, before the closing head tag.
9. Validate. Re-scrape the URL in a platform debugger to confirm the new card renders as designed.

Where the Tags Go in Your HTML

Every Open Graph tag is a <meta> element with a property attribute (the tag name) and a content attribute (your value). They all live inside the document <head>, ideally near the top, before any large scripts. Placement matters: crawlers often read only the head, and some stop scanning after the first portion of the document, so tags buried below heavy inline scripts can be missed. The order of the og tags relative to one another does not matter — og:image can come before or after og:title — but they should all be present together so the platform receives a complete picture.

Mapping the Output Into React, Next.js, Vue, or Astro

If you work in a framework, the generated markup translates directly: each meta tag becomes a head entry with property and content props. In Next.js you can drop the values into the metadata configuration — the same espresso values become an openGraph object with title, description, url, and an images array, where each image entry carries url, width, and height. The generator gives you the canonical values; mapping them into your framework is a quick copy-and-rename rather than a rewrite.

Choosing an og:type Beyond "website"

Most pages are fine with website, but the right type unlocks extra fields and changes how the card is framed. Three you will actually reach for:

• article — for blog posts and news. Pairs with article:published_time, article:author, and article:tag, which let some platforms show a byline or date.
• product — for shop pages. Pairs with product:price:amount and product:price:currency so a price can surface in the preview where supported.
• video.other — for pages built around a clip. Add og:video with the file or player URL plus og:video:width and og:video:height so the card offers inline playback instead of a still image.

Pick the type that matches the page's real purpose. A pricing page set to article looks odd when a platform expects a byline and finds none; a how-to post set to website simply misses the chance to show a publish date.

Sizing the Image So the Card Goes Big

The image decides whether a share card commands attention or shrinks to a tiny square. Use 1200×630 pixels — a 1.91:1 ratio — and platforms render the large, edge-to-edge format on Facebook and LinkedIn. Drop below roughly 600×315 and many platforms downgrade to a small thumbnail beside the text instead of a full-width banner. A few concrete rules that prevent ugly cards:

• Keep faces and text away from the edges. Different platforms crop slightly; a 100px safe margin protects an overlay headline from being sliced.
• Keep the file lightweight. A 1200×630 JPG should land well under 300 KB at quality 80, so the crawler can fetch it quickly. Avoid multi-megabyte PNGs as share images.
• Prefer JPG or PNG. WebP works on most modern crawlers, but JPG is the safest universal choice for a share image.
• Use a unique image per page. A hiking post and a pricing page should not share one thumbnail; per-page images consistently out-click a single sitewide default.

Declaring the dimensions explicitly speeds up the first render. Add og:image:width and og:image:height next to og:image so the platform reserves the right space on its very first crawl instead of waiting to download and measure the file. For an espresso card that is <meta property="og:image:width" content="1200"> and <meta property="og:image:height" content="630">.

Fixing "Some Open Graph Meta Tags Are Missing"

Social debuggers love to warn that some open graph meta tags are missing. It rarely means your page is broken — it means a crawler could not find one or more recommended tags. The usual triggers, and how a complete generated block fixes each:

• No og:image. The most common gap. Include a full, absolute image URL so the card shows a thumbnail, not a blank panel.
• Relative URLs. Crawlers need absolute links. /images/share.jpg fails; https://example.com/images/share.jpg works.
• Missing og:url or og:type. Without them, some platforms downgrade the card or pick odd defaults.
• Image behind a login or robots block. If the crawler cannot fetch the file, the card stays empty. Host it somewhere public and crawlable.
• Tags outside the head. Open Graph tags placed in the body are ignored entirely.

Because the generator always emits a complete, well-formed set, the warning typically disappears the moment you paste the block and re-scrape the page.

The Re-Scrape Step Almost Everyone Forgets

You change a tag, reload the page, share it again — and the old card still shows. That is not a bug in your markup; platforms cache preview data aggressively, sometimes for days. The fix is to force a fresh fetch in each platform's debugger: Facebook's Sharing Debugger has a "Scrape Again" button, LinkedIn has its Post Inspector, and X has its Card Validator. Paste the URL, trigger the re-scrape, and the new card appears. Slack and Discord refresh on their own schedule, but pasting the link into a private channel after a Facebook re-scrape usually pulls the updated version. Make re-scraping the last step of every tag edit and the "why is the old image still showing" problem disappears.

Open Graph vs. Twitter Cards vs. Meta Description

Three things get confused constantly, so here is the clean split.

Open Graph vs. Twitter Cards. X historically used its own twitter: tags but reads Open Graph as a fallback. The pragmatic move is to ship og:title, og:description, and og:image for every network, then add twitter:card (usually summary_large_image), twitter:title, and twitter:image only when you want to fine-tune the look on X specifically. You do not need to duplicate everything — X borrows from Open Graph for any twitter tag you leave out.

og:description vs. meta description. They look identical but serve different audiences. The standard meta description controls your snippet in Google search results; og:description controls the social preview card. Make them the same for simplicity, or split them: a keyword-conscious meta description for search, and a punchier, more emotional og:description for sharing. The generator sets the social side without touching your search snippet.

What Open Graph Does and Does Not Do for SEO

Be precise here: Open Graph tags are not a direct Google ranking factor. Google does not read og:title or og:description to rank pages. The impact is indirect but real — better-looking cards earn more clicks and shares, which drive referral traffic, brand searches, and natural links, all of which can lift visibility over time. Treat the Open Graph Generator as a social-distribution tool first and an SEO amplifier second. Pair it with solid on-page basics — a strong HTML title, meta description, headings, and content — and the two systems complement each other: the meta description owns the Google snippet, the og:description owns the social card.

Writing Tags That Actually Get Clicked

Correct tags are step one; compelling tags are step two:

• Write a share-specific title. og:title can be more emotional or curiosity-driven than your SEO title. Lead with the benefit.
• Front-load the description. Put the strongest words first; long descriptions truncate on small screens.
• Use emoji sparingly and test them. A single leading emoji can lift a card in a crowded feed, but some unfurlers strip or mangle them — preview before you ship.
• Keep og:url canonical. Point every variant to one clean URL so likes, comments, and shares pool on a single link.
• Match the card to the page. Misleading previews get reported and erode trust; the card should honestly reflect the destination.

Frequently Asked Questions

Is the Open Graph Generator really free?

Yes. The Open Graph Generator is completely free to use with no hidden fees, no usage caps, and no premium tier required to get full output. You can generate tags for as many pages as you like.

Do I need to sign up or create an account?

No sign-up is required. There is no login, no email gate, and no account. You open the tool, enter your details, and copy your tags immediately.

Are my inputs kept private?

Yes. The tags are assembled in your browser from the text you type, so your titles, descriptions, and URLs are not uploaded to a third-party server for processing. This keeps unpublished pages and campaign details private.

What is the best image size for og:image?

Use 1200×630 pixels for the large, high-impact card format. This 1.91:1 ratio displays well on Facebook, LinkedIn, and most other platforms without awkward cropping.

Why does my old image still show after I updated the tags?

Social platforms cache preview data for performance. Your new og:image is live, but the platform is serving a stored copy. Use the platform's sharing debugger or link inspector to re-scrape the URL, which forces a fresh fetch and updates the card.

My image is not appearing at all — what is wrong?

Check three things: the og:image URL is absolute (starts with https://), the image is publicly reachable without a login, and it is not blocked by your robots rules. Also confirm the file is a standard format like JPG, PNG, or WebP and is reasonably sized.

Where exactly do I paste the tags?

Inside the <head> of your HTML, before the closing </head> tag. If your site uses a CMS or builder, look for a "custom head code" or "header scripts" field and paste them there.

Do I need both Open Graph and Twitter Card tags?

Not strictly — X falls back to Open Graph. But including a few twitter: tags gives you finer control on X. Many people generate the og tags here and add a small Twitter Card block for complete coverage.

Can I use this for a product or e-commerce page?

Absolutely. Set og:type to product, use a clean product image, and write a benefit-focused og:title and og:description. Your shop links will then display polished, trustworthy cards across social apps and chat platforms.

Will Open Graph tags improve my Google ranking?

Not directly — Google does not rank pages based on og: tags. But better social previews drive more clicks, shares, and traffic, which can indirectly support your overall SEO. For search snippets, pair this with a standard meta description.

Related Tools

Round out your workflow with these other free utilities from Tools Hub:

• Meta Tag Generator — build title and meta description tags for search engine snippets alongside your Open Graph tags.
• Twitter Card Generator — create the twitter: tags that fine-tune how links look specifically on X.
• Image Compressor — shrink your 1200×630 og:image so it loads fast without losing quality.
• Favicon Generator — produce the small site icon that appears next to your domain in tabs and some previews.
• HTML Minifier — clean and compact your page markup, including the head section where your tags live.
• JSON-LD Schema Generator — add structured data so search engines understand your page beyond Open Graph.