Open Graph tag generator
This Open Graph tag generator writes the meta tags that control how your page looks when someone shares the link in a chat app or on social media. Marketers, bloggers and developers use it to set the preview title, description and image.
- Runs in your browser
- Free, no account needed
- Copy or download the result
Result
Example
Title (og:title): Handmade Ceramic Mugs Description (og:description): Each mug is thrown and glazed by hand in our studio. Page URL (og:url): https://www.example.com/mugs/ Image URL (og:image): https://www.example.com/images/mugs-1200x630.jpg Image alt text: Three blue ceramic mugs on a wooden shelf Image width in pixels: 1200 Image height in pixels: 630 Type (og:type): website Site name (og:site_name): Example Pottery Twitter card: summary_large_image Twitter/X site handle: @examplepottery
<meta property="og:title" content="Handmade Ceramic Mugs"> <meta property="og:type" content="website"> <meta property="og:url" content="https://www.example.com/mugs/"> <meta property="og:description" content="Each mug is thrown and glazed by hand in our studio."> <meta property="og:site_name" content="Example Pottery"> <meta property="og:image" content="https://www.example.com/images/mugs-1200x630.jpg"> <meta property="og:image:alt" content="Three blue ceramic mugs on a wooden shelf"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@examplepottery"> <meta name="twitter:image:alt" content="Three blue ceramic mugs on a wooden shelf"> X (Twitter) falls back to og:title, og:description and og:image, so separate twitter: tags for those are not needed.
How to use the open graph tag generator
- Fill in Title, Description, Page URL and Image URL, plus Image alt text and the image size if you know it.
- Pick a Type, enter a Site name, and choose a Twitter card and an optional Twitter/X site handle.
- Press Run.
- Use Copy result and paste the tags into your page's head section.
How it works
The page URL and image URL must be absolute http or https addresses, and image width and height must be whole pixel values from 1 to 10000 or blank.
All values are HTML-escaped, so quotes and angle brackets cannot break the tags.
Open Graph tags use the property attribute and Twitter tags use the name attribute.
Separate twitter:title, twitter:description and twitter:image tags are left out because X falls back to the Open Graph values.
The tool warns when there is no image, since og:image is one of the four required Open Graph properties.
Everything runs in your browser. Your input is not uploaded or stored.
Questions and answers
What image size should I use for Open Graph?
Many sites use 1200 by 630 pixels for large previews. Set og:image:width and og:image:height so apps can lay out the preview before the image loads.
Why does my link preview not update?
Social apps cache previews. After changing tags, use the platform's own sharing debugger or wait for its cache to expire.
Do I need Twitter card tags if I have Open Graph tags?
You need twitter:card to choose the card style. For the title, description and image, X uses the Open Graph tags when twitter: versions are missing.