Open Graph Meta Tag Generator
Open Graph meta tags control how your page looks when it is shared on Facebook,
Open Graph meta tags control how your page looks when it is shared on Facebook,
How to use Open Graph Meta Tag Generator
- Enter your page title, description, URL and an absolute image URL in the fields.
- Check the live card preview and character-count warnings, and toggle Twitter Card tags if you want them.
- Click Copy meta tags and paste them inside the <head> of your page, then re-scrape the URL in each platform's debugger.
About Open Graph Meta Tag Generator
Open Graph meta tags control how your page looks when it is shared on Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp and other apps. This tool takes a title, description, page URL and image, and builds the matching og: tags (plus optional Twitter/X Card tags) for you to paste into the <head> of your HTML. A live preview shows roughly how the shared card will look, and character counts flag titles or descriptions likely to get truncated.
Everything runs locally in your browser. Your text and image URL are never uploaded or sent to a server, and no request is made to fetch the image beyond your own browser loading it for the preview. The generated tags are standard, static HTML markup, so they work with any site or framework.
This is a markup generator, not a validator or crawler: it produces correct tags from what you type, but it cannot confirm that your image URL is publicly reachable or that a platform will accept it. After deploying, re-scrape the URL in each platform's own debugging tool so their cache picks up the new tags.
Frequently asked questions
- What are Open Graph meta tags for?
- They tell social platforms and messaging apps what title, description and image to show when someone shares a link to your page, instead of the app guessing. Well-formed tags make shared links look intentional and get more clicks.
- Where do I put the generated tags?
- Paste them inside the <head> section of the page they describe, before the closing </head>. Each URL of your site needs its own tags with values specific to that page.
- Why doesn't my image show up when I share the link?
- Common causes: the og:image is a relative path instead of an absolute https:// URL, the image is not publicly accessible, or the platform cached an older version of your page. Use an absolute URL (ideally 1200x630px) and re-scrape the page in the platform's debugger to refresh its cache.
- Do I still need the Twitter Card tags?
- X (Twitter) reads Open Graph tags as a fallback, but adding explicit twitter:card and twitter:site tags gives you more control over the card style and attribution. This tool can include them optionally.
- Is my data private?
- Yes. Everything is computed in your browser. Your title, description, URL and image link are never uploaded, and the tool makes no network calls apart from your own browser loading the preview image.
- What image size works best?
- For the large summary card, aim for 1200x630px (roughly a 1.91:1 ratio) so the image is not cropped awkwardly. Keep it under about 5MB and host it at a stable, public https:// URL.