My Tool Studio
SEO Tools·2 min read

How to Write Meta Tags With a Live Preview

Good meta tags are a small job that many pages skip. The Meta Tag Generator builds the head tags a page needs from one form: title, meta description, robots, author, charset, viewport, canonical, theme colour, Open Graph and X (Twitter) tags. Paste a URL to fill the fields from the live page, or type them in for a page that is not published yet.

Meta Tag Generatormytoolstudio.com › tools<title>…</title><meta name="description">SEO ready

What the generator builds

One block, consistent tags.

Fill the fields once and the tool writes every tag from them, so your title, Open Graph title and X title stay in step. Tick or untick indexing, link following, charset and viewport, and add max-image-preview:large, noarchive or nosnippet if you need them. By default no robots tag is written, because index, follow is what search engines assume anyway.

The output comes as plain HTML for your head element, or as a Next.js metadata object for a layout or page file. Copy it or download it.

The tool formats what you enter. It does not write the copy for you. Write the title and description yourself, then use the counters and previews to tighten them.

Counters in pixels, not just characters

The unit Google trims by.

Google cuts titles by pixel width, roughly 600 pixels on desktop, which is often 50 to 60 characters. Descriptions usually show up to about 155 to 160 characters. As you type, the counters show both characters and approximate pixel width, and a field turns red when the text is likely to be cut.

Previews before you publish

See what people will see.

Switch between the preview tabs to see your link on Google, Facebook, X, LinkedIn, WhatsApp, Slack, Discord, Pinterest and Telegram, or open All to see every card at once. This is where a weak description or a missing image becomes obvious. If the share image is not uploaded yet, pick it from your computer to preview it first; it stays in your browser.

When the previews look right, choose HTML or Next.js metadata on the Generated tags panel, press Copy, and paste the block inside your head element or layout file.

Auto-fill from a URL

Useful, with two caveats.

Click Auto-fill from URL to load a live page's title, description, canonical, image, author and robots settings. A short list also shows what is wrong with the page's current tags, such as two titles, a title wider than Google shows or a missing canonical. Fetching replaces the text fields, so make manual edits afterwards.

The fetch reads the raw HTML your server sends and does not run scripts. If your framework adds head tags in the browser, the fields come back empty. That is also a warning that some crawlers may miss those tags.

Skip the keywords tag

One tag Google ignores.

Google said in 2009 that it does not use the meta keywords tag in ranking. This generator only writes one if you fill the optional Keywords field, which some internal site search tools still read. Time spent on a clear, specific title and description does far more. Google may still rewrite a description it finds vague or repeated, so write one for each page.

Generate, then check

Two tools that pair up.

Do not add a second title or description if an SEO plugin or theme already outputs one. Once the tags are live, run the page through the Meta Tag Analyzer to confirm they render. For full control over social tags, the Open Graph Generator covers every og property.

Try it now

Open Meta Tag Generator

The tool is one click away. No sign up, no upload, no payment.

Open Meta Tag Generator