# Open Graph Tags: The Complete Guide to Controlling Link Previews (2026) > Open Graph tags explained: every og: property, Twitter Card tags, image dimensions, debugging tools, and why short links need custom OG for social preview control. URL: https://u2l.ai/blog/open-graph-tags-guide Published: 2026-07-04T15:17:29+05:30 Updated: 2026-07-04T15:17:29+05:30 Author: Team U2L Category: developer Tags: open graph, og tags, meta tags, social media, link previews, seo --- You share a link to a Slack channel. Instead of the sleek preview card you were hoping for, you get a naked URL and a generic thumbnail scraped from somewhere weird on the page. Or the title is truncated. Or the image is your favicon stretched into a blur. Or the description says "You need to enable JavaScript to run this app." That is what happens when **Open Graph tags** are missing, wrong, or fighting with each other. Get them right and every share on LinkedIn, WhatsApp, Slack, iMessage, X, Facebook, Discord, and Bluesky renders the exact preview you designed. Get them wrong and you leak clicks to competitors who happened to configure their meta tags better. This guide covers every OG property worth knowing in 2026, the Twitter Card overlay that most teams get wrong, the actual image dimensions that render cleanly across every major platform (the "1200x630" answer is half right), the debugging tools that catch issues before your marketing team notices, and why shortened links deserve their own OG configuration if you care about click-through rate. There is also a section on the common failures we see teams ship, sometimes for years, without realizing the previews they were counting on were broken. **Open Graph tags** are HTML meta tags in the `` of a webpage that tell social platforms how to render a link preview when the page is shared. The four required tags are `og:title`, `og:type`, `og:image`, and `og:url`. Together with `og:description` and platform-specific extensions like `twitter:card`, they control the title, thumbnail, description, and card layout shown on Facebook, LinkedIn, X, Slack, WhatsApp, iMessage, Discord, and most modern messaging apps. **Open Graph** is a metadata protocol introduced by Facebook in 2010 that lets webpages declare structured information (title, image, description, type, URL) for use by social platforms rendering link previews. ## Table of Contents - [What Open Graph Tags Actually Are](#what-open-graph-tags-actually-are) - [The Four Required Tags (and What Happens Without Them)](#the-four-required-tags-and-what-happens-without-them) - [Every Optional Tag Worth Knowing](#every-optional-tag-worth-knowing) - [Twitter Cards: The Overlay That Overrides OG on X](#twitter-cards-the-overlay-that-overrides-og-on-x) - [Platform-by-Platform Preview Rules](#platform-by-platform-preview-rules) - [The Actually Correct OG Image Dimensions](#the-actually-correct-og-image-dimensions) - [How to Add Open Graph Tags (Frameworks and CMS)](#how-to-add-open-graph-tags-frameworks-and-cms) - [How to Debug OG Tags](#how-to-debug-og-tags) - [Why Short Links Need Their Own OG Configuration](#why-short-links-need-their-own-og-configuration) - [Common Open Graph Mistakes](#common-open-graph-mistakes) - [Frequently Asked Questions](#frequently-asked-questions) ## What Open Graph Tags Actually Are Open Graph tags are HTML meta elements that tell social platforms and messaging apps how to render a preview when someone shares your link. They live in the document `` and use the `property="og:*"` naming convention. The protocol was published by Facebook in 2010 as a way to let webpages be represented as "rich objects" in the social graph, and every meaningful social platform now supports it. The full protocol spec lives at [ogp.me](https://ogp.me/), and it is worth bookmarking for the edge cases. The mechanic is simple. When a link is pasted anywhere that supports rich previews (Slack channel, LinkedIn post, WhatsApp chat, iMessage, X reply, Discord server), the receiving platform fetches the URL, parses the HTML ``, and reads whatever `og:*` tags it finds. It uses those tags to build the preview card you see. No tags means the platform guesses, usually badly. Correct tags means the preview is exactly what you designed. The classic version of this is Facebook's original preview card: image on top, title in bold, description underneath, source domain at the bottom. That format has spread everywhere. The tags that drive it have not changed much in fifteen years, which is genuinely rare for a web spec. ## The Four Required Tags (and What Happens Without Them) The Open Graph protocol lists four "required" properties. In practice, three of them are strictly required and the fourth is more of a strong suggestion, but you should ship all four. ### og:title The title shown in the preview card. Not the same as your HTML `` (though many platforms fall back to it if `og:title` is missing). ```html <meta property="og:title" content="Open Graph Tags: The Complete Guide" /> ``` Keep it under 60 characters. Most platforms truncate somewhere between 55 and 88 characters depending on the layout. Do not stuff keywords here. The og:title is a marketing surface, not a place to duplicate your `<title>` for SEO. ### og:type The type of content the URL represents. The common values are `website` for landing pages, `article` for blog posts, `video.other` for video pages, and `book` / `music.song` / `profile` for the vertical-specific types. ```html <meta property="og:type" content="article" /> ``` For 90% of pages, `website` or `article` is the right answer. Sub-properties (`article:published_time`, `article:author`, `article:section`, `article:tag`) unlock richer previews on some platforms if you set the type to `article`. ### og:image The preview image. This is the tag that will make or break your click-through rate. Skip everything else if you have to but ship this one. ```html <meta property="og:image" content="https://u2l.ai/og/open-graph-tags-guide.png" /> ``` Absolute URL, HTTPS, publicly accessible without authentication. If the image is behind a login wall or on a CDN that requires custom headers, previews break. Set the size using the companion tags (`og:image:width`, `og:image:height`) so platforms can pre-allocate the card layout. ### og:url The canonical URL of the page being shared. Used by platforms to deduplicate previews (so the same article shared as `example.com/post`, `example.com/post/`, `example.com/post?utm_source=twitter`, and `example.com/post?ref=slack` all resolve to one canonical entry). ```html <meta property="og:url" content="https://u2l.ai/blog/open-graph-tags-guide" /> ``` If you skip this, most platforms fall back to the URL that was actually shared. That produces inflated share counts (because every UTM variant looks like a distinct page) and duplicated previews. Set it. What happens without these tags? On most platforms, you get a card that shows only the URL and either no image or whatever image the platform's scraper decided was "the most important" one on the page. That scraper is not smart. It has picked ad slots, tracking pixels, and social share icons more times than we can count. ## Every Optional Tag Worth Knowing Beyond the required four, a handful of optional OG properties meaningfully improve previews across platforms. ### og:description The description text shown under the title. Aim for 100-160 characters (some platforms show up to 200, most truncate around 155-160). ```html <meta property="og:description" content="Open Graph tags explained: every og: property, Twitter Card tags, image sizes, debugging tools, and why short links need custom OG." /> ``` ### og:site_name The name of the overall site (not the specific page). Rendered as a source label on some platforms. ```html <meta property="og:site_name" content="U2L AI Blog" /> ``` ### og:locale The language of the page in `language_TERRITORY` format. Used by Facebook to route to the right localized version. ```html <meta property="og:locale" content="en_US" /> ``` ### og:image:width, og:image:height, og:image:alt Dimensions and accessibility text for the image. The dimension tags help platforms lay out the card without waiting to fetch and measure the image, which affects perceived load time. ```html <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:alt" content="OG tag diagram showing where each property renders in a link preview card" /> ``` ### og:video, og:audio Direct video/audio embeds for platforms that support inline playback (Facebook, LinkedIn to a lesser extent). Rarely needed outside of media companies. ### article:published_time, article:author, article:section, article:tag Article-specific properties when `og:type` is `article`. Improve preview cards on platforms that show timestamps and author bylines. ```html <meta property="article:published_time" content="2026-07-03T00:00:00Z" /> <meta property="article:author" content="Team U2L" /> <meta property="article:section" content="Developer" /> ``` ## Twitter Cards: The Overlay That Overrides OG on X X (formerly Twitter) reads Open Graph tags as a fallback, but if you also declare `twitter:*` tags, those take precedence. The rendering pipeline on X is separate enough that treating it as a standalone system pays off. The critical tag is `twitter:card`. It picks the layout: - `summary`: small square thumbnail beside the text. Default and easy to miss on scroll. - `summary_large_image`: wide hero card with the image at the top. The one you almost always want. - `player`: embedded video/audio player. For media pages that support inline playback. - `app`: promotes an app install. For app-specific pages. For 95% of pages, `summary_large_image` is the right call. It is the layout that stops the scroll. ```html <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Open Graph Tags: The Complete Guide" /> <meta name="twitter:description" content="Every OG property, Twitter Cards, image dimensions, and debugging tools in one guide." /> <meta name="twitter:image" content="https://u2l.ai/og/open-graph-tags-guide.png" /> <meta name="twitter:site" content="@u2l_ai" /> <meta name="twitter:creator" content="@u2l_ai" /> ``` One notable X quirk: `twitter:*` uses `name="..."` instead of the OG protocol's `property="..."`. Copy-pasting the OG format and just changing `og:` to `twitter:` will silently fail because the attribute is wrong. Get the attribute right. You can skip most `twitter:*` tags if you have all four required OG tags and rely on X's fallback. The one you should always set explicitly is `twitter:card` because the fallback to `summary` is worse than `summary_large_image` for most content. ## Platform-by-Platform Preview Rules Every platform has its own quirks. Here is the version worth memorizing. | Platform | Card Layout | Image Rules | Debugger | |---|---|---|---| | Facebook | Large image + title + description | 1200x630 recommended, min 600x315 | [Sharing Debugger](https://developers.facebook.com/tools/debug/) | | LinkedIn | Large image + title + source | 1200x627, min 200x200 | [Post Inspector](https://www.linkedin.com/post-inspector/) | | X (Twitter) | summary_large_image = wide hero | 1200x628, ratio 2:1 (min 300x157) | Card preview in tweet composer | | WhatsApp | Image + title + description + URL | 300x200 minimum; large images work | Live preview in chat | | Slack | Unfurl card with image + title + desc | 1200x630 | Post in a channel to preview | | iMessage | Rich link + image + title | 1200x630 | Send a message to preview | | Discord | Embed with image + title + description | 1200x630 | Post in a channel to preview | | Telegram | Instant view or link preview | 1200x630 | Chat preview | | Bluesky | Card with image + title + description | 1200x630 | Post to preview | | Pinterest | Uses `pinterest:*` or falls back to OG | Portrait 1000x1500 preferred | Rich Pins validator | The pattern: 1200x630 is the safe default that renders acceptably everywhere. Platforms that want a different ratio will crop from center, so long as the important content stays inside the middle safe zone. ## The Actually Correct OG Image Dimensions The universal answer is **1200 x 630 pixels at 2:1 aspect ratio** (technically 1.91:1, but 2:1 is close enough that most people default to it). That size renders cleanly on Facebook, LinkedIn, Slack, iMessage, Discord, WhatsApp, Bluesky, and X (with a small crop). Under 5 MB file size. PNG or JPG. The nuance most guides skip: - **Safe zone.** Center the important content inside the middle 1080x566 area. Platforms that crop the edges (X's summary_large_image in some contexts, Discord's mobile view) will still show your logo and headline. - **Text size.** Any text on the image should be at least 40px at 1200x630 render size. Preview thumbnails scale down, and small text becomes illegible. - **Contrast.** Assume the card renders on both light and dark UI. High-contrast images with clear focal points beat photographic images with subtle color palettes. - **File size.** Under 1 MB when possible. Larger images sometimes get skipped by platforms with aggressive fetch timeouts. - **Format.** JPG for photos, PNG for graphics with hard edges, WebP if you can (Facebook and LinkedIn both accept it now). Some platforms want portrait-oriented images (Pinterest wants 1000x1500). If Pinterest matters to your distribution, produce a second image and reference it via `og:image` as an additional tag (yes, you can declare multiple `og:image` tags and platforms will pick the appropriate one). ## How to Add Open Graph Tags (Frameworks and CMS) Every framework and CMS has its own way of injecting `<head>` metadata. Here are the patterns that work in 2026. ### Next.js (App Router) Use the `metadata` export or the `generateMetadata` function. Next handles OG tag generation and even ships an `ImageResponse` API for dynamic OG images. ```javascript export const metadata = { title: 'Open Graph Tags Guide', description: 'Every OG property explained.', openGraph: { title: 'Open Graph Tags Guide', description: 'Every OG property explained.', url: 'https://u2l.ai/blog/open-graph-tags-guide', siteName: 'U2L AI Blog', images: [{ url: 'https://u2l.ai/og/open-graph-tags-guide.png', width: 1200, height: 630 }], type: 'article', }, twitter: { card: 'summary_large_image', title: 'Open Graph Tags Guide', images: ['https://u2l.ai/og/open-graph-tags-guide.png'] }, } ``` ### WordPress The Yoast SEO or Rank Math plugin handles OG generation. Both let you set per-page titles, descriptions, and images. Do not roll your own without a good reason. ### Shopify Shopify's theme system injects some OG defaults. For fine-grained control, edit `theme.liquid` and add explicit `<meta property="og:*">` tags in the head. ### Static sites (Astro, 11ty, Hugo, Jekyll) Add the meta tags directly in your base template. Every static generator has a variable system for pulling per-page values. ### Framer, Webflow, Squarespace, Wix All expose OG title, description, and image in the page settings UI. Set them per page. Do not rely on the site-wide default alone. The pattern regardless of framework: set a sensible site-wide default, then override per-page for anything you want to look distinct in previews. Blog posts always deserve a unique image. Landing pages usually deserve a unique image. Utility pages can share the default. ## How to Debug OG Tags Every platform has a debugger that shows you what its scraper sees. Use them before shipping. - **[Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)** shows the OG tags Facebook parsed, the image it will use, and any errors. Also forces a re-scrape after you change tags (Facebook aggressively caches). - **[LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/)** does the same for LinkedIn. LinkedIn's cache TTL is punishingly long (up to 7 days), so debug BEFORE the first share, not after. - **[X Card Validator](https://cards-dev.twitter.com/validator)** used to be the go-to; X now shows previews directly in the tweet composer. Same idea. - **[opengraph.xyz](https://www.opengraph.xyz/)** is a third-party tool that renders how a URL will look on Facebook, LinkedIn, X, Slack, Discord, and iMessage simultaneously. Fast sanity check. - **View-source in your browser.** Ctrl+U, then Ctrl+F for `og:`. The lowest-tech debug method and often the fastest. The single most useful habit: post the URL in a Slack DM to yourself before shipping. Slack's unfurl uses standard OG parsing, and if it looks right in Slack, it will look right almost everywhere. ## Why Short Links Need Their Own OG Configuration Here is a subtlety most teams miss. When you share a shortened URL like `u2l.ai/launch` on social media, the platform scrapes the **short link's** page, not the destination page. If the short link platform does not proxy or override OG tags, you get whatever generic preview the short link redirect page has (usually nothing). There are three ways this can play out: **Option A: 301 redirect only.** The platform follows the redirect to the destination, scrapes the destination's OG tags, and renders that preview. Works for most links, but every platform handles redirects slightly differently, and some (LinkedIn historically) time out or refuse to follow. **Option B: Auto-inherit OG tags at the short link.** Some short link platforms fetch and mirror the destination's OG tags on the short link page itself, so platforms scraping the short link get the same preview. **Option C: Custom OG override at the short link.** The short link platform lets you set a different `og:title`, `og:description`, and `og:image` than the destination. Useful when you want a different social preview than what the destination page has (for example, a campaign-specific hero image on a link that points at a generic pricing page). U2L AI supports both auto-inheritance and full custom OG overrides. With custom social preview control you create a short link, upload a custom OG image, set a title and description independent of the destination, and every share of that short link renders your preview instead of the destination's. See the full feature list at [u2l.ai/features](https://u2l.ai/features) and [u2l.ai/pricing](https://u2l.ai/pricing) for plan availability. This is genuinely one of the most under-appreciated moves for click-through rate. A destination page often has generic marketing OG tags (or worse, the wrong ones). Overriding at the short link means each campaign or channel gets its own perfectly-tuned preview. For the broader context on how link previews affect performance, our [click-through rate guide](/blog/click-through-rate-guide) has the data on how much preview quality moves CTR (spoiler: a lot). ## Common Open Graph Mistakes The failure modes we see most often, ranked by how badly they hurt. **Missing og:image.** Platforms without a preview image get skipped past. A card with no image reduces engagement by roughly half in our observation, and matches broader industry data. **Wrong image size.** An image that is 400x400 gets rendered as a tiny thumbnail on every platform. It looks amateurish. Ship 1200x630. **Image behind login/CDN authentication.** The scraper cannot reach the image, so the platform falls back to nothing. Test with an incognito browser fetching the image URL directly. **HTTP images on an HTTPS page.** Mixed content. Modern browsers block the fetch. All OG image URLs must be HTTPS. **og:title identical to the HTML `<title>`.** Waste of a marketing surface. Use `og:title` to write a share-optimized headline, not the same one SEO wants. **Missing twitter:card.** X falls back to the small summary layout instead of the wide hero. Cut your engagement on X in half. **Attribute mixed up between og: and twitter:.** `og:*` uses `property="..."`, `twitter:*` uses `name="..."`. Mix them up and half your tags silently fail. **Aggressive caching by LinkedIn.** LinkedIn caches OG data for up to 7 days. Change your tag, share, and see the old preview? Use the Post Inspector to force a re-scrape. **Client-side-rendered `<head>`.** If OG tags are injected via JavaScript after page load, most social scrapers do not see them (they do not execute JS). Server-render your OG tags. This is why single-page apps often have terrible previews without SSR. **Only setting site-wide OG defaults.** Every blog post, product page, or landing page deserves its own OG image and title. Site-wide defaults are a fallback, not a strategy. **Tracking parameters in og:url.** UTMs and referral parameters in `og:url` fragment share counts across platforms. Use the clean canonical URL. For the safety-signal side of link previews (how OG data affects whether a shared link looks trustworthy), see our [guide to checking if a link is safe](/blog/how-to-check-if-link-is-safe). A branded, well-previewed short link is a stronger trust signal than a raw URL, and OG data drives most of that perceived quality. For the strategy side of putting links on social, our [social media link strategy](/blog/social-media-link-strategy) covers the platform-specific rules. ## Frequently Asked Questions ### What are Open Graph tags used for? Open Graph tags are HTML meta tags that tell social platforms and messaging apps how to render a preview when your URL is shared. They control the title, description, image, and card layout shown on Facebook, LinkedIn, X, WhatsApp, Slack, iMessage, Discord, and any other platform that unfurls links. ### What are the four required Open Graph tags? The four required OG properties per the protocol spec are `og:title`, `og:type`, `og:image`, and `og:url`. In practice, you should also always set `og:description`. Together they give platforms enough structured metadata to render a clean preview card. ### What size should an Open Graph image be? 1200 x 630 pixels at roughly 2:1 aspect ratio (technically 1.91:1) is the safe universal default. It renders cleanly on Facebook, LinkedIn, X (with a small crop), Slack, iMessage, WhatsApp, Discord, and Bluesky. Keep the file under 5 MB and center important content in the middle 1080x566 safe zone. ### Do Open Graph tags help SEO? Indirectly, yes. OG tags do not directly affect Google's ranking, but they increase social share click-through rates, which drives more traffic and engagement signals. A shared link with a compelling preview earns significantly more clicks than one without, and that engagement improves overall visibility. ### What is the difference between Open Graph and Twitter Cards? Open Graph is the general meta tag protocol read by nearly every social platform. Twitter Cards is X's overlay that uses `twitter:*` tags and takes precedence over OG when both are present. If only OG is set, X falls back to it. If only Twitter Cards are set, non-X platforms get no preview. ### Why is my Facebook link preview showing the wrong image? Usually one of three causes: the correct `og:image` is missing or has a wrong URL, Facebook cached an older version of your OG tags, or the image is not publicly accessible. Use the Facebook Sharing Debugger to force a re-scrape and see which tags Facebook parsed. ### How do I make my Open Graph image update? Change the `og:image` URL, then force a re-scrape on each platform. Facebook uses the Sharing Debugger. LinkedIn uses the Post Inspector. Slack, iMessage, and WhatsApp usually refresh automatically after a few hours. Some platforms cache aggressively (LinkedIn up to 7 days), so plan accordingly. ### Can I set Open Graph tags for a short link separately from the destination? Yes, if your short link platform supports custom OG overrides. U2L AI's custom social preview feature lets you set a distinct OG title, description, and image on the short link independent of the destination page, which is useful for campaign-specific previews on generic destination URLs. Check u2l.ai/pricing for plan availability. ### What happens if a page has no Open Graph tags? Platforms fall back to whatever they can scrape: the `<title>`, the meta description, and some heuristic image (often the wrong one). The preview usually looks broken and click-through rates drop. Setting explicit OG tags is one of the highest-ROI 15 minutes of technical work on any page. ### How many Open Graph tags can a page have? There is no strict cap. Most pages need 6-8 (`og:title`, `og:type`, `og:image` plus its dimensions, `og:url`, `og:description`, `og:site_name`). Pages representing articles add `article:*` extensions. Pages that want optimized X previews add `twitter:*` tags. Do not go overboard: extra tags do not help if they duplicate existing ones. ### Do I need Open Graph tags on every page? Every page that could plausibly be shared, yes. Blog posts, landing pages, product pages, help articles, marketing pages, launch announcements. Purely internal pages (admin dashboards, checkout confirmation) do not need them. When in doubt, ship them. The cost is a few meta tags. The upside is a proper preview whenever the URL travels. ## Ship the Preview You Meant to Ship Open Graph tags are the highest-leverage 30 minutes of frontend work on almost any page. The difference between a broken preview and a clean one shows up in every share, every DM, every Slack link, every social post, forever. It compounds silently. Get the four required tags right. Add `og:description`, `og:site_name`, and `og:image` dimensions. Set `twitter:card` to `summary_large_image`. Ship a 1200x630 image with your important content in the middle safe zone. Debug with the Facebook and LinkedIn tools before the first share. Then, for the links you care about most, override OG at the short link level to give each campaign a preview tuned specifically for it. If you are shipping short links and want each one to render with its own campaign-specific preview instead of inheriting whatever the destination page has, [create a free U2L AI account](https://u2l.ai/app/signup) and try the custom social preview feature. It is the shortest path from "our previews are okay" to "our previews out-click the destination page." For the neighboring topics: our [social media link strategy guide](/blog/social-media-link-strategy) covers the platform-specific rules that surround the OG piece, our [click-through rate guide](/blog/click-through-rate-guide) puts numbers to why preview quality matters, our [guide to branded links](/blog/what-is-branded-link) covers the domain-level trust signal that pairs with a good preview, and our [URL shortener guide for social media](/blog/url-shortener-social-media) walks through which shortener features actually move CTR on each platform. The scrapers are watching. Give them something worth rendering.