Open Graph & Twitter Card Generator

What it does

The Social Cards Generator builds both Open Graph (Facebook, LinkedIn, Slack, Discord, iMessage previews) and Twitter Card markup from a single form, because the two vocabularies share most of their fields. Type a title, description, image URL, and canonical URL once; the generator emits the OG and Twitter tags side by side, with live preview cards rendering exactly what Facebook, LinkedIn, and X will show when the URL is shared.

Common situations

You are about to share a new article on LinkedIn and want to verify the preview card is going to look right — correct image, accurate title, no truncation. Run the page’s URL through the generator to see the preview that LinkedIn will render, fix anything that looks wrong before you publish the post.

A blog post is showing the wrong image when shared on Facebook (an old logo, a placeholder, the first random image in the post body). Use the OG image generator to define the correct image at 1200×630 and update the page’s tags. Facebook caches OG data aggressively — use their Sharing Debugger to flush the cache after the change.

You are launching a campaign with paid social and the click-through rates on shared links are unexpectedly low. Test the share preview through the generator: a missing or low-quality OG image is one of the most common causes of social CTR underperformance.

You are integrating with Slack, Discord, or iMessage and want to make sure those platforms render previews correctly. They all read OG tags. Building cards that work on Facebook also covers them — there are subtle differences but no platform-specific tags worth maintaining separately.

A piece of content is meant to share with a different image than the page’s hero (a 16:9 social image vs the page’s 1:1 portrait, for example). Set og:image to the dedicated social asset rather than reusing the in-page hero. The generator emits this as a separate tag — the page can have one image visually and a different image in the social preview, and that is the right pattern for content that needs to perform on social.

What you need to know

Open Graph is Facebook’s protocol from 2010, but every platform that renders link previews — Facebook, LinkedIn, Slack, Discord, Telegram, WhatsApp, iMessage, Microsoft Teams, Mastodon — reads it. Twitter Cards is X’s parallel vocabulary, structurally similar but using name="twitter:..." instead of property="og:..." attributes. Implementing both takes care of every platform.

The required-or-effectively-required tags are: og:title, og:description, og:image, og:url, og:type (one of website, article, product, profile, video, plus a few others). For Twitter: twitter:card (one of summary, summary_large_image, app, player), with twitter:image required for everything except summary. The generator includes all of these.

Image dimensions matter more than the tags themselves. Facebook and LinkedIn want 1200×630 pixels (1.91:1 ratio). Twitter’s summary_large_image card uses the same dimensions. The small summary card needs a square image (1:1, minimum 144×144). Below those minimums, platforms either show a smaller card or fall back to no image. Above 5MB, Twitter rejects the image entirely. Most failures are dimension mismatches: a 600×600 brand logo gets cropped square on Facebook and looks fine, but the same logo on summary_large_image Twitter shows letterboxed and unprofessional.

The image URL should be absolute and publicly accessible — relative URLs and CDN paths behind authentication will not load. Most CMSes generate absolute URLs by default; the gap is usually when an og:image is set in a meta field as a relative path.

The og:type tag tells parsers what kind of entity the URL represents. website is the safe default for most pages. article adds context for blog posts and editorial content (and unlocks article:published_time, article:author sub-tags on Facebook). product is for e-commerce pages. video and profile are for their obvious counterparts. Picking the wrong type is harmless but slightly less informative; picking the right one occasionally unlocks richer presentation.

Twitter Cards’ four card types: summary (small square image), summary_large_image (full-width hero image), app (mobile app deep link), player (embedded video player). For most editorial and product content, summary_large_image is the right choice — it gives the post the most visual real estate.

Frequently asked questions

Do I need both Open Graph and Twitter Cards?

Yes, if you want both Twitter and everything-else previews to work. Twitter reads twitter: tags first and falls back to og: tags if Twitter-specific ones are missing. So a page with only OG tags will render on Twitter — usually as the small summary card, regardless of what you wanted. To control Twitter rendering specifically (especially the large-image card), set twitter:card and twitter:image explicitly.

What size should the OG image be?

1200×630 (1.91:1) is the universal target. It works for Facebook’s standard preview, LinkedIn’s preview, and Twitter’s summary_large_image card. Smaller images get scaled or cropped; the 1200×630 hero is what every preview is designed around.

Why is my OG image not updating after I changed it?

Facebook (and most platforms) cache OG data for 24 hours or more. Use the Facebook Sharing Debugger to force a refresh — paste the URL, click “Scrape Again”, and the cache flushes. LinkedIn has a similar tool at linkedin.com/post-inspector.

Can I have a different image for OG vs Twitter?

Yes — set og:image and twitter:image to different URLs. In practice, the only common reason to do this is when the OG image’s 1.91:1 ratio is wrong for Twitter’s small summary card and you want a square Twitter image. For summary_large_image, the same image works for both.

Does Open Graph affect SEO rankings?

Indirectly. OG tags do not influence rankings, but they affect click-through rate from social shares, which affects traffic, which is loosely correlated with ranking signals. The direct SEO impact is zero; the indirect impact via better social CTR is real.

What’s the difference between summary and summary_large_image?

Card size and image presentation. summary is a small horizontal card with a square thumbnail; summary_large_image is a full-width card with a 1.91:1 hero image above the title. For 99% of content, summary_large_image performs better on click-through.

Does WhatsApp use Open Graph?

Yes — WhatsApp link previews read OG tags. The image is shown smaller than on Facebook but the same 1200×630 source works. Title and description follow OG standards.

How does iMessage handle link previews?

Apple’s iMessage reads OG tags (since iOS 13’s “rich link” support). The preview is rendered as a hero card similar to Twitter’s summary_large_image. The same OG image and title work for iMessage previews.

Common problems

Problem: Image is showing up but cropped weirdly on Facebook.

The image is not 1.91:1 ratio. Facebook crops to 1.91:1 when the source ratio differs, removing the top and bottom of square or portrait images. The fix is to supply a 1200×630 image; if the visual content needs to be square, place the square content centred in a 1200×630 frame with brand-colour padding.

Problem: Twitter shows the small card instead of the large one despite summary_large_image being set.

Either the twitter:image tag is missing, the image is below Twitter’s minimum (300×157), or the image URL is returning an error. Twitter falls back to summary automatically when the large card cannot render. Check the image URL loads, is at least 1200×630, and is reachable from the public internet without authentication.

Problem: LinkedIn shows an old image after the page’s OG image was updated.

LinkedIn caches per-URL for around seven days. Use LinkedIn Post Inspector to force a refresh — paste the URL and the cache flushes. Some users report needing to share the URL once after refreshing for the cache to actually update.

Problem: Slack and Discord show no preview at all.

Either the page is blocking bots in robots.txt (Slackbot, Discordbot user-agents), the OG tags are missing entirely, or the page is returning a non-200 response to bot requests. Test by curling the URL with each platform’s user-agent and inspecting the returned HTML.

Problem: Twitter Cards work for new tweets but old tweets still show no preview.

Twitter renders the card the first time it processes the link, then keeps that rendering forever. There is no way to force a refresh of the card on existing tweets. New tweets with the same URL will show the updated card.

Tips

• Test every important share URL with the relevant platform’s debugger before publishing — Facebook’s Sharing Debugger and LinkedIn’s Post Inspector are the two that matter most. Twitter’s Card Validator was retired in 2022; Twitter’s previews are now updated based on real share activity.
• Treat the OG image as ad creative, not as decoration. The image is what stops the scroll; title and description are what convert the click.
• For evergreen pages, set OG image once and forget it. For campaign pages, schedule a check before launch — the OG image is the most-overlooked piece of campaign collateral.
• A 1200×675 image (16:9) works as a fallback when 1200×630 is impractical — the difference is unnoticeable in most renderings.
• Do not use transparent PNGs as OG images. Most platforms render transparent images on white, which can clash with the brand. Use solid backgrounds.

Related tools in this suite

The natural pairing is the Open Graph Debugger — paste a published page’s HTML to see what tags are actually being served and how the previews will render, useful when the published version is doing something different from your local template. The Meta Tag Generator handles the basic head tags that complement the social-specific ones generated here.

What this looks like at scale

For a single landing page, hand-set OG tags are fine. For a content site, the tags should be generated per-page from the underlying data — title from the post title, description from the post excerpt, image from a featured-image field, URL from the canonical URL. Most CMSes do this; the gap is usually missing or oversized images. The WP Beacon Plugin flags pages whose OG image is missing or whose dimensions don’t match social-platform requirements.

Take it further

If your content set has inconsistent or missing OG metadata across a lot of pages, the fix is templated, not hand-edited. Talk through the audit and what fixing it at scale would look like.