Project 91, SEO and site tools
Meta Tag Generator
Write the tags that decide how your page looks in search results and when it is shared. The previews update as you type, so you can see what people will see.
- Main API
- Canvas measureText
- Output
- HTML meta tags
- Dependencies
- None
- Your browser
- Checking
Write your tags
Fill in the fields. Watch the length bars, the search preview and the share card. Copy the tags when they look right.
N
How it works
- Measure in pixelsSearch engines cut titles by width, not letters. Canvas measureText measures the text in the same font size to warn you before it gets cut.
- Preview both placesThe search result and the share card update as you type, using the same truncation rules.
- Write clean tagsValues are escaped for HTML, the image tag only appears when there is an image, and the robots tag follows your noindex choice.
const ctx = document.createElement("canvas").getContext("2d");
ctx.font = "20px Arial";
const tooLong = ctx.measureText(title).width > 580; // about where results cut off
const tags = `
<title>${title}</title>
<meta name="description" content="${description}">
<meta property="og:title" content="${title}">
<meta property="og:image" content="${image}">
<meta name="twitter:card" content="summary_large_image">`;