UtilityBaseDeveloper Tools
Meta Tag & Open Graph Generator
Generate SEO, Open Graph, and Twitter Card meta tags with a live social preview and length warnings.
Updated July 10, 2026
How to use the meta tag & open graph generator
- 1Enter your title, description, URL, and image.
- 2Add your site name and Twitter handle.
- 3Check the live preview and length warnings.
- 4Copy the tags into your page's <head>.
Common uses
- Adding share cards to a website
- Fixing how a link previews on social media
- Generating SEO meta tags
- Setting up Open Graph for a new page
Frequently asked questions
What are Open Graph tags?
Open Graph (og:) tags tell social platforms how to display your link — the title, description, and image shown in the preview card. Facebook, LinkedIn, and most networks read them, which is why a shared link shows a rich card instead of a bare URL.
How long should my title and description be?
Keep the title under about 60 characters and the description under about 155 so search engines and social cards don't truncate them. The generator counts characters and warns you when you go over.
Do I need Twitter Card tags separately?
X (Twitter) reads its own twitter: tags, though it falls back to Open Graph. This generator outputs both sets, so your card looks right across every platform. Copy them all into your page's head.
About this tool
The meta tag generator builds the meta tags a page needs for search and social sharing. Fill in the title, description, URL, and image, and it outputs the standard SEO tags plus Open Graph tags (used by Facebook, LinkedIn, and most platforms) and Twitter Card tags all at once, with a live preview of the share card. Character counters warn when the title or description runs long enough to be truncated. Copy the result into your page's head. Everything runs in your browser.
Like most tools on UtilityBase, the meta tag & open graph generator runs entirely in your browser — nothing you enter is uploaded or stored on a server. It's free to use with no account required. Browse more developer tools here.
Was this tool helpful?
Related tools
UTM Link Builder
Build tracking URLs with utm_source, medium & campaign — with mistake warnings.
Generators
HTML Formatter
Beautify or minify HTML in your browser, with byte savings shown on minify.
Developer Tools
Favicon Generator
Make a complete favicon pack — .ico plus PNG sizes — from text, emoji, or an image.
Generators
URL Encoder / Decoder
Percent-encode text for URLs or decode encoded URLs back to readable text.
Developer Tools
What Is My IP
Your public IP, and exactly what it reveals — location, ISP, timezone.
Developer Tools
Regex Tester
Test regular expressions live with match highlighting, groups, and a cheat sheet.
Developer Tools