What Are Open Graph Tags? How Your Link Looks When Shared

Paste a link into Facebook, LinkedIn, WhatsApp or Slack and a small card appears: a picture, a title, a line of description, and the site name. That card is not an accident. In most cases it is built from a handful of small pieces of code in your page called Open Graph tags. If you have ever shared a link and watched the wrong picture appear, or no picture at all, the answer is almost always in those tags.

This guide explains what Open Graph tags are, which four are required, which extras are worth adding, how they relate to Twitter Cards, and how to fix a card that refuses to update. The one code block here is there so you can recognise the tags when you see them, not so you have to write them from memory.

The short answer: tags that tell platforms what your link should look like

Open Graph tags are <meta> tags in the <head> of a web page. Each names a property starting with og: and gives it a value — a title, a type, an image address, a canonical address. When someone shares your link, the platform reads those tags and builds the preview card from them.

The Open Graph protocol was created by Facebook in 2010 and is now read by LinkedIn, X, Slack, WhatsApp, Discord, iMessage and most other apps that show link previews. One set of tags, written once, shapes the card almost everywhere the link is shared.

One thing they are not: they do not change search rankings, and they do not change what the page looks like to a visitor. A reader who opens your page directly never sees them.

What happens when you share a link

1. Someone pastes your link into a post or a message.
2. The platform fetches your page and looks in its <head> for Open Graph tags.
3. It builds a card from the values it finds: title, description, image and site name.
4. If a tag is missing, the platform guesses — usually from the page title and the first usable image it can find.

That last step is where the trouble starts. A guess can pick a site logo or a cropped fragment of a photograph and present it as the face of your article. Setting the tags yourself replaces guessing with a decision. There is a second wrinkle, covered later: platforms remember the card they built the first time, so fixing a tag does not always fix every share immediately.

The four required tags, one by one

The Open Graph protocol names four required properties for every page. They are the minimum for a reliable card.

og:title — the title on the card

The headline on the preview card. It can differ from the page’s HTML title tag: the card title is written for someone scrolling a feed, so keep it short — platforms cut long titles off.

og:type — what kind of thing the page is

What sort of object the page represents: website for general pages, article for blog posts, product for product pages. Articles can also carry the author and publication time.

og:image — the picture on the card

The image on the card, given as a full address starting with https://. It is the most visible tag — the picture is the largest part of most cards — and a missing og:image is the most common reason a card shows a random picture, or none at all.

og:url — the page’s canonical address

This is the permanent address of the page, the one address all shares should point to. It matters when a page can be reached in more than one way — with or without www, with or without a trailing slash, or with tracking parameters added. Setting og:url tells platforms those versions are the same object, so shares are grouped together. It is the same canonical idea explained in our article on what a canonical URL is.

The recommended extras worth adding

Beyond the four required tags, three more are worth adding to every page you share:

• og:description — a one- or two-sentence summary shown under the title. Write it for a person scrolling a feed, not for a search engine: it should say why the page is worth opening, in plain words. It is a different job from the meta description in search results, as our guide to how long a meta description should be explains.
• og:site_name — the site name, so the card shows your brand even when the title does not mention it.
• og:image:alt — a description of what is in the preview image. The protocol says that if a page specifies an og:image, it should also specify og:image:alt. It describes the image itself — it is not a caption, and it is not a second place to repeat the title.

Also set og:image:width and og:image:height alongside og:image: stating the dimensions helps platforms lay the card out without waiting to download the image first.

A complete example set of tags for a blog post

Here is the full set for an article — use it as a checklist:

<meta property="og:title" content="What Are Open Graph Tags?" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/what-are-open-graph-tags" />
<meta property="og:image" content="https://example.com/images/open-graph-card.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A link preview card with a picture, title and description" />
<meta property="og:description" content="Open Graph tags decide the title, picture and description a shared link shows." />
<meta property="og:site_name" content="Example Blog" />

Notice what is not here: no keywords, no ranking tricks. Every tag answers one question a platform asks — what is this called, what kind of thing is it, where does it live, what picture represents it, and what should the card say about it.

Open Graph vs Twitter Cards: what X still needs on its own

X (formerly Twitter) has its own system, called Twitter Cards, which uses name attributes instead of Open Graph’s property attributes. In practice the two systems overlap heavily, and X falls back to the Open Graph values when the Twitter-specific ones are missing.

There is one tag X still needs on its own: twitter:card. It chooses the card’s shape — summary for a small square thumbnail, or summary_large_image for a full-width picture. Without it, X may not show the large-image card even when a good og:image is set. So set Open Graph first, then add twitter:card for X.

In short: Open Graph serves almost every platform and uses property attributes, while Twitter Cards serve X only and use name attributes — and X falls back to the Open Graph values when its own tags are missing.

The image rules that fix most broken cards

Most broken cards trace back to the image, and most image problems trace back to one of four mistakes:

1. Wrong size. The widely recommended size is 1200 by 630 pixels, a ratio of 1.91 to 1, which displays large and sharp on most platforms. A commonly cited minimum is 600 by 315 pixels, and Facebook’s absolute minimum for an image to appear at all is 200 by 200 pixels.
2. A relative address. og:image must be a full address starting with https://. A relative path like /images/card.jpg works inside your own site, but a platform fetching your page from outside cannot resolve it, and the image fails to load.
3. An image the platform cannot reach. The image must be publicly accessible, on a working address, in a common format such as JPG or PNG. An image behind a login or at an address that returns an error leaves the card imageless.
4. Text crammed into the image. Cards are cropped differently on different platforms, so small text near the edges is often cut off. Keep the important part in the middle.

Why your fixed card still shows the old preview

This frustrates people most: you correct the tags, share again, and the old title or picture is still there. The tags are right — the platform is showing you a memory.

Platforms store the preview they built the first time a link was shared, and do not fetch your page fresh on every share. Until that stored copy is refreshed, new shares keep showing the old card. The fix is to ask the platform to fetch the page again with its own debugging tool: Facebook’s Sharing Debugger (developers.facebook.com/tools/debug/) — paste the address, click Debug, then Scrape Again — LinkedIn’s Post Inspector for LinkedIn, and X’s card validator for X. After forcing a refresh, give it a short while before judging the result. If you replace an image file, give the new file a new name rather than overwriting the old one, so no cached copy of the old file can be served.

One honest distinction matters: a preview tool that builds a card from values you type in can help you draft a card, but it cannot confirm what a platform will show for a live page — only the platform’s own debugger, reading your published page, can do that.

Try it: draft your card before you publish

The best time to catch a bad card is before the link goes out, while the wording and image are still easy to change. That is what Manage My Tools’ Open Graph Preview is for: type in a title, a description and an image address, click Run, and see the combination as a sample card, so a weak combination becomes obvious while the page is still a draft.

Be clear about its limit. The preview builds its card entirely from the values you enter — it never visits your page and never reads the tags your page actually serves. So it is a drafting aid, not a checker: settle the wording and picture here, then confirm the live page with the platform debuggers above. Find it among the site’s SEO tools, and browse every tool from all tools.

FAQ

Do Open Graph tags help my Google rankings?

No. They control how a shared link looks on social platforms and messaging apps, not search rankings. Their value is in the share itself: a clear card is easier to understand at a glance than a bare link or a guessed picture.

I fixed my tags, but Facebook still shows the old card. What now?

That is caching, not a tagging error. Run the address through Facebook’s Sharing Debugger and click Scrape Again to force a fresh read, then allow a short while for the new card to reach shares.

Open Graph tags are small, but they are the first impression your page makes in every feed and chat it lands in. Set the four required tags, add a description and a good 1200 by 630 image at a full address, add twitter:card for X, and confirm the result in the platform debuggers. Then, before your next article goes out, draft its card with the Open Graph Preview.