Open Graph and Twitter Cards: The Meta Tags That Control Social Sharing Previews (Not Search Snippets)

A page can have a perfect title tag, meta description, and canonical URL — and still display a broken-looking preview when shared on social media, because the meta tags that control "what shows up in search results" and "what shows up when shared on Facebook/Twitter" are different tags entirely

The previous articles on this site covered why Google rewrites title tags, meta description best practices, and the robots/noindex relationship. This article addresses social sharing previews — Open Graph and Twitter Card tags — a separate set of meta tags from the "standard" SEO meta tags, that control how a page appears when shared on social platforms, messaging apps, and similar contexts.

Two different "preview" systems, controlled by different tags

Search engine result snippets (covered in the previous title-tag and meta-description articles) are influenced by <title> and <meta name="description"> — standard HTML meta tags, part of the page's general metadata.

Social sharing previews — the card/preview that appears when a URL is pasted into Facebook, Twitter/X, LinkedIn, Slack, WhatsApp, Discord, and many other platforms — are controlled by a separate set of tags: Open Graph (og:title, og:description, og:image, og:url, and others) and, for some platforms, Twitter Card (twitter:card, twitter:title, etc.) tags.

A page can have excellent <title>/<meta description> tags (well-optimized for search snippets) while having no Open Graph tags at all — in which case, most social platforms will attempt to fall back to whatever they can find (sometimes the <title> tag, sometimes the first image on the page, sometimes nothing useful at all) — producing a social preview that looks incomplete, generic, or broken — despite the page's "SEO" meta tags being entirely correct.

The core Open Graph tags

og:title — the title shown in the social preview card. Can be the same as <title>, but doesn't have to be — some sites use a shorter, more "shareable"-feeling title for social contexts vs the search-optimized <title>.

og:description — the description text shown in the preview. Similarly, can differ from <meta name="description"> — social descriptions are often displayed with different length constraints than search snippets, and might benefit from a more "social"-toned phrasing (covered conceptually in the previous meta-description article's discussion of click-driving language — but for social sharing specifically, the "audience" reading the preview — someone scrolling a social feed — might respond differently to phrasing than someone scanning search results).

og:image — the single most visually impactful Open Graph tag — specifies which image appears in the preview card. Without og:image, most platforms either show no image, or attempt to guess one (often the first <img> on the page — which might be a logo, an icon, or something entirely unrepresentative of the page's content) — explicitly specifying og:image ensures a deliberate, appropriate image is used.

og:url — the canonical URL for the content being shared — important for ensuring that shares of (potentially) slightly different URL variants (with tracking parameters, trailing slashes, etc. — covered in previous canonical-tag articles) consolidate to a single, canonical representation in share counts/previews — similar, conceptually, to the <link rel="canonical"> tag's role for search engines, but specifically for social-platform share-tracking/preview-caching.

Open Graph image requirements: size matters, and platforms cache aggressively

og:image should point to an image meeting minimum size/aspect-ratio recommendations — different platforms have somewhat different specific recommendations, but a commonly-cited general guideline is an image of at least 1200×630 pixels (a roughly 1.91:1 aspect ratio) — images smaller than platform-specific minimums may be displayed smaller, cropped unexpectedly, or not displayed at all, depending on the specific platform's handling.

Platforms aggressively cache Open Graph data — when a URL is first shared on a platform, that platform fetches the page's Open Graph tags once, and caches the result (title, description, image) — if you later change the page's og:image (e.g., updating a featured image) — previously-shared links may continue showing the old image, because the platform's cached preview data hasn't been refreshed.

Most major platforms provide a "debugger"/"sharing preview" tool that allows manually triggering a re-fetch of a specific URL's Open Graph data — useful after updating og:image (or other Open Graph tags) for a page that's already been shared previously, to force the platform to pick up the new values, rather than continuing to display stale, cached data.

Twitter Card tags: largely redundant with Open Graph, with some Twitter-specific additions

twitter:card (values like summary, summary_large_image) controls the layout of the preview specifically on Twitter/X — summary_large_image produces a larger, more prominent image display than summary.

Many twitter:* tags mirror og:* equivalents (twitter:title, twitter:description, twitter:image) — and if Twitter-specific tags are absent, Twitter/X generally falls back to the corresponding Open Graph tags — meaning, for most sites, og:* tags alone provide a reasonable Twitter/X preview, even without dedicated twitter:* tags — twitter:card (specifying the layout) is often the one Twitter-specific tag worth including explicitly, even if other twitter:* tags are omitted (relying on Open Graph fallback for those).

How to use the Meta Tag Generator on sadiqbd.com

1. Generate <title> and <meta name="description"> for search-result snippets — per the previous articles' guidance
2. Separately, generate og:title, og:description, og:image, and og:url — for social-sharing previews — consider whether social-context-appropriate phrasing (for title/description) and a suitable, correctly-sized image differ from what's optimal for search snippets
3. After publishing/updating a page with new Open Graph tags: if the page has been previously shared, use the relevant platform's debugger/preview-refresh tool to force re-fetching of the updated Open Graph data, avoiding stale cached previews on existing shared links

Frequently Asked Questions

If I don't set og:title/og:description, will platforms automatically use my <title>/<meta description>? Often, but not reliably — many platforms do fall back to <title> and <meta name="description"> if og:title/og:description are absent — but this fallback behavior varies by platform, and isn't part of the Open Graph specification itself (it's each platform's own, independent, "best effort" fallback logic). Explicitly setting og:title/og:description removes this uncertainty — guaranteeing consistent behavior across platforms, rather than relying on each platform's individual fallback behavior, which could, in principle, differ or change over time.

Is the Meta Tag Generator free? Yes — completely free, no sign-up required.

Try the Meta Tag Generator free at sadiqbd.com — generate title, meta description, and Open Graph/Twitter Card tags for any page.