OpenGraph and Twitter cards: the complete checklist

A link with no preview looks like a mistake. The title is a raw URL, the image is blank, and the description is whatever the platform guessed from the first paragraph. People still click, but fewer of them, and the ones who do arrive with less context than you could have given them.

OpenGraph and Twitter cards are the least glamorous part of SEO and the easiest to get wrong, because the tags fail silently. No crawler complains. The page renders fine. The preview is just worse.

This checklist covers what to include, what to skip, and the mistakes that survive even after you have added the tags.

The required OpenGraph tags

Four tags do most of the work. Everything else is refinement.

Tag	Purpose	Example
og:title	Headline in the preview	Technical SEO audit checklist
og:description	Supporting line under the title	The 14 checks that change rankings.
og:image	Preview image	https://example.com/og/post.png
og:url	Canonical URL of the shared page	https://example.com/blog/post

Add og:type as well. Use website for the homepage and landing pages, and article for posts and news. The type changes how some platforms interpret the other tags, especially dates and authorship.

If you use a framework, generate these from the same data as the page title and description. Duplicating the strings in two places is how they drift.

The tags that are worth adding

Once the required four are correct, these improve the preview and the machine-readable context:

• og:site_name — the brand name, shown by some clients.
• og:locale — for example en_US. Only useful when it is accurate.
• article:published_time and article:modified_time — ISO 8601 timestamps for articles.
• article:author — a profile URL, not just a name, when you have one.
• article:tag — one tag per topic, repeated as needed.

Do not add tags because a validator lists them. An empty or guessed value is worse than an absent tag, because it overrides the platform's sensible fallback.

Images: 1200 by 630 is still the safe default

The widely supported landscape ratio is 1.91:1, which is 1200×630 pixels. That size works for Facebook, LinkedIn, Slack, Discord, and most link unfurlers.

Twitter/X accepts the same ratio and also supports a square 1:1 image for some card types. If you only ship one asset, ship 1200×630. Keep the important text and logo inside a safe area, because some clients crop the edges.

A few practical rules:

• Serve a PNG or JPEG. Avoid SVG for preview images; support is inconsistent.
• Keep the file under about 5 MB. Smaller loads faster in the preview.
• Design for a small display. A headline at 48px on a 1200px canvas is readable in a chat sidebar; 14px body copy is not.
• Do not put the entire article title in the image. The title is already text in the preview.

Absolute URLs, always

og:image and og:url must be absolute. A relative path like /og/post.png may work on one platform and fail on another, because the crawler has no reliable base to resolve it against.

This is the single most common OpenGraph bug. It often appears when a site moves between environments: the staging build emits http://localhost:3000/og.png, the production build is fine, and nobody notices until a launch post goes out with a broken card.

Set a base URL in one place and build every absolute tag from it. If the base URL is missing in production, fail the build rather than shipping a localhost image.

Twitter cards

Twitter/X reads OpenGraph as a fallback, but its own tags give you more control.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="OpenGraph and Twitter cards" />
<meta name="twitter:description" content="The complete checklist." />
<meta name="twitter:image" content="https://example.com/og/cards.png" />

summary_large_image shows a wide image above the title. summary shows a small square thumbnail beside the text. For most articles and product pages, the large image earns more attention.

twitter:site and twitter:creator accept handles with the @ included. They are optional, and they are only useful if the accounts are active.

Cache invalidation is the hidden step

Platforms cache previews aggressively. You can fix every tag, deploy, and still see the old card for days. That is not a bug in your markup; it is a cache.

Each platform has its own way to force a refresh:

• Facebook and many OpenGraph consumers: the Sharing Debugger, which lets you scrape again.
• LinkedIn: the Post Inspector.
• Twitter/X: the Card Validator, though it is less reliable than it used to be.

If a refresh tool is unavailable, change the image URL. A new filename or a version query string is the most reliable cache buster. Do this when you redesign the card, and keep the old file around briefly so existing previews do not break.

Testing the result

Test the actual URL, not a local build. The crawler needs a public page with the final headers and redirects.

Check these in order:

1. The page returns 200 over HTTPS, with no redirect chain.
2. The canonical URL matches og:url.
3. The image loads without authentication and returns an image content type.
4. The title and description are not truncated in an ugly way.
5. The preview looks correct on a narrow mobile chat client, not just a desktop browser.

A validator passing means the tags parse. It does not mean the card looks good. Look at the rendered preview.

Common mistakes

Relative URLs. Covered above, and still the most frequent. Fix the base URL, then test staging and production separately.

Missing og:url. Without it, platforms may attribute shares to the wrong variant of the page, especially when tracking parameters are involved. Set it to the canonical URL, without query strings.

Title and description duplication. If og:title is identical to the page title and og:description is the meta description, that is fine. The mistake is letting them diverge, so the shared card promises something the page does not deliver.

Stale images after a rebrand. The old logo lives on in cached cards for weeks. Version the image path when the brand changes.

One card for every page. A homepage card that says "Welcome to our website" is a wasted opportunity on an article share. Generate per-page cards from the page's own title, or at least per-section cards.

Text baked into the image only. Some clients show the image without the title. If the image is the only place the topic appears, the preview is unreadable for anyone who cannot see it or whose client crops it.

A minimal implementation

For a typical article page, this is enough:

<meta property="og:type" content="article" />
<meta property="og:title" content="OpenGraph and Twitter cards" />
<meta property="og:description" content="The complete checklist." />
<meta property="og:url" content="https://example.com/blog/opengraph-twitter-card-checklist" />
<meta property="og:image" content="https://example.com/og/cards.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="article:published_time" content="2026-10-22T09:00:00Z" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="OpenGraph and Twitter cards" />
<meta name="twitter:description" content="The complete checklist." />
<meta name="twitter:image" content="https://example.com/og/cards.png" />

That is not a lot of markup, but it is the difference between a link that looks intentional and one that looks broken. If you want to see the rest of the technical picture, read the technical SEO audit checklist, or run a free audit against a site you own and check the metadata it reports.