CCromagnon
Open studios
← All tools

Open Graph & Twitter card generator

Make your links look good when they're shared. Fill in the title, description and image, or paste a page's HTML to read its current tags, and see the preview as Facebook, X, LinkedIn, Slack, Discord and WhatsApp show it. The image is checked for size and shape, and the tags are ready to copy as HTML or Next.js metadata.

Link previews

Facebook
example.com
Page title
X (Twitter) · large image card
Page title
From example.com
LinkedIn
Page title
example.com
Slack · Discord · WhatsApp
example.com
Page title

Previews follow each site's current layout closely; the sites change their designs from time to time and may crop images differently in feeds.

Checks

  • No og:title. Sites fall back to the <title>, or show the bare address.
  • No description. Facebook and X show one line of it under the title; LinkedIn and some apps hide it.
  • No og:url. Add the page's canonical address so shares and likes count towards one URL.
  • No image. Links without an image get a small grey box or no preview, and far fewer clicks.

Your tags

<!-- Open Graph (Facebook, LinkedIn, WhatsApp, Slack, Discord) -->
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">

<!-- X (Twitter) -->
<meta name="twitter:card" content="summary_large_image">

About the Open Graph & Twitter card generator

When someone shares your page on Facebook, X, LinkedIn, WhatsApp, Slack or Discord, the app builds a preview card from a few meta tags in the page's <head>: the Open Graph tags (og:title, og:image and friends) and X's twitter: tags. This tool writes those tags for you, shows the card as each app draws it, and checks the things that most often go wrong: a missing or tiny image, the wrong shape, a relative address, no alt text. You can also paste a page's HTML to read the tags it already has and see what its shares look like.

How to use it

  1. Fill in the title, description, page address and the full address of the share image, or click Try an example.
  2. Or switch to Paste a page's HTML, paste the source of a live page and click Read the tags to load what it has now.
  3. Check the four previews and the list of checks; fix anything marked in red or amber.
  4. Add the image size, alt text, type, site name and X accounts if you have them.
  5. Copy the tags as HTML for the <head>, or as a Next.js metadata object.
  6. Publish, then refresh the preview in Facebook's Sharing Debugger and LinkedIn's Post Inspector so they forget the old version.

Tip: Make one 1200×630 pixel JPG or PNG for each important page, with the main words of the title in big type and a clear picture. It works everywhere: Facebook, X large cards, LinkedIn, Slack and WhatsApp all use the same 1.91:1 shape.

What each tag does

og:title
The headline of the card. It can differ from the page's <title>: shorter, friendlier and without the brand, since the site name is shown separately.
og:description
One or two sentences under the title. Facebook shows one line, X and LinkedIn often hide it, so the title and image do most of the work.
og:image
The picture, as a full public https:// address. This single tag decides most of a share's clicks.
og:image:width / height / alt
The size lets Facebook show the image on the very first share; the alt text describes it for people using screen readers.
og:url
The page's canonical address, so likes and shares of different versions of the URL count together.
og:type
website for most pages, article for blog posts and news (with article:published_time), product for shop items.
og:site_name and og:locale
The site's name shown above or below the title, and the language and region, such as en_GB.
twitter:card
summary_large_image for a wide picture card, summary for a small square thumbnail next to the text. Without it, X shows the small card.
twitter:site and twitter:creator
The X accounts of the site and the author, which X can show and link.

Getting the image right

Use 1200×630 pixels for a large card. Facebook needs at least 200×200 and shows anything under 600 px wide as a small thumbnail; X crops large-card images to 2:1 and summary images to a square, so keep the important part in the middle. JPG, PNG and WebP work; SVG, AVIF and HEIC don't. Keep the file under 5 MB for X and 8 MB for Facebook, and much smaller is better: a 150 KB JPG loads fast in every app.

The image must be reachable by the apps' crawlers: a full https:// address that opens without logging in, isn't blocked by robots.txt and doesn't depend on cookies. The preview here loads it in your browser, so if it doesn't appear, the crawlers probably can't load it either.

Why a share still shows the old preview

Facebook, LinkedIn and X store a copy of each card for days or weeks. After changing the tags, ask them to read the page again: Facebook's Sharing Debugger has a Scrape Again button, LinkedIn's Post Inspector refreshes when you inspect the URL, and X refreshes its cache on its own after about a week (adding a harmless query such as ?v=2 to the shared link gives a fresh card at once). WhatsApp, Slack and Discord also cache previews per link.

If the card is still wrong, check the live page's HTML rather than your template: themes, SEO plugins and tag managers sometimes add a second og:image, and apps usually take the first one they find. Paste the live source into this tool to see exactly which tags are there.

Adding the tags to your site

Put the tags inside the <head> of each page, with values for that page; the same image and title on every page wastes the chance to sell each one. In WordPress, an SEO plugin such as Yoast, Rank Math or All in One SEO writes them for you from fields under each post. In Next.js, use the metadata object (the Next.js tab here) or generateMetadata for pages with dynamic content. Shopify, Wix and Squarespace have social sharing settings in each page's SEO options.

Tips and tricks

Text on the image

Most people see the image before the title. A few large words on it, readable on a phone, raise clicks.

Safe area

Keep text and faces away from the edges; X and some feeds crop the sides or the top and bottom.

One image per page

A specific image for each article or product beats a site-wide logo every time.

Absolute addresses

/images/og.jpg works in your browser but not for crawlers. Always write the full https:// address.

Check the live page

Paste the published page's source to confirm there's only one og:image and the values are right.

Titles for sharing

A social title can be more conversational than the search title; a question or a number works well.

Questions

What size should an Open Graph image be?

1200×630 pixels (a 1.91:1 shape) is the standard that works on Facebook, X large cards, LinkedIn, Slack and WhatsApp. The minimum Facebook accepts is 200×200.

Do I need Twitter tags if I have Open Graph tags?

X reads og:title, og:description and og:image when its own tags are missing, but it needs twitter:card to show the large image card. Adding the twitter: tags too is the safe choice.

Why doesn't my image show when I share the link?

Usually the address is relative or not public, the image is too small or in an unsupported format, or the app is showing an old cached copy. The checks here catch the first three; use the apps' debuggers for the cache.

Do Open Graph tags help SEO?

Not directly in Google's rankings, but better previews bring more clicks and shares, and more visits and links from social media help a page do well.

Can I use a different title for social media?

Yes. og:title and twitter:title can differ from the <title> tag; many sites use a shorter, catchier version for sharing.

Is what I type sent anywhere?

No. The checks and previews run in your browser, on your device. Nothing you type or paste is uploaded, stored or logged.

Related tools

Updated