The head of a page holds a few lines that decide how it looks in a search result and in a shared link: the title, the description, the canonical address, and the Open Graph and X card tags. They are easy to write and easy to get wrong in ways that do not show up on the page. A quote in a title ends the attribute early. A description is cut in the middle of a sentence. The image address has no host. Two plugins write the same tag. Most generators fill a template and give you the text, and say nothing about whether the text will work.
This page writes the tags and then reads them back the way a crawler would. As you type it shows how wide the title and the description are, in pixels, because that is how Google cuts them, and it lists what is wrong or missing in the tags it wrote, using the same checks as the Open Graph, X card, and canonical pages on this site. Everything is done in your browser, and the code behind the page makes no network requests, so a draft that is not public yet stays on your device.
How to use the Meta Tag Generator: Title, Description, Open Graph, X Card
- Write the title and the descriptionType them in the first section. The bars under the boxes show how much of the width that Google shows on a computer you have used, and they turn orange when the text is likely to be cut. The width is estimated for the font that Google uses, so treat it as a guide.
- Add the address and the languageGive the full address of the page as the canonical, with https:// and the host, and the language of the page. The canonical is also used for og:url, so that the two agree, which is what the sharing sites expect.
- Choose what to write for sharingLeave Open Graph on if people will share the page on Facebook, LinkedIn, Slack, or WhatsApp, and give a full address for the image, with its size. Leave the X card on for X. The title and description are used for both, unless you write another one for sharing.
- Copy the tags and read the notesCopy the tags into the head of your page, and put the language on the html tag. The notes under the tags say what is wrong, what is missing, and what does nothing. Check the pages that share on the Open Graph and X card pages of this site before you publish.
What each tag does
The title tag is the text of the page in a browser tab, and the first line of a search result. The description tag is a summary, and Google may use it as the text under the title. Google writes its own snippet when it thinks that another part of the page answers the search better, so a description is a suggestion, and a good one is still worth writing. The canonical link names the address of the page that you want found, which matters when the same page can be reached at more than one address.
The robots tag tells search engines what they may do. Without it a crawler may index the page and follow its links, so the page writes the tag only when you ask for something else: noindex to keep the page out of results, nofollow for its links, and max-image-preview:large, which Google documents as what lets a large image be shown in some places, such as Discover. The viewport tag makes a page fit a phone, and the character set tag says that the text is UTF-8. The theme colour is the colour that some mobile browsers use for the bar around the page.
Width in pixels, not only characters
Google does not cut a title at a number of characters. It cuts it when it does not fit in the space of the result, which is a width in pixels, so a title of capital letters and wide letters is cut sooner than the same number of narrow ones. The widely used figure for a computer is about 600 pixels for the title and about 920 for the description, and the page measures your text against them, with the font sizes that those figures are given for. The measure is an estimate that is good to a few percent, and it is not a promise. Google changes how it shows results, and it can show more or less on a phone.
The page does not say that a title has to be short. It says when the title is likely to be cut, and leaves the choice to you. Put the words that matter most at the start, because they are the ones that are always shown. The Search result preview page on this site shows a title and a description as a result, on a computer and on a phone, and checks lists of them.
Open Graph and X cards
The Open Graph tags are what Facebook, LinkedIn, WhatsApp, Slack, and many other sites read to make a card from a link. The protocol requires a title, a type, an image, and an address, and the page writes the type as website unless you choose another, the address from the canonical, and the title and description from the page unless you write others. A card for an article, for example, can have a shorter title than the page has. The image has to be a full address, and its width and height are written so that the image loads the first time a link is shared.
X reads its own twitter: tags first, and the Open Graph tags where it finds none. So the page writes only the card type and the accounts as twitter: tags, and leaves the title, the description, and the image to the Open Graph tags. This is the way that the X documentation describes the fallback, and it avoids writing the same text twice, where one copy can get out of date. If you want X to show something else, add the twitter:title or twitter:image tag yourself.
Why the quotes matter
A tag is text with quotes around the value. If the value has a quote in it, such as 5" pipes, the tag ends early and everything after it is lost or read as something else. An ampersand is the start of a character reference, so a value that has & in it as text is read as an ampersand if it is not written as &. The page writes every value as the HTML standard asks: the ampersand, the double quote, and the angle brackets become character references, and a title in the title tag gets the same for the ampersand and the angle brackets. Line breaks and runs of spaces in a title or a description become one space, which is how every reader treats them.
This is tested with a parser that follows the standard. Every title, description, address, and name that goes in comes out of the parser exactly as it was typed, including quotes, ampersands, angle brackets, entities written as text, emoji, and text in other alphabets.
What the checks say
After the tags are written, the page reads them with the checkers of the Open Graph, X card, and canonical pages on this site, and shows what they find, in one list: an image address that is not absolute, an image that is an SVG, an og:url that is different from the canonical, a title that X will cut at 70 characters, and so on. It does not repeat what it already says in simpler words, such as that the title is missing.
Some of the tags that it can write do nothing in Google Search, and the page says so. The keywords tag is the best known. Google has said that it does not use it, and it is written only if you ask. The robots tag is written only when it asks for something that is not the default. A noindex is shown as a warning, because a page that is not indexed cannot be found in search, which is what many people do not mean when they copy a tag from another page.
How it was tested
400 pages were generated from random settings with text that is hard to write safely: quotes, apostrophes, ampersands, angle brackets, a closing title tag in the text, entities written as text, comments, line breaks, tabs, runs of spaces, accents, Chinese text, and emoji, with settings both on and off. Each page was read by html5lib, a parser that follows the HTML standard, and 4,173 meta tags, all of the titles, canonical links, and languages came back with the value that had been typed, with nothing in the wrong place and nothing written twice.
The tags were also read with the page's own reader. The complete example was checked to have no error and no warning from the three checkers on this site. The pixel widths use the same font measures as the Search result preview page, and they are estimates. The tags were not shown to Google, Facebook, or X, and how they use them was not tested.
Limits and accuracy
- The page writes tags and checks them. It does not check the page that they go in, so a title that is the same on every page, or a description that does not match the content, is not found.
- The width of the title and the description is an estimate for the font that Google uses on a computer, and results change. Google also writes its own title and snippet when it thinks that they are better.
- Only the tags that are documented and useful are written. Tags for specific products, such as the tags of an app, a video, or an article's authors and dates, are not, and the Open Graph checker on this site can check the ones that you add.
- The Open Graph and X card checks are the rules of the protocol and of what Meta, LinkedIn, and X document. The platforms keep what they have read, so after a change you have to ask them to read the page again.
- The page writes the language for you to put on the html tag, and does not write the tag, because it is part of the page and not of the head.
- Nothing you type is saved, so copy the tags before you close the page.
Frequently asked questions
What meta tags does a page need?
A title, a description, a viewport tag, and the character set are the basics. Add a canonical link for the address you want found, and Open Graph tags if people will share the page. A robots tag is needed only to ask for something else than the default.
How long should a title and a description be?
Google cuts them by width, not by characters. About 600 pixels for the title and about 920 pixels for the description is the usual figure on a computer. This page shows a bar for each, which turns orange when the text is likely to be cut.
Do I need the keywords meta tag?
No. Google has said that it does not use it, and it does nothing for ranking in Google Search. The page writes it only if you ask, and tells you that it has no effect.
Do I need both Open Graph and twitter tags?
Not for the text. X reads the Open Graph title, description, and image when it finds no twitter: tags for them. You need twitter:card to choose the kind of card, and you can add twitter:site for your account.
Why is my description not shown in Google?
Google writes its own snippet when it thinks that another part of the page answers the search better. A description is a suggestion. A good one that matches the content of the page is used more often.
What does max-image-preview:large do?
It lets Google show a large image from your page in some places, such as Discover. It is the one robots setting that is written by default on this page, and you can turn it off.
Where do I put the tags?
Between the head tags of the page, and before anything that is not a head element, such as an image or a div, because a browser ends the head at the first such element and treats the rest as body. The canonical link checker on this site shows when that has happened.
Is what I type uploaded?
No. The tags are written and checked in your browser, and the code behind the page makes no network requests. Nothing is saved.
Research and references
This page was written and checked against the sources below.
