CodesBeautify

Meta Tag Generator

Generate the title, description, canonical, Open Graph and Twitter Card tags for a page, ready to paste into the head.

HTML meta tagsGenerated
<title>Trail Kettle 1.2L: Titanium Camping Kettle</title>
<meta name="description" content="A 118 g titanium kettle that boils 1.2 litres in four minutes. Free shipping in the EU.">
<link rel="canonical" href="https://example.com/products/trail-kettle">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta property="og:type" content="website">
<meta property="og:title" content="Trail Kettle 1.2L: Titanium Camping Kettle">
<meta property="og:description" content="A 118 g titanium kettle that boils 1.2 litres in four minutes. Free shipping in the EU.">
<meta property="og:url" content="https://example.com/products/trail-kettle">
<meta property="og:image" content="https://example.com/images/trail-kettle-og.jpg">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Trail Kettle 1.2L: Titanium Camping Kettle">
<meta name="twitter:description" content="A 118 g titanium kettle that boils 1.2 litres in four minutes. Free shipping in the EU.">
<meta name="twitter:image" content="https://example.com/images/trail-kettle-og.jpg">
Runs locally in your browser

About the Meta Tag Generator

A page needs a consistent set of meta tags so that search results, link previews on social networks and messaging apps all show the right title, description and image. This generator produces that set from four values: the title tag, meta description, canonical link, viewport, and the matching Open Graph and Twitter Card tags, with an optional robots directive. Values are HTML-escaped so quotes and ampersands cannot break the markup.

Keep the title under about 60 characters and the description under 155 so they are not cut off in results. The image should be at least 1200 by 630 pixels for a large preview card. Paste the output into the <head> of the page. To verify the markup, the HTML Validator checks it, and the HTML Viewer shows a page using it.

How to use

  1. Enter the title, description, canonical URL and image.
  2. Copy the generated tags.
  3. Paste them into the head of your page.

Common questions

How long should the title and description be?
About 60 characters for the title and 155 for the description to avoid truncation in results.
What image size works for previews?
At least 1200 by 630 pixels for a large card on Twitter, Facebook and messaging apps.
Are the values escaped?
Yes. Quotes, ampersands and angle brackets are converted to entities.