Open Graph Tags Explained: og:title, og:image Size, Twitter Cards, and How to Debug Link Previews

You ship a page, paste the website link into Slack or LinkedIn, and the card shows the wrong headline, an old image, or no image at all. That card is built from a few lines of metadata in your HTML head, not from your page layout. This post covers what is Open Graph, which open graph tags actually matter, the og image size to use, how Twitter cards fit in, how each platform reads your og data, and how to debug a stale link preview. I'll also show how I check pages with OG Scope, a free Open Graph checker I built.

What is Open Graph?

The Open Graph protocol is a small set of <meta> tags a page puts in its <head> to describe itself when it gets shared. Facebook introduced it, and today Facebook, LinkedIn, WhatsApp, Slack, Discord, and Telegram all read it when someone pastes a URL. People often shorten it to "the Open Graph" or "OGP".

If a page has no Open Graph tags, each app guesses. Usually that means a random image from the page, or the browser-tab <title> with your brand stuffed into it. With good og tags, you pick the headline, the summary, and the image yourself.

One thing to keep in mind: most social crawlers do not run JavaScript. If your SPA adds meta tags only on the client, the crawler won't see them. The tags have to be in the first HTML response, so use SSR, SSG, or prerendering.

What are Open Graph tags? The core set

When people ask "what are open graph tags", the honest answer is a short list. Five tags do almost all of the work:

Tag	Purpose
og:title	The headline on the card
og:description	The short summary under the headline
og:image	The picture beside or above the text
og:url	The canonical URL the card belongs to
og:type	Usually website or article

Here's a practical starting set:

<head>
  <title>Field Notes | Example Studio</title>
  <meta name="description" content="A short summary for search result snippets." />

  <!-- Open Graph -->
  <meta property="og:title" content="Field notes from a wet week" />
  <meta property="og:description" content="What changed, in two lines, for someone who has not opened the page." />
  <meta property="og:image" content="https://example.com/covers/field-notes.jpg" />
  <meta property="og:url" content="https://example.com/blog/field-notes" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="Example Studio" />
</head>

Note that Open Graph uses property=, not name=. In docs and forum threads you'll see these written as "meta property og title", "meta property og image", and so on. That just means the <meta property="og:..."> lines above.

og:title

Your og title is the line people see on the card. Keep it close to 60 characters, because longer strings get cut off in the middle. Write it for the feed, not for the browser tab. "Field Notes | Studio" is a good tab title. "Field notes from a wet week" is a better card headline.

og:description vs. meta description

The meta description is the snippet a search engine may show. og:description is the snippet on the social card. They can use the same sentence, and many templates copy one into the other. That works until the snippet starts to read like a pile of keywords. Write the card line for a person deciding whether to tap. If og:description is missing, some platforms fall back to the meta description.

For metadata SEO, be realistic. Open Graph tags are not a ranking factor in themselves. What they change is how your link looks once it's shared, and a better-looking card gets more clicks.

og:url and og:type

The og:url tag (sometimes written as meta property og url) should be the final, canonical public URL: the address you want people to land on, with no tracking parameters. The meta property og type is easy to overthink. Use article for posts and website for everything else. A wrong og type almost never breaks a card. A missing image does.

What is an Open Graph image?

An Open Graph image is the file named in your og image tag. It isn't the first <img> on the page, and it isn't a CSS background. It's exactly the URL in og:image.

The open graph image usually breaks in one of three boring ways:

1. Relative path. content="/og.jpg" works in your head, but a crawler may not resolve it the way you expect. Always use an absolute https:// URL.
2. Not public. The file sits behind a login, a staging password, or a bot-blocking rule.
3. Expiring URL. A signed CDN link that's valid today and returns 403 next week.

<!-- ❌ fragile -->
<meta property="og:image" content="/covers/field-notes.jpg" />

<!-- ✅ absolute, public, stable -->
<meta property="og:image" content="https://example.com/covers/field-notes.jpg" />

What og image size should you use?

1200 × 630 px is the og image size most commonly used for a large image preview. For LinkedIn, 1200 × 627 or 1200 × 630 is a solid default. JPG, PNG, and WebP are widely supported.

Facebook, LinkedIn, and Slack often crop to about 1.91:1. Keep faces, logos, and text near the center, because anything on the edge is what gets cut. Make any text on the image big. Small type turns into gray mush at card size.

For more detail on what to test (the published value, the resolved URL, whether the file loads, the pixel dimensions), see this guide to what an OG image checker tests.

Twitter cards (X)

X still reads its own twitter:* tags, which use name= instead of property=:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Field notes from a wet week" />
<meta name="twitter:description" content="Two lines that stand alone in the feed." />
<meta name="twitter:image" content="https://example.com/covers/field-notes.jpg" />
<meta name="twitter:site" content="@example" />

The tag that matters most is twitter:card:

• summary is a compact card with a small image next to the text. It's the historical default if you don't set anything.
• summary_large_image puts a wide image above the title.

If you want the large image layout, set summary_large_image on purpose. When the Twitter tags are missing, X can fall back to the Open Graph equivalents (twitter:title → og:title, twitter:image → og:image). twitter:site and twitter:creator are just handles. They won't rescue a card that has no image.

To see which layout your page asks for and which fallbacks kick in, use a Twitter card checker that explains summary vs. summary_large_image before you check the Twitter preview in a real post.

How each platform reads your tags

Facebook

A Facebook link preview mainly uses og:title, og:description, og:image, and og:url. If og:title is missing, Facebook falls back to the HTML <title>. Facebook also caches link metadata aggressively, which is the main cause of "I fixed it but it still looks old." The Facebook link preview guide covering tags and cache explains the wide crop and the caching behavior.

LinkedIn

A LinkedIn preview reads Open Graph tags, plus og:site_name if you set it. The catch is that LinkedIn does not use twitter:image as a fallback. If you only set Twitter tags, your Twitter preview can look perfect while the LinkedIn post shows no image. The post composer also caches cards. The LinkedIn preview guide on what the card reads goes into both issues.

Slack, WhatsApp, Discord, Telegram

These apps also unfurl links from Open Graph tags. Slack shows a title, description, and image, usually at a wide crop. WhatsApp builds a compact card from the title, description, and image. If the core og tags are correct and the image is a public absolute URL, these previews generally work too. Each app still caches and crops in its own way, so check before a big launch.

Debugging stale and broken previews

When a client says the "website link preview image text metadata" looks wrong, they mean the picture, the headline, and the line under it. Split the problem in two:

1. Your live HTML is wrong. A tag is missing, the image URL is relative, or the tags exist only after JavaScript runs.
2. Your HTML is right, but the platform cached an old fetch.

You can check the first one yourself with curl, which sees roughly what a crawler sees:

# What does the raw HTML say? (no JavaScript executed)
curl -sL https://example.com/blog/field-notes | grep -iE 'og:|twitter:|<title|name="description"'

# Does the image actually load, and as an image?
curl -sI https://example.com/covers/field-notes.jpg | grep -iE '^HTTP|content-type'

For the second one, you need the platform's own tools:

• Facebook debugger (Sharing Debugger at developers.facebook.com) shows what Facebook cached and lets you ask for a fresh scrape.
• LinkedIn Post Inspector does the same job for LinkedIn.

A quick trick for chat apps is to add a harmless query string (?v=2) so the app treats it as a new URL. Only do this while testing, though, and keep og:url canonical.

Checking it all with OG Scope

Running curl against every page gets tedious, so I built OG Scope, a free Open Graph checker and Open Graph preview tool. You paste a public URL and press Preview. No account needed.

Here's what it does, step by step:

1. Your browser sends the URL, and OG Scope's server fetches the public HTML. It follows safe redirects and refuses private or localhost addresses.
2. It reads the Open Graph tags, the Twitter card tags, the page title, the meta description, the canonical URL, and the favicon.
3. It shows estimated cards for Facebook, LinkedIn, X, WhatsApp, Slack, Discord, and Telegram, along with a metadata table, an image check, and a short checklist.

It also works as a meta tags analyzer tool and a meta description checker tool, scoped to the tags that build a link preview: title, description, canonical, favicon, Open Graph, and Twitter cards. It doesn't give you a ranking score.

The image check works as an OG image checker. It shows the og:image value exactly as you published it, the resolved absolute URL, whether the file actually loaded, and the pixel dimensions when it can read them from the file. It warns when either side is under 200 px. If the size can't be read, that field stays blank. It doesn't guess.

A few honest limits, all stated on the site:

• The cards are estimates. They aren't screenshots from Facebook, LinkedIn, or X, and OG Scope isn't affiliated with those companies.
• It doesn't run JavaScript on the target page. If your tags only appear client-side, OG Scope won't see them. Neither will most crawlers, which is exactly why that's worth knowing.
• It shows a fresh fetch of your HTML, not a platform's cache. In that sense it's an Open Graph debugger for your markup. You still need the official tools above to clear a platform's cache.
• A successful result may be cached for about ten minutes. There's no search history. The about page covers the details.

For a deeper walkthrough of what the cards show and how to write each tag, read the Open Graph preview guide.

My usual workflow:

1. Deploy.
2. Run the URL through OG Scope and fix anything flagged: a missing og:description, a relative image path, a missing twitter:card.
3. If Facebook or LinkedIn still shows the old card, re-scrape in their official tools.
4. Paste the preview link into a test DM before posting it publicly.

Checklist

• All tags are in the server-rendered <head>, not added only by JS
• og:title is written for the card, around 60 characters
• og:description is one or two plain sentences
• og:image is an absolute HTTPS URL, publicly reachable, 1200 × 630
• Important parts of the image are centered for the 1.91:1 crop
• og:url is the canonical URL
• og:type is website or article
• twitter:card is set to summary_large_image if you want the wide card
• Don't rely on twitter:image alone, because LinkedIn ignores it

FAQ

What is an Open Graph image?
It's the file named by og:image. Most social media preview cards show it as the main picture. It needs to be an absolute, public HTTPS URL.

What OG image size should I use?
1200 × 630 px in JPG, PNG, or WebP, with the subject near the center.

Why does my preview still show the old image?
The platform cached an earlier fetch. Check your live HTML first, then use the Facebook Sharing Debugger or LinkedIn Post Inspector to ask for a re-scrape.

Do I need Twitter tags if I have Open Graph tags?
Not strictly, because X falls back to Open Graph. Set twitter:card anyway if you want the large-image layout.

Is OG Scope free? Does it store my URLs?
It's free and doesn't require an account. Successful results are cached briefly (about ten minutes), and there's no search history. See the privacy policy for specifics.

Found a preview that looks wrong in OG Scope?
Send the URL and what you expected through the contact page.

---

Good social sharing comes down to a few correct lines in your <head> and one check before you hit post. Paste your next URL into OG Scope and see what the crawlers will see.