Open Graph and Twitter Cards: The 2026 Pre-Publish Checklist

Every page you ship will eventually be shared somewhere. Slack, X, LinkedIn, iMessage, Discord, the iOS share sheet, every messaging app on the planet — they all read the same metadata to render a preview. Get that metadata right and your link travels well. Get it wrong and your page shows up as a 404 image with the wrong title.

This is the 2026 version of the meta tags checklist — covering what platforms actually use, not what spec documents say from 2014.

The real-world stack

Modern apps consume three layers:

1. Basic Meta — <title>, <meta description>, <link rel="canonical">. The fundamentals every search engine and many basic apps still rely on.
2. Open Graph (OG) — Facebook’s spec, but the de facto default. Used by Slack, Discord, LinkedIn, iMessage, WhatsApp, and most modern apps. If you only have time for one social card spec, OG is it.
3. Twitter Cards — Twitter / X-specific. Falls back to OG when Twitter-specific tags are missing.

Inheritance is the design pattern: OG falls back to Basic, Twitter falls back to OG. You only need to override when a platform-specific value differs from the default.

The minimum viable set

If you’re shipping a single page tomorrow and have 5 minutes, output these and only these:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Page Title (under 60 chars)</title>
<meta name="description" content="Your page description (under 160 chars).">
<link rel="canonical" href="https://yoursite.com/page">

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description.">
<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:url" content="https://yoursite.com/page">
<meta property="og:type" content="website">

<meta name="twitter:card" content="summary_large_image">

That’s it. Everything else is refinement.

Image dimensions that actually work in 2026

Open Graph: 1200 × 630, JPEG or PNG, under 8 MB.

This is the dimension Facebook, LinkedIn, Slack, and X all crop most cleanly. Smaller images get scaled up and look bad. Larger images get cropped, often cutting off your title.

For Twitter summary_large_image, the same 1200 × 630 works.

For Twitter summary (small card), Twitter crops to a square — 144 × 144 minimum for the small image. Don’t bother. Use summary_large_image.

Generate covers programmatically

Hand-designed cover images don’t scale to a content site. Three options:

1. At build time with Satori — write JSX, render to PNG. Works in any Node environment. We use this approach in our blog.
2. At request time with Vercel OG — same idea but runtime, dynamic per request. Useful for user-generated content.
3. Static template + variable text overlay in Figma — fine for marketing pages with under 20 entries.

What you should NOT do:

• Output the same generic image for every page.
• Skip the OG image entirely. (Empty preview = broken-looking link.)

What 2026 apps actually consume

Common failures

1. The OG image returns a 404

Your og:image URL needs to be absolute and publicly accessible. <meta property="og:image" content="/og-image.png"> doesn’t work — apps don’t know which domain to prefix.

Always use the full URL: https://yoursite.com/og-image.png.

2. Title and description don’t match what users see

Search engines and social cards use the meta tags you provide, not the visible page content. If a user clicks through and the meta-description doesn’t reflect the page, your bounce rate goes up.

Keep meta descriptions accurate. Don’t write meta titles that promise something the page doesn’t deliver.

3. Caching surprises after you fix the tags

Once a platform fetches your OG metadata, it caches the result for hours or days. Fixing a typo in your OG title doesn’t immediately fix the social preview.

Use platform debuggers to force a refresh:

• Facebook Sharing Debugger
• Twitter Card Validator (still works in 2026 despite the X rebrand)
• LinkedIn Post Inspector

4. Special characters break the rendering

Quotes, ampersands, and angle brackets in your title or description need to be encoded. The HTML Entities reference covers the cases you’ll hit. If you use a meta tags generator, encoding happens automatically.

5. Multi-image preview vs single-image preview

og:image is repeatable — apps will pick the most relevant. Twitter only uses the first one. Most apps use the first. Optimize for the first; add additional images only if you have a specific use case.

Build the tags interactively

Hand-writing all of this for every new page is tedious. Use the Meta Tags Generator — it produces correct, ordered HTML with the inheritance chain handled, plus live previews of how Google SERP, Facebook, and Twitter will render the result.

When you’ve shipped, use DevZap’s SEO Meta Inspector to verify on the live page. It surfaces every meta tag the page actually exposes — useful when you want to confirm your CMS or framework rendered everything you expected.

The minimum check before publish

Before any new page goes live:

• ☐ <title> ≤ 60 chars, accurately describes the page
• ☐ <meta description> 50–160 chars, accurate, compelling
• ☐ <link rel="canonical"> set to the canonical URL
• ☐ og:title, og:description, og:image, og:url, og:type all set
• ☐ og:image URL is absolute and returns 200 with a 1200×630 image
• ☐ twitter:card set to summary_large_image
• ☐ Visit Facebook Sharing Debugger and confirm the preview matches what you want

This list takes 90 seconds. Skipping it costs hours when a launch tweet goes wide and the preview is broken.