Meta tags generator

Title, description and Open Graph at the right lengths. Free, no upload. 1 GB max · Up to 1 GB · Processed locally, never sent to a server.

The tags that decide how a page looks anywhere other than on the page itself come to about ten lines, always the same ones, and they never survive being typed from memory. This tool asks for five pieces of information — title, description, canonical address, share image, site name — and assembles the matching block as you type, ready to paste into the head of the document.

The code produced holds the title, the meta description, the canonical link, the viewport tag, the Open Graph properties og:title, og:description, og:url, og:image, og:site_name and og:type, plus the Twitter card. Lines that correspond to a field you left empty are simply left out; viewport, og:type and twitter:card are written in every case.

Two gauges follow what you type, one capped at 60 characters for the title, the other at 160 for the description, green while the limit holds and red past it. Unlike the page audit, nothing goes over the network here: the address you supply is copied into the tags, never visited.

How to use it

  1. Write the page title The gauge under the field shows the length reached out of 60 and turns red past it. The same text feeds both the title tag and the og:title property.
  2. Write the meta description The three-line box is counted against 160 characters. It serves as meta description and as og:description at once, without needing to be typed twice.
  3. Fill in the canonical address This URL produces two lines: the canonical link, which names the reference version of the page, and og:url, which fixes the address carried over when the page is shared.
  4. Add the image and the site name The share image becomes og:image; its mere presence flips the Twitter card from "summary" to "summary_large_image", that is, from a square thumbnail to a wide visual.
  5. Copy the code you get The "Copy the code" button puts the block on the clipboard. It goes into the head of the document, replacing the existing tags rather than sitting alongside them, so nothing ends up duplicated.

Useful lengths: pixels before characters

Google does not cut titles at a number of characters but at a display width. On desktop the title container measures somewhere around 580 to 600 pixels, the description around 920 to 960 pixels spread over two lines; on mobile the description gets more lines to work with. A proportional typeface makes the equivalence approximate: a run of i and l fits inside the frame with room to spare, a run of M and W is cut far sooner, and capitals burn through the budget faster.

The 60 and 160 character thresholds used by the gauges match the zone where truncation becomes likely for ordinary English prose. Going past them breaks nothing: the end of the sentence is replaced by an ellipsis. The practical consequence is to put the distinctive information first and the brand and qualifiers last, then check that the title still makes sense once it has been clipped.

Open Graph and Twitter cards

Open Graph is a protocol introduced by Facebook in 2010 and picked up since by most platforms that display a link preview: LinkedIn, WhatsApp, Slack, Discord, messaging apps. Without these tags, each platform improvises from the content of the page, with results that vary. With them, the preview is the one you wrote. The image has to be given as an absolute address, protocol included, or it will not be fetched, and a format close to 1200 by 630 pixels suits most displays.

The twitter:card property tells X which kind of thumbnail is wanted. The tool writes "summary" when no image is supplied and "summary_large_image" as soon as there is one. The twitter:title and twitter:description properties are not generated, and that is deliberate: in their absence the platform falls back on the equivalent Open Graph tags. Since previews are cached, a change of tag does not show up straight away; each network has a debugging tool that forces a fresh read.

What Google actually does with these tags

The description is not taken as written. Google frequently replaces it with an extract from the page that matches the query typed, and its documentation acknowledges as much: what you write is a proposal, kept mainly when the page lends itself poorly to automatic extraction. The title on display can be rewritten too, a behaviour in place since 2021, drawing on the H1, the anchor text of links pointing at the page, or the name of the site.

The canonical link is a signal, not an order: the engine can settle on a different address if it judges the same content to exist elsewhere. The viewport tag, on the other hand, is written by the tool every time, because indexing is done on the mobile version. No keywords tag is produced: general search engines stopped paying attention to it long ago.

What the generated block does not contain

The tool opens none of the addresses you enter: it checks neither that the canonical page exists nor that the share image loads. It also produces no robots directive, no hreflang tags for a multilingual site, no structured data in JSON-LD format, and none of the article-specific Open Graph properties such as publication date or author. Those depend far too much on context to be inferred from five fields. Quotation marks, apostrophes and ampersands that you type are, on the other hand, converted into entities, so the code stays valid once it is pasted.

Frequently asked questions

Why does the title gauge stop at 60?

Because that is the point past which truncation becomes likely in ordinary English. The real cut is made on pixel width; the gauge gives a readable approximation while you type.

My description does not appear the way I wrote it

That is the most common case. Google often builds the snippet from the passage of the page that answers the query. A carefully written description still earns its keep for shares and for brand searches.

Should I add twitter:title and twitter:description?

No, X uses the Open Graph properties when the twitter equivalents are missing. The block generated here is enough, and adding both would only double the maintenance whenever a title changes.

Can I give the share image as a relative path?

No. The og:image property has to be an absolute address, because the platform showing the preview downloads the image from its own servers, with no knowledge of the context of the original page.

Why does the viewport tag appear even with nothing filled in?

It depends on no field and is still missing from plenty of older pages. Without it, a phone renders the page at desktop width and then shrinks it, which degrades the mobile display.

Will an apostrophe or an ampersand in the title break the code?

No, those characters are converted into HTML entities as the block is generated. The attribute stays properly delimited and the block can be pasted without any touching up.

Does the tool show what my page will look like in Google results or on Facebook?

No, there is no rendered snippet and no card mock-up here. What follows your typing is two length gauges, one capped at 60 characters for the title and one at 160 for the description, green while the limit holds and red past it. Those thresholds stand in for a display width, since Google cuts on pixels — around 580 to 600 for the title container on desktop — and each network offers its own debugging tool for checking the real preview once the tags are published.

Which Open Graph and Twitter card tags does it write?

og:title, og:description, og:url, og:image, og:site_name and og:type, plus twitter:card, alongside the title tag, the meta description, the canonical link and the viewport tag. Lines matching a field you left empty are simply left out, while viewport, og:type and twitter:card are written in every case. The card type follows the image: "summary" when none is supplied, "summary_large_image" as soon as there is one.

Can I paste my page URL and have the tool read the tags already on it?

No, the tool reads nothing. It opens none of the addresses you enter: the canonical URL is copied into the tags without ever being visited, and the share image is never fetched to check that it loads, so the five fields you fill in are the whole source of the block. Verify both addresses yourself before publishing, and note that no robots directive, no hreflang tags and no JSON-LD structured data are produced here.

Similar tools

Discover other tools

Categories