Free Open Graph Generator

Enter a title, description and image URL to get the Open Graph and X (Twitter) Card tags that control how your page looks when shared. Live Facebook, LinkedIn and X previews and an image size check show problems before you publish. Copy the tags into your page's <head> โ€” they are generated in your browser and nothing you type is uploaded.

Client-Side Processing

The tags are generated in your browser and nothing you type is uploaded. To show the preview, your browser loads the image from the image URL you enter, directly from that site.

Open Graph Configuration

Open Graph Tags

Keep it short: long titles are cut off in most previews.

0 / 90

Usually one or two lines are shown; put the key point first.

0 / 300

Recommended: 1200 ร— 630 px (1.91:1), under 5 MB. Width and height tags are added automatically once the image loads.

Read by screen readers on platforms that support og:image:alt and twitter:image:alt.

The canonical URL of the page; likes and shares are counted against it.

X (Twitter) Card Tags

Leave the fields below empty to reuse the Open Graph values. X reads og:title, og:description and og:image when the twitter:* tags are missing, so unticking "Repeat OG values" gives shorter markup with the same result on X.

Large-image cards use a 2:1 image, at least 300 ร— 157 px; a 1200 ร— 630 OG image works too.

Social Media Preview

Approximate layouts; each platform restyles its cards from time to time.

Facebook Preview

example.com
Your Title Will Appear Here
Your description will appear here when you add it above.

LinkedIn Preview

Your Title Will Appear Here
example.com

X (Twitter) Preview

Your Title Will Appear Here
From example.com

Generated Open Graph Tags

<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

Add a title and an image: og:title, og:type, og:image and og:url are the four required Open Graph properties.

Summary

Open Graph tags are meta tags in a page's head that tell Facebook, LinkedIn and other apps which title, description and image to show when someone shares the link. To generate them free and privately, enter an OG Title, OG Description and OG Image URL, set the OG URL and OG Type, then click Copy All OG Tags and paste the result into the page's head. The tags are built in your browser and nothing you type is uploaded. The only outside request is the image: to draw the previews, your browser loads it from the URL you entered.

The same block can include X (Twitter) Card tags, and once your image loads the tool checks its size and shape against the published requirements (as of October 2026: Meta recommends 1200 ร— 630 pixels at about 1.91:1; X large-image cards take 2:1 from 300 ร— 157 pixels). For the search-engine side of the same page, build the title, description and canonical tags with the meta tag generator.

Table of Use: Settings and the Tags You Get

Open Graph generator settings and the tags each one produces
GoalWhat you setWhat is generated
Preview a blog postOG Type: Article<meta property="og:type" content="article">
Show a wide image on XCard type: Summary with large image<meta name="twitter:card" content="summary_large_image">
Show a small square card on XCard type: Summary (small square image)<meta name="twitter:card" content="summary">
Credit your X accountSite account: https://x.com/yourbrand?s=21<meta name="twitter:site" content="@yourbrand">
Describe the picture for screen readersImage alt text: Laptop showing a websiteog:image:alt and twitter:image:alt tags carrying that text
Keep the markup shortUntick Repeat OG values in twitter:* tagsOnly twitter:card (plus any account tags) remain; X falls back to the og: values
Open Graph onlyUntick Include card tagsNo twitter:* tags at all

Features

  • Open Graph tags: og:title, og:description, og:image (with og:image:width, og:image:height and og:image:alt), og:url, og:type and og:site_name. Empty fields are left out; og:type is always written.
  • X Card tags: twitter:card, title, description, image, image alt, site and creator. The site and creator fields accept @name, a bare name or an x.com or twitter.com profile link; a name that is not 1 to 15 letters, digits or underscores is flagged and its tag is left out.
  • Image checks: the tool compares the loaded image with Facebook's 200 ร— 200 minimum, the 600 ร— 315 large-image threshold, the 1.91:1 ratio and X's minimums, and warns about SVG files. Image URLs must be absolute http or https addresses.
  • Three previews: Facebook, LinkedIn and X, with the X layout following the card type you choose. They are approximations; each platform restyles its cards from time to time.
  • Counters: the title counter turns red above 90 characters and the description counter above 300, which are this tool's working limits rather than platform rules.
  • Output: Copy All OG Tags copies the block; Download HTML File saves og-tags.html, a minimal page with the tags in its head. Load Sample fills an example and Reset clears the form.

It does not host or resize images, it does not fetch your live page, and it does not remember entries after a reload. To prepare the picture first, crop it to 1200 ร— 630 with the image resizer (Crop to fill), put the headline on it with the add text to image tool, and keep it under the 5 MB the tool suggests with the image compressor.

How to Use the Open Graph Generator

  1. Fill in OG Title, OG Description and OG Image URL, then add the Image alt text, OG URL (the page's canonical address), OG Type and OG Site Name. Load Sample shows how a finished form looks.
  2. Under X (Twitter) Card Tags, choose a Card type, enter your accounts if you have them, and leave the card fields empty to reuse the Open Graph text. Untick Include card tags to drop them.
  3. Read the notes above the previews: they say whether the image is large enough, the right shape and a usable format.
  4. Review the Generated Open Graph Tags, click Copy All OG Tags and paste them inside the head of the page, or click Download HTML File.

Search engines read a separate set of tags, so also add a title and description there with the meta tag generator, structured data with the schema markup generator, and list the page in your sitemap. Share crawlers must be able to fetch the image, so check it is not blocked in your robots.txt.

Who Can Use It

Bloggers and shop owners whose theme has no social settings, developers wiring up a static or hand-built site, and marketers checking a campaign landing page before launch all need the same few tags written correctly. Once the page is live, add a browser-tab icon with the favicon generator and tidy the markup with the HTML beautifier. Need a stand-in picture while the artwork is being made? The placeholder image generator can make one to test the layout.

FAQs

How do I add Open Graph tags to my website?

Enter the OG Title, OG Description and an absolute OG Image URL, add the page address and type, then click Copy All OG Tags. Paste the block inside the head element of that page. Every page you want to share needs its own set, because the title, description, image and URL should describe that page and not the whole site.

What size should an Open Graph image be?

Meta recommends 1200 ร— 630 pixels, close to a 1.91:1 ratio, with 600 ร— 315 as the minimum for a large image and 200 ร— 200 as the absolute minimum (as of October 2026). X large-image cards use a 2:1 image of at least 300 ร— 157 pixels, and summary cards a square of at least 144 ร— 144. One 1200 ร— 630 JPG or PNG suits all three.

Do I need both Open Graph and Twitter Card tags?

Only twitter:card is needed to pick the card style on X; for the title, description and image, X reads the og: tags when the twitter: ones are missing. By default this tool repeats the OG values in twitter: tags. Untick Repeat OG values in twitter:* tags for shorter markup with the same result on X, or fill in the card fields to show different text there.

Why isn't my new image showing when I share the link?

Platforms cache link previews. Ask Facebook to fetch the page again with Meta's Sharing Debugger, and LinkedIn with its Post Inspector. X removed the preview from its Card Validator in 2022; paste the URL into a new post to see the card, and expect cached cards to refresh on their own. Also confirm the image URL is absolute, public and not blocked by robots.txt.

Which og:type should I use?

Use website for home pages and general pages, and article for blog posts and news. The Open Graph protocol also defines profile, book, and the video.* and music.* families such as video.movie or music.song. Bare video or music are not valid values. The dropdown offers 13 values, including Facebook's product type for product pages.

Why does the tool add og:image:width and og:image:height?

Declared dimensions let Facebook's crawler render the image straight away instead of downloading it first, so the very first share of a new page can show the picture. Once your image has loaded in the preview, the tool reads its real width and height and adds both tags. It leaves them out for SVG files, whose size cannot be read reliably.

Can I use an SVG or my logo as the share image?

Not an SVG. X accepts only JPG, PNG, WebP and GIF, and Facebook does not display SVG, so the tool warns you when the image URL ends in .svg. Export the artwork as a 1200 ร— 630 JPG or PNG instead.

Is my data uploaded when I use the Open Graph generator?

The tags are generated in your browser and nothing you type is sent to ZipConvert. One request does go out: to draw the previews, your browser downloads the image from the OG Image URL you entered, straight from the site that hosts it and without a referrer header. That host sees the request as it would for any visitor.