Meta Tag & Open Graph Generator
Generate SEO meta tags, Open Graph, and Twitter Card markup with live Google and social-share previews. Fill in your title, description, URL, and image and copy the ready-to-paste <head> tags. Runs in your browser.
How to Use
- Type your page title and meta description — the live counters show when you exceed Google’s display limits.
- Add the page URL, site name, an image URL (1200×630 works best), and an author if you like.
- Watch the Google result, Facebook/LinkedIn card, and Twitter card previews update as you type.
- Copy the generated tags and paste them into your page’s <head>.
- Done — nothing was uploaded; it all ran in your browser.
Google result
Facebook / LinkedIn card
Twitter / X card
Paste into your <head>
What these tags do
Three audiences read the metadata in your page’s <head>, and this tool writes for all of them at once. Search engines use the <title> and <meta name="description"> to build the blue link and grey snippet in results — the preview here mirrors how Google will display them, and the live counters warn you before they get truncated. Social platforms — Facebook, LinkedIn, Slack, Discord — read Open Graph (og:) tags to turn a shared link into a rich card with an image, title, and description. Twitter/X reads its own Twitter Card tags for the same purpose. Get these right and your links look professional everywhere they are shared; get them wrong and they show up as a bare, unappealing URL.
Everything is generated in your browser as you type — nothing is uploaded — and the output is plain, standard HTML you can paste straight into any page.
Getting them right
A few habits separate good metadata from forgettable metadata. Keep the title near 50–60 characters and put the most important words first, since the end may be cut off. Write the description as ad copy, not a summary — its job is to earn the click, in about 150–160 characters. Always set a canonical URL (this tool adds it) so search engines know the preferred address of a page that might be reachable several ways. For the share image, use an absolute https:// URL to a 1200×630 picture — that single tag is the difference between a share card that stops the scroll and one that looks broken. Finally, set og:type to article for blog posts and website for everything else; small touches, but they are what well-built sites do.
About this generator
Fill in the fields and the tool builds your <title>, meta description, canonical link, the full Open Graph set, and the Twitter Card tags, while showing live previews of a Google result and the social share cards. It runs entirely on your device — nothing is uploaded — and the markup works in every browser and platform. Pair it with the Schema / JSON-LD Generator for rich results and the robots.txt Generator to round out your on-page SEO.
About the Meta Tag & Open Graph Generator
The Meta Tag & Open Graph Generator gives you a fast, free answer for web development and data tasks without sending anything off your device. Generate SEO meta tags, Open Graph, and Twitter Card markup with live Google and social-share previews. Fill in your title, description, URL, and image and copy the ready-to-paste
tags. Runs in your browser.How it works
Pick your options and the tool makes the result right away. Do not like it? Make another one — you can do this as many times as you want. When it looks right, copy it into your own project. Everything is made on your device, so it is yours alone.
Want the deeper story? The Knowledge Base explains the ideas behind the tools in more detail.
Frequently Asked Questions
What are Open Graph and Twitter Card tags?
They are special meta tags that control how your page looks when it is shared on social media. Open Graph (og:) tags are read by Facebook, LinkedIn, Slack, Discord, and most other platforms; Twitter Card tags are read by Twitter/X. They set the title, description, and preview image of the share card, so a shared link shows a rich, clickable card instead of a bare URL.
How long should my title and description be?
Aim for a title around 50–60 characters and a description around 150–160; beyond those, Google truncates them in search results with an ellipsis. The live counters here turn red when you cross the limit. Front-load the important words so they survive truncation.
What image size should I use?
For the share card, 1200 × 630 pixels (a 1.91:1 ratio) is the safe, widely-supported size and is what the preview assumes. Use an absolute URL (starting with https://) so platforms can fetch it, and keep it under about 5 MB.
Is my data sent anywhere?
No. The tags and previews are generated entirely in your browser as you type. Nothing you enter is uploaded or stored.
How do I use the Meta Tag & Open Graph Generator?
Just pick your options. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Does it cost anything or need an account?
No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.
Is anything I type uploaded?
No. The tool works entirely on your device, so the values you enter never leave your browser.
Common Use Cases
Set up a new page for SEO
Generate the full set of title, description, canonical, and social tags in one place and paste them into the <head>.
Preview a share card before publishing
See exactly how your link will look on Google, Facebook, and Twitter so there are no surprises after you ship.
Fix a bad social preview
Add the missing og:image or og:description that is making your shared links look broken or blank.
Teach or learn meta tags
Watch the generated markup change as you edit each field to understand what every tag does.
Last updated: