Open Graph Generator
Fill in title, description, address and image, see how the link card will look in the main apps, and copy the Open Graph tags for the head of your page.
- Link card preview
- 7 content types
- Image size check
- Runs in your browser
Page
Use “Website” for home pages and everything that fits no other type.
The canonical address of the page. Likes and shares are counted for this address.
Image
Full address of the picture. Recommended: 1200 × 630 px (1.91:1), JPG or PNG, under 5 MB.
A website preview cannot load pictures from other sites, so pick the file from your device. It is only shown here and measured — it never leaves your device.
One sentence that says what the picture shows, for people who cannot see it.
More images
One image is enough for most pages. Add more to let people choose when they share on Facebook.
Article
A link to the author’s page. Facebook also accepts a profile address.
Separated by commas. Each one becomes its own tag.
Product
Three-letter code such as USD, EUR or GBP.
Profile
Book
A link to the author’s page. Facebook also accepts a profile address.
Video
Add the address of the video file under “Video and audio” below.
Song
Video and audio
Facebook app, X card and basic tags
Only needed for Facebook Insights about your domain.
Preview
These previews follow the layout and text limits of each app; the real card can differ a little and changes from time to time. After you publish, each network keeps the old preview until its cache is refreshed.
Checklist
HTML code
Import from existing HTML
The pasted code is only read as text inside your browser. Scripts in it never run, nothing is loaded from it and nothing is sent anywhere. Importing replaces what is in the form now.
How to create Open Graph tags
The code and the previews update while you type.
- 1
Choose the content type
Pick website, article, product, profile, book, video or song, then enter the title, description, page URL and site name.
- 2
Add the image
Enter the address of the share image. To preview and measure it, choose the same file from your device — it is only read by your browser.
- 3
Check and copy
Look at the previews, work through the checklist and paste the code into the <code><head></code> of your page.
Everything a link preview needs
Tags written according to the Open Graph protocol.
Previews for four layouts
Facebook, LinkedIn, WhatsApp / iMessage and Slack / Discord, each with its own text limits. The real cards can differ slightly and change over time.
Image check
Choose the picture from your device to see its pixel size, aspect ratio, format and file size, with warnings when it is too small, too heavy or will be cropped.
Details for each type
Publication date, author, section and tags for articles; price, currency, availability and brand for products; plus fields for profiles, books, videos and songs.
Several images, video and audio
Add more images with width, height and alt text, and og:video or og:audio with their MIME type.
X card and basic tags
Optionally adds the X card type and your account, a Facebook app ID, and the title tag and meta description with the same texts.
Import existing HTML
Paste the source of a page to load its current Open Graph tags into the form and correct them. Scripts in the pasted code do not run.
Private by design
Everything runs in your browser. What you type, paste or open is not sent to a server.
Free, no sign-up
No account, no limits, no watermark — on a phone, tablet or computer.
What Open Graph tags are and how apps use them
When someone posts a link, the app fetches the page and looks for Open Graph tags in its head to build the preview card: a title, a short text, a picture and the site name. The protocol was introduced by Facebook in 2010 and is now read by LinkedIn, WhatsApp, Slack, Discord, iMessage, X and many others. Without these tags an app guesses — it may take the wrong picture, a cookie notice as the description, or show only the bare address.
Four properties are required by the protocol: og:title, og:type, og:image and og:url. In practice you also want og:description and og:site_name. Open Graph tags use the attribute property, not name. The image is what people notice first: 1200 × 630 pixels, a ratio of 1.91:1, works in every large card. Stating og:image:width and og:image:height lets an app lay out the card before it has loaded the picture.
Typical mistakes: an image address that is relative or uses http, which many apps refuse to load; an og:url that differs from the canonical URL, so shares are counted for two addresses; a picture that is too small or so heavy that an app skips it; and one generic image and description for every page of a site. Remember that apps cache previews. After you change the tags, an old card can stay visible until the cache of that app is refreshed.
Core Open Graph properties
| Property | What it holds | Advice |
|---|---|---|
| <code>og:title</code> | Headline of the card | Without the site name; keep it to about 60–90 characters |
| <code>og:description</code> | One or two lines below the title | About 55–200 characters; some apps do not show it |
| <code>og:image</code> | Picture of the card | 1200 × 630 px, JPG or PNG, full https:// address |
| <code>og:url</code> | Canonical address of the page | The same address as in the canonical tag |
| <code>og:type</code> | Kind of content | <code>website</code> unless another type clearly fits |
| <code>og:site_name</code> | Name of the website | Shown above the title in several messaging apps |
Tips
- No share image yet? Create one in the right size with the OG Image Generator.
- Crop an existing picture to 1200 × 630 px with the Social Media Image Resizer and shrink the file with the Image Compressor.
- For player and app cards on X, use the Twitter Card Generator; for canonical, robots and hreflang, the Meta Tag Generator.
- After publishing, share the link in a private chat or a draft post to check the real card, and refresh the preview cache of the network if it still shows the old version.
Frequently asked questions
Can’t find your answer? Contact us — we reply quickly.
What size should an Open Graph image be?
1200 × 630 pixels, an aspect ratio of 1.91:1, is the safe choice for large cards. Use JPG or PNG and keep the file small: this tool warns above 300 KB because WhatsApp often shows no picture for heavier files, and above the 5 MB and 8 MB limits of LinkedIn and Facebook.
Which Open Graph tags are required?
The protocol requires og:title, og:type, og:image and og:url. Add og:description and og:site_name as well — most apps show them.
Why is my link preview not updating?
Apps store the preview the first time a link is shared. After you change the tags, the old card stays until that cache expires or is refreshed. Facebook and LinkedIn each offer a tool for developers that fetches the page again.
Do Open Graph tags help SEO?
They are not a ranking factor for search engines. They decide how a link looks when it is shared, and a clear card with a good picture gets more clicks than a bare address.
What is the difference between Open Graph tags and meta tags?
The title tag and meta description are written for search engines. Open Graph tags are written for apps that show link previews. They can carry the same texts, but a page needs both sets.
Is my data sent to a server?
No. The tool runs entirely in your browser. Your input is not uploaded, logged or stored on our servers.
More free SEO and website tools
Generate tags and files, check status codes, redirects, DNS and certificates — free, without an account.