# Meta tag generator

> Generate HTML meta tags for a page: title, description, canonical, Open Graph and Twitter cards, with a preview. Copy the tags. Free, in your browser.

Canonical: https://toolspace.tech/meta-tag-generator/
Last updated: 2026-10-25

Fill in a page’s title, description, link and image to get the HTML meta tags for it: the basics, Open Graph and Twitter cards. A rough search-result and social-card preview updates as you type, all in your browser.

This is an interactive tool that runs in the browser: [open the Meta tag generator](https://toolspace.tech/meta-tag-generator/) to use it. Nothing typed into it is uploaded.

## Worked example

An article page with a share image. Description, canonical URL and image go into the basic tags, Open Graph and Twitter cards.

**fields**

```
title: Sourdough starter in 7 days
description: How to make a sourdough starter from flour & water, with a day-by-day feeding schedule.
url: https://example.com/sourdough-starter
siteName: Example Kitchen
image: https://example.com/img/starter.jpg
imageAlt: A jar of bubbly sourdough starter
type: article
twitterSite: @examplekitchen
```

**html**

```
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough starter in 7 days</title>
<meta name="description" content="How to make a sourdough starter from flour &amp; water, with a day-by-day feeding schedule.">
<link rel="canonical" href="https://example.com/sourdough-starter">

<meta property="og:type" content="article">
<meta property="og:title" content="Sourdough starter in 7 days">
<meta property="og:description" content="How to make a sourdough starter from flour &amp; water, with a day-by-day feeding schedule.">
<meta property="og:url" content="https://example.com/sourdough-starter">
<meta property="og:site_name" content="Example Kitchen">
<meta property="og:image" content="https://example.com/img/starter.jpg">
<meta property="og:image:alt" content="A jar of bubbly sourdough starter">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplekitchen">
<meta name="twitter:title" content="Sourdough starter in 7 days">
<meta name="twitter:description" content="How to make a sourdough starter from flour &amp; water, with a day-by-day feeding schedule.">
<meta name="twitter:image" content="https://example.com/img/starter.jpg">
<meta name="twitter:image:alt" content="A jar of bubbly sourdough starter">
```

The & in the description is written as &amp;, so the HTML stays valid.

## Common mistakes

### Relative image URLs

og:image="/card.png" usually shows no image. Preview builders need the full https:// address.

### The same title on every page

Each page needs its own title and description; copying one set across a site makes pages hard to tell apart in results and shares.

### Unescaped quotes

A " inside content="…" ends the attribute early and breaks the tag. Escape it as &quot; (this tool does it for you).

### A leftover noindex

A noindex tag copied from a staging site keeps the live page out of search results. Check the robots tag before you publish.

## How it works

1. **Describe the page:** Enter the title, a one- or two-sentence description, the canonical URL and, if you have one, a share image URL with alt text.
2. **Check the lengths and previews:** The counters show roughly how much text search results and social cards tend to show before cutting it off. The previews are drawn locally; the image URL is never loaded.
3. **Copy the tags into `<head>`:** Copy them or download an .html snippet. Every value is HTML-escaped, so quotes and ampersands in your text are safe.

## Questions

### What’s the difference between og: and twitter: tags?

Open Graph (og:) tags were created by Facebook and are read by most sites that build link previews. X (Twitter) reads its own twitter: tags and falls back to Open Graph for title, description and image when they’re missing. Including both is common and harmless.

### How long should a title or description be?

There’s no fixed limit: search results and social cards cut text by its width on screen, which depends on the device and font. About 50–60 characters for a title and 150–160 for a description are common guides for what tends to be shown in full.

### Why should the image URL be absolute?

Sites that fetch your page to build a preview don’t resolve relative paths like /img/card.png. Use the full https:// URL.

### What does the robots meta tag do?

noindex asks search engines not to list the page; nofollow asks them not to follow its links. When both are allowed (index, follow), the tag isn’t needed, so it’s left out.

### Does this page fetch my URL or image?

No. Nothing is fetched or sent anywhere: the previews are drawn from the text you type, and the image appears as a placeholder showing its URL.

## Related

- [Robots.txt generator](https://toolspace.tech/robots-txt-generator/)
- [HTML entity encoder](https://toolspace.tech/html-entity-encoder/)
- [Slug generator](https://toolspace.tech/slug-generator/)
- [URL encoder](https://toolspace.tech/url-encoder-decoder/)