Open Graph Generator
Generate Open Graph and Twitter/X Card meta tags with an illustrative social-preview card — distinct from the Meta Tag Generator, which doesn't handle share images at all.
The Meta Tag Preview & Generator produces the search-result-facing <title>, meta description, and canonical tag. This tool produces the separate set of tags that control how a link looks when shared on social platforms and chat apps — Open Graph (og:*) and Twitter/X Card tags — including a share image, which the Meta Tag Generator does not handle at all.
Generated entirely in your browser — nothing you enter here is sent to a server. The preview loads your image URL directly in your own browser to show a layout approximation; no site is fetched or checked.
Open Graph and Twitter/X Card tags control how a link looks when it's shared on Facebook, X/Twitter, LinkedIn, Slack, and similar platforms — the preview image, title, and description shown in the chat or feed, which are entirely separate from what Google shows in search results.
Every value you enter is HTML-escaped before it's placed in the generated tags, and image/page URLs are validated to use http:// or https:// before they're used anywhere, including in the preview.
How to use the Open Graph Generator
- Enter a Title (the only required field) and, optionally, a Description.
- Add the Page URL, Image URL, and Site name as full https:// addresses where they apply.
- Pick og:type (website or article) and a Twitter/X card type (summary_large_image or summary).
- Click Generate, check the illustrative preview, then click Copy and paste the tags into your page's head.
Example: A sale page with a share image
Title Spring Sale: 20% Off Shoes, Page URL https://example.com/sale, Image URL https://example.com/sale.jpg, other fields left at their defaults. Generate outputs seven tags: og:title, og:url, og:image, og:type (website), twitter:card (summary_large_image), twitter:title, and twitter:image. No description tags are written because Description was empty, and the preview card shows example.com as the domain.
Questions about the Open Graph Generator
- Which fields are left out when they're empty?
- Description, Page URL, Image URL, and Site name are optional; an empty one simply produces no tag. og:title, og:type, twitter:card, and twitter:title are always included.
- Why do I get "URL must be a valid absolute http:// or https:// URL"?
- Relative paths like /images/share.jpg and addresses without a scheme like example.com are rejected for both URL fields. Enter the full address, or leave the field blank.
- The preview says "Image preview unavailable". Is my tag wrong?
- Not necessarily. The preview loads the image directly in your browser, so it fails if the image host blocks it or the address is unreachable from your network. The generated og:image tag is still written as entered.
- Does it add image width, height, or alt tags?
- No. It generates only the tags listed above; add og:image:width, og:image:height, or og:image:alt by hand if you need them.