AI VisibilityJuly 9, 20267 min read

Open Graph Tags: How Your Brand Looks When Linked

Q: What are Open Graph tags?

Open Graph tags are metadata in your page head, written as meta property og:..., that tell other platforms how to render your link as a preview card. The core tags are og:title, og:description, og:image, og:url, and og:type. They control the image, title, and description shown when your page is shared.

Without Open Graph tags your link is a bare grey line. With them, a rich card with image and title. How OG works across social, chat, and AI answers.

TL;DR: Open Graph tags decide how your link looks when someone shares it. Without them, a shared URL often renders as a bare grey line; with them, a rich card with an image, title, and description. The reliable payoff is social and chat previews, LinkedIn, X, Slack, where buyers pass your links around. AI citation cards vary and often show just favicon, title, and domain, so OG helps there but is not guaranteed. The core setup is five tags plus a 1200x630 image.

Picture a buyer dropping your link into a Slack thread where the decision is being made. If your page has no Open Graph tags, that link often shows up as a bare URL or a plain box, with no image and an awkward title. Next to a competitor's clean, branded card, it looks unfinished and less trustworthy.

That first impression is not controlled by your design team or your copy. It is controlled by a handful of tags in your page head that most sites set once and never check. This guide explains what Open Graph tags do, where they matter most, and how to set them so your link looks like your brand wherever it travels.

What Open Graph tags are

Open Graph is a small metadata standard, originally from Facebook, that tells other platforms how to turn your URL into a preview card. The tags live in the <head> of your page as <meta property="og:..."> lines. You can read the spec at ogp.me.

There are five core tags:

og:title: the headline on the card. Often close to your page title, but you can write it specifically for sharing.
og:description: the short summary under the title.
og:image: the preview image, usually the most visually important part of the card.
og:url: the canonical URL for the page.
og:type: the kind of object, commonly website or article.

Here is a complete set for a blog article:

<meta property="og:title" content="Open Graph Tags: How Your Brand Looks When Linked" />
<meta property="og:description" content="How OG tags turn a bare link into a rich preview card across social, chat, and some AI answers." />
<meta property="og:image" content="https://example.com/images/open-graph-preview.png" />
<meta property="og:url" content="https://example.com/blog/open-graph-tags" />
<meta property="og:type" content="article" />

Bare link versus rich card

The difference is easiest to see side by side.

Without Open Graph tags, a platform has to guess. It might scrape your page title, grab a random image or none, and show a plain line of text. The result looks low-effort, and in a buying conversation that reads as low-trust.

With Open Graph tags, the platform has everything it needs. It renders your chosen image, your title, and your description as a single branded card. The same link now looks deliberate and credible, and it earns more clicks because there is something to click.

Nothing about your page changed except a few lines in the head. The content is identical. Only the packaging is different, and the packaging is what people see first.

Where preview cards get built

Open Graph pays off in two different worlds, and it is worth being clear about which is which.

The reliable world is social and chat. When someone shares your link on LinkedIn, X, Facebook, Slack, Discord, WhatsApp, or iMessage, the platform reads your OG tags and builds the card from them. This is where OG is most reliable, even if the exact card still varies by platform and cache, and it is also where your buyers actually pass links around: founder posts, customer Slack threads, community channels, sales follow-ups.

The variable world is AI answers and search. Perplexity, ChatGPT Search, and Google AI Overviews show sources as citation cards, but they do not all build those cards the same way. Many show a favicon, the page title, and the domain, and only sometimes an image. Your title tag and meta description plus OG data may all feed in, but no engine guarantees it uses your og:image the way Slack does.

The honest takeaway: set Open Graph for the reliable win in social and chat, and treat any benefit in AI citation cards as a bonus. Either way, the fix is the same and it is cheap.

How to set it up

Add the core tags, then a few extras that make the card render well.

Start with the five OG tags shown above. Then add Twitter Card tags. X reads its own metadata first and falls back to your OG tags if these are missing, and this is what controls the large-image card:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Open Graph Tags: How Your Brand Looks When Linked" />
<meta name="twitter:description" content="How OG tags turn a bare link into a rich preview card." />
<meta name="twitter:image" content="https://example.com/images/open-graph-preview.png" />

For the image, follow the size the major platforms recommend:

Size it 1200 x 630 pixels, an aspect ratio of about 1.91:1. This one size renders cleanly on Facebook, LinkedIn, Slack, Discord, and most tools that read OG.
Use an absolute URL for og:image, not a relative path, and make sure the image is publicly reachable, not behind a login or blocked by robots.txt or a bot filter.
Keep the file reasonably small. Under 1MB loads faster and survives compression better.
Use PNG for images with text or a logo, JPEG for photos, and keep image alt text accurate on the page itself.
Keep important text and logos away from the edges, since some platforms crop.
Give each important page its own image and title. A single sitewide preview makes every shared link look the same.

One more point that connects to how machines read your site: put these tags in the HTML your server returns, not injected later by JavaScript. Many scrapers and crawlers do not run scripts, so client-side OG tags can be missed.

Test it, and watch for caching

Do not assume it worked. Preview builders cache aggressively, so a broken or updated card can stick around.

Use the Facebook Sharing Debugger and the LinkedIn Post Inspector to see the card each platform builds and to force a fresh scrape after changes.
Paste the link into a private Slack channel or a test Discord server to see the real unfurl.
On mobile, send yourself the link in iMessage or WhatsApp.

If you update an image after a link has already been shared, platforms often keep the old one. Refresh with the debugger, or version the image URL, for example by adding ?v=2, to force a new fetch.

Common mistakes to avoid

Shipping pages with no OG tags at all, so every share is a guess.
Using one sitewide og:image, so every page looks identical when shared.
Pointing og:image at a relative path or a login-gated file, so it does not load.
An image that is the wrong size or has text jammed against the edges that gets cropped.
Forgetting Twitter Card tags, so X falls back to a plain link.
Injecting OG tags with client-side JavaScript, so non-rendering scrapers see nothing.
Never testing, then wondering why the card looks wrong for weeks because of caching.

Where SupaIntent fits

Clean Open Graph tags control how your link looks when it is shared. They do not tell you whether AI systems actually describe your product correctly, which competitors they recommend, or how your brand appears across their answers. Seeing that requires measuring your real presence across ChatGPT, Gemini, Perplexity, and Google AI Mode. That is what SupaIntent does, a low-lift way to start improving your AI visibility.

FAQ

What are Open Graph tags?

Open Graph tags are metadata in your page head, written as <meta property="og:...">, that tell other platforms how to render your link as a preview card. The core tags are og:title, og:description, og:image, og:url, and og:type. They control the image, title, and description shown when your page is shared.

Do Open Graph tags affect how AI answers show my link?

Sometimes. AI answer engines like Perplexity and ChatGPT Search build citation cards in different ways, often showing a favicon, title, and domain, and sometimes an image. Your OG data may feed in, but it is not guaranteed the way social and chat previews are. Set OG for the reliable social win and treat AI benefit as a bonus.

What size should an Open Graph image be?

Use 1200 x 630 pixels, an aspect ratio of about 1.91:1. That single size renders cleanly across Facebook, LinkedIn, Slack, Discord, and most platforms that read OG. Keep the file under about 1MB and keep key text away from the edges.

Why does my link preview still show the old image?

Preview platforms cache metadata aggressively. After you change an OG image, use the Facebook Sharing Debugger or LinkedIn Post Inspector to force a refresh, or add a version parameter to the image URL like ?v=2 so the platform fetches a new file.

Are Open Graph tags the same as title tags and meta descriptions?

No, though they overlap. Title tags and meta descriptions mainly serve search results and page identity. Open Graph tags serve link preview cards when your page is shared. It is good practice to set both, since they are used in different places.

Open Graph is a small amount of work with a visible payoff. Every time your link is shared, in a Slack thread, a LinkedIn post, or a source card, it either looks like your brand or looks like an afterthought. A handful of tags and one well-made image decide which. Set them once, test them, and your links start representing you properly wherever they go.

Reveal where AI sends your clients

Track prompt-level visibility across ChatGPT, Gemini, Perplexity, and Google AI search. See which competitors win the answer, which sources shape the response, and where your brand is missing.