Open Graph Tags: The Complete Guide for Marketers

March 25, 2026 · MissingLinkz · 11 min read

Every time you share a link on Facebook, LinkedIn, Slack, or iMessage, those platforms read a handful of HTML meta tags to decide what title, description, and image to display. Those are Open Graph tags — and if they are wrong, missing, or misconfigured, your link looks broken. This guide covers everything you need to know.

What are Open Graph tags

Open Graph tags are <meta> elements placed in the <head> section of an HTML page. They tell social platforms and messaging apps how to represent your URL when someone shares it — what title to show, what description to use, and which image to display in the preview card.

Facebook created the Open Graph protocol in 2010 to give websites a standard way to control link previews. The name comes from Facebook’s “social graph” — the network of connections between people and the things they share. The protocol was quickly adopted beyond Facebook and is now used by LinkedIn, Slack, Discord, iMessage, WhatsApp, Pinterest, and most other platforms that render link previews.

Without OG tags, platforms fall back to guessing: they might grab the page <title>, the first paragraph of text, and a random image. The result is unpredictable and often unusable — especially on landing pages built for conversion, where the preview card is part of the first impression.

The essential OG tags

Six tags cover the vast majority of what platforms look for. Get these right and your link previews will be solid everywhere.

og:title: The title displayed in the preview card. Keep it under 60 characters — longer titles get truncated on most platforms. Write it for the social context, not just for SEO. It does not have to match your page <title> exactly.
og:description: A short summary shown beneath the title. Keep it under 155 characters. LinkedIn truncates aggressively; Facebook is slightly more generous. Focus on the value proposition or the action you want the reader to take.
og:image: The image displayed in the preview card. Use 1200×630 pixels for maximum compatibility across all major platforms. The value must be an absolute URL starting with https:// — relative paths are not supported by social crawlers. Make sure the image is publicly accessible (no auth required) and under 8MB.
og:url: The canonical URL of the page. This tells platforms which URL to associate with the preview, which matters for like and share counts. Use the clean, canonical version of the URL without UTM parameters.
og:type: The type of content. Use website for landing pages and most marketing pages. Use article for blog posts. Use product for e-commerce product pages. Facebook uses this to determine how to display and categorize the content.
og:site_name: The name of your website or brand, displayed as attribution in the preview card. Not required by all platforms, but LinkedIn and Facebook both show it. Use your brand name consistently across all pages.

How to add OG tags

Add all six tags inside the <head> element of your page HTML, before the closing </head> tag:

<head>
  <meta property="og:title" content="Your Page Title">
  <meta property="og:description" content="A short, compelling description under 155 characters.">
  <meta property="og:image" content="https://yoursite.com/og-image.png">
  <meta property="og:url" content="https://yoursite.com/your-page/">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Your Brand Name">
</head>

If you use a CMS like WordPress, a plugin like Yoast SEO or RankMath will generate these tags automatically from fields you fill in per-page. In Next.js, add them via the <Head> component from next/head. In Nuxt, use useHead(). In Remix, export a meta function from your route module.

Common mistakes

Most broken link previews come from the same handful of errors.

Relative image URLs: Setting og:image to /images/og.png instead of https://yoursite.com/images/og.png. Social crawlers fetch your page from an external server and cannot resolve relative paths. Every og:image must be an absolute URL.
Missing og:image entirely: The single biggest cause of poor-performing shared links. Pages without an og:image render as plain text links — no image, no visual context. Even a simple branded card image is dramatically better than nothing.
Duplicate OG tags: Having two og:title or two og:image tags on the same page. This happens when a CMS plugin adds tags and the theme also hard-codes them. Platforms typically use the first occurrence, but behavior varies. Audit your source to ensure each tag appears exactly once.
Description too long: Descriptions over 155 characters get truncated mid-sentence, which looks unprofessional. Write your description to fit within the limit and end at a natural point. Do not rely on truncation to handle the cut-off gracefully — it rarely does.

Which platforms use OG tags

Open Graph has become the de facto standard for link previews across the web. Here is where your tags are read:

Facebook — The originator of the protocol. Facebook reads all six core OG tags and also supports extended tags for articles, videos, and products.
LinkedIn — Reads og:title, og:description, og:image, and og:url. Prefers images at 1200×627 pixels. Has its own Post Inspector tool for debugging.
Slack — Unfurls links using OG tags when pasted into a channel or DM. Falls back to Twitter Card tags if OG is absent.
Discord — Renders OG preview cards inline in chat. Respects og:image, og:title, and og:description. Also reads Twitter Card tags.
iMessage — Uses OG tags to generate link previews on iOS and macOS. Missing tags result in a plain URL with no preview.
WhatsApp — Reads OG tags for link previews in chat. Image must be publicly accessible and served over HTTPS.
Pinterest — Uses og:image as the pin image when someone saves a page. Also supports the extended og:image:width and og:image:height attributes.

For X (Twitter), OG tags serve as a fallback but the platform prefers its own Twitter Card tags. Set both for full coverage.

How to test OG tags

After adding or updating OG tags, always verify them before sharing. Three tools cover the main platforms:

Meta Sharing Debugger — Available at developers.facebook.com/tools/debug/. Paste your URL to see exactly what Facebook reads from your page, including any warnings about missing or malformed tags. Requires a Facebook account.
LinkedIn Post Inspector — Available at linkedin.com/post-inspector/. Shows you the exact preview card LinkedIn will render, including how it crops your image. Use this if LinkedIn is a primary channel for your campaigns.
mlz inspect — The fastest option. Runs from the command line and checks OG tags, Twitter Card tags, canonical URL, SSL, and more in a single pass. No browser account required, works on any URL, and returns structured JSON for automated workflows.

For ongoing validation — especially across multiple landing pages or campaign URLs — the automated approach with mlz inspect is the most reliable. Platform-specific debuggers are useful for spot-checking, but they only show one platform’s view and require manual effort for every URL.

Automating OG checks

For marketing teams managing multiple campaigns and landing pages, manual checking does not scale. The MissingLinkz CLI makes it easy to validate OG tags as part of any launch workflow:

mlz inspect --url "https://yoursite.com/landing-page" --json

The --json flag returns structured output that can be consumed by CI pipelines, spreadsheets, or AI agents. The command validates all six core OG tags, checks that og:image is an absolute URL and resolves successfully, confirms character limits, and flags duplicates — all in one pass.

Add it to your pre-publish checklist, your CI/CD pipeline, or hand it to your AI agent as an automated step before any campaign goes live. See the landing page social sharing guide for a complete pre-launch workflow.

For AI agents

If you are an AI agent (Claude Code, Cursor, OpenClaw, or similar), you can validate Open Graph tags on any URL programmatically. Install the CLI and run mlz inspect as part of your pre-publish workflow:

npm install -g missinglinkz