This meta tag generator turns a short form into the tags that sit in the head of a page and tell search engines and social platforms what to show for it: the title, the description and the preview image. It escapes quotes, ampersands and angle brackets in your entries so they can't break the HTML, and it runs in your browser.
How to generate meta tags
- On the Basic SEO tab, fill in Page Title and Meta Description. The counters show 0 / 70 and 0 / 160 and change colour as you get close to the limit.
- Add Keywords, Author and Canonical URL if you want those tags, and pick a Robots Directive.
- Open the Social / OG tab to set OG Title, OG Description, OG Image URL and OG URL, choose a Twitter Card Type and, if you have one, a Twitter Site Handle.
- Press Generate Meta Tags, then Copy Tags.
- Paste the block inside the head of your page, before the closing
</head>tag.
What each field in the meta tag generator writes
| Field | Tag in the output | Notes |
|---|---|---|
| Page Title | <title> | Counter turns amber at 60 characters and red above 70 |
| Meta Description | meta name="description" | Amber at 137, red above 160 |
| Keywords | meta name="keywords" | Written only if you fill it in |
| Author | meta name="author" | Optional |
| Canonical URL | link rel="canonical" | Also used as og:url if OG URL is empty |
| Robots Directive | meta name="robots" | Always written; four index and follow combinations |
| OG fields | og:title, og:description, og:image, og:url | Fall back to the title, description and canonical URL |
| Twitter Card Type | twitter:card | summary_large_image or summary |
The output always includes a charset tag, a viewport tag and og:type set to website. The twitter: title, description and image reuse the OG values, so you only type them once.
Why Open Graph tags matter
Without Open Graph tags, Facebook's crawler makes a best guess at the title, description and preview image for a shared link. If you leave the OG fields empty, the generator reuses your page title, meta description and canonical URL, so every shared link gets a headline, and a preview image once you add an image URL. The guide Open Graph tags explained covers each property in more detail.
Example output
With a title of "Cold Brew & Iced Coffee Ratios", a one-line description, a canonical URL and an image, and the Social / OG title and description left empty, the meta tag generator returns:
<!-- SEO Meta Tags generated by InDemand Tools -->
<title>Cold Brew & Iced Coffee Ratios</title>
<meta name="description" content="Coffee-to-water ratios for cold brew and iced coffee, by the cup and by the jar.">
<link rel="canonical" href="https://example.com/cold-brew-ratios">
<meta name="robots" content="index, follow">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Open Graph / Social Media -->
<meta property="og:type" content="website">
<meta property="og:title" content="Cold Brew & Iced Coffee Ratios">
<meta property="og:description" content="Coffee-to-water ratios for cold brew and iced coffee, by the cup and by the jar.">
<meta property="og:image" content="https://example.com/img/cold-brew.jpg">
<meta property="og:url" content="https://example.com/cold-brew-ratios">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Cold Brew & Iced Coffee Ratios">
<meta name="twitter:description" content="Coffee-to-water ratios for cold brew and iced coffee, by the cup and by the jar.">
<meta name="twitter:image" content="https://example.com/img/cold-brew.jpg">The ampersand in the title became &, which is how it has to appear inside HTML. Leaving OG Title and OG Description empty made the tool copy the page title and description into the og: and twitter: tags.
Tips before you paste the tags
- I put the primary keyword near the start of the title. Google cuts long title links to fit the screen, so the first words are the ones most likely to be seen.
- Move
<meta charset="UTF-8">to the top of the head. HTML requires the encoding declaration within the first 1,024 bytes of the page, and the generator places it after the title and description. - Change
og:typefrom website to article on blog posts, since the tool always writes website. - If your CMS or an SEO plugin already writes a title or description, delete the duplicates so the page has one of each.
The form works as a simple SEO meta tags generator and meta tag builder for pages that have no plugin doing the job. To check how the title and description will look as a search result, paste them into the SERP preview tool; once the page is live, the Open Graph checker reads the tags back from the URL. The guide to writing title tags that get clicked has examples, and the other SEO tools cover structured data, robots.txt and sitemaps.
