Open Graph Generator: OG & Twitter Card Meta Tags

What happens when someone shares your link

When a URL is pasted into Slack, iMessage, LinkedIn, Facebook, Discord, or X, the platform's crawler fetches the page and looks in the head for Open Graph tags. It takes og:title, og:description, and og:image and builds the preview card. If the tags are missing, it guesses from the page title and whatever image it finds first, which is how you end up with a preview showing your cookie banner or a 16-pixel logo.

The Open Graph protocol, published by Facebook in 2010, defines the og: tags. X (formerly Twitter) has its own twitter: tags, but it falls back to the Open Graph values for title, description, and image when its own tags are missing. The four tags that matter most are og:title, og:description, og:image, and og:url, plus twitter:card to choose X's layout.

Tag by tag

og:title: the headline on the card. Keep it under about 60 to 70 characters; it does not need to match your SEO title and often works better without the brand suffix. og:description: one or two sentences, under about 200 characters, since most apps show far less. og:url: the canonical URL of the page, so likes and shares of URL variants roll up to one address. og:type: website for most pages, article for blog posts and news. og:site_name: your brand, shown above or below the title on some platforms. og:image:alt: a text description of the image for screen reader users.

twitter:card: summary_large_image for a full-width image, or summary for a small square thumbnail beside the text. twitter:site: your brand's X handle, which X can show as attribution.

Getting the image right

Use 1200 × 630 pixels, a 1.91:1 ratio. That size looks sharp on high-density screens and matches the large-card layout on Facebook, LinkedIn, and X. Put the important content, like a headline or logo, in the center: some apps crop to a square, and others overlay the title at the bottom.

Keep the file small, ideally well under 1 MB, in JPG or PNG. X documents a 5 MB limit for card images, and slow-loading images sometimes time out in crawler fetches, leaving a blank card. Always use an absolute https:// URL. A relative path like /og.png is the single most common reason a preview shows no image.

Worked example: a blog post

Title: How We Cut Our AWS Bill by 40%. Description: The three changes that saved us $4,200 a month, with the exact configs. URL: https://example.com/blog/aws-bill. Image: https://example.com/og/aws-bill.png. Type: article. Site name: Example Eng. Handle: @exampleeng.

The generator outputs og:type article, og:title, og:description, og:url, og:site_name, og:image, og:image:alt, twitter:card summary_large_image, twitter:site, twitter:title, twitter:description, twitter:image, and twitter:image:alt. Paste them into the head of that post. In Astro, Next.js, or most static site generators, you would put the same values into the layout's head section driven by each page's frontmatter, so every page gets its own card automatically.

Testing and cache busting

Platforms cache previews aggressively, sometimes for days. After changing tags, use Facebook's Sharing Debugger to re-scrape the URL and LinkedIn's Post Inspector to refresh LinkedIn's copy. Slack and Discord cache per URL, so adding a harmless query parameter like ?v=2 makes them fetch fresh tags.

Also check that the crawler can reach the page. Previews fail if the page requires a login, blocks unknown user agents, is behind a bot-challenge page, or returns the tags only after JavaScript runs. Most social crawlers do not execute JavaScript, so tags must be in the server-rendered HTML.

Common mistakes

Relative image URLs. The same generic image on every page, which makes every share look identical. Titles written for Google keyword matching rather than for a human scrolling a feed. Forgetting og:url, so shares split across http, https, and tracking-parameter versions of the same page. And using property= for twitter: tags: Open Graph uses property, while X's tags officially use name, which is what the generator outputs.