Meta tag generator
Fill in your page details and copy ready-to-paste HTML for the head: title, description, canonical, robots, Open Graph and Twitter card tags.
Runs entirely in your browser
Empty fields are left out of the output. The previews are mock-ups drawn from your text; they never load your image address, and real search and social sites will format things their own way.
How to generate meta tags
- Enter the page title and description. The counters give a rough guide to how much of each is usually shown.
- Add a canonical address, robots choices, and the Open Graph and Twitter fields you need. Warnings flag addresses that are not full
https://URLs. - Check the search and social mock-ups, then press Copy HTML and paste the tags inside your page's
<head>.
What each tag is for
The <title> and meta description are what a search result is usually built from. The canonical link tells search engines which address is the main one when the same page can be reached several ways, such as with tracking parameters. The robots tag is only needed when you want to change the default of indexing the page and following its links.
Open Graph tags were introduced for link previews and are now read by most chat apps and social sites. The title, description, image and URL are the four that matter most; og:image:alt gives the picture a text description, and og:type is usually website or article. The X card tag chooses between a small square thumbnail (summary) and a wide image (summary_large_image).
The text is escaped as it is written, so an ampersand becomes & and a double quote becomes ". That keeps the page valid and stops stray quotes from ending an attribute early. Check the finished page with a real sharing preview before relying on it, because each site caches the preview it first fetched.
Tips
- Count characters more precisely with the Character counter.
- Make a clean address for the canonical URL with Text to slug.
- Tidy the head you paste into with the HTML formatter.
Questions
How long should a title or description be?
There is no fixed limit. Search engines cut text by pixel width, not by characters, and they may rewrite it. As a rough guide, titles of about 50 to 60 characters and descriptions of about 150 to 160 characters usually show in full. The counters here are guidance, not rules.
Do I need both Open Graph and Twitter tags?
Often only Open Graph. X (Twitter) reads the Open Graph title, description and image when its own tags are missing, but it still wants twitter:card to choose the card layout. Add twitter:site if you want the account credited.
Why must og:image be a full address?
Social sites fetch the image from their own servers, so a relative path such as /img/card.png has nothing to resolve against. Use an absolute https:// URL. A common card size is 1200 by 630 pixels.
What does the robots choice do?
noindex asks search engines not to list the page, and nofollow asks them not to follow its links. The default for a page with no robots tag is index and follow, so choosing both of those writes no tag at all.
Are special characters escaped?
Yes. Ampersands, angle brackets and double quotes in your text are converted to HTML entities, so a title like Q&A "live" cannot break out of its attribute or add markup to the page.
Is anything sent to a server, or is my image loaded?
No. The tags are built in your browser and the image address is only printed as text in the social mock-up, never requested. Social sites will fetch it later when someone shares the page.