Open Graph Generator
Social sharing tags with an image check and approximate link previews.
Page
Check a page you already have: paste its HTML
Press Ctrl+U (⌥⌘U on a Mac) on the page to view its source, then copy and paste it here. The HTML is only read, never run or uploaded.
Image
X (Twitter) card
X reads og:title, og:description and og:image when the twitter: versions are missing, so they aren’t duplicated.
Previews
Approximations to check wording and cropping. Each platform’s real layout varies by app, device and update, and they cache previews.
Checks
No problems found.
About the Open Graph Generator
When someone shares your page, Facebook, X, LinkedIn, WhatsApp and many other apps build the link preview from Open Graph tags: og:title, og:description, og:image and og:url. Fill in the form and copy correct, escaped tags for your page’s <head>.
Check image loads your image to read its real size and compares it with each platform’s published guidance — 1200 × 630 px is the safe choice — and fills in og:image:width and og:image:height so the image can appear the first time the page is shared. Approximate previews show how the title, description and cropping may look on each platform.
How to use it
- Enter the title, description and the page’s canonical URL. Choose a type (
websitefor most pages,articlefor posts). - Paste the full image URL and press Check image to see its size and any warnings. Add alt text describing the image.
- Choose the X card: Large image for a full-width picture, Summary for a small square thumbnail. Add your X accounts if you have them.
- Look over the previews, then copy the tags into the
<head>of the page. To audit an existing page, paste its HTML under Check a page you already have. - After publishing, refresh old previews with each platform’s own tool (for example Facebook’s Sharing Debugger), because they cache what they fetched.
Examples
<meta property="og:title" content="How to Brew Masala Chai at Home"> <meta property="og:type" content="article"> <meta property="og:url" content="https://www.example.com/blog/masala-chai/"> <meta property="og:image" content="https://www.example.com/images/masala-chai-1200x630.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="A steaming cup of masala chai next to cardamom pods"> <meta name="twitter:card" content="summary_large_image">
X falls back to og:title, og:description and og:image, so only twitter:card (and optional accounts) is needed.
Image sizes that work everywhere
- Facebook: at least 1200 × 630 px for sharp previews on high-resolution screens; below 600 × 315 px images appear as a small thumbnail; the minimum is 200 × 200 px and the file limit 8 MB. Keep close to a 1.91:1 ratio. (Facebook image guidance)
- LinkedIn: at least 1200 × 627 px, 1.91:1, up to 5 MB. (LinkedIn Help)
- X: large-image cards use 2:1 images from 300 × 157 up to 4096 × 4096 px; summary cards crop to a square (at least 144 × 144). Images must be under 5 MB in JPG, PNG, WEBP or GIF — SVG is not supported.
A 1200 × 630 px JPEG or PNG under 5 MB, with the important content in the middle, satisfies all of them. Need to resize or crop? Use the image resizer or image cropper.
Which tags matter
The Open Graph protocol requires og:title, og:type, og:image and og:url, and says pages with an image should also give og:image:alt. og:description, og:site_name and og:locale (written like en_IN) are optional but widely used. Facebook recommends a title without your site name — that is what og:site_name is for — and a canonical og:url without tracking or session parameters.
For X, twitter:card chooses the layout; when twitter:title, twitter:description or twitter:image are missing, X uses the Open Graph values instead. twitter:site and twitter:creator attribute the card to your accounts.
Limitations
- Previews are approximations. Each platform changes its layout and may crop, shorten or hide parts differently on phones and desktops.
- The image check reads the pixel size only; browsers can’t read the file size or type of images on other sites. Keep files under 5 MB.
- Platforms cache previews: after changing tags, use the platform’s debugging tool to fetch the page again.
Privacy
Your tags are generated in your browser and never sent to MySmartCoPilot. The image check — when you press Check image or leave the image field — loads the image URL you entered directly from its own server, like any image on a web page, without sending a referrer; that server sees your IP address, as it would for any visitor.
Frequently asked questions
Why is my old image or title still showing when I share the link?
Platforms cache link previews. Facebook caches images by URL and won’t update them unless the URL changes, so use its Sharing Debugger to fetch the page again, or give the new image a new file name.
Do I need separate twitter: tags?
Only twitter:card (and optionally twitter:site / twitter:creator). X reads og:title, og:description, og:image and og:image:alt when the twitter: versions are missing.
Why should I set og:image:width and og:image:height?
Facebook says that specifying them lets its crawler render the image on the first share, without having to download and process it first. The tool fills them in from the real image when you press Check image, and updates them when you check a different image. A size you type or import yourself is kept, with a warning if it doesn’t match the image.
What is the best Open Graph image size?
1200 × 630 px (about 1.91:1). It meets Facebook’s recommendation, LinkedIn’s 1200 × 627 minimum, and fits X’s large card with only slight cropping.
Are Open Graph tags a Google ranking factor?
Not directly — they control how links look when shared on social and messaging apps. Google lists og:title as one of several sources it may use when it writes the title link for a result.