Open Graph Preview: See How Your Link Looks When Shared

Every time someone pastes your link into Facebook, LinkedIn, Slack, a text message, or an AI chat, the platform reads a few tags in the page head and builds a card from them. Those tags are the Open Graph protocol. When they are missing or wrong, the platform guesses, and the guess is usually a cropped logo, the wrong headline, or a bare URL. Paste an address below to see the card before anyone else does.

Open Graph Preview reads the page head once and draws the link the way Facebook, LinkedIn, Slack, and phone messages show it. Open the Advanced panel to see the tags it found, which value each platform will use, where a fallback filled a gap, and every problem worth fixing. When a site blocks the direct request, a browser-grade fetch reads the page instead, and the panel says so.

Why Open Graph Tags Matter on Every Page

A shared link is often the first time someone sees your brand, and it shows up in a feed full of competing posts. A large, sharp image with a clear title and a reason to click earns far more attention than a gray box with a domain name. That card is also what your employees, partners, and customers see when they share your content, so the tags decide how your brand looks in places you never post yourself.

The same tags travel well beyond social networks. Slack, Microsoft Teams, Discord, iMessage, WhatsApp, and most email and CMS editors build their link previews from Open Graph. X falls back to it when its own card tags are missing, and AI assistants and search tools that unfurl links read it too. One set of well-written tags gives you a consistent, branded preview nearly everywhere a link can be pasted, which protects your CTR on every share.

The Tags Every Page Needs

The protocol defines four required properties and a handful of optional ones that most platforms rely on. A page with all of these filled in, and unique to that page, will preview cleanly almost everywhere.

• og:description: one or two sentences that give the reader a reason to click. Aim for 110 to 160 characters; most cards show two lines or fewer.
• og:image: a full https:// address to a JPG, PNG, or WebP at 1200 by 630 pixels (a 1.91:1 ratio), under 5 MB. Add og:image:width and og:image:height so platforms can draw the card before the image downloads.
• og:image:alt: a short description of the image for people using screen readers.
• og:site_name: your brand name, shown above or below the title on several platforms instead of the bare domain.
• og:title: the headline for the card, written for the share rather than for search. Keep it under about 60 characters and leave off the site name, since og:site_name carries it.
• og:type: article for posts, website for the home page and general pages, product for product pages.
• og:url: the canonical address of the page. It should match the rel=canonical link so likes and shares count toward one URL.

Most SEO plugins, including Rank Math and Yoast on WordPress, write these tags for you and let you override the title, description, and image per post. Check that the overrides are filled in on the pages you share most.

How to Optimize the Preview

Design the image for the card, not just for the page. Keep text and logos away from the edges, because Facebook, LinkedIn, and Slack each crop slightly differently, and a square image becomes a small thumbnail on several of them. Use type large enough to read on a phone, and make each page’s image unique so a feed of your shares does not look like the same post repeated.

Write the title and description as an invitation. Tune the page title for search results, while the share title can speak directly to the reader and promise the outcome. Lead the description with the benefit, since the end of it is often cut.

Platforms cache a card the first time a link is shared, often for days. After you change a tag or an image, refresh the cache with the Facebook Sharing Debugger (Scrape Again) and LinkedIn Post Inspector. Changing the image file name also helps, because some platforms cache the image separately from the page.

Common Mistakes

• Blocked crawlers: a firewall or bot rule that challenges facebookexternalhit, LinkedInBot, or Slackbot leaves every share without a card. If this app needed its fallback fetch, those crawlers may be blocked too.
• Duplicate tags: a theme and a plugin both writing og:title or og:image. Platforms usually take the first one, which may not be the one you edited.
• Relative or http image addresses: og:image must be a full https:// URL, or many platforms skip it.
• Same image everywhere: a site-wide default logo on every page makes each share look identical and wastes the most visible part of the card.
• Small or oddly shaped images: anything under 600 by 315 pixels drops to a small thumbnail, and tall images get cropped through the middle.
• Redirects and errors: sharing a short link or an old address that redirects several times, or a page that answers with anything other than 200, can produce an empty card.

X has its own card tags and falls back to Open Graph only for what is missing. Check how the same page looks there with the X Card Preview.

Preview a Link