Meta Tag Generator
Generate SEO, Open Graph and Twitter Card meta tags in one click.
Updated June 2026
Enter a title and description to generate your meta tags…
How to use the Meta Tag Generator
- 1
Enter your title and description
Type the page title and a short description. Watch the character counters stay in range.
- 2
Add URL, image and handle (optional)
Provide the page URL, a share image and your Twitter handle for richer social previews.
- 3
Copy the tags
The HTML snippet updates live. Click Copy and paste it into your page's <head>.
About this tool
A meta tag generator builds the HTML <head> tags that control how your page appears in Google and on social media. Search engines read your <title> and meta description; Facebook, LinkedIn, Slack and others read Open Graph (og:) tags; and X (Twitter) reads twitter: tags to render a large image card. Get these wrong and your link shows a blank box or the wrong text. This open graph generator produces all of them from a single form.
The snippet includes the SEO basics (title and meta description), the core Open Graph properties (og:title, og:description, og:type, og:url and og:image) and a Twitter summary_large_image card (twitter:title, twitter:description, twitter:image and twitter:site when you add a handle). Aim for a title around 60 characters and a description around 158 characters — the live counters flag when you go over the ideal length search engines display.
Every value you type is HTML-escaped, so an ampersand or quote in your title won't break the markup or open an injection hole. Nothing is uploaded — the tags are assembled locally in your browser. Copy the snippet straight into your page's <head>, your CMS, or your static-site template.
Examples
Input
title: My Page, description: A short summary
Output
<title>My Page</title> <meta name="description" content="A short summary" /> <meta property="og:title" content="My Page" /> …
og: and twitter: tags are always included; url, image and twitter:site only appear when provided.
Input
title: Sale & Deals, description: Save big
Output
<title>Sale & Deals</title>
Special characters like & are HTML-escaped so the markup stays valid.
Input
twitter: hypercho
Output
<meta name="twitter:site" content="@hypercho" />
A handle entered with or without @ is normalized to @hypercho.
Common uses
- Developers adding social preview tags to a new page or static-site template before launch
- Marketers ensuring shared links show the right title, description and image on LinkedIn and X
- Bloggers generating Open Graph tags so posts render rich cards in Slack and iMessage
- SEO specialists tuning title and description length to avoid truncation in search results
- Agencies producing consistent meta tags across many client landing pages
- Anyone fixing a broken or blank social preview by adding proper og: and twitter: tags
Frequently asked questions
What meta tags does this generate?+
It generates the SEO title and meta description, Open Graph tags (og:title, og:description, og:type, og:url, og:image) and Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image and twitter:site).
What are Open Graph tags?+
Open Graph (og:) tags tell platforms like Facebook, LinkedIn and Slack how to display your link — the title, description and preview image shown when someone shares it.
How long should my title and description be?+
Around 60 characters for the title and 158 for the description is ideal, since Google truncates longer text. The tool shows a live counter and flags when you exceed the recommended length.
Do I need an image URL?+
It's optional but strongly recommended. og:image and twitter:image drive the large preview card on social platforms. Use an absolute URL to a 1200×630 image.
Is my input private?+
Yes. The tags are built entirely in your browser with JavaScript — nothing you enter is sent to a server, and all values are HTML-escaped.
Related tools
Embed this tool
Free to use on your own site — it stays fast and private for your visitors.
Paste this where you want the tool to appear:
<iframe src="https://hypercho.com/embed/meta-tag-generator" title="Meta Tag Generator by Hypercho" width="100%" height="560" style="border:1px solid #d8cec3;border-radius:16px;max-width:720px" loading="lazy"></iframe>
<p style="font:13px sans-serif"><a href="https://hypercho.com/tools/meta-tag-generator" target="_blank" rel="noopener">Meta Tag Generator</a> by <a href="https://hypercho.com" target="_blank" rel="noopener">Hypercho</a></p>