How the Open Graph Meta Generator works
Facebook, LinkedIn, Slack, WhatsApp, Discord and many other apps build a link preview from the Open Graph
og: meta tags in the page's <head>. X (Twitter) reads its own twitter:card
tag to choose the card layout and falls back to the Open Graph title, description and image when
twitter:title, twitter:description and twitter:image are missing, so this
generator only adds the Twitter tags that have no Open Graph equivalent: the card type, the site and creator
usernames, and the image alt text.
The output updates as you type, and every value is HTML-escaped. The page URL and image URL must be absolute http or
https URLs; the image width and height must be whole numbers; the locale must look like en_US; usernames
may be written as @name, name or a profile link and are written as @name.
Anything that does not qualify is left out and listed with the reason. The preview card loads the image directly in
your browser; this page only loads https images, and if the image cannot be loaded the preview says so.
How to use the Open Graph Meta Generator
- Enter og:title, og:description and og:url, or select Load example to see a filled-in form.
- Add the og:image URL, its width, height and alt text, and choose og:type, og:site_name and og:locale if you need them.
- Choose a twitter:card type and optionally enter the site and creator usernames.
- Check the link preview and the notes under it, then select Copy and paste the tags into the <head> of your page.
Example
With a title, description, page URL, a 1200 × 630 image, the summary_large_image card and the site username example, the generator produces:
<meta property="og:title" content="Wireless Keyboard KB-2041">
<meta property="og:description" content="Quiet keys & a 12-month battery.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.example.com/keyboards/kb-2041">
<meta property="og:image" content="https://www.example.com/images/kb-2041.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example">Common use cases
- Making blog posts and product pages show a large image and a clear title when shared on LinkedIn, Facebook or Slack.
- Fixing a page that shows the wrong image or no image when its link is posted.
- Adding Twitter Card tags so links on X show a large image card instead of a plain link.
- Preparing share tags for a landing page before a launch.
Frequently asked questions
What image size should I use for og:image?
1200 × 630 pixels (a 1.91:1 ratio) is the most widely recommended size and suits both Facebook and the summary_large_image card on X. Use an absolute https URL, keep the file small (JPEG or PNG under a few megabytes), and add the width and height so platforms can lay out the preview before the image downloads.
Why do I not need twitter:title and twitter:image?
X reads the Open Graph title, description and image when its own twitter: versions are missing, so repeating them adds nothing. This generator adds only twitter:card, twitter:site, twitter:creator and twitter:image:alt, which have no Open Graph equivalent.
What is the difference between summary and summary_large_image?
summary shows a small square thumbnail beside the title and description. summary_large_image shows a wide image above the text. The preview on this page switches layout when you change the card type.
Why does the preview not show my image?
The preview loads the image directly in your browser. This page only loads https images, so http URLs cannot be shown, and the image will also fail if it is private, blocked for other websites or not an image. The generated tags are still correct if the URL is right.
I updated the tags but the old preview still appears. Why?
Platforms cache link previews. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to fetch the page again. Other apps usually refresh within a few days.
Is anything I type sent to your server?
No. The tags are generated in your browser. Only the preview image is requested from the address you enter.