How to use the Open Graph Generator
- Enter the title, description and full URL of the page you want people to share.
- Paste the absolute URL of your share image and describe it in the alt text field.
- Choose the X card type and add your handles if you have an X account.
- Optionally drop in the same image to see approximate Facebook, X and LinkedIn previews and size warnings.
- Click Copy HTML and paste the tags into the <head> of the page.
Features
- All core Open Graph properties, including image alt text and size
- X card tags with handle clean-up (paste @name or a profile link)
- Approximate previews in Facebook-, X- and LinkedIn-style layouts
- Checks image size, aspect ratio and file size from a local copy
- Warnings for relative URLs, http images and missing images
- Your image never leaves the browser; it is used only for the preview
What Open Graph tags do
When someone pastes a link into a social network or a messaging app, that service sends a crawler to fetch the page and look for Open Graph meta tags. The protocol was introduced by Facebook in 2010 and has since become the common language for link previews: LinkedIn, WhatsApp, Slack, Discord, Telegram, Pinterest and many others read it. Without these tags, each service guesses a title and picks an image, which often produces a card with the wrong picture or no picture at all.
The protocol defines four basic properties every page should have: og:title, og:type, og:image and og:url. A description and site name are optional but make the card far more informative.
How X cards relate to Open Graph
X (formerly Twitter) has its own twitter: tags, but it falls back to the Open Graph title, description and image when they are missing. In practice you only need twitter:card, which chooses the layout, plus your handles. summary_large_image shows a wide image across the full width of the post; summary shows a small square thumbnail beside the text. Tick the option to repeat the values as twitter: tags only if you want X to show different text than other networks.
Choosing the right share image
| Use | Size that works well | Ratio |
|---|---|---|
| Large link cards (Facebook, LinkedIn, X large image) | 1200 × 630 px | 1.91:1 |
| X summary card | At least 144 × 144 px | 1:1 |
| Minimum for a large card | 600 px wide | about 1.91:1 |
Keep important text and faces away from the edges, because some apps crop the image to a slightly different shape. Use JPG or PNG, keep the file well under 5 MB, and avoid tiny text that becomes unreadable in a phone feed. If you need to produce several sizes from one picture, the Social Media Image Resizer can crop it for you.
Why the image URL must be absolute
Crawlers read the tags without loading your page the way a browser does, so they cannot work out where a relative path such as /img/card.jpg points. Always write the full address including https://. The image also has to be publicly reachable: images behind a login, on localhost or blocked by robots.txt will not appear.
When previews do not update
Networks cache link previews, sometimes for days. After changing your tags, use Facebook’s Sharing Debugger or LinkedIn’s Post Inspector to fetch the page again. Changing the image file name forces a fresh download of the picture as well. If a card still looks wrong, check that the tags are in the raw HTML returned by the server; tags added later by JavaScript are invisible to most crawlers.
Quick checklist
- One og:title and one og:image per page, not duplicates from a theme and a plugin.
- Title written for people scrolling a feed, not just for search engines.
- og:url matches your canonical URL.
- Alt text describes the image for screen-reader users.
Frequently asked questions
What size should an Open Graph image be?
1200 × 630 pixels, a 1.91:1 ratio, is the widely recommended size and displays well on Facebook, LinkedIn and X large-image cards. Images narrower than about 600 pixels may be shown as a small thumbnail.
Do I need both Open Graph and Twitter tags?
You need Open Graph tags plus a twitter:card tag. X reads og:title, og:description and og:image when its own tags are missing, so repeating them is optional.
Are these previews exactly what Facebook, X and LinkedIn will show?
No. They are generic, approximate mockups to check cropping and text length. Each network changes its design regularly and may shorten text differently.
Is my preview image uploaded anywhere?
No. The image you drop in is read by your browser only to draw the preview and check its size. Your real card image must still be hosted on your website at the URL you enter.
Why does Facebook still show my old image?
Facebook caches previews. Open its Sharing Debugger, enter your URL and choose to scrape again. Renaming the image file also forces a fresh copy.