Meta tag generator

How it works

The tool assembles the tags in a fixed order: the title element, the description, the canonical link, the Open Graph tags, then the Twitter card tags. Open Graph and Twitter tags repeat the title, description and image under different attribute names because each service reads a different set. Attribute values are escaped, so an ampersand becomes & and a double quote becomes ", which keeps the block valid HTML. The two counters show the title and description lengths against 60 and 160 characters, the usual display lengths in search results; going over them is allowed but may be truncated. Optional fields are skipped when left empty, so a page with no image simply gets no image tags. Everything is produced in the browser as text.

Worked example

With the title "Blue mug — Stacklane" (20 characters), the description "A 350 ml ceramic mug." (21 characters), the URL https://YOURDOMAIN.com/mug.html, the image https://YOURDOMAIN.com/mug.png and the site name Stacklane, the tool prints thirteen lines. The first three are <title>Blue mug — Stacklane</title>, then <meta name="description" content="A 350 ml ceramic mug.">, then <link rel="canonical" href="https://YOURDOMAIN.com/mug.html">. The block ends with the Twitter card and image tags for the same page.

Questions and answers