Back to blog
Blog

Open Graph Images: How to Control the Way Your Page Looks When Shared

·
7 min read
·
Grademypage TeamGrademypage Team
Open Graph Images: How to Control the Way Your Page Looks When Shared

Someone shares your landing page in a Slack channel, a LinkedIn post, or an iMessage. What shows up? If you've set things up right, a clean preview card with a sharp title, a compelling description, and a branded image. If you haven't, a naked blue link, or worse, a broken preview with a random cropped screenshot and your file path as the title.

That preview card is often the first impression your page makes, before anyone even clicks. A strong one earns clicks and looks trustworthy. A missing or broken one makes your page look amateur and gets scrolled past. Yet Open Graph tags are one of the most commonly skipped pieces of technical setup, because they're invisible on the page itself. You never see them unless you go looking, so they're easy to forget.

The fix takes a few lines of HTML in your page's head. Here's exactly what to add and why it matters.

What Open Graph Tags Actually Do

Open Graph is a protocol Facebook introduced in 2010 that most platforms now support: LinkedIn, Slack, Discord, iMessage, WhatsApp, and more. It's a set of meta tags in your page's <head> that tell any platform how to display your link when someone shares it.

When a link gets pasted somewhere, the platform sends a crawler to fetch your page and read these tags. It uses them to build the preview card, the thumbnail, headline, and blurb you see. Without them, the platform guesses, and it guesses badly: grabbing the first image it finds, pulling a title from the wrong place, or showing nothing at all.

The core tags are:

  • og:title sets the headline of the preview card.
  • og:description sets the blurb underneath it.
  • og:image sets the preview image, the biggest visual element and the one that drives clicks.
  • og:url sets the canonical URL for the shared link.
  • og:type describes the content type, usually website for a landing page.

These live alongside your other meta tags, and they're closely related to the title and description work covered in how to improve your landing page SEO. The difference is that SEO tags control how you look in search results, while Open Graph controls how you look when a human shares you.

The og:image Is the Part That Sells

Of all the Open Graph tags, the image does the most work. It's the largest element in the preview card, and it's what stops the scroll. A well-designed og:image can double the click-through rate on a shared link compared to a text-only preview.

Get the specifications right:

  • Dimensions: 1200 by 630 pixels. This is the standard that renders cleanly across almost every platform. Smaller images get upscaled and look blurry. Wrong aspect ratios get cropped awkwardly.
  • File size under 1 MB, ideally under 300 KB. Some crawlers skip images that are too large, so keep it optimized. This is the same discipline that helps your page speed, applied to your social image.
  • Keep text minimal and large. The card renders small, especially on mobile. A few big words work; a paragraph of tiny text is unreadable.
  • Include your branding. A logo or consistent visual style builds recognition as your links spread. This ties into the same trust-building work as your on-page trust signals: a polished, branded preview signals credibility before the click.

If you build one custom og:image per key page, tailored to that page's message, you'll stand out from every competitor still using a generic logo or nothing at all.

Writing og:title and og:description for Clicks

The image stops the scroll. The title and description close the click. Treat them like ad copy, not an afterthought.

og:title should be punchy and benefit-driven. You don't have to match your page's <title> tag exactly. In fact, you often shouldn't. The SEO title is optimized for search keywords; the og:title is optimized for a human deciding whether to tap. Keep it under about 60 characters so it doesn't get truncated. The same principles from writing headlines that convert apply here.

og:description gives you a sentence or two to add context and create curiosity. Aim for 55 to 200 characters. Use it to reinforce the promise in the title, not just repeat it. A gap between what the title says and what the description adds is what makes someone want to click.

Don't Forget Twitter Cards

X, formerly Twitter, uses its own tag set called Twitter Cards, though it falls back to Open Graph tags when its own are missing. To control the look on X specifically, add:

  • twitter:card set to summary_large_image for the big-image layout that performs best.
  • twitter:title, twitter:description, and twitter:image to override the Open Graph values if you want platform-specific copy.

If you only have time for one, make sure your Open Graph tags are solid, since X will fall back to them. The twitter:card type is the one worth adding explicitly, because without it you get the small thumbnail layout instead of the large image that draws the eye.

How to Test Your Previews

Never assume your tags work. Crawlers cache aggressively, and a small mistake can silently break every preview. Check before you rely on them:

  1. Use each platform's own debugger. LinkedIn's Post Inspector, Facebook's Sharing Debugger, and similar tools show you exactly what the platform sees and let you force a re-crawl after changes.
  2. Paste the link somewhere private. Drop it in a Slack DM to yourself or a private channel to see the real rendered card.
  3. Check on mobile. Preview cards render differently and smaller on phones, where a lot of sharing happens.
  4. Re-test after any change. Because platforms cache old previews, you often need to manually clear the cache through the debugger to see updates.

A quick way to catch missing or malformed tags across your whole page is to run an audit. Tools like Grademypage check for Open Graph and social meta tags as part of a broader scan, so you find out a preview is broken before a prospect does, not after your link has been shared a hundred times looking like a bug.

A Small Fix With Outsized Reach

Open Graph tags are the kind of thing that feels minor until you realize how far your links travel. Every time someone shares your page in a DM, a group chat, a social post, or a newsletter, those tags decide whether it looks like a real product or a broken link. That's free distribution you either capitalize on or squander.

Set them once, test them, and they keep working every time your page gets shared. Few technical fixes offer that kind of payoff for so little effort. Pair a strong preview with a page that delivers on the promise, one built around the anatomy of a high-converting landing page, and every share becomes a genuine chance to convert.

Take Action

Open Graph and social meta tags are among the technical factors Grademypage checks when it scans your landing page. The audit flags missing tags, broken preview images, and other issues that quietly undercut how your page looks in search and on social, alongside speed, SEO, and design.

Paste your URL into Grademypage and get your score in under a minute. It's free, no account required.

See your page grade.

Paste any landing page URL and get an instant, AI-powered audit across 22+ factors.

Run a free auditFree · No account required · Results in ~1 minute