Tool 021 / dev / free / runs locally
Open Graph & Meta Tag Generator
Fill in a page title, description, canonical URL, and preview image, and get ready-to-paste Open Graph, Twitter Card, and standard meta tags for your page's head. A live preview shows roughly how the link card will look when shared on Slack, Twitter/X, or Facebook. Nothing you type is sent anywhere, the tags are generated and rendered entirely in your browser.
example.com
My Page Title
A short, honest description of this page's content.
<title>My Page Title</title> <meta name="description" content="A short, honest description of this page's content."> <link rel="canonical" href="https://example.com/page"> <meta property="og:type" content="website"> <meta property="og:title" content="My Page Title"> <meta property="og:description" content="A short, honest description of this page's content."> <meta property="og:url" content="https://example.com/page"> <meta property="og:image" content="https://example.com/og-image.png"> <meta property="og:site_name" content="Example Site"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="My Page Title"> <meta name="twitter:description" content="A short, honest description of this page's content."> <meta name="twitter:image" content="https://example.com/og-image.png">
How it works
This generator writes the block of head tags that control how a page looks when someone shares it: the standard title, description, and canonical link, then the Open Graph tags Facebook and LinkedIn read, then the Twitter Card tags X reads. You fill in five fields and copy the finished HTML into your page head.
Every value you type is HTML-escaped before it lands in an attribute, so an ampersand in a title or a quote in a description cannot break out and corrupt the markup. The Twitter card type switches itself: with an image URL you get summary_large_image, and without one you get the smaller summary card. A handle typed with or without a leading at sign is normalised to a single one.
The preview panel on the right is an approximation of the card, built from the same values plus the hostname parsed out of your page URL. It is a sanity check for truncation and image framing, not a live scrape of the social networks.
How to use it
- Enter the page title and description you want shown in the share card.
- Enter the canonical page URL, which is also used for og:url and the preview hostname.
- Add an absolute image URL, ideally 1200 by 630 pixels, and optionally the site name and your X handle.
- Check the approximate preview for truncation or awkward cropping.
- Click Copy and paste the generated tags into the head element of your page.
Worked examples
Input: Title "Ship & Save", image https://example.com/og.png, handle @toolsnimbus
Output: <meta property="og:title" content="Ship & Save"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@toolsnimbus">
The ampersand is escaped, the card upgrades to the large image variant, and the duplicate at sign is not doubled.
Input: Same fields with the image URL cleared
Output: <meta name="twitter:card" content="summary">
With no image the tool emits the small card and drops og:image and twitter:image entirely.
Edge cases and limits
- og:type is always website. Blog posts, products, and videos need their own type plus the extra article, product, or video properties, which you add by hand.
- It does not emit og:image:width, og:image:height, og:locale, or article metadata such as published time.
- The preview is a rough approximation. It does not fetch your image through a crawler or reproduce each network's exact truncation point.
- The image URL is not validated or measured. A 404, a login-protected asset, or an image under 200 pixels wide will still generate tags that look fine here.
- Nothing is checked against a length limit; titles and descriptions can exceed what any given network shows.
Common mistakes
- Using a relative image path such as /og.png. Crawlers fetch og:image on its own, so it must be an absolute URL with the scheme and domain.
- Changing the tags and expecting the old card to disappear. Facebook and LinkedIn cache aggressively; re-scrape the URL in their debugging tools.
- Hosting the image behind authentication or a hotlink block, so the crawler gets nothing and the card falls back to plain text.
- Setting og:url to a redirecting or non-canonical variant of the page, which splits share counts and confuses canonicalisation.
Frequently asked questions
What is the difference between Open Graph and Twitter Card tags?+
Open Graph (og:title, og:description, og:image, and so on) is the protocol Facebook created that most platforms, including Slack and LinkedIn, now read for link previews. Twitter/X has its own twitter:card tags but falls back to Open Graph tags if they're present, so most sites include both sets for maximum compatibility, which is what this tool generates.
What image size should og:image use?+
1200x630 pixels is the widely recommended size: it satisfies Facebook's minimum and displays well as a large "summary_large_image" card on Twitter/X without cropping awkwardly. Keep the image under 5MB and use an absolute URL (starting with https://), since relative paths are not resolved reliably by crawlers.
Do I need to add these tags to every page on my site?+
Only pages you expect to be shared benefit meaningfully, typically the homepage, articles, and product pages. Each of those pages should have its own unique title, description, and image tags rather than reusing the same generic set site-wide, since a duplicate preview across every page looks broken when shared side by side.
What image size should I use for og:image?+
1200 by 630 pixels is the safe default: it satisfies the 1.91 to 1 ratio the large summary card expects and stays above the minimum sizes Facebook and LinkedIn enforce. Keep the important content away from the edges, since each network crops slightly differently.
Do I still need a normal meta description if I have og:description?+
Yes. Search engines read the standard meta description, while social crawlers read og:description. This tool emits both from the same text so the two never drift apart.
Related tools
More Developer tools that run entirely in your browser.