Flat 30% off for Singapore 🇸🇬

Open Graph preview & meta tag generator

See how your link will unfurl on X, LinkedIn, Facebook, Slack, Discord, iMessage and WhatsApp before you share it, check your image against each platform's rules, and copy complete Open Graph and Twitter Card tags.

  • Free, no signup
  • Runs in your browser
  • Nothing is uploaded

Page details

What the card says.

34 characters

Type (og:type)

Share image

Upload to preview locally, or paste the URL of an image already online.

    Checks

    Image 1200 × 630px

    • Sample imageThis is a generated placeholder. Drop your real image or paste its URL to check it.Note
    • 1200 × 630pxLarge enough to stay sharp on retina screens.Good
    • Ratio 1.90:1Matches the 1.91:1 shape every platform crops to.Good
    • Title · 34 charsShort enough to show in full almost everywhere.Good
    • Description · 98 charsA good length for previews.Good

    Link previews

    Approximations of each platform’s card. Platforms change these often.

    Showing a sample image

    Generated from your title so the previews look real. Drop your own image to check its size and crop.
    X (Twitter)
    Northwind Studio brand identity work on a blue backgroundBrand Identity Design for Startups

    From northwind.example

    LinkedIn
    Northwind Studio brand identity work on a blue background

    Brand Identity Design for Startups

    northwind.example

    Facebook
    Northwind Studio brand identity work on a blue background

    northwind.example

    Brand Identity Design for Startups

    Logo, type, colour and guidelines for early-stage startups. Fixed price, delivered in three weeks.

    iMessage
    Northwind Studio brand identity work on a blue background

    Brand Identity Design for Startups

    northwind.example

    Slack

    Northwind Studio

    Brand Identity Design for Startups

    Logo, type, colour and guidelines for early-stage startups. Fixed price, delivered in three weeks.

    Northwind Studio brand identity work on a blue background
    Discord

    Northwind Studio

    Brand Identity Design for Startups

    Logo, type, colour and guidelines for early-stage startups. Fixed price, delivered in three weeks.

    Northwind Studio brand identity work on a blue background
    WhatsApp
    Northwind Studio brand identity work on a blue background

    Brand Identity Design for Startups

    Logo, type, colour and guidelines for early-stage startups. Fixed price, delivered in three weeks.

    northwind.example

    https://northwind.example/services/brand-identity

    10:24 ✓✓

    Meta tags

    Paste into <head>, or use the Next.js version.

    HTML meta tags
    <title>Brand Identity Design for Startups</title>
<meta name="description" content="Logo, type, colour and guidelines for early-stage startups. Fixed price, delivered in three weeks." />

<!-- Open Graph -->
<meta property="og:title" content="Brand Identity Design for Startups" />
<meta property="og:description" content="Logo, type, colour and guidelines for early-stage startups. Fixed price, delivered in three weeks." />
<meta property="og:url" content="https://northwind.example/services/brand-identity" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Northwind Studio" />
<meta property="og:image" content="https://northwind.example/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Northwind Studio brand identity work on a blue background" />

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@northwindstudio" />
<meta name="twitter:title" content="Brand Identity Design for Startups" />
<meta name="twitter:description" content="Logo, type, colour and guidelines for early-stage startups. Fixed price, delivered in three weeks." />
<meta name="twitter:image" content="https://northwind.example/og-image.png" />
<meta name="twitter:image:alt" content="Northwind Studio brand identity work on a blue background" />

    How it works

    How to use the open graph preview & meta tag generator

    1. 01

      Describe the page

      Enter the title, description, URL and site name you want people to see when the link is shared, and pick the og:type.

    2. 02

      Add the share image

      Drop an image to preview it locally, or paste the URL of one already online. The checks report its size, aspect ratio and file weight.

    3. 03

      Compare every platform

      See approximate link cards for X, LinkedIn, Facebook, iMessage, Slack, Discord and WhatsApp side by side, updating as you type.

    4. 04

      Copy the tags

      Copy the full set of Open Graph and Twitter Card meta tags, or a Next.js metadata object that renders the same thing.

    What Open Graph tags do

    When someone pastes a link into a post or a chat, the platform fetches the page and looks for Open Graph meta tags in the <head>. The protocol was introduced by Facebook in 2010 and is now read by almost everything: LinkedIn, Slack, Discord, iMessage, WhatsApp, Telegram and most AI chat apps. X uses its own Twitter Card tags but falls back to Open Graph for anything missing. Without these tags, platforms guess, and the guess is usually the wrong image or no card at all.

    The tags that matter

    TagWhat it does
    og:titleThe headline of the card. Keep it under about 60 characters.
    og:descriptionOne or two lines of supporting copy. LinkedIn and X often hide it.
    og:imageThe share image. Must be an absolute URL.
    og:image:width / heightLets Facebook render the image on the very first share instead of after processing.
    og:urlThe canonical URL, so likes and shares are counted on one address.
    og:typewebsite for most pages, article for posts.
    twitter:cardsummary_large_image for a big image, summary for a small square thumbnail.

    Image rules by platform

    • Universal target: 1200 × 630px (1.91:1), PNG or JPG, under about 1 MB. Design to this and every platform looks good.
    • X large card: 2:1 crop, at least 300 × 157px, under 5 MB. JPG, PNG, WebP and GIF are accepted; GIFs show their first frame.
    • X summary card: a square crop, at least 144 × 144px.
    • Facebook and LinkedIn: 1.91:1. Below about 600 × 315px you risk a small thumbnail instead of a full-width image.
    • No SVG. None of the major platforms render SVG share images.

    Crops differ slightly between platforms, so keep text and logos inside a central safe area with generous margins. The card is often shown only 300 to 500px wide on a phone, so use large type, few words and strong contrast. For every other social format, see the social media image size guide.

    How each platform shows the card

    The same tags produce noticeably different cards, which is why the previews above sit side by side:

    • Xshows the image with the title overlaid in the corner and "From domain" underneath. The description is not shown on large cards.
    • LinkedIn shows the image, the title and the domain, and drops the description.
    • Facebook adds the domain in capitals above the title and one line of description.
    • Slack and Discordshow the site name, title, a few lines of description and the image. Discord colours the embed's side bar with your theme-color meta tag.
    • iMessage and WhatsApp lead with the image, then the title and domain; WhatsApp also shows a line or two of description.

    The practical lesson: put the message in the title and the image, because the description is the first thing most platforms drop.

    Why previews go wrong

    • Relative image paths. /og.png works in your browser but not for a crawler. Use the full https:// URL.
    • Stale caches.Platforms remember previews. Re-scrape with Facebook's Sharing Debugger or LinkedIn's Post Inspector, and give a replaced image a new filename.
    • Blocked crawlers. Pages behind a login, a cookie wall or a robots.txt rule cannot be read, so no card is built.
    • Tags added by JavaScript. Most crawlers do not run scripts. The tags need to be in the HTML the server sends.

    Using it with Next.js

    In the Next.js App Router, export a metadata object from a page or layout and Next renders the tags for you, which is what the Next.js tab produces. Set metadataBase once so relative image paths become absolute. You can also generate images in code with an opengraph-image.tsx file, which is how every page on this site gets its card.

    Pair this with the SERP snippet preview to get the search result right too. If you want sites that unfurl properly everywhere without thinking about it, that comes standard with my website design work.

    Common questions

    Open Graph preview & meta tag generator: FAQ

    1200 × 630 pixels, a 1.91:1 ratio, as a PNG or JPG under about 1 MB. That size is sharp on high-density screens and is cropped sensibly by every major platform. X's large card crops to 2:1, so keep important content away from the top and bottom edges.

    Need it done for you?

    Links that unfurl beautifully everywhere come standard with my builds.

    Website design

    More free tools

    All tools →

    SERP snippet preview

    See your title and description as Google shows them, measured in pixels, on desktop and mobile.

    Social image size guide & resizer

    Every 2026 post, story, cover and ad size — and a resizer that crops your image to fit.

    Schema markup generator

    Build valid JSON-LD for Organization, LocalBusiness, Product, Article, FAQ and more.