Open Graph tags are meta tags that control how your page renders when someone shares it: the title, the description, and the image on the preview card that shows up in social feeds, Slack channels, and text messages. Six tags cover nearly every case, they take minutes to add, and the difference they make is the difference between a link that looks like something and a link that looks like nothing.
They are also one of the most commonly broken pieces of metadata on the web, usually in one of three specific ways, all of them cheap to fix. So: what the tags are, how to set them up, and where they quietly break.
What Open Graph tags actually do
When a page gets shared, the platform doesn't render the page. It fetches the page once, reads the meta tags in the head, and builds a card from what it finds. Open Graph is the vocabulary those tags use: a protocol Facebook introduced in 2010 that has since become the de facto standard everywhere links unfurl, which today means LinkedIn, Slack, Discord, WhatsApp, iMessage, and most of the AI chat interfaces that render link previews.
No tags, and the platform guesses: it scrapes a title from somewhere, takes the first image it can find or none at all, and your carefully built page shows up in the feed as a gray rectangle. With tags, you decide what the card says. That's the entire value proposition, and it's why the tags belong in the metadata pass of every page, not just the ones you plan to promote. You don't control who shares what.
The six tags, and the two for X
Here's the complete block for a typical page, ready to adapt:
<meta property="og:title" content="How Agent Cards Change Local SEO" />
<meta property="og:description" content="What the page delivers, in one or two sentences." />
<meta property="og:url" content="https://example.com/articles/agent-cards/" />
<meta property="og:image" content="https://example.com/social-card.png" />
<meta property="og:site_name" content="Example Co" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />
X (Twitter) reads Open Graph tags as its fallback, so the two twitter: lines are all you need to add: the card type, and your handle if you want attribution. og:type is article for posts and website for everything else; finer-grained types than that rarely change anything visible.
If you'd rather not hand-assemble the block, our free Open Graph tag generator builds it in your browser with a live preview of the card, and flags the mistakes below as you type.
The three mistakes that break most previews
After enough audits, broken share cards stop being surprising, because it's almost always one of the same three causes.
Relative image paths. og:image must be an absolute HTTPS URL. The platform fetches the image from its own servers, where /images/card.png resolves to nothing. This is the single most common breakage, and it's invisible in your own browser because the page itself renders fine.
Wrong image size. 1200 by 630 pixels is the size the large-card layouts are designed around. Too small and platforms reject the image or demote the card to a thumbnail; an odd ratio and the crop takes whatever it wants, which is occasionally someone's forehead.
Stale caches. Platforms store the card from their first scrape. Fix your tags today and the old card keeps appearing until the cache expires or you force a re-scrape through the platform's debugger. This is the one that convinces people their fix "didn't work" when it worked fine.
One subtler miss worth naming: writing the og:title like a search title. The share card competes in a scroll, not a results page, so lead with the claim rather than the keyword. Your search-facing title lives in the title tag, and title tag length has its own rules worth getting right separately.
Designing an image that survives the thumbnail
The 1200 by 630 canvas is the easy part; the design failures happen at the other end of the pipe, where platforms render your card small. A few rules that hold up:
- Make the text legible at a third of full size, because chat apps and mobile feeds render cards far smaller than the canvas you designed on. If the headline needs squinting, it needs fewer words.
- Keep critical elements away from the edges. Different platforms crop differently, and a logo parked in a corner is the first thing a crop eats.
- Contrast beats decoration. Cards fight for attention against an infinite feed; one clear claim on a high-contrast ground outperforms a collage every time.
- Skip the text-free hero photo unless the photo itself is the argument. A pretty but generic image tells the scroller nothing about why to click.
For sites that publish steadily, per-page generated cards (the title rendered onto a branded template automatically) are worth the one-time setup: every article ships with a specific card and nobody spends design time per post. That's a build-once pattern most frameworks and CMS plugins now support.
The extras worth knowing about
Beyond the core block, three optional properties earn their keep. og:image:alt describes the card image for screen readers, which costs one line and makes your shares accessible; if you maintain alt text on the page, maintain it on the card. article:published_time and article:modified_time give platforms real dates for article-type pages, the same dates your schema markup and visible bylines should already agree on. And og:locale matters only if you publish in multiple languages; single-language sites can skip it without loss. Everything else in the extended vocabulary is safely ignorable until a specific platform gives you a reason.
Do they matter for SEO?
Not as a ranking input, and it's worth being precise about this because the tags get oversold. Google doesn't rank pages on their Open Graph markup, and adding it will not move a position. If a vendor lists "social meta tags" as a ranking deliverable, that line of the invoice is decoration.
The real connection runs upstream. Content earns links and mentions when people actually read it, and people read what gets shared legibly. A bare URL in a Slack channel or a LinkedIn feed is a coin flip; a card with a claim and an image is an argument for the click. Distribution is also where a brand's search demand gets built: the mechanism we walk through in measuring social media ROI with Search Console depends on content circulating well enough to make people search your name later. Share tags don't create that circulation, but broken ones tax it on every single share.
The setup that takes an afternoon
For a whole site, the efficient version:
- Make one default social card image, 1200 by 630, with your name and mark legible at thumbnail size. This is the fallback for every page.
- Set sitewide defaults: og:site_name, the default image, and templates that emit og:title and og:description from each page's title and meta description.
- Override the image on pages where the specific card earns clicks: cornerstone articles, tools, anything you'll actively promote.
- Validate a handful of URLs through the platform debuggers, and re-check after any template change.
Most platforms and CMS themes handle step 2 with a setting or a few template lines, which is why this is an afternoon and not a project. It's also a launch-day item, not a someday item; it sits in the trust section of our website launch checklist because the first share of a new site shouldn't be a gray rectangle.
Once the defaults exist, the ongoing cost is close to zero, and every share of every page renders like you meant it. Cheap fix, permanent return, no hype required. It's the kind of item we fold into the technical pass of the Reforge Method without ceremony: done once, checked at launch, never sold as more than it is.