🔗 Open Graph Meta Tag Generator
By ToolNimba SEO Team · Updated 2026-06-19
The headline shown on the shared card. Aim for under 60 characters.
The name of the overall site, e.g. ToolNimba.
One or two sentences. Keep it under about 110 characters so it does not get cut off.
The canonical URL of this page.
An absolute URL to the preview image. 1200x630 px works best.
Use website for a homepage, article for a blog post.
Large image is the standard for most pages and articles.
The X (Twitter) handle of the site, including the @.
The handle of the content author, including the @.
A simplified approximation. Each platform crops and styles cards slightly differently.
Paste these tags inside the <head> of your page.
Open Graph tags control how your page looks when someone shares it on Facebook, LinkedIn, X, Slack, WhatsApp and other platforms: the headline, the description and the big preview image. This generator builds the full og: and twitter: meta tag block from a simple form, shows a live preview of the share card, and lets you copy the markup with one click. Everything runs in your browser, so your URLs and copy never leave the page.
What is the Open Graph Generator?
The Open Graph protocol is a small set of <meta> tags, originally created by Facebook, that tell social platforms how to represent a link. Instead of guessing your title and scraping a random image, the platform reads tags like og:title, og:description, og:image and og:url and builds a tidy, branded "card." Most major networks read these tags, which is why getting them right once pays off everywhere a link is shared.
Each tag is an ordinary meta element placed inside the <head> of your HTML. Open Graph tags use the property attribute (for example, <meta property="og:title" content="...">), while Twitter Card tags use the name attribute (for example, <meta name="twitter:card" content="...">). X (formerly Twitter) will fall back to your Open Graph tags if the matching twitter: tag is missing, so a complete OG set covers most cases, with a few twitter: tags added for finer control.
The single most important tag is og:image. Platforms expect an absolute URL (starting with https://), not a relative path, and the recommended size is 1200 by 630 pixels, a 1.91:1 ratio that fills the large card without cropping. og:url should be the canonical, absolute address of the page so that shares from different tracking links all consolidate to one card. Because these values end up inside HTML attributes, any quote, ampersand or angle bracket in your text must be escaped, which this tool does for you automatically.
When to use it
- Giving a blog post or landing page a proper title, description and image when it is shared on social media.
- Adding a branded preview card so links pasted into Slack, Discord or WhatsApp look professional instead of bare.
- Setting up Twitter (X) cards with the right card type, site handle and creator credit.
- Fixing a page that shows the wrong image or no image at all when shared, by supplying explicit og:image and og:url tags.
- Generating a consistent meta tag template you can reuse across many pages of a site.
How to use the Open Graph Generator
- Enter your og:title and a short og:description that summarise the page.
- Add the absolute og:url (the canonical address) and an absolute og:image URL, ideally 1200x630 px.
- Pick the og:type (website, article, product, and so on) and the twitter:card style.
- Optionally add your twitter:site and twitter:creator handles.
- Check the live preview card, then click Copy and paste the tags inside the <head> of your page.
Formula & method
Worked examples
A blog post titled "Coffee & Cream" at https://blog.example.com/coffee, with a cover image.
- og:type is set to article because it is a blog post.
- The ampersand in the title is escaped, so "Coffee & Cream" becomes content="Coffee & Cream".
- og:url is the absolute canonical URL: https://blog.example.com/coffee
- og:image is an absolute 1200x630 image URL, so twitter:card stays summary_large_image.
Result: <meta property="og:type" content="article"> · <meta property="og:title" content="Coffee & Cream"> · <meta property="og:url" content="https://blog.example.com/coffee"> · <meta name="twitter:card" content="summary_large_image">
A homepage with no preview image, sharing on X with the handle @acme.
- og:type is website for a homepage.
- No og:image is supplied, so the card falls back to a smaller style.
- twitter:card is set to summary (the small-image / text card).
- twitter:site is set to @acme so the post credits the brand account.
Result: <meta property="og:type" content="website"> · <meta name="twitter:card" content="summary"> · <meta name="twitter:site" content="@acme">
Core Open Graph and Twitter Card tags and what each does
| Tag | Attribute used | Purpose |
|---|---|---|
| og:title | property | The headline shown on the share card. |
| og:description | property | The summary line under the title. |
| og:image | property | Absolute URL of the preview image (1200x630 px recommended). |
| og:url | property | The canonical, absolute URL of the page. |
| og:type | property | The kind of object: website, article, product, etc. |
| og:site_name | property | The name of the overall site. |
| twitter:card | name | Card style: summary_large_image or summary. |
| twitter:site | name | The @handle of the site or publisher. |
| twitter:creator | name | The @handle of the content author. |
Recommended og:image sizes by card type
| Card type | Recommended size | Aspect ratio |
|---|---|---|
| summary_large_image | 1200 x 630 px | 1.91:1 |
| summary (small) | 1200 x 1200 px (or smaller square) | 1:1 |
| Minimum supported | 300 x 157 px | 1.91:1 |
Common mistakes to avoid
- Using a relative image path. og:image must be an absolute URL beginning with https://. A relative path like /cover.jpg will not resolve when a platform fetches it from its own servers, so the image silently disappears.
- Putting the tags in the wrong place. Open Graph and Twitter tags must sit inside the <head> element, not the <body>. Crawlers read the head when they build the preview, and tags placed in the body are ignored.
- Forgetting to escape special characters. An unescaped quote or angle bracket in your title or description can break the meta tag markup. Always escape & as &, " as ", < as < and > as >. This tool does it automatically.
- Expecting the card to update instantly after a change. Platforms cache the scraped card. After you update tags, re-fetch the URL in the platform debugger (for example, Facebook Sharing Debugger or the X Card Validator) to clear the cache.
- Leaving out og:url. Without an explicit, canonical og:url, shares from different tracking or campaign links can fragment engagement across several versions of the same page.
Glossary
- Open Graph
- A protocol of meta tags, originally from Facebook, that lets any page describe how it should appear when shared on social platforms.
- og:image
- The Open Graph tag holding the absolute URL of the preview image, recommended at 1200x630 pixels.
- Twitter Card
- X's (Twitter's) system for rich link previews, configured with twitter: meta tags and falling back to Open Graph tags when they are missing.
- Canonical URL
- The single preferred address for a page, used in og:url so all shares consolidate to one version.
- summary_large_image
- A Twitter card type that displays a large, prominent preview image above the title and description.
Frequently asked questions
What are Open Graph tags?
Open Graph tags are meta tags placed in the <head> of a page that tell social platforms how to display the link when it is shared: the title, description and preview image. They were created by Facebook but are now read by LinkedIn, X, Slack, WhatsApp and many others.
Where do I put the generated meta tags?
Paste them inside the <head> element of your HTML page, alongside your <title> and <meta name="description"> tags. They must be in the head, not the body, or crawlers will ignore them.
What size should my og:image be?
Use 1200 by 630 pixels (a 1.91:1 ratio) for the large card type. Keep the file under a few hundred kilobytes and make sure the URL is absolute, starting with https://, or the image will not load.
Do I need both Open Graph and Twitter Card tags?
Not strictly. X falls back to your Open Graph tags when the matching twitter: tag is missing, so a complete OG set covers most cases. Adding a few twitter: tags (especially twitter:card, twitter:site and twitter:creator) gives you finer control on X.
Why does my preview show the wrong image or old text?
Platforms cache the card they first scraped. After updating your tags, re-fetch the page in the platform debugger (such as the Facebook Sharing Debugger or X Card Validator) to refresh the cache and pull your new values.
Is this Open Graph generator private?
Yes. Everything runs in your browser with plain JavaScript. Your titles, URLs and image links are never uploaded or sent anywhere, and there is no network request involved in building the tags.