UsefulTab
Open Graph Generator
Build og: and twitter: meta tags.
Fill in the form to generate tags
Add a title, description, URL, and image and the Open Graph and Twitter Card meta tags appear here, with a live preview of the share card below.
Runs entirely in your browserGenerate Open Graph and Twitter Card tags
When a page is shared on social networks, chat apps, or messaging, the rich preview card — the title, description, and image — comes from Open Graph and Twitter Card tags in the page's
. Fill in the fields here and the tool writes those tags for you: og:title, og:description, og:url, og:site_name, og:image, and the matching twitter:card, twitter:title, twitter:description, and twitter:image. Pick the large-image card for a full-width banner or the summary card for a small thumbnail. The preview on the right approximates how the card will look so you can tune the wording and image before you ship. Every value is HTML-escaped so it is safe to paste straight into your head, and all of it is built in your browser — nothing you type is sent anywhere.Common questions
Where do I put the generated tags?
Inside the <head> element of your HTML page, alongside your <title> and other meta tags. Copy the block and paste it there; the crawlers that build link previews read them from the head when the page is fetched.
What size should the og:image be?
For the large-image Twitter card and most networks, use roughly 1200×630 pixels (a 1.91:1 ratio) so it fills the banner without cropping. The summary card uses a smaller square-ish thumbnail. Point og:image at an absolute, publicly reachable URL — relative paths and private images will not load in a preview.
What is the difference between summary and summary_large_image?
They are the two Twitter card types. summary shows a small square thumbnail next to the text; summary_large_image shows a large banner image above the text, which most modern previews use. The tool's preview switches layout to match whichever you choose.
Does the preview load my image from the internet?
Yes — the preview card displays the image URL you enter by loading it in your own browser, exactly as a viewer's browser would. The URL and the other fields are not sent to this site's servers; the tags and card are assembled locally.
Is anything I enter uploaded?
No. The meta tags and the preview are generated in your browser. The only network request is your browser fetching the preview image you pointed it at, which never touches our servers.