Open Graph Tag Generator
Control the title, text and picture people see when your link is shared on Facebook, LinkedIn, WhatsApp, Slack and many other apps. Fill in the fields, check the preview cards, copy the tags.
Open Graph details
45 characters. Around 40 to 60 reads well on most networks.
117 characters. Facebook often shows only the first line or two.
The page's canonical address. Likes and shares are counted against it.
Full https address. 1200 × 630 pixels suits Facebook and LinkedIn.
Open Graph tags
<meta property="og:title" content="Ten Easy Houseplants That Survive a Dark Flat"> <meta property="og:description" content="Snake plants, ZZ plants, pothos and seven more that cope with north-facing windows, plus how often to water each one."> <meta property="og:type" content="article"> <meta property="og:url" content="https://www.leafandloam.com/blog/low-light-houseplants"> <meta property="og:site_name" content="Leaf & Loam"> <meta property="og:locale" content="en_GB">
Facebook preview
LinkedIn preview
Approximate look. Facebook and LinkedIn change their cards from time to time and cache what they fetched, so use their own debugging tools to refresh a link after you change the tags.
Built in your browser
The tags are generated in this tab and nothing is sent to us.
Two previews
Approximate Facebook and LinkedIn cards update as you type.
Clean, escaped HTML
Copy the tags or download them as a small HTML file.
Why shared links look the way they do
When someone pastes your link into a post or a chat, the app visits the page and reads its Open Graph tags. Those few lines decide the headline, the short description and the image on the card. Without them, the app guesses, and you get a cropped logo or the first sentence of your cookie banner.
Fill in the fields on the left and the tags appear on the right, ready to paste into your page's <head>. Every value is escaped for HTML. The image alt text, width and height are only written when there's an image URL, since they describe that image.
The two cards below the code show an approximate Facebook and LinkedIn preview. Your image is loaded straight from the address you type, so you'll see a broken image note if the URL is wrong or the server blocks it.
How to use it
- 1Write the og:title and og:description you want people to see.
- 2Add the page address and a full https link to your share image.
- 3Set the image size, type, site name and locale.
- 4Check the Facebook and LinkedIn previews, then copy or download the tags.
Tags this tool writes
Empty fields are left out of the code, so you can fill in only what you need.
Width and height only accept digits, so a stray "px" won't end up in the tag. The title and description counters are there as a guide: Facebook usually shows one or two lines of each, and LinkedIn often shows only the title.
- og:title, og:description, og:url and og:site_name.
- og:type: website, article, profile, book, video.other or music.song.
- og:locale, such as en_US or en_GB. Note the underscore, not a hyphen.
- og:image, plus og:image:alt, og:image:width and og:image:height when an image is set.
Share images that work everywhere
A 1200 × 630 pixel JPG or PNG is the safe choice. It matches the 1.91:1 shape Facebook and LinkedIn use for large cards, and it's big enough to look sharp on high-resolution screens. Keep important text away from the edges, because some apps crop to a square.
Use an absolute URL that starts with https://. Relative paths like /images/share.jpg won't work, because the app reading the tags doesn't know which site they belong to. Giving the width and height lets some apps show the image the first time a link is shared, rather than after they've downloaded it.
One image per page is plenty for most sites. A blog might use the post's header photo with the title laid over it, while a shop usually gets more clicks from a clean product shot on a plain background. Avoid tiny logos: below about 600 pixels wide, Facebook falls back to a small thumbnail beside the text.
After you publish
Social networks cache what they read. If you change your tags and the old card keeps showing, run the link through Facebook's Sharing Debugger or LinkedIn's Post Inspector to make them fetch it again.
Who reads these tags
Open Graph started at Facebook, but it's now the common language for link previews. LinkedIn, WhatsApp, Telegram, Slack, Discord, iMessage and Pinterest all read og:title, og:description and og:image, and X uses them when its own tags are missing. Each app draws the card its own way, so the same tags can look a little different in each.
That's why the previews here are labelled approximate. They show the parts you control, the image shape and how much of the title and description fit, rather than every pixel of each app's design.
Related tools
What Our Users Say
Real feedback from people using WeblixTools, checked by our team before it appears.
5.0 out of 5 · 1 review
very nice
Frequently Asked Questions
What size should my Open Graph image be?
1200 × 630 pixels is a good default for Facebook and LinkedIn. Keep the file under a few megabytes and use JPG or PNG.
Why does Facebook still show my old image?
Facebook caches link previews. Paste the URL into its Sharing Debugger and choose to scrape again. LinkedIn's Post Inspector does the same job there.
Do Open Graph tags help with Google rankings?
Not directly. They control how links look when shared, which can bring more clicks from social posts and chats, but Google doesn't rank pages by them.
Do I still need Twitter card tags?
X reads og:title, og:description and og:image when its own tags are missing. You do need twitter:card to choose the large image layout, though. The Twitter Card Generator can write just that tag for you.
Why is my image not showing in the preview?
The preview loads it from the address you typed. Check it starts with http:// or https://, that it opens in a new tab, and that the site doesn't block other sites from showing its images.
Which og:type should I choose?
Use website for home pages and most other pages, and article for blog posts and news. The other types are for specific content such as books, profiles and music.
Should og:url match my canonical URL?
Yes, in almost every case. Both say which address is the main one for the page. If they disagree, likes and shares may be counted against a different URL from the one search engines index.
Is the information I type sent to your server?
No. The tags and previews are made in your browser. The preview image is loaded straight from the address you enter, not through us.