About the Open Graph Meta Tag Generator
This Open Graph generator writes the meta tags that control how a link looks when someone shares it on Facebook, LinkedIn, Slack, iMessage, WhatsApp, X and most other apps. Fill in the page title, description, URL and image, choose the content type and Twitter card style, and copy a ready-to-paste block of og: and twitter: tags into the <head> of your page.
It is built for marketers, bloggers, developers and store owners launching a page or fixing a link that shares with the wrong image or a blank card. The generator escapes special characters, flags missing required properties and lengths that are likely to be truncated, and shows a text preview of the card with the domain, title and description.
The four required Open Graph properties are og:title, og:type, og:image and og:url. Use an absolute https:// image URL; 1200 × 630 pixels (about 1.91:1) is the size most platforms display well for large cards. After publishing, run the URL through each platform’s sharing debugger to refresh any cached preview.
How to use the open graph meta tag generator
- 1Enter the page title and a one- or two-sentence description.
- 2Paste the canonical page URL and an absolute https:// image URL.
- 3Choose the content type and the Twitter / X card style.
- 4Fix anything listed under Checks, then copy the meta tags.
- 5Paste the tags into the page <head> and test the URL in each platform’s sharing debugger.
Formula and method
The generator builds one <meta property="og:…"> tag per Open Graph property you fill in, following the Open Graph protocol: og:title, og:type, og:image and og:url are required, while og:description, og:site_name, og:locale and og:image:alt are optional. Values are trimmed, internal whitespace is collapsed and the characters &, ", < and > are escaped so the HTML stays valid.
When a Twitter card style is chosen, matching <meta name="twitter:…"> tags are added. X falls back to Open Graph values for title, description and image when twitter: tags are missing, but stating them explicitly avoids surprises. Length checks use characters, flagging titles over 60 and descriptions over 160, which are common truncation points rather than hard limits.
Worked examples
Calculator landing page with large image card
All fields except the Twitter handle are filled, giving 8 Open Graph tags (title, description, type, url, image, image alt, site name, locale) and 5 Twitter tags. The 41-character title and 113-character description are within common display limits.
Minimal article tags with special characters
Only the title, type and URL are set, so three tags are produced, with the ampersand and quotes escaped. The checks flag the missing image and description, which would leave a plain, image-less card.
Small summary card with a handle and long title
Adding a handle (the @ is added automatically) produces a twitter:site tag, for 14 tags in total. The 70-character title triggers a warning that cards often truncate after about 60 characters.
Frequently asked questions
What are Open Graph tags?+
Open Graph tags are <meta> tags in a page’s <head> that tell social networks and messaging apps which title, description, image and URL to show when the page is shared. The protocol was created by Facebook and is now read by most platforms.
Which Open Graph tags are required?+
The Open Graph protocol lists four required properties: og:title, og:type, og:image and og:url. og:description and og:site_name are optional but strongly recommended for a complete card.
What size should an Open Graph image be?+
A 1200 × 630 pixel image (about 1.91:1) displays well as a large card on most platforms. Keep important text away from the edges, use JPG or PNG, and reference it with an absolute https:// URL.
Do I need Twitter card tags if I have Open Graph tags?+
X can fall back to og:title, og:description and og:image, but it needs twitter:card to choose between the small summary and the large image layout. Adding twitter: tags gives you control over how the card appears.
Why is my old image still showing when I share a link?+
Platforms cache link previews. After updating your tags, paste the URL into Facebook’s Sharing Debugger or LinkedIn’s Post Inspector to force a fresh scrape; other apps refresh their cache over time.