Stop Doing This Wrong: What Are Open Graph Tags (and Why Your Link Previews Look Broken)

You paste a link into Slack and it shows up as a naked URL — no image, no headline, just a sad blue string. That's not a Slack problem. It's a missing <meta property="og:..."> problem, and it's one of the most common things I see when someone asks me what are open graph tags.

Short answer: Open Graph tags are a small block of HTML in your page's <head> that tells social platforms and chat apps what to display when your URL gets shared. Facebook invented the protocol, and now Slack, LinkedIn, Discord, iMessage, WhatsApp, and X all read it. If the tags are missing or wrong, the platform guesses — and its guess is usually ugly.

What Open Graph tags actually control

When a crawler hits your page, it looks for a handful of og: properties. The four that matter most:

• og:title — the headline shown in the card. Not always the same as your <title> tag; social cards can afford a punchier line.
• og:description — the two-line summary under the headline. Facebook truncates around 200 characters, so front-load the useful part.
• og:image — the thumbnail. This is the one people get wrong most often, and it's the one that hurts the most when it's broken.
• og:url — the canonical URL for the page. Useful when you have tracking parameters or duplicate paths.

There are others — og:type, og:site_name, og:locale — but those four do 90% of the visible work.

Here's the thing that trips people up: your regular SEO <title> and <meta name="description"> are separate from Open Graph. Google may use them for search results, but Facebook will not fall back to them reliably. You need both sets.

Why your preview looks broken (the usual suspects)

I've debugged enough of these to know the pattern. It's almost never the platform's fault.

The image is too small or the wrong ratio. Most platforms want at least 1200×630 pixels, roughly a 1.91:1 ratio. A 400×400 logo will either get cropped weirdly or dropped entirely.

The image URL is relative. og:image needs a full absolute URL — https://example.com/card.jpg, not /card.jpg. Relative paths silently fail on most crawlers.

The tags are in the <body> instead of the <head>. Some CMS themes inject them in the wrong place. Crawlers often ignore them there.

You're testing a URL that redirects. If example.com/page 301s to example.com/page/, the crawler may cache the preview for the redirect target and never re-check the original.

The platform cached an old version. Facebook and LinkedIn cache aggressively. Once you fix the tags, you usually need to force a re-scrape through their debugger tools before the new preview shows up.

Use our online tool to build the tags correctly the first time

The Meta Tags Generator is a browser-based form that spits out the full <head> snippet for SEO meta, Open Graph, and Twitter Card tags. Nothing gets uploaded — it's client-side string templating, so your URLs and copy stay on your machine.

Here's the workflow I actually use:

1. Fill the form. Enter your page title, description, canonical URL, and the social image URL. There are separate fields for the social-specific title and description, which is handy when you want a shorter, more clickable version than your SEO title.
2. Watch the previews update. The tool renders a live Google SERP preview and a Facebook/Twitter card preview side by side. This is the part that saves you time — you see the truncation and image crop before you ship, not after someone complains in Slack.
3. Copy the HTML. Grab the complete <head> snippet and paste it into your site's template, layout file, or CMS head-injection field.

That's it. No account, no upload, no waiting for a crawler to tell you what's wrong.

If you also need structured data, the Pro tier (a one-time $12.99) adds JSON-LD schema builders for FAQ, Article, and Product, plus a robots.txt generator, a multi-size favicon pack, and AI title/description suggestions. The free generator covers the core OG and Twitter Card output, which is what most people need.

The manual alternative (and when it's actually better)

You can absolutely hand-write these tags. It's maybe fifteen lines of HTML:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, specific summary." />
<meta property="og:image" content="https://example.com/card.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />

For a one-off landing page, that's fine. Where manual breaks down:

• Templates with dynamic content. If you're generating pages from a CMS or a static site generator, you need variables, and hand-editing gets error-prone fast.
• You can't see the crop. Writing og:image blind means you won't notice that your 1200×630 image has the logo in the bottom-right corner where the card overlay sits.
• Consistency across many pages. It's easy to forget twitter:card on page twelve of twenty.

A generator with a live preview catches all three. The trade-off is that you still have to paste the output into your template — the tool doesn't crawl your site or push changes for you.

Quick tips before you ship

• Test with the real debuggers. Facebook's Sharing Debugger and LinkedIn's Post Inspector both force a re-scrape. Use them after every change.
• Keep og:title under ~60 characters if you can. Longer titles get truncated in the card, and the cut is rarely flattering.
• Don't reuse your SEO description verbatim unless it's already short and punchy. Social descriptions can be more conversational.
• Set og:image:alt if you care about accessibility. It's not universally supported, but it costs nothing.
• Check your privacy posture. If you're pasting internal staging URLs into a third-party preview tool, that URL is now on someone else's server. The Meta Tags Generator runs entirely in your browser, which is why I default to it for anything not-yet-public. You can read more about how that works on the privacy page.

One last thing: Open Graph tags don't affect Google rankings directly. They affect click-through when your link gets shared, which is a different lever. Treat them as a distribution tool, not an SEO one.

FAQ

Do Open Graph tags affect my Google search ranking?

Not directly. Google uses your standard <title> and <meta name="description"> for search snippets. Open Graph tags are read by social platforms and chat apps when your URL is shared. They influence click-through on those shares, which is a separate lever from ranking.

What size should my og:image be?

Aim for at least 1200×630 pixels, which is roughly a 1.91:1 aspect ratio. That's the size most platforms expect for a large card. Smaller images may get cropped oddly or dropped entirely, and square logos tend to look bad in a wide card layout.

Why does my link preview still look old after I fixed the tags?

Caching. Facebook, LinkedIn, and X all cache preview data aggressively. After you update your tags, run the URL through the platform's own debugger tool to force a re-scrape. Until you do that, the old preview can stick around for days.

Can I use relative URLs in og:image?

No. Crawlers need a full absolute URL like https://example.com/card.jpg. A relative path such as /card.jpg will usually fail silently, and you'll get a blank or missing image in the preview without any error message.

Do I need separate Twitter Card tags if I already have Open Graph?

It depends on the platform, but adding twitter:card and the matching twitter:title, twitter:description, and twitter:image tags is safer. X can fall back to Open Graph in some cases, but explicit Twitter Card tags give you control over the card type, especially summary_large_image.

Does the Meta Tags Generator upload my URLs anywhere?

No. It runs entirely in your browser using client-side string templates, so the title, description, and image URLs you type stay on your device. That matters if you're previewing staging or internal URLs you don't want logged on a third-party server.