UtilibyWritten by the Utiliby editorial team · Last updated October 14, 2026 · Rules and formulas reviewed October 2026
What this free Open Graph generator does
Paste a link into a chat, a post or a Slack channel and, in a second, it turns into a card: a picture, a bold title and a line of text. Whoever shares your link gets that card for free, and a good card gets far more clicks than a bare web address. The card is built from a handful of meta tags called Open Graph tags. If your page lacks them, apps guess and often pick the wrong image or none at all.
This free online Open Graph generator builds the tags and shows you the result on four cards: Facebook, X (Twitter), LinkedIn and WhatsApp. You can add article details, X card settings and image alt text. A checker flags missing fields, text that is too long and pictures that are too small or the wrong shape, even if the picture is only on your device. Then you copy the code. It is free, private and needs no sign-up.
How to create Open Graph tags in four steps
- Write the title and description. Keep the title near 60 characters and the description under about 155.
- Add the URL and image. Use the full page address and a public https image of about 1200 by 630 pixels. Pick a picture from your device to preview it and check its size.
- Choose the type and X card. Use website for most pages and article for posts. Keep the X card on for a large image.
- Copy the tags. Paste them into the head of your page, then refresh the preview in each network's debugger.
The main Open Graph tags
| Tag | What it sets | Tip |
|---|---|---|
| og:title | Bold title on the card | About 60 characters |
| og:description | Text under the title | 100 to 155 characters |
| og:image | The picture | 1200 × 630 px, https |
| og:url | The address the card counts for | Match your canonical URL |
| og:type | Kind of content | website, article, product |
| og:site_name | Name of your site | Your brand |
| og:image:alt | Picture description | Short and plain |
| twitter:card | X card layout | summary_large_image |
Choosing a social image
- Size: 1200 by 630 pixels is the safe choice. Smaller than about 600 by 315 can look blurry or be shown as a small card.
- Shape: a ratio near 1.91 to 1. Keep important content in the middle, because apps crop the edges.
- File: JPG or PNG, under about 1 MB when possible. Very large files may not load.
- Text: large, short and high contrast. Small text is unreadable in a feed.
- Address: a public https URL that is not blocked by robots.txt or a login.
- One image per page gives each share its own look.
How each platform shows your card
Facebook shows the image on top with the domain, title and a short description under it. X shows a wide image with the title and domain, or a small square card if you choose summary. LinkedIn shows the image with the title and domain, and it often drops the description. WhatsApp and other chat apps show a compact card with a smaller picture. Each app trims text at its own length, so the previews here are close guides, not exact copies.
All of them cache what they find. If you change a tag, the old card can keep showing until the app fetches the page again, so use each network's debugging tool after you publish.
Article tags for blog posts
For a blog post or news page, set the type to article and add the optional article tags: the published time, the modified time, the author's profile address, the section and the tags. Some platforms use them to label and group stories. Use ISO dates, such as 2026-03-14T09:00:00Z, and keep the dates in step with the dates on the page itself.
Common Open Graph mistakes
- A relative image path: always use a full https URL.
- An image behind a login or a robots.txt block: crawlers cannot fetch it.
- Reusing one image on every page. Cards look the same and the page loses its identity.
- A title that is too long, which is cut off in the middle of a word.
- Forgetting to refresh the cache after a change.
- Missing og:url so shares are split across several addresses.
Troubleshooting
- The old card still shows: fetch the page again in the network's debugger.
- No picture appears: check that the image URL opens in a browser and uses https.
- The image is cropped badly: use 1200 by 630 pixels and keep key content in the middle.
- The title is cut off: shorten it to about 60 characters.
- My tags are ignored: make sure they are inside the head element and not inside the body.
Privacy and how it works
Your browser builds the tags and the preview cards from the text you enter. A picture chosen from your device is shown through a temporary local address and is not uploaded. A picture you load from a web address is fetched by your browser from that website for the preview. Print / save summary creates a short report from your entries, and the rest of the page is not included in the print.
Frequently asked questions
What is an Open Graph generator?
An Open Graph generator creates the meta tags that tell social networks and messaging apps how to show your link when someone shares it: the title, description, picture and type. You fill in a form and copy the code into your page.
What are Open Graph tags?
Open Graph tags are meta tags in the head of a page whose names start with og:, such as og:title and og:image. They were created by Facebook and are now used by LinkedIn, WhatsApp, Slack, Discord and many other apps.
What size should an Open Graph image be?
Use about 1200 by 630 pixels, a ratio of roughly 1.91 to 1. Keep key content in the middle and away from the edges, save it as JPG or PNG, and keep the file small, ideally under 1 MB.
Do I need both Open Graph and X (Twitter) tags?
X reads its own twitter: tags first and falls back to Open Graph tags if they are missing. Adding a twitter:card tag lets you choose between a small and a large image card.
Which tags are required?
The four most important are og:title, og:type, og:image and og:url. Adding og:description and og:site_name makes the card more complete.
Where do I paste the tags?
Paste them inside the head element of your page. In WordPress and similar systems, your SEO plugin usually has fields for the social title, description and image. A theme header code area also works.
Why does my shared link show the wrong image?
Social networks cache the card the first time they see a link. After you change the tags, use the network's debugging tool to fetch the page again. Also check that the image URL is public, uses https and is not blocked.
What is the og:type?
It says what kind of content the page is. Use website for most pages, article for blog posts and news, product for items for sale, and video.other for videos.
How do I fix a missing preview on Facebook?
Check that the tags are in the head of the page, that the image URL works in a browser and that robots.txt does not block the image. Then use Facebook's Sharing Debugger to scrape the URL again.
What are twitter:card values?
The two common values are summary, which shows a small square image, and summary_large_image, which shows a wide image above the text. This tool lets you pick either.
Can I preview my image before I upload it?
Yes. Choose a picture from your device and it appears in the preview cards. It stays on your device. The tool also reports its size and warns when it is too small or the wrong shape.
Do Open Graph tags help SEO?
They are not a ranking factor. They improve how your links look when shared, which can bring more clicks and visits, and visits and shares can lead to links over time.
Should the og:url match the canonical URL?
Yes, in most cases. Using the same address as your canonical tag makes sure shares and likes count toward one URL.
What is og:image:alt?
It is the alternative text for the image. Some apps use it for accessibility and it can be shown if the image fails to load.
What does og:locale do?
It says which language and region the content is in, for example en_US or fr_FR. It helps platforms that show content by language.
Is my text uploaded anywhere?
No. The tool runs in your browser. If you enter an image URL, your browser loads that image from its own website for the preview. A picture you pick from your device is not uploaded.
What can I print or save from the page?
Print / save summary gives a short report with your tags and checks. Download file saves the tags as an HTML file. Copy code puts them on your clipboard.
Sources and further reading
- The Open Graph protocol (ogp.me), for og: properties and types.
- Meta for Developers, Sharing and Sharing Debugger documentation, for how Facebook reads tags.
- X Developer Platform, Cards markup documentation, for twitter: tags.
- LinkedIn Help, Post Inspector, for LinkedIn link previews.
- WHATWG HTML Standard, the meta element.
Sources were consulted in October 2026. Standards and rules can change, so always check the official page for your situation.