What meta tags are
Meta tags are invisible markers that sit inside the <head> of a page and tell Google, Facebook, and X (Twitter) what your content is about. The browser never draws them, but search engines and social networks read them to decide which title to show in results and which card to display when someone shares your link.
Writing them by hand is tedious and easy to break: a single stray quote in the title can cut an attribute in half. This generator takes your details from a form and produces the full block — classic SEO, Open Graph, and Twitter Card — with every character safely escaped, ready to copy and paste.
How to use the generator
- Type the title and description. The counters warn you when you go past the recommended limits.
- Add the canonical URL, the image for social cards, and the author (all optional).
- Pick the content type (
og:type) and the Twitter card style. - Copy the generated block and paste it inside the
<head>of your HTML.
Everything happens in your browser: neither your text nor your URLs leave your device.
The three layers of tags
The block combines three families that serve different jobs. Keep them consistent with each other (same title, same description) so you never confuse the crawlers.
| Layer | Key tags | Who reads it |
|---|---|---|
| Core SEO | title, meta description, link canonical | Google, Bing |
| Open Graph | og:title, og:description, og:image, og:url, og:type | Facebook, WhatsApp, LinkedIn |
| Twitter Card | twitter:card, twitter:title, twitter:description, twitter:image | X (Twitter) |
Recommended lengths
- Title: up to 60 characters. Google trims results around that point, so a longer title shows up with an ellipsis.
- Description: up to 160 characters. It is the grey text under the link in the results; anything longer gets truncated by the search engine.
These are guidelines, not laws: a 62-character title is not a penalty, but you risk losing the important part to a cut.
Worked example
Imagine a blog post with these details:
- Title:
Coffee & Tea: the "ultimate" guide(34 characters) - Description:
Learn to brew coffee and tea at home with simple methods.(57 characters) - URL:
https://example.com/coffee-and-tea - Image:
https://example.com/img/coffee.jpg - Author:
Maria Lopez, typearticle, large-image card
Notice the title contains an & and a pair of double quotes. The generator turns them into & and " so they never break the HTML. The resulting block is:
<title>Coffee & Tea: the "ultimate" guide</title>
<meta name="description" content="Learn to brew coffee and tea at home with simple methods." />
<meta name="author" content="Maria Lopez" />
<link rel="canonical" href="https://example.com/coffee-and-tea" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Coffee & Tea: the "ultimate" guide" />
<meta property="og:description" content="Learn to brew coffee and tea at home with simple methods." />
<meta property="og:url" content="https://example.com/coffee-and-tea" />
<meta property="og:image" content="https://example.com/img/coffee.jpg" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Coffee & Tea: the "ultimate" guide" />
<meta name="twitter:description" content="Learn to brew coffee and tea at home with simple methods." />
<meta name="twitter:image" content="https://example.com/img/coffee.jpg" />Paste that block as-is into your <head> and the page is ready for search engines and social networks.
Frequently asked questions
Why are the quotes and the & sign escaped?
Because the values live inside attributes wrapped in double quotes. If your title has an unescaped double quote, the browser thinks the attribute ends there and misreads the rest. Turning " into ", & into &, and the < > signs into < > guarantees the text is read as text, not as code.
Do I really need Open Graph and Twitter tags?
If you care how your link looks when it is shared, yes. Without og:image or og:title, apps like WhatsApp and LinkedIn show a bare, image-less preview. Twitter can reuse the Open Graph tags, but declaring twitter:card gives you control over whether the card uses a large image or a compact summary.
What size should the og:image be?
The standard recommendation is 1200 × 630 pixels (a 1.91:1 ratio) for the large-image card. Use an absolute, publicly reachable URL; relative paths do not work because the networks fetch the image from their own servers.
What is the canonical tag for?
link rel="canonical" tells the search engine which URL is the official one when several versions of the same content exist (with query parameters, with or without a trailing slash, and so on). It stops Google from splitting relevance across duplicates and consolidates everything into a single address.
Should the tab title and og:title be identical?
They can be, and this tool keeps them the same by default for simplicity. Even so, some publishers prefer a catchier og:title for social and a more search-optimised title. If that is your case, edit the block by hand after copying it.