Open Graph / Twitter Card Tag Generator

Open Graph tag generator + Twitter Card tag generator (SEO for social sharing)

Social share previews can change click-through rate. If your site shows the wrong title, missing description, or no image when shared, you typically need Open Graph meta tags and Twitter Card tags. This tool generates the most common OG + Twitter tags and outputs clean HTML you can paste into your page’s <head>.

Need a full checklist and common fixes? Read: Open Graph & Twitter Card Tags – Fix Social Share Previews.

Generating your social preview tags

1. Enter the Page URL — the exact canonical URL, including https and your www/non-www choice.
2. Write the Title and Description — keep them consistent with what’s actually on the page.
3. Choose the Open Graph type (website for homepages and tools, article for blog posts) and the Locale (e.g. en_US).
4. Add the Preview image URL — absolute URL, ideally 1200×630 — plus a short alt description.
5. Configure Twitter Cards: card type (summary_large_image for big previews, summary for compact), plus twitter:site and twitter:creator handles.
6. Click Copy tags and paste everything inside your page’s <head>.

Open Graph vs. Twitter Cards: who uses what

• Open Graph was created by Facebook and is now the lingua franca of link previews: Facebook, LinkedIn, Discord, Slack, WhatsApp, Telegram, and iMessage all read og:title, og:description, and og:image.
• Twitter Cards are X/Twitter’s own system. If twitter: tags are missing, X falls back to your Open Graph tags — which usually works, but you lose control over the card style and attribution.
• Why generate both? One paste covers every major platform with no per-network fiddling. The few extra lines are cheap insurance.

The preview image: where most people go wrong

• Size: 1200×630 pixels is the widely recommended canvas for large cards — big enough to stay sharp on retina displays.
• Absolute URLs only: https://yoursite.com/og.png, not /og.png — crawlers fetch the image without your page’s context.
• Design for small: the image often renders at a few hundred pixels wide. Large type, high contrast, minimal detail — treat it like a billboard, not a brochure.
• Add alt text: og:image:alt and twitter:image:alt describe the image for screen readers and for platforms that show text when images fail.
• One image per page: a generic site-wide image is fine as a fallback, but per-page images dramatically outperform it.

Common preview problems this fixes

• Wrong title or stale description: usually missing or duplicated OG tags — generating a fresh, page-specific set solves it.
• No image (grey box): almost always a relative image URL, a blocked image host, or an image smaller than the platform’s minimum.
• http/https or www mismatches: the canonical URL in your tags must match the URL people actually share, or platforms treat them as different pages.
• “I fixed the tags but nothing changed”: previews are cached aggressively. Bust the cache with Facebook’s Sharing Debugger or X’s Card Validator after every fix, then test with a fresh share.

Type, locale, and card-style details

og:type tells platforms what kind of content they’re previewing: website for homepages, tools, and landing pages; article for blog posts and news (which unlocks publish-time metadata on some platforms). The locale tag (en_US format: language_COUNTRY) helps platforms pick the right language variant. For Twitter, summary_large_image gives you the big banner-style preview most marketers want; summary is the compact thumbnail variant. The twitter:site handle attributes the card to your brand, while twitter:creator credits the individual author.

Privacy note

Like everything on this site, tag generation happens entirely in your browser. The URLs and titles you enter are never sent anywhere — they stay on the page until you copy the output.

Best practices to improve previews

• Use a unique title and description that matches the page content.
• Use a single canonical URL format (avoid duplicates across environments).
• Use a readable OG image (1200×630 recommended) with high contrast and large text.
• Keep tags consistent across OG and Twitter to avoid mismatched previews.

FAQs