Open Graph generator
Create the og: and twitter: tags that control how your link looks when it is shared. Check the image size, preview the card on Facebook, X, LinkedIn, WhatsApp and Discord, and copy clean code.
- Five platform previews
- Image size and ratio checked
- Runs in your browser
Shared link
Add a title to start
- Your page—og:url
- App reads tags—og: and twitter:
- Image—Loaded by the app
- Card shown—In the feed or chat
Build your share card
Page details
Title, description and image are shared with the panel at the top.
Image
The image URL is entered at the top. Its size is read when it loads.
Article details
Used by Facebook and LinkedIn, and by some news aggregators.
Product details
Price tags read by Facebook and Pinterest. Use Product schema for Google.
Video details
A direct link to the video file or a player page.
X (Twitter) card
X reads the og: tags for title, description and image.
What Open Graph tags do
When someone shares a link, the app fetches the page and reads its og: tags to build the preview card.
One set for almost every app
Facebook, LinkedIn, WhatsApp, Telegram, Slack, Discord and iMessage all read Open Graph. X has its own twitter: tags but falls back to og: values.
The image does most of the work
A wide, sharp image turns a plain link into a large card. Without one, apps show a small thumbnail or pick a random picture from the page.
Apps fetch the page themselves
Their crawlers need to reach the page and the image without a login, cookie banner wall or bot challenge, or the card stays empty.
Previews are cached
The first share is stored for days. After changing tags, ask the app to fetch the page again before sharing it widely.
The tags this generator writes
What each one does, and what a good value looks like.
| Tag | What it does | Good value |
|---|---|---|
og:title |
Headline of the card | Up to about 60 characters, can differ from the page title |
og:description |
One or two lines under the headline | About 110 to 160 characters |
og:image |
The picture on the card | 1200 x 630 px, full https:// URL |
og:image:width / height / alt |
Size lets apps draw the card before the image loads, alt describes it | Filled in from the image you enter |
og:url |
The address all shares are counted for | Same as the canonical URL, no tracking parameters |
og:type |
Kind of content | website, article or product |
og:site_name, og:locale |
Brand name and language shown by some apps | Your site name, en_US style locale |
twitter:card |
Small or large card on X | summary_large_image when you have a wide image |
How to use this generator
From a blank form to a refreshed share card in four steps.
Write the card
Enter the title, description and image in the panel above. The image is loaded by your browser to check its size.
Add the details
Page URL, site name, type and the extra fields for articles, products or videos. Empty fields are left out.
Compare the previews
Switch between Facebook, X, LinkedIn, WhatsApp and Discord to see how each app is likely to show the link.
Paste and refresh
Paste the code into the head of the page, publish, then refresh the cached preview in the Facebook Sharing Debugger.
What this tool does, and what it doesn't
A plain list, so you know exactly what to expect.
This tool does
- Write og: and twitter: tags, nothing extra
- Measure the image and add its size
- Add article, product and video fields
- Preview five apps side by side
- Warn about small, narrow or http images
- Remember your setup in this browser
This tool does not
- Add the tags to your site
- Read the tags of a live page
- Refresh the apps' cached previews
- Show pixel-exact app designs
- Upload or host your image
- Send your text to our server
Where your data goes
Nowhere outside your browser. The code is generated on this page and your setup is saved in your browser's local storage so a reload keeps it. Reset clears it. If you enter an image URL, your browser loads that image from its host to show the previews and read its size. Like any website, our server keeps normal access logs of page visits, as described in our privacy policy.
Step-by-step guide by Bhavin J. Sheth.
Why your share card might look unexpected
The six problems people run into most, and what each one means.
The old image keeps showing
Apps cache previews for days. Use the Facebook Sharing Debugger and LinkedIn Post Inspector to fetch the page again.
No image at all
The URL is relative, needs a login, redirects too often or is blocked by a firewall. Open it in a private window to test.
Small thumbnail instead of a big card
The image is too small or not wide. Use at least 1200 x 630 px and set twitter:card to summary_large_image.
Two different previews
The theme and an SEO plugin both print og: tags. Remove one set so every app reads the same values.
Preview fails behind Cloudflare
Bot protection can block the apps' crawlers. Allow facebookexternalhit, Twitterbot and LinkedInBot.
Shares counted on several URLs
Without og:url, each tracking variant is counted separately. Point og:url at the clean canonical address.
Questions about Open Graph tags
Where do I paste the Open Graph tags?
Inside the head element of the page, before the closing head tag, and only once per page. On WordPress, Yoast SEO, Rank Math and similar plugins already output Open Graph tags, so enter the title, description and image in the plugin's social tab instead. Two sets of og: tags make each app pick one at random.
What image size works on every platform?
Use 1200 x 630 pixels, a 1.91:1 ratio, as a JPG or PNG under 5 MB, with a full https:// address that opens without a login. Images narrower than about 600 pixels are often shown as a small thumbnail. Keep logos and text near the centre, because X and WhatsApp may crop the edges.
Why does the old preview still show after I changed the tags?
Every app stores the preview the first time a link is shared and reuses it for days. Refresh it with the Facebook Sharing Debugger (Scrape again) or the LinkedIn Post Inspector. X and WhatsApp have no public refresh tool, so wait or share the URL with a harmless query string such as ?v=2. Also clear any page cache or CDN in front of the site.
Do I need twitter: tags if I have Open Graph tags?
Only twitter:card, which chooses the small or large card, and optionally twitter:site and twitter:creator for the accounts. For the title, description and image, X falls back to the Open Graph tags. This generator writes only what X needs, unless you ask it to repeat the rest.
Which og:type should I choose?
Use website for home pages, category pages and tools, and article for blog posts and news, together with article:published_time. Product suits shop pages and lets you add a price. Most apps treat the other types like website, so there is no benefit in choosing an unusual one.
Is it called Open Graph or Meta Graph?
Open Graph. The Open Graph protocol was introduced by Facebook in 2010, and the company is now called Meta, which is why people sometimes search for "Meta Graph" tags. The tags are the same og: properties either way, and they are read by almost every social app and messenger.
Is anything I type sent to your server?
No. The tags are built in your browser and nothing is sent to our server. Your setup is saved in your own browser so a reload keeps it, and Reset clears it. If you enter an image URL, your browser loads that image from its host to show the previews and measure it. Like any website, our server keeps normal access logs of page visits, as described in our privacy policy.