Open Graph Generator
Four Tags Decide Your Card
This Open Graph generator writes the og: block that controls how your link looks in a chat, a feed or a message. It flags the four required properties and previews the card while you type.
- FreePrice
- 4Required tags
- NoneSign-up
- NoneUploads
Open Graph Generator
The og: tags behind every link preview
Ready. The four required tags are marked as you fill them in.
The Parts of a Share Preview Open Graph Decides
Paste a link into a chat and something happens. A picture appears, a headline, a line of text, and the name of the site.
That card comes from tags in your head element. Without them the app guesses, and the guess is usually your logo and your navigation.
Facebook published the protocol in 2010, and it spread. LinkedIn, WhatsApp, Slack, Discord, Signal and Telegram all read the same four properties now.
The protocol itself names them: og:title, og:type, og:image and og:url. Everything else on this page is optional polish.
The Picture Carries the Entire Preview
A card with a picture takes several times the space of one without. So the image is the single tag worth getting right first.
So use 1200 by 630 pixels, which is the 1.91 to 1 shape every network crops to. Then keep the file under about five megabytes, and always use an absolute https address.
Text inside the image gets cropped on small cards. Put the words in og:title instead, where they stay readable at any size.
Property, Not Name
Open Graph tags go in the property attribute, whereas Twitter tags go in name. So if you copy a tag from the wrong example, the network quietly ignores it.
The difference comes from RDFa, which Open Graph is built on. It looks like a detail, and it explains half of all broken cards, as the meta element reference sets out.
This open graph tag generator writes each one with the right attribute, so the distinction never becomes your problem.
Types Beyond Website
Most pages are website. An article adds an author and a publish time, a product can carry a price, and a profile names a person. Pick the one that matches, then ignore the rest.
Why Your Card Will Not Update
Networks cache what they scrape, often for days. You fix a tag, share the link again, and the old card comes back.
Each network has a debugger that forces a refresh, and that is the only reliable cure. Facebook, LinkedIn and X all provide one.
Therefore set the tags before a launch rather than after it. A card cached on the day of a campaign is a slow problem to unwind.
Descriptions On A Card Behave Differently
A search description competes with nine other results. A card description competes with the whole feed around it, and it gets less room.
One sentence is plenty, because most networks show about two lines on a phone. A long second sentence rarely survives.
Say what the link gives rather than what the page contains. A card has no query behind it, so nothing hints at why somebody should care.
Then let the title carry the weight. On a small card the description sometimes disappears entirely.
Descriptions On A Card Behave Differently
A search description competes with nine other results. A card description competes with the whole feed around it, and it gets less room.
One sentence is plenty. Most networks show about two lines on a phone, and a long second sentence rarely survives.
Say what the link gives rather than what the page contains. A card has no query behind it, so nothing hints at why somebody should care.
Then let the title carry the weight. On a small card the description sometimes disappears entirely.
One Block Serves Every Network
Twitter falls back to og: tags when its own are missing, and so does almost everything else. Write Open Graph once, add one twitter:card line, and you are done.
Working With the Open Graph Generator
Four steps, and the notes panel tracks the required four as you fill them in.
- 1
Pick the type
Website covers most pages. Choose article for a blog post, and two extra fields appear for the author and the date.
- 2
Give the preview its own headline
Up to 70 characters shows in full. It can differ from your page title, and often should, because a card has no query behind it.
- 3
Add the image and the address
Both need full https addresses. The preview shows the 1.91 to 1 crop, so you can see what a narrow card keeps.
- 4
Paste the block and re-scrape
Put it in your head, then run the link through each network debugger. Otherwise a cached card can sit there for days.
What Sets This Open Graph Tool Apart
Most generators emit every property in the specification. This one writes what a card needs and names what is missing.
It tracks the required four
Title, type, image and url each keep a note until you fill them in. Nothing else pretends to be mandatory.
A live card preview
You see the crop shape and the cut lengths as you type, since that is where most cards go wrong.
Correct attributes throughout
og: tags carry a property attribute, whereas twitter: tags carry name. Getting that backwards is the most common broken card there is.
No duplicate Twitter block
Twitter reads og: tags already, so ticking the box adds only twitter:card and the image alt. Two of a thing helps nobody.
Article fields when you need them
Author and published time appear for articles, and stay hidden otherwise. After all, a form full of irrelevant fields invites wrong answers.
Nothing leaves your tab
Unreleased campaign copy passes through here. Since the page fetches nothing, no address and no headline reaches a server.
Rules For Cards That Look Right
Cards fail in a handful of predictable ways. Each rule below closes one of them.
- Use an absolute https image address. Most networks ignore relative paths and plain http. The scraper is not your browser, and it has no page context to resolve against.
- Size the picture at 1200 by 630 pixels. That is the og image size every network crops toward. Smaller images fall back to a small square card or to none at all.
- Keep important text out of the picture. Crops cut the edges, and small cards shrink the whole thing. Words belong in og:title, where they stay legible.
- Write a card title, not a page title. A title in search results responds to what someone typed. A card title has to work cold, in a feed, beside things competing for the same glance.
- Point og:url at the canonical address. Shares accumulate against that address. So if it disagrees with your canonical tag, the counts split across two versions of one page.
- Add og:image:alt. Screen readers voice it instead of the image, and it takes a single line. Although very few sites bother, that is a poor reason to skip it.
- Ask the platform to fetch the page again after each edit. Networks cache aggressively. Until you force a refresh, the old card is what everybody sees.
- Add og:site_name too. og:site_name puts your publication beside the headline. On a crowded feed that line does as much work as the title.
- Test on a phone. Most people open links in a chat app on a small screen. The desktop preview is the forgiving one.
Six Open Graph Mistakes That Break Cards
Every one of these produces a page that works perfectly and a link that looks broken.
Writing name where property belongs
Open Graph tags need the property attribute. With name, the tag is valid HTML and completely ignored.
A relative image path
Because the scraper has no base to resolve it against, the card arrives with no picture at all.
Tags added by JavaScript
Most scrapers read the HTML as served, and run nothing. So tags injected after load stay invisible to them.
A preview image that needs a login
Since a staging password or a hotlink rule blocks the scraper, the card falls back to plain text.
Two og:image tags
A theme sets one, and then a plugin sets another. Networks pick one, though rarely the one you wanted.
Expecting an instant update
Caches hold for days. So run the link through each network debugger, rather than sharing it again and hoping.
Open Graph Questions People Ask
Which Open Graph tags does a card need?
Just four are essential: og:title, og:type, og:image and og:url. The protocol names those as the basic metadata, and a card without an image is a much smaller card.
Which og:image size shows best on Facebook and LinkedIn?
Choose 1200 by 630 pixels, the 1.91:1 shape social networks crop to. Keep it under five megabytes and serve it over https.
Should I add Twitter tags on top of Open Graph?
Only twitter:card, and the image alt if you want one. Twitter reads og:title, og:description, og:image and og:url when its own tags are missing.
Why has my card not changed?
The network cached the old one. Use its debugger to force a fresh scrape, since sharing the link again usually serves the cached copy.
Will Open Graph tags lift my search rankings?
Not directly. It affects how often a link gets clicked when shared, and Google has said it may use og:title as one signal when rewriting a title link.
Can I use an open graph tag generator output on any platform?
Yes. The same block works on Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram and Signal, because all of them read the same protocol.
Which part of my HTML should hold these Denwix tags?
Inside the head element, alongside your other meta tags. Order does not matter, though keeping them together makes them easier to audit later.
What happens if I set no og tags at all?
The network guesses from your page. Usually that means your logo, a navigation heading and the first sentence it finds, which rarely sells the link.
Can different pages share one image?
They can, and a site-wide fallback is better than nothing. A page with its own image still earns more clicks, so use the fallback only where no specific image exists.
Can different pages share one image?
They can, and a site-wide fallback is better than nothing. A page with its own image still earns more clicks, so use the fallback only where no specific image exists.
Does anything I type into this Denwix tool leave my device?
No. Your browser writes the tags, and the page fetches no address. This site stores nothing and logs nothing.
Tools For Shared Links
A card is made of tags and an image. These three cover both halves.
Twitter Card Generator
The twitter: tags, and only the ones with no og: equivalent.
Open tool →Image Converter
Turn a card image into WebP, JPG or PNG in your browser.
Open tool →Meta Tag Generator
The head tags that sit beside your og: block.
Open tool →
Ready to Fix Your Link Preview?
Fill in four properties, watch the preview, and paste the block into your head. The Open Graph generator is free, needs no account, and runs entirely in your browser.