Meta tags generator — SEO, Open Graph and X card tags in one block

How to use the meta tags generator

1. Enter the page Title (up to 120 characters) and Description. Line breaks in the description are folded into single spaces.
2. Add the Canonical URL, the Share image URL with its Image width and Image height (1200×630 by default), the Site name and your X / Twitter handle. The @ is added if you leave it out.
3. Choose og:type (website, article, product or profile), the Locale (such as en_GB) and Robots.
4. Pick a Theme colour for mobile browser toolbars.
5. Copy the HTML for <head>, or download it as meta-tags.html, and check the preview and any warnings.

What it does and when to use it

When a link is shared in chat apps or on social media, the preview card comes from the page’s Open Graph and X card tags. Search engines read the title, description, canonical link and robots tag. This tool writes all of them together, so the values stay the same across every tag.

Optional fields you leave empty are skipped: no image gives no og:image or twitter:image lines. For a single-purpose version, see the meta tag generator or the Open Graph tag generator. The slugify tool helps you build a clean canonical URL.

How it works

Every value is HTML-escaped (&, <, >, " and ') before it goes into an attribute, so a quote in a title cannot break the markup. The output always starts with <meta charset="utf-8"> and the standard viewport tag. Lengths are counted in characters (code points), not bytes. The preview mimics a search result line using the host name from your canonical URL. It all runs in your browser, and no URL is fetched or checked.

Worked examples

A title with an ampersand and a description with quotes, plus a canonical URL and no image:

<title>A &amp; B</title>
<meta name="description" content="Say &quot;hi&quot;">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://x.io/">
<meta name="twitter:card" content="summary">

With the default image filled in, the X block switches to <meta name="twitter:card" content="summary_large_image">, and og:image:width and og:image:height are added.

A 69-character title gives the warning: The title is 69 characters; search results usually show about 50–60. An empty description adds: Add a description — it is used in search snippets and link previews.

Limits and tips

• No live check. The tool does not fetch your URL or image. After you deploy, test the real page with each platform’s own preview debugger.
• An empty description is left out. The description, og:description and twitter:description lines are skipped, and a warning reminds you to add one.
• Theme colour is always included, because the field always has a value. Remove the line if you do not want it.
• noindex needs crawling. A page blocked in robots.txt cannot be crawled, so search engines never see its noindex tag.