Open Graph Generator
Generate Open Graph and Twitter Card tags.
Prints the domain in small caps above the title and gives the description the least room of any platform — often a single line.
Open Graph & Social Sharing
The Open Graph protocol controls how your page looks when shared on Facebook, LinkedIn, Slack, and more — the title, description, and preview image. Twitter Cards do the same for X/Twitter. Adding an og:image (ideally 1200×630) dramatically improves click-through. Title should be under 70 characters and description under 155 for best display. This generator builds both sets of tags with escaped values, all in your browser.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Producing the tags a link needs to render a card when shared.
- Fixing a page that shares with no image or the wrong title.
- Getting the tag set right for a page type you publish rarely.
- Producing a consistent set across a template.
- Generating tags to compare against what a page currently outputs.
How it works in practice
A worked example
A page needs its social tags, and the title contains a quotation mark that has broken the markup once already.
Title The "best" way to cache — a 2026 retrospective Description What we changed, what we measured, and what we would not do again. URL https://example.com/blog/caching Image https://example.com/og/caching.png
<meta property="og:title" content="The "best" way to cache — a 2026 retrospective"> <meta property="og:description" content="What we changed, what we measured, and what we would not do again."> <meta property="og:url" content="https://example.com/blog/caching"> <meta property="og:image" content="https://example.com/og/caching.png"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="The "best" way to cache — a 2026 retrospective"> … and the rest of the Twitter block, from the same fields
The quotation marks in the title became entities, which is the difference between a tag that works and a tag that ends early. An attribute value is delimited by the quote character around it, so an unescaped one inside closes the attribute and everything after it becomes garbage the parser tries to read as more attributes — the title truncates, the platform sees nothing useful, and the page looks fine to a human reading the source quickly. The em dash needs nothing, because a UTF-8 document carries it as itself.
The edge case that catches people
The image address is the field most likely to be silently wrong, and for a reason the markup cannot show. It has to be absolute, including the scheme: a relative path resolves against nothing when a scraper fetches the tags, so the card arrives without an image and no error is reported anywhere. The same applies to the canonical address, and it is why a staging page whose tags point at production — or the reverse — produces a card that is confidently about the wrong page.
When not to use this tool
Generating the tags is the easy half and the half that rarely fails. What fails is delivery: a page behind a login, one that blocks unfamiliar user agents, or one that injects its tags with JavaScript will hand a scraper nothing, and the tags on this screen were never the problem. Platforms also cache what they fetched, often for days, so the first share of a page is the one that counts. Put the tags in a template that takes the title and address as parameters, then check the live page the way a crawler would before sharing it anywhere.
Frequently Asked Questions
- Which four Open Graph properties are required?
- `og:title`, `og:type`, `og:image` and `og:url` — that is the specification's own required set. Everything else, including `og:description`, is optional in principle, though a card without a description looks unfinished on every platform that renders one.
- Why does og:url matter if the page already has a canonical?
- Because they serve different consumers. `og:url` is what a share dialog records as the canonical share target, so likes and share counts from tagged variants of a URL aggregate to one entry. Search engines read `rel=canonical`; social platforms read `og:url`.
- Are the values escaped before going into the attribute?
- Yes — `&`, `<`, `>` and the quote characters all become entities. That is not cosmetic: a raw double quote in a title terminates the `content="…"` attribute, and the resulting tag is malformed in a way that still looks fine when you read it.
- How many characters should the title and description be?
- Around 60 for the title and 155–200 for the description covers most platforms without truncation, though each crops differently and none publishes an exact rule. Front-load the meaningful words — whatever the limit turns out to be, the first half is what always survives.
- Do these tags help SEO?
- Not directly — Google does not use Open Graph for ranking. What they affect is what a shared link looks like, which drives whether it gets clicked and shared onward. The traffic effect is real and the mechanism is social, not search.
Common errors and gotchas
- Declaring tags a framework also emits, so the head carries two of each and the platform picks one.
- Supplying an image below the platform minimum, which then refuses to render a card at all.
- Expecting a change to appear immediately, when platforms cache and need a re-scrape.
- Omitting the type tag, which decides how the card is laid out.
- Duplicating tags in the head, where the platform's choice between them is unpredictable.