Toolerax logoToolerax
·6 min read

Open Graph Tags Explained

Share a link on Facebook, LinkedIn or X and a preview card appears — an image, a title, a snippet. That card isn't magic; it's controlled by Open Graph meta tags in your page's <head>. Get them right and your links look professional and get more clicks. Ignore them and you get a bare, unappealing URL.

What Open Graph is

Open Graph is a protocol (originally from Facebook) that lets you define how a page appears when shared. The tags all start with og: and live in the head:

<meta property="og:title" content="…" />

The tags you actually need

  • og:title — the headline on the card.
  • og:description — a one or two-line summary.
  • og:image — the preview image (the most important one).
  • og:url — the canonical URL of the page.
  • og:type — usually website or article.
  • og:site_name — your brand name.

Twitter / X cards

X reads Open Graph as a fallback, but adding twitter:card (set to summary_large_image for a big image), plus twitter:title, twitter:description and twitter:image, gives you precise control. Include both sets and every major platform is covered.

Get the image right

The image does the heavy lifting. Use 1200×630 pixels (a 1.91:1 ratio) for a crisp large card. Keep essential text and logos away from the edges, since platforms crop slightly differently, and keep the file size reasonable so it loads fast. Resize yours with the image resizer.

Why your preview shows the wrong thing

The classic frustration: you update your tags, re-share, and the oldimage still appears. Platforms cache previews aggressively. The fix is to re-scrape the URL in the platform's debugger (Facebook's Sharing Debugger, LinkedIn's Post Inspector), which refreshes the cache. Also make sure your tags are server-rendered — tags injected by client-side JavaScript are often never seen by crawlers.

Preview and generate your tags

Use the Open Graph preview to see your card across Facebook, X and LinkedIn and copy the matching tags. For the full page head — including SEO title and description — the meta tag generator pulls it all together.

Tools mentioned in this article