ToolsGiver

Developer

Meta Tag Generator

Build the full <head>: basic meta, Open Graph, Twitter Cards, favicon, theme color. HTML-escaped, length-warned. Free, no signup.

Paste this in your <head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Set <html lang="en"> on your <html> element too -->
<title>Free browser-based tools, no signup</title>
<meta name="description" content="100% client-side tools for PDF, images, code, design, and everyday math. No upload, no daily limit, no watermark.">
<meta name="robots"      content="index, follow">
<meta name="theme-color" content="#c14a2c">
<link rel="canonical" href="https://toolsgiver.com">
<link rel="icon" href="/favicon.ico">

<!-- Open Graph (Facebook, LinkedIn, Slack, Discord, iMessage) -->
<meta property="og:type"        content="website">
<meta property="og:url"         content="https://toolsgiver.com">
<meta property="og:site_name"   content="ToolsGiver">
<meta property="og:title"       content="Free browser-based tools, no signup">
<meta property="og:description" content="100% client-side tools for PDF, images, code, design, and everyday math. No upload, no daily limit, no watermark.">
<meta property="og:image"       content="https://toolsgiver.com/og.png">
<meta property="og:image:width"  content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale"      content="en">

<!-- Twitter / X Cards -->
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:title"       content="Free browser-based tools, no signup">
<meta name="twitter:description" content="100% client-side tools for PDF, images, code, design, and everyday math. No upload, no daily limit, no watermark.">
<meta name="twitter:image"       content="https://toolsgiver.com/og.png">

All values are HTML-escaped, so a stray quote or angle bracket in your title or description won't break the snippet.

Overview

What this tool does

Meta tags are the hidden HTML that tells Google what your page is about and tells Facebook, LinkedIn, Slack, Twitter, iMessage, and Discord how to render a preview when someone shares your link. They live inside the <head> of your page and they make the difference between a naked URL and a rich card with a title, description, and image. This generator builds the full set: basic meta (title, description, canonical, theme color, language, robots), Open Graph (Facebook + LinkedIn + Slack + Discord + iMessage), Twitter / X Cards, and favicon links. Every value is HTML-escaped so a quote or angle bracket can't break the markup. Length warnings flag titles over 60 chars and descriptions over 160 chars (Google's actual search-result cut points). 100% client-side; nothing leaves your browser.

How to

Use it in 3 steps

  1. Fill in the page title and description (the two required fields). Length counters flag when you're over or under recommended limits.
  2. Add the canonical URL (the public URL of the page these tags belong to).
  3. Add an Open Graph image URL (1200x630 ideal). Generate one with our OG Image Generator if you don't have one yet.
  4. Add optional fields: site name, author, Twitter handle, theme color, language code, robots directive, favicon path.
  5. Copy the snippet on the right and paste it inside the <head> of your page. Or download the .html file.

FAQ

Frequently asked questions

▶Why two sets of tags (Open Graph + Twitter)?

Open Graph (og: tags) is the de facto standard for almost every share surface: Facebook, LinkedIn, iMessage, Slack, Discord, WhatsApp, Telegram, and Pinterest all read it. Twitter (now X) historically used its own twitter: namespace; it now falls back to og: tags if twitter: tags are missing, but adding both gives you full control on Twitter's card layout.

▶What size should the social image be?

1200x630 pixels (1.91:1 ratio). This is the size all major platforms display at; smaller images get scaled up and look fuzzy. The tool emits og:image:width and og:image:height so platforms can crop correctly the first time.

▶Why does the description have a length warning?

Google truncates the meta description in search results at around 155-160 characters on desktop and ~120 on mobile. Going over isn't an error, but the cut-off text won't be seen. Under 70 leaves you with very little real estate to convert a search click; consider expanding.

▶What does 'noindex' do?

Tells search engines not to include this page in search results. Useful for staging, internal pages, search-result pages, login pages, and anything you don't want public. Be sure you don't ship 'noindex' on your homepage by accident.

▶Is the snippet really safe to paste?

Yes. Every value is HTML-escaped, so quotes, angle brackets, and ampersands in your title or description can't break out of the attribute and inject HTML. Safe for both static sites and templated server-rendered pages.

▶Are these tags enough for SEO?

They're the on-page baseline. Real SEO also requires good content, fast loading, mobile-friendly design, structured data (schema.org JSON-LD), and inbound links. Meta tags handle the 'what is this page about' question; everything else is a separate exercise.

Related

You might also like

New

OG Image Generator

Make a 1200x630 Open Graph share image right in your browser. Layouts, palettes, gradient backgrounds. Export PNG.

design
New

Social Card Previewer

Paste your <head> and see how X, Facebook, and LinkedIn will render the share. Flags missing or out-of-spec tags.

developer