Advertisement
Guide
About the Meta Tag Generator
Meta tags tell search engines and social platforms how to present your page. The title and description shape your Google search result; Open Graph tags control how a link looks when shared on Facebook, LinkedIn, Slack, and most apps; and Twitter Card tags do the same for X. Getting them right means better click-through and polished share previews. This generator produces all of them from a simple form.
Live previews show how your page will appear in Google results and as a social card, so you can tune the wording and image before you ship. Copy the finished tags into your page's <head>.
The tags that matter most
- Title — the clickable headline in search and the browser tab. Google cuts it off at about 580 pixels — roughly 50–60 characters, fewer if they are wide. The tool measures the width.
- Description — the summary under the title. Google shows about 920 pixels on desktop, around 150–160 characters.
- og:image — the preview image for shares; 1200×630 is the safe size.
- og:title / og:description — how the link is titled and summarized on social platforms.
Why Open Graph is worth the effort
Without Open Graph tags, platforms guess at your link's title and image — often picking the wrong text or no image at all, which looks unprofessional and lowers clicks. A defined og:image, title, and description give you a deliberate, eye-catching card everywhere your link is shared. It's a small addition with an outsized effect on how your content spreads.
How to use it
- 1Fill in your page title, description, URL, and image.
- 2Check the live Google and social card previews.
- 3Adjust the wording and image to fit the recommended lengths and sizes.
- 4Copy the generated meta tags into your page's <head>.
Frequently asked questions
What length should my title and description be?
Google truncates by width, not character count: about 580 px for a title and 920 px for a description. That is roughly 50–60 and 150–160 characters, but “WWW” takes far more room than “iii”, so the tool measures the actual width.
Can I use this with Next.js?
Yes. The “Next.js metadata” tab writes an export const metadata object (and a viewport export for the theme colour) for the App Router, so you do not need to hand-write the tags.
What is JSON-LD for?
Structured data that helps search engines understand the page and can earn rich results — FAQs, product prices, article dates. Pick the schema type, fill in the extras it asks for, and paste the script into the page.
What is Open Graph?
A set of meta tags (og:title, og:description, og:image, and more) that control how your link appears when shared on social platforms and messaging apps.
What size should the og:image be?
1200×630 pixels is the widely supported size that displays cleanly across Facebook, LinkedIn, Slack, and most platforms.
Do I need separate Twitter Card tags?
Only twitter:card (and optionally your @handles). X falls back to og:title, og:description and og:image, so the generator does not repeat them.
Are the tags generated locally?
Yes. The tags and previews are produced entirely in your browser. The one exception is the optional “Fetch URL” import, which goes through a public proxy; pasting a page’s HTML instead keeps everything local.