How to Check Open Graph Tags and Preview Your Links (Step-by-Step Guide)

Every time somebody drops one of your links into Facebook, X, LinkedIn, WhatsApp, or Slack, the platform reads a small set of hidden meta tags and turns them into a social card: an image, a title, a description, and a domain. If those tags are missing or malformed, the platform improvises — and an improvised card is almost always worse than the one you would have chosen yourself. That is why running an open graph preview check before you publish is one of the highest-value five-minute tasks in technical SEO. In this guide you will learn how to check OG tags properly, how to read the two preview cards a real platform would render, and how to fix every common problem the check uncovers.

What Are Open Graph Tags?

Open Graph is a metadata standard originally introduced by Facebook in 2010 and now adopted by virtually every social platform, messaging app, and even AI answer engines. The tags live inside the <head> section of your HTML and describe how the page should be represented when it is shared elsewhere. The core set looks like this:

<head>
  <meta property="og:title" content="Best Running Shoes 2026 — Lab-Tested">
  <meta property="og:description" content="We tested 42 pairs over 600 miles. Here are the 9 best models.">
  <meta property="og:image" content="https://example.com/images/running-shoes.png">
  <meta property="og:url" content="https://example.com/best-running-shoes/">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="Acme Sports">
</head>

Alongside them, most sites also add Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image). X can fall back to your Open Graph tags automatically, but the twitter:card tag is what tells X whether to render a large hero-image card or a compact summary card, so it deserves explicit attention. If you want the full background on writing all of these tags by hand — including the SEO title, meta description, and canonical URL that sit next to them — read our guide on how to add meta tags to a website.

Why Your Open Graph Preview Matters

A social card is effectively an advertisement for your page, and it is usually the only thing a scroller sees before deciding whether to click. Pages with a proper large image, a legible headline, and a one-line promise consistently earn more clicks than pages that render a bare URL or, worse, a random image cropped from the layout. When you check OG tags before publishing, you protect three things at once: click-through rate from social and chat shares, brand consistency across platforms, and crawlability for services that reuse the same metadata.

The most common failures are also the most silent ones. A missing og:image produces a text-only card that looks broken next to competitors. A relative image URL like /images/hero.png works fine in a browser but fails on social platforms, which need the full absolute URL. An og:title of 95 characters gets truncated mid-sentence. A staging-domain canonical makes every share point to the wrong host. None of these errors throw a warning anywhere in your CMS — the only reliable way to catch them is to run an open graph preview on the live URL and look at what actually renders.

How to Check OG Tags: Step-by-Step

Step 1: Open the Open Graph Preview tool

Go to the free Open Graph Preview & Checker. It fetches the page exactly the way a social crawler would — from a public server, with no access to your login session — so what it sees is what Facebook and X will see. No signup or installation is required.

Step 2: Paste the URL and run the check

Paste the full page address, including https://, into the input field and press Check & preview. The tool requests the page server-side, parses the HTML, and extracts og:title, og:description, og:image, og:url, og:type, og:site_name, the four Twitter Card tags, the plain <title> tag, and the canonical link. If you are auditing several pages, repeat this for each important landing page — OG tags are set per page, not per site.

Step 3: Read the two preview cards

The tool renders two side-by-side previews. The Facebook card shows the large image, the domain in small gray uppercase text, the title, and the description — mirroring how the link appears in a feed. The X card follows your twitter:card value: summary_large_image renders the big 16:9 hero card, while summary renders the compact card with a small square thumbnail. If the page has no Twitter tags at all, the tool marks the card with an OG fallback badge and uses the Open Graph values instead, which is exactly what X itself does — so the preview stays truthful.

Step 4: Fix every red and yellow item

Below the previews, the checklist gives one row per tag. Green means present and within length limits. Yellow means present but risky — for example an og:title longer than 60 characters or an og:description longer than 110 characters, both of which get visually truncated in social cards, or a missing twitter:card. Red means missing, and a missing og:image is treated as high risk because imageless cards lose the majority of their click appeal. Once you know what is missing, you can produce the corrected tag block in under a minute with our Meta Tag Generator, paste it into your <head>, and re-run the open graph preview to confirm everything renders.

Open Graph Best Practices

Use the recommended image dimensions. The widely accepted standard for og:image is 1200×630 pixels (a 1.91:1 aspect ratio) in JPG, PNG, or WebP, kept under roughly 8 MB, with an absolute https:// URL. X large-image cards use approximately 1200×675 (16:9), so a 1200×630 image still works well on both platforms. Keep important content away from the outer edges because different platforms crop slightly differently.

Respect the display length limits. Keep og:title at or under about 60 characters and og:description at or under about 110 characters so nothing is truncated mid-thought. These are display guidelines rather than hard spec limits, but they match what the major cards actually show.

Always use absolute, canonical URLs. Both og:image and og:url must be fully qualified URLs on your production domain, ideally matching the canonical tag, so platforms do not attach tracking parameters or index staging hosts.

Give every important page its own tags. Articles, product pages, and key landing pages should each carry a unique title, description, and image. A single site-wide fallback image is acceptable for utility pages, but unique imagery is what makes shares earn clicks.

Re-check after you publish, not just before. Platforms cache aggressively. If you fix tags on a page that was already shared, use the platform’s own debugger (Facebook Sharing Debugger or X’s card tools) to force a re-scrape, then run one final preview to confirm the live card updated.

Frequently Asked Questions About Checking OG Tags

How do I check OG tags on a page?

The fastest way is to paste the page URL into a free open graph preview tool such as our Open Graph Preview & Checker. It fetches the live page server-side, extracts every Open Graph and Twitter Card tag, renders the Facebook and X cards side by side, and marks each tag green, yellow, or red so you know exactly what to fix. The alternative is viewing the page source and searching for “og:” manually, which works but does not show you the rendered card or length problems.

Why is my open graph image not showing?

Four causes cover almost every case: the og:image tag is missing entirely; the image URL is relative instead of an absolute https URL; the image file is too small (platforms typically require at least 200×200 pixels) or in an unsupported format; or the platform is serving a cached old version of your page, in which case you should force a re-scrape with the Facebook Sharing Debugger. An open graph preview tool will immediately show whether the image URL resolves at all.

How long should og:title and og:description be?

Aim for a maximum of about 60 characters for og:title and about 110 characters for og:description. These are the points where Facebook and X cards typically truncate the text visually. There is no hard error above these lengths — the Open Graph protocol itself allows more — but anything past the limit simply will not be seen by users, so front-load the important words.

Do I need Twitter Card tags if I already have OG tags?

You can survive without them, because X falls back to your Open Graph tags automatically. However, without an explicit twitter:card tag you cannot choose between the large-image card and the compact summary card, and edge cases render less predictably. Adding the four basic Twitter tags takes one minute with a generator and removes the guesswork.

How often should I re-check my OG tags?

Check every new page before it goes live, and re-check key landing pages after anything that touches your templates: a theme update, a plugin upgrade, a headless CMS migration, or a domain change. Many broken social cards trace back to a redesign that silently dropped the meta block. A quarterly audit of your ten most-shared pages is a sensible routine.

Preview Before You Publish

Open Graph tags are small, invisible, and disproportionately powerful: they decide the first impression your page makes in the places where your audience actually shares links. A disciplined habit of running an open graph preview on every important page, fixing the red items, trimming the yellow ones, and standardizing on 1200×630 images will lift your social click-through rate without touching anything else on the site. Start with your homepage and best post today — check your OG tags now, then use the Meta Tag Generator to fill any gaps you find.