The HN Solutions Open Graph Generator creates og: meta tags and Twitter card tags so your links show rich previews — with the right image, title and description — when shared on Facebook, X (Twitter), LinkedIn and WhatsApp. A live preview shows exactly how your link will look before you publish.
Why our Open Graph generator is better
- Live social preview — see your link card with image, title and description as you type.
- Open Graph + Twitter cards together — one output covers Facebook, X, LinkedIn, WhatsApp and Telegram.
- Character counters keep titles and descriptions inside the limits platforms actually display.
- Correct image sizing — includes og:image width and height tags at the recommended 1200×630.
- Free and private — generated in your browser with no sign-up.
How to generate Open Graph tags
- Enter your title, description, page URL and image URL.
- Check the live preview to see how the shared link will appear.
- Click Copy and paste the tags into the <head> of your page.
Frequently asked questions
What are Open Graph tags?
Open Graph tags are meta tags that control how a page appears when shared on social media — the preview image, title and description in the link card.
What size should an og:image be?
1200×630 pixels is the recommended size. It displays sharply on Facebook, X, LinkedIn and WhatsApp large-image previews.
Do I need separate Twitter card tags?
X falls back to Open Graph tags, but adding twitter:card ensures you get the large image layout. This tool outputs both sets.
Why is my link preview not updating?
Platforms cache previews. Use Facebook’s Sharing Debugger or X’s Card Validator to re-scrape your page after changing tags.
Is this Open Graph generator free?
Yes, completely free with no sign-up, and nothing you type leaves your browser.
Discover more free utilities in our SEO tools hub and daily tools hub.
Why a shared link looks wrong
Platforms do not read your page the way a browser does. They fetch it, look for Open Graph tags, and build a card from what they find. No tags means guessing — usually the first image on the page, which is often your logo or an author avatar.
The four that decide the card: og:title, og:description, og:image and og:url. Everything else is refinement.
Image dimensions, and why yours is cropped
1200 × 630 pixels is the size to use. That is the 1.91:1 ratio Facebook and LinkedIn expect, and X will letterbox it acceptably.
Keep anything essential — text, faces, logos — away from the outer edges, because different platforms crop differently. A headline that runs to the edge of your image will lose its ending somewhere.
Use an absolute URL, not a relative path. Relative og:image values are the single most common reason a preview shows no image at all.
Caches are why your fix did not appear
Platforms cache the preview aggressively. Change your tags and the old card keeps appearing, sometimes for days.
Every major platform provides a debugger that re-fetches and clears its cache — Facebook’s Sharing Debugger, LinkedIn’s Post Inspector, X’s Card Validator. Run the URL through the relevant one after any change. Almost every “the tags are not working” problem is a cache, not a tag.
Twitter cards and Open Graph overlap
X reads Open Graph tags when its own twitter: equivalents are missing, so you rarely need both. The one worth setting explicitly is twitter:card — summary_large_image gives the full-width image card rather than the small thumbnail.
Where the tags go, and what to check
Inside <head>, ideally near the top. Tags added by JavaScript after load are not seen by most crawlers, because they do not execute your scripts.
On WordPress, Rank Math and Yoast output these automatically per post — check you are not adding a second set by hand, because duplicate og tags produce unpredictable results. Pair with the meta tag generator for the rest of the head, and compress your og image so the card loads quickly.