Skip to content
motifuse
SEO & Marketing

Meta Tag Generator

Fill in six fields and get copy-ready HTML with title, description, canonical, Open Graph, and Twitter Card tags for any page.

  • Free public tool
  • No sign-up for this tool
  • Processing clearly labeled
  • Instant results

Content last reviewed

Open HTML editor

Monaco loads only after you open the editor.

<!-- Primary Meta Tags -->
<title>motifuse — Free Online Tools</title>
<meta name="title" content="motifuse — Free Online Tools" />
<meta name="description" content="60+ free online tools for developers, writers and creators." />
<link rel="canonical" href="https://motifuse.com" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://motifuse.com" />
<meta property="og:title" content="motifuse — Free Online Tools" />
<meta property="og:description" content="60+ free online tools for developers, writers and creators." />
<meta property="og:image" content="https://motifuse.com/og-image.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://motifuse.com" />
<meta property="twitter:title" content="motifuse — Free Online Tools" />
<meta property="twitter:description" content="60+ free online tools for developers, writers and creators." />
<meta property="twitter:image" content="https://motifuse.com/og-image.png" />
<meta name="twitter:site" content="@motifuse" />
<meta name="twitter:creator" content="@motifuse" />

Quick Start

  1. Fill in the page details

    Enter the title, description, canonical URL, and Open Graph image URL for the page.

  2. Add the optional extras

    Set the OG type (website or article) and your Twitter handle if you want creator attribution.

  3. Copy the HTML

    The complete tag block updates live in the code panel — copy it into your page's head section.

Examples

Generating tags for a blog post

The six fields fan out into the complete block. Output shown as an excerpt — the full block also includes og:type, og:url, twitter:url, and the image tags.

Input

Title: Sourdough Starter Guide — Bakewell Blog · Description: A practical week-by-week guide to starting and feeding a sourdough starter at home. · URL: https://motifuse.com/blog/sourdough-starter

Output

<title>Sourdough Starter Guide — Bakewell Blog</title>
<meta name="description" content="A practical week-by-week guide to starting and feeding a sourdough starter at home." />
<link rel="canonical" href="https://motifuse.com/blog/sourdough-starter" />
<meta property="og:title" content="Sourdough Starter Guide — Bakewell Blog" />
<meta property="twitter:card" content="summary_large_image" />

About the Meta Tag Generator

Every page that gets shared or searched needs the same block of head markup: a title tag, a meta description, a canonical link, Open Graph properties for Facebook and LinkedIn previews, and Twitter Card tags for X. Writing that block by hand means remembering a dozen property names and keeping the same values synchronized across all of them. This generator produces the whole block from six form fields.

You enter each value once — title, description, canonical URL, image URL, Twitter handle, and OG type — and the tool fans them out into every tag that needs them. The title becomes the <title> element plus the og:title and twitter:title properties; the description feeds the standard meta description and both social variants; the image URL populates og:image and twitter:image. The Twitter Card type is set to summary_large_image, the format that renders a full-width preview image, and adding a handle appends twitter:site and twitter:creator tags.

The output updates live in a syntax-highlighted code panel as you type, grouped with comments into primary, Open Graph, and Twitter sections so it stays readable after you paste it. The field labels carry the length guidance that matters — roughly 50–60 characters for titles and 150–160 for descriptions — and everything runs in your browser, so nothing you type is uploaded anywhere.

How to Use Meta Tag Generator

  1. Enter your Title — the field hint suggests 50–60 characters, the range that usually displays without truncation in search results.

  2. Write the Description (aim for 150–160 characters) summarizing what the page offers.

  3. Paste the Canonical URL — the exact, final address of the page — and the OG Image URL, ideally an image around 1200 × 630 pixels.

  4. Optionally add your Twitter handle (like @yourbrand) and set the OG Type — website for most pages, article for posts.

  5. The HTML block in the code panel regenerates with every keystroke. Click Copy and paste the block into the <head> section of your page.

Key Features

  • One input, every tag

    Each value you enter is propagated to all the tags that need it — title and description each feed three tags, so nothing drifts out of sync.

  • Complete tag coverage

    Generates the title tag, meta description, canonical link, five Open Graph properties, and a full Twitter Card block in one output.

  • Live code preview

    The HTML updates in a syntax-highlighted, read-only editor as you type, organized with section comments.

  • Large-image Twitter Cards

    The twitter:card type is set to summary_large_image, which renders the full-width preview on X.

  • Length guidance built in

    Field labels carry the practical targets — 50–60 characters for titles, 150–160 for descriptions.

When to Use Meta Tag Generator

  • New page launches

    Produce the full head markup for a landing page or blog post before it goes live.

  • Fixing bare social previews

    Add Open Graph and Twitter tags to pages whose shared links currently show no image or description.

  • Standardizing a site

    Generate consistent, complete tag blocks page by page instead of hand-copying and editing old markup.

  • Client audits

    Draft corrected metadata for pages with missing descriptions or truncated titles and hand the snippet to the developer.

How It Works

The generator holds your six values in a form and interpolates them into an HTML template every time a field changes. The template covers three groups, each labeled with an HTML comment in the output:

  • Primary meta tags — the <title> element, a meta name="title", the meta description, and a canonical <link>.
  • Open Graph — og:type, og:url, og:title, og:description, and og:image, the properties Facebook, LinkedIn, Slack, and most chat apps read when building link previews.
  • Twitter — the card type (summary_large_image), URL, title, description, and image, plus twitter:site and twitter:creator when you supply a handle.

Because a single field feeds several tags, the generated block is always internally consistent — the title in search results, the Facebook preview, and the X card can never disagree.

Supported Formats and Options

Formats

  • HTML head markup

    A ready-to-paste block of standard meta, link, Open Graph, and Twitter Card tags with section comments.

Options

  • Title and description

    Free-text fields with length guidance in the labels (50–60 and 150–160 characters).

  • Canonical URL and OG image URL

    The page address and the preview image address (1200 × 630 recommended).

  • Twitter handle

    Optional — when filled, twitter:site and twitter:creator tags are added; when empty, they are omitted.

  • OG type

    Free-text field for the og:type value, typically website or article.

Common Errors and Troubleshooting

Common errors

  • A double quote breaks the markup

    Values are inserted into the tag attributes exactly as typed, so a straight double quote inside your title or description ends the attribute early. Use curly quotes (“ ”) or rephrase, and check the code panel — the syntax highlighting makes a broken attribute easy to spot.

  • Shared links still show the old preview

    Social platforms cache link previews aggressively. After updating your tags, re-scrape the URL with the platform's sharing debugger to refresh its cache.

  • The preview image does not appear

    The og:image URL must be absolute, publicly accessible, and not blocked by robots rules or authentication. Platforms cannot render images they cannot fetch.

Troubleshooting guide

When the tags do not behave as expected

  • Google shows a different title or description: search engines rewrite metadata when they judge other text a better match for the query. Accurate, specific tags that match the page content are most likely to be kept.
  • X shows a small card instead of the large image: the tool sets summary_large_image, so a small card usually means the image failed to load or another tag on the page overrides it — check for duplicate twitter:card tags.
  • The canonical seems ignored: canonicals are hints, not commands. Make sure the URL is the exact final address (matching protocol and trailing-slash form) and consistent with your sitemap.
  • Preview looks wrong on one platform only: use that platform's own debugger tool to see what it fetched — a stale cache is the most common cause.

Limitations and Important Notes

The generator covers the common core: title, description, canonical, Open Graph basics, and a Twitter Card. It does not produce article-specific tags (published time, author), multiple images, locale variants, robots directives, or JSON-LD structured data — the Open Graph Preview & Generator handles the extended social tags, and the JSON-LD Schema Generator covers structured data. Values are inserted without HTML escaping, so avoid raw double quotes and angle brackets inside fields. The tool also cannot verify that your image URL is reachable — test the published page with a platform debugger.

Privacy and Data Processing

The form and the generated HTML exist only in your browser. Nothing you type is transmitted to a server or stored — the tool is a client-side template, and closing the tab discards everything.

Tips and Best Practices

Practical tips

  • Keep titles near 50–60 characters and descriptions near 150–160 so they display without truncation.

  • Use a 1200 × 630 pixel image for og:image — it renders well on every major platform.

  • Make the canonical URL the exact final address, matching the protocol and trailing-slash form you use everywhere.

  • Avoid raw double quotes in the title and description fields, since values are inserted unescaped.

  • After publishing, run the URL through the platform sharing debuggers to refresh cached previews.

Best practices

Metadata that survives contact with real platforms

Write the title and description for the reader first: a specific promise of what the page contains beats a keyword list, both for click-through and for surviving Google's rewriting. Put the distinguishing words early — truncation always eats the end.

Treat the image as part of the message. Platforms display it larger than your title, so a legible, relevant 1200 × 630 graphic does more for click-through than any wording tweak. Host it at a stable URL; moving the image breaks cached previews.

After pasting the block, verify rather than assume: view the published page source to confirm the tags are present exactly once (duplicate tags from a CMS template are common), then test the URL in a sharing debugger. Five minutes of verification catches the cache and duplication issues that account for most "my tags don't work" mysteries.

Technical Details

The component is a client-side React form whose six values are interpolated into a fixed HTML template on every keystroke — there is no build step or server call. The output is displayed in a lazily loaded read-only Monaco editor with HTML highlighting. Field values are inserted verbatim without escaping, and the twitter:site/twitter:creator pair is conditionally appended only when a handle is present. The Twitter card type is fixed at summary_large_image.

Comparison

What each field generates

You enterTags produced
Title<title>, meta name="title", og:title, twitter:title
Descriptionmeta name="description", og:description, twitter:description
Canonical URL<link rel="canonical">, og:url, twitter:url
Image URLog:image, twitter:image
Twitter handletwitter:site, twitter:creator (only when filled)
OG typeog:type

Who Is This For?

Developers who know what the tags do but do not want to type them; marketers and content editors preparing metadata to hand to a developer; indie makers launching pages without a CMS that manages head tags; and SEO practitioners drafting corrected markup during audits. If you need previews, validation scores, or article-level tags as well, the Open Graph Preview & Generator is the fuller-featured sibling.

Frequently Asked Questions

Where do I paste the generated code?

Inside the <head> section of the page's HTML, ideally near the top. In frameworks like Next.js or a CMS, use the page's metadata or custom-head facility rather than editing raw HTML.

What is the difference between the meta description and og:description?

The meta description is what search engines show under your result; og:description is what social platforms show under a shared link. This tool fills both from one field so they stay consistent, though you can edit the pasted HTML if you want them to differ.

Why does the tool generate both name="title" and a <title> element?

The <title> element is what browsers and search engines use; the meta name="title" duplicate is read by a few crawlers and services. Including both is harmless and keeps compatibility broad.

Do these tags improve my Google ranking?

The title tag carries modest ranking weight; the description does not, but it strongly influences whether people click your result. The social tags affect how links look when shared, not rankings. Together they mainly improve click-through, which is the point.

What image size should I use for og:image?

1200 × 630 pixels (a 1.91:1 ratio) is the widely recommended size — large enough for full-width cards on X, Facebook, and LinkedIn without cropping surprises. Keep the file under a couple of megabytes so crawlers fetch it quickly.

Can I use this for pages in any language?

Yes — the values are inserted exactly as you type them, so any language works. Just avoid raw double quotes inside fields, because values are not HTML-escaped.

Find this useful? Share it.