Open Graph Generator
Generate Open Graph (og:) and Twitter Card meta tags with a live link preview, image dimensions, and article/product/video fields.
Link preview
The Open Graph Generator builds the og: and Twitter Card meta tags that control how your link looks when it is shared on Facebook, LinkedIn, Twitter/X, Slack, WhatsApp, and Discord. Choose your content type, add a title, description, URL, and one or more preview images with dimensions and alt text, then copy a clean snippet for your page's
— with a live preview card that mirrors what people will see.What is Open Graph?
Open Graph is a protocol created by Facebook that lets any web page become a rich object in a social graph. By adding og: meta tags to your page's
, you tell social platforms exactly which title, description, image, and URL to show when your link is shared, instead of letting them guess. Twitter/X reads the same data plus its own twitter: tags to render a Card.How to generate Open Graph tags
Fill in the fields on the left and copy the snippet into your
.- Pick your og:type — website for most pages, or article, product, or video to unlock type-specific tags.
- Enter the og:title, og:description, and og:url, plus an optional site name and locale.
- Add one or more images with a URL, alt text, and width/height (1200×630 is recommended).
- Check the live preview card, then click Copy and paste the tags inside your page's .
Recommended Open Graph image size
Most platforms render a large preview best at 1200×630 pixels (a 1.91:1 ratio). Declaring og:image:width and og:image:height helps platforms reserve the right space before the image loads, and og:image:alt provides an accessible description. You can list several og:image tags so platforms can pick the most suitable one.
Why use this Open Graph generator?
- Focused on Open Graph and Twitter Cards, with a live preview card so you see the result before you ship.
- Type-specific fields for article (author, published time, section, tags), product (price), and video (duration).
- Supports multiple og:image entries with secure URL, width, height, and alt text.
- Escapes special characters automatically so quotes and angle brackets stay safe.
- Runs entirely in your browser — nothing is uploaded, and the snippet is yours to copy.
Frequently asked questions
What is the difference between Open Graph and meta tags?
Open Graph tags are a specific family of meta tags that use the property attribute (like og:title and og:image) to describe how your page appears when shared on social media. Regular SEO meta tags (like meta description) tell search engines about your page. This tool focuses on the social-preview tags; if you also need basic SEO and charset tags, use the Meta Tag Generator.
What is the best Open Graph image size?
1200×630 pixels is the safest choice and renders as a large preview on most platforms. Keep important content away from the edges, stay under a few megabytes, and add og:image:alt for accessibility. You can provide more than one image and platforms will choose the best fit.
Do I need Twitter Card tags if I already have Open Graph?
Twitter/X falls back to Open Graph tags when twitter: tags are missing, so basic previews still work. Adding twitter:card and twitter:site gives you explicit control over the card type and attribution, so this generator includes them by default. You can turn them off if you only want og: tags.
What does og:type do?
og:type tells platforms what kind of content the page is — website, article, product, video, profile, or book. Some types unlock extra structured fields, such as article:published_time and article:author for articles, or product:price:amount for products. This tool shows the relevant fields when you change the type.
Is this Open Graph generator free and private?
Yes. It is completely free and runs entirely in your browser with JavaScript. Nothing you enter is uploaded or stored — the tags and the preview are generated locally on your device.