🖼️ Social Open Graph & Twitter Card Generator
An Open Graph generator for og: and Twitter Card meta tags, with a live preview of how the link renders on Facebook, LinkedIn, X and Discord.
Live Social Feed Card Preview
Generated HTML Meta Tags
What Social Open Graph & Twitter Card Generator Does
This tool writes the eleven <meta> tags a browser or crawler reads to build a link preview: six Open Graph tags (og:type, og:url, og:title, og:description, og:image, og:site_name) and five Twitter Card tags (twitter:card, twitter:url, twitter:title, twitter:description, twitter:image). Type a title, description, canonical URL, image URL and site name, pick a Twitter card type, and copy the block into the page's <head>.
Every value is HTML-escaped before it goes into the tags — the ampersand, the angle brackets and the double quote are each replaced with their entity form, in that order, so a title containing a quotation mark or an ampersand cannot break out of the content="" attribute and corrupt the markup that follows it. The apostrophe is left alone deliberately: every attribute this tool writes is double-quoted, so an unescaped apostrophe inside one is inert.
The preview card renders the actual image URL you typed, not a placeholder. If the image fails to load — wrong URL, blocked by CORS, taken down — the card shows an explicit "Image failed to load" state instead of silently displaying a generic graphic, which is the only way you would otherwise know before a crawler finds out for you. The description in the preview is truncated on grapheme-cluster boundaries at 110 units, not raw character count, so it does not sever an emoji or an accented character mid-glyph the way a plain string slice would.
This is a generator, not a checker. It writes tags for a page you have not published yet, or one you do not want to wait on a crawler to re-scan. It does not fetch your live URL, and it cannot tell you what a platform is currently showing for a page that already exists — that is a different job, done by Facebook's Sharing Debugger and LinkedIn's Post Inspector, both of which read tags off a URL you give them after the page is already public.
How to Use Social Open Graph & Twitter Card Generator
- Enter page title, description, canonical URL, and social image URL
- Preview how your card will appear in social media feeds in the live preview box
- Click Copy Meta Tags and paste into your website’s `<head>` section
Formula Used by Social Open Graph & Twitter Card Generator
HTML attribute escaping, in the order this tool applies it
escaped = raw.replace(&→&).replace(<→<).replace(>→>).replace("→")
- &
- Replaced first — replacing it after any other substitution would re-escape the entities that substitution just introduced
- <, >
- Replaced so a title or description cannot open or close an HTML tag inside the attribute value
- "
- Replaced so a title cannot terminate the content="" attribute early; every tag this tool writes uses double quotes, so this is the only quote character that matters here
Worked example
Page title: Bob's "Best" Pizza & Subs <Official>
- Escape & first: Bob's "Best" Pizza & Subs <Official>
- Escape <: Bob's "Best" Pizza & Subs <Official>
- Escape >: Bob's "Best" Pizza & Subs <Official>
- Escape ": Bob's "Best" Pizza & Subs <Official>
Result: og:title content="Bob's "Best" Pizza & Subs <Official>" — a title with a raw quote and ampersand can no longer break the attribute or inject markup. The apostrophe after "Bob" is untouched and causes no problem because the surrounding quotes are double quotes.
Grapheme-safe preview truncation
preview = graphemeUnits(description).length > 110 ? first 110 units joined + "…" : description
- graphemeUnits()
- Intl.Segmenter with granularity "grapheme" — counts what a reader perceives as one visible character, so a flag emoji or an accented letter built from two code points still counts as one unit
- 110
- The fixed truncation limit used only in this tool's own preview card, not a platform-published limit
Worked example
Description: "Compare prices, calculate mortgages, convert units, and track your health — all free, all in your browser, with no account and no signup required to get started today." (167 grapheme units)
- Count grapheme units: 167
- 167 > 110, so truncate to the first 110 units
- Append the ellipsis character
Result: Compare prices, calculate mortgages, convert units, and track your health — all free, all in your browser, wit… — 111 visible characters shown in the preview card. The full, untruncated description is still what goes into the copied meta tag; only the on-page preview is shortened.
The Open Graph Protocol's Four Required Properties
Per the official spec. This tool emits all four, though og:type is fixed and not selectable.
| Property | ogp.me's definition | Emitted by this tool |
|---|---|---|
| og:title | The title of your object as it should appear within the graph | Yes — from the Page Title field |
| og:type | The type of your object, e.g. 'video.movie' | Yes, but always "website" — no type picker |
| og:image | An image URL which should represent your object within the graph | Yes — from the Social Share Image URL field |
| og:url | The canonical URL of your object that will be used as its permanent ID in the graph | Yes — from the Canonical URL field |
Source: The Open Graph Protocol
Facebook's Own 'Basic Tags' Don't Match ogp.me's Required Four
Facebook's webmaster guide lists a different basic set — it swaps og:url's spec-mate og:type for og:description — then calls og:type an 'additional' tag, alongside og:locale.
| Property | Facebook's own description | One of ogp.me's required 4? |
|---|---|---|
| og:url | The canonical URL for your page. This should be the undecorated URL, without session variables... | Yes |
| og:title | The title of your article without any branding such as your site name | Yes |
| og:description | A brief description of the content, usually between 2 and 4 sentences | No — description is not one of the four the protocol itself requires |
| og:image | The URL of the image that appears when someone shares the content to Facebook | Yes |
| og:type (additional) | The type of media of your content. This tag impacts how your content shows up in... | Yes, but Facebook files it as "additional," not basic |
| og:locale (additional) | The locale of the resource. Defaults to en_US | No — not part of the required four, and not emitted by this tool |
og:image Formats Facebook Actually Accepts
From the same guide. Pointing og:image at a .webp or .avif file is a real, common failure — Facebook does not list either format as supported.
| MIME type | Common extension | Accepted per Meta's guide |
|---|---|---|
| image/jpeg | .jpg / .jpeg | Yes |
| image/gif | .gif | Yes |
| image/png | .png | Yes |
| image/webp | .webp | Not listed as accepted |
| image/avif | .avif | Not listed as accepted |
og:type Verticals This Tool Does Not Offer
ogp.me defines 13 og:type values across five structured verticals, each with its own extra properties. This tool always emits "website" and none of the type-specific properties below.
| Vertical | og:type values | Extra properties it defines |
|---|---|---|
| Global | website, article, book, profile | article: published_time, modified_time, author, section, tag — book: author, isbn, release_date — profile: first_name, last_name, username, gender |
| Music | music.song, music.album, music.playlist, music.radio_station | music:duration, music:musician, music:album, music:release_date |
| Video | video.movie, video.episode, video.tv_show, video.other | video:actor, video:director, video:writer, video:duration, video:release_date |
| Payment (beta) | payment.link | payment:currency, payment:amount, payment:status, payment:expires_at |
Source: The Open Graph Protocol
How to Read Your Result
Don't put your site name inside og:title
Facebook's own guidance for og:title is explicit: it should be "the title of your article without any branding such as your site name." This tool has a separate Site Name field that writes og:site_name for exactly that reason — most platforms already display the site name or domain next to the title, so branding baked into the title itself gets shown twice.
A crawler that finds no Open Graph tags does not leave the preview blank
Facebook states plainly that "the Facebook Crawler uses internal heuristics to make a best guess about the title, description, and preview image" when a page has no Open Graph tags at all. That guess is often the wrong headline on the page, the first image in the DOM regardless of relevance, or a truncated first paragraph. Writing the six og: tags is what replaces that guess with a value you chose.
Images are cached by URL, not by content
Facebook and most other crawlers fetch og:image once and cache the result against that exact URL. Replacing the image file at the same URL does not reliably force a new fetch — the old cached image can keep showing until the platform's own debugger is used to force a re-scrape, or until the URL itself changes (appending a version query string such as ?v=2 is the common workaround). This tool has no way to force that re-scrape; it only writes the tag.
X reads Open Graph tags too, and its own Twitter Card documentation has moved
The dedicated markup reference at developer.x.com/en/docs/x-for-websites/cards/overview/markup now redirects to docs.x.com/overview, a general API developer platform page with no card-markup content on it at all. The twitter:card tags this tool writes are still valid and still used, but treating Open Graph as the tags every platform reads first, and twitter:card as an X-specific supplement on top, is the more accurate mental model today than treating the two as equally load-bearing.
Limitations & Accuracy Notes
- og:type is fixed to "website." There is no article, product, book, music or video type, so none of the type-specific properties in the table above (article:author, article:published_time, and the rest) can be generated here.
- No og:image:width or og:image:height fields. Meta's own guide recommends specifying both "to ensure that the image loads properly the first time it's shared" — omitting them does not break the preview, but it does cost the crawler an extra synchronous fetch on first share.
- No og:locale, twitter:site or twitter:creator fields. og:locale defaults to en_US on every platform that reads it if omitted, so this only matters for non-English content. twitter:site and twitter:creator attribute a card to an X account and are silently absent from the output.
- The Twitter Card type selector offers only summary and summary_large_image. X's card system also defines player and app cards for embedded video and app-install links; neither is available here.
- The image preview only proves the browser can load the URL. It does not check the file is actually one of the three MIME types Facebook lists as accepted (image/jpeg, image/gif, image/png), and a working .webp or .avif image will preview fine here while still failing on a platform that does not accept it.
- Nothing is fetched or validated server-side. The tool does not check that the canonical URL resolves, that it matches the page it will actually be pasted into, or what a live crawler currently has cached for it — for that, use Facebook's Sharing Debugger or LinkedIn's Post Inspector after the page is published.
- The 110-grapheme truncation shown in the preview card is this tool's own display choice, not a published platform limit. Facebook, X, LinkedIn and Discord each truncate titles and descriptions differently and do not publish a single fixed character count for any of them.
Frequently Asked Questions
What are Open Graph meta tags?
What is the recommended Open Graph image resolution?
What image size should I use?
Why is my preview not updating after I changed the tags?
Do I need Twitter Card tags as well as Open Graph?
Does Open Graph affect search rankings?
Which tags are actually required?
Is my data sent anywhere?
References & Further Reading
- The Open Graph Protocol (ogp.me) — Official spec: the four required properties, structured og:image properties, and the full list of og:type verticals
- Meta for Developers — Sharing for Webmasters — Facebook's own basic-tags table, the width/height recommendation, the three accepted image MIME types, and the crawler-heuristics behavior