Meta Tag Generator
A meta tag generator for link previews: nine fields in, up to fifteen lines of head markup out, with the share card and the search result they make drawn above the fields.
Meta tags
The card and the result it makes
the preview follows the chosen card
How to use
- Type the page's Title. Every box starts empty, the grey text in them is only the shape of an answer, and Copy meta tags waits until the title is yours.
- Put an absolute https link in Preview image URL and say what the picture shows in Image alt text. Make it 1200 by 630 for summary_large_image, or a square of at least 144 by 144 for summary.
- Choose og:type and twitter:card, then add Site name and the @handle if the site has one. The card redraws to the shape you pick: the wide picture on top for summary_large_image, a small square beside the text for summary.
- Untick Include the title tag and the description if your head already has both, press Copy meta tags, and paste the block inside head.
What it writes
Someone pastes your URL into Slack and it either blooms into a card with a picture on it or sits there as a naked link. A dozen or so lines of markup in your head tag decide which, and those lines are all this makes. The block sits at the top, the card and the search result it will make sit right under it, and the boxes come last. Both previews redraw on every keystroke, so copy the block once they look right.
The order of the output is fixed: a title element, a meta description, seven og: properties, then six twitter: names. Fifteen lines when every box is full, with Image alt text written twice, as og:image:alt and twitter:image:alt, and only when there is an image for it to describe. og:type and twitter:card come from dropdowns, so those two are always written, while any text field you leave empty is skipped instead of being emitted with nothing in it. What you do type gets escaped on the way out, so an ampersand in a title arrives as & and a double quote as " rather than closing the attribute halfway through.
Pasting into a head that already has its own title and description? Untick Include the title tag and the description and the block drops those two lines, so you never end up with two of each. The fields also catch what a crawler would trip over while you type: a relative or plain-http image, a page URL without its https://, a space in an address, a handle missing its @. Each is still written exactly as typed, but the field says what is wrong and the card says why its picture is missing. The favicon generator handles the other half of a head block if you would rather finish this in one sitting.
Good to know
- The card is this site's idea of a card rather than Slack's or LinkedIn's, and every platform crops and truncates a little differently. Your picture is loaded straight from the address you typed and cropped the way the chosen card crops it, so that server sees one request from your browser, sent without this page's address; if nothing comes back, the grey block says so. The 60 and 160 counts are estimates as well, because Google trims by pixel width, so a line of wide capitals runs out before the count says it will.
- Scope stops at those fifteen tags. There is no canonical link, no robots directive, no JSON-LD and no image width or height, and choosing article does not bring along the article: tags for author and publish date.
Frequently asked questions
Which tags does it write, exactly?
In this order: a title element, meta name description, then og:type, og:title, og:description, og:url, og:image, og:image:alt and og:site_name, then twitter:card, twitter:title, twitter:description, twitter:image, twitter:image:alt and twitter:site. Fifteen at the outside. og:type and twitter:card always appear because they come from dropdowns; the rest turn up only if you filled the matching box, the two alt lines only beside an image, and the first two only while Include the title tag and the description is ticked.
What size should the preview image be?
1200 by 630 pixels for summary_large_image, the 1.91:1 shape the wide card is cut to. The summary card crops to a square instead, so give it one of at least 144 by 144. Keep either in the hundreds of kilobytes rather than the megabytes, because a slow image often means a card that renders without one. It has to be an absolute https URL, since a crawler has nothing to resolve a relative path against, and the field tells you the moment it sees one.
Why is my card still showing the old title after I deployed?
Every platform caches what it scraped the first time and keeps serving that. LinkedIn has a Post Inspector, X has a card validator, Facebook has the Sharing Debugger, and each of them re-fetches your page and refreshes the stored copy. Until you run one, the old card is what people see.
Why does the counter stop at 60 for a title and 160 for a description?
Google publishes no character limit for either. It trims the title link and the snippet to fit the width of the screen, and around 60 and 160 characters is where a desktop result usually runs out. The counter under each field and the ellipsis in the search result both use those figures, so treat them as a guide: keep the words that matter in the first part and let the rest fall off if it must.
Should I pick website or article?
website for a homepage, a landing page, or anything that is not dated. article for a blog post or a news story. product and profile sit in the dropdown for shop pages and people. The choice changes the og:type line and nothing else, so do not expect the article-specific tags for author and publish date to appear with it.
Does the Twitter handle field mean the author or the site?
The site. It writes twitter:site, which is the account behind the publication. The separate twitter:creator tag, the one that credits an individual author, is not generated here, so add that by hand if your posts carry bylines.
What happens to an ampersand or a quote mark in my title?
They are escaped before they reach the attribute. Ampersand, less-than, greater-than and double quote all become entities, so a title along the lines of Tips & Tricks for "Fast" Sites comes out as valid markup instead of tearing the tag open. Apostrophes are left as they are, which is safe inside a double-quoted attribute.
Do I need Open Graph and Twitter Card tags, or is one set enough?
Both, if you want both to look right. Open Graph is what Facebook, LinkedIn, WhatsApp, Slack and Discord read. X looks for its own twitter: tags first and falls back to og: when they are missing, so in theory you could skip them, though writing both costs you nothing here because they come from the same boxes.
Missing something in Meta Tag Generator? Suggest a feature →
Tell someone who needs this.