Meta & Open Graph generator
Build SEO, Open Graph and Twitter card tags with live previews, right in your browser.
Files are processed in your browser and never uploaded.
How to use Meta & Open Graph generator
Add your text
Type or paste your text into the input box. Everything is handled by your own browser, so nothing is sent to a server.
Set the options
Choose Page title 31 / 60, Canonical URL, Site name, Image URL (1200X630 recommended), Image alt text and Author. The options are visible from the start, not hidden until you paste something.
Read it and keep a copy
The output updates as you type, so there is nothing to submit and nothing to wait for. Copy meta tags, Don puts the result on your clipboard and Download .html saves it as a file.
What this tool does
SEO, Open Graph and Twitter card tags
Title, description, canonical, robots, Open Graph and Twitter card tags are produced together, which is the set a page actually needs.
Live Google and social card previews
Google, Facebook and Twitter previews update as you type, so you can see where a title will be cut off before you publish it.
Title and description length counters
The title and description fields count characters against the usual limits, so you know when you are over before the search engine tells you.
Copy or download the snippet
Copy meta tags puts the block on your clipboard, or download it as an HTML file to paste into your head section.
Works offline, no sign-up
Everything is generated in your browser, so an unpublished title and description are never uploaded.
Frequently asked questions
Is anything uploaded?
No. Every tag is generated in your browser from what you type, with nothing uploaded. It works offline once loaded.
What size should the social image be?
Use an absolute HTTPS image around 1200 by 630 pixels (a 1.91 to 1 ratio). That size looks right on Facebook, X, LinkedIn, Slack, Discord and most other platforms.
How long should the title and description be?
Aim for a title under about 60 characters and a meta description under about 155, so search engines do not truncate them. The counters turn red when you go over.
Do I need separate Twitter tags?
X and other platforms read Open Graph tags as a fallback, but adding twitter:card and the twitter tags gives you full control over how the card looks, so this tool includes both.
Where do I put the generated tags?
Paste them inside the head section of your page's HTML, ideally near the top, so crawlers find them in the initial response.
Last updated: