Meta Tag Generator

What does this meta tag generator do?

A meta tag generator turns a short form into the tags that belong in the head section of a page. You type the title, description, address and image once. The tool then writes three groups of tags. SEO tags serve search engines, Open Graph tags serve Facebook, LinkedIn or WhatsApp, and card tags serve X (Twitter). As a result, you never type the same text three times, and broken quotes disappear.

I reach for it in two situations. The first is right before a landing page goes live. The second is when a client says "our shared link looks broken". During SEO consulting projects, one of the first things my team and I check is whether every page carries its own title, description and canonical tag.

• Counters: measure the title against 60 and the description against 160 characters while you type.
• Preview: draws an approximate Google result and share card.
• Core field badge: counts how many of title, description, URL and image are ready.
• Clean code: skips lines for empty fields and escapes special characters such as quotes.

How long should a title tag and meta description be?

There is no fixed character limit. Google sets no length limit for the title element or the meta description. However, it truncates both in results to fit the device width. In other words, the real measure is pixel width. For example, wide letters like M and W take far more space than i or l.

That is why the 60 and 160 characters in the tool are a practical reference. The counter stays green up to 90% of the limit, turns amber in the last 10% and red once you pass it. The Google preview, meanwhile, cuts the title at roughly 580 pixels and the description at roughly 920 pixels. If you want to compare desktop and mobile in detail, the Google SERP preview tool shows the pixel measurement for both.

In practice, I follow three rules:

• Put the most important words first; if anything gets cut, let it be the brand name at the end.
• Say what the page offers in the first sentence of the description, because mobile results may cut it earlier.
• Do not stack keywords. According to Google, descriptions made of long keyword strings are less likely to appear as the snippet.

For the writing side, with examples by page type, see my guide on how to write a meta title and description.

How do Open Graph tags shape the share card?

When you paste a link into Facebook, LinkedIn, WhatsApp or Slack, the platform visits your page and reads its Open Graph tags. Without them, it picks an image and some text on its own. The result is often an irrelevant logo or a line from the menu. Specifically, the Open Graph protocol treats four properties as required: og:title, og:type, og:image and og:url.

The tool adds the description, site name and language code to those four. For the page type, it offers two options:

• Website: for home, service and product pages. According to Meta's sharing guide, this is also the default when og:type is missing.
• Article: for blog posts and news.

X, on the other hand, works a little differently. It looks for twitter: tags first and falls back to the Open Graph equivalent when one is missing. The only exception is twitter:card, because the card type has no Open Graph counterpart. That is why the tool always writes this line, with the large image card as the default. For the small card with a square image, choose Small image in the X Card Type field.

I cover the parts of social traffic that go beyond tags in my post on driving website traffic from social media.

Which og:image size and URL should you use?

Meta's developer documentation recommends images of at least 1200 x 630 pixels for the best display on high resolution screens. For link posts with larger images, the minimum is 600 x 315 pixels. Keep the aspect ratio close to 1.91:1 so the feed shows the whole image. Also, keep the file under 8 MB.

However, I see address problems far more often than size problems:

• Full URL: the og:image value has to start with https://. If you type a relative path like /img/cover.jpg, the tool shows a warning under the field.
• Public file: the image must not sit in a folder that requires a login or one that crawlers cannot reach. If the Share card tab cannot load the image, check this first.
• Key content in the centre: The small card may crop the image to a square. So keep text and logo near the middle.

The Open Graph protocol also says that a page with og:image should specify og:image:alt. The tool writes the alt text only when an image URL is present, and it adds the same text to twitter:image:alt. To resize or compress the file first, try the image resizer.

How do canonical and robots tags work together?

The canonical tag names the preferred version when several URLs lead to the same content. Google treats rel="canonical" as a strong signal, not as a strict command. Google's documentation gives three rules worth following:

• Use absolute URLs rather than relative ones.
• Place the tag only in the head.
• Add a canonical on the preferred page that points to itself.

For the robots tag, the default is index,follow; writing it out has no effect, but it does no harm either. The tool offers three options:

• Normal live pages: index,follow.
• Internal search results or a thank you page, which stay out of the index while their links still count: noindex,follow.
• Test pages or campaign drafts that should stay out entirely: noindex,nofollow.

Two more warnings apply here, however. Google cannot see a noindex rule on a page that robots.txt blocks from crawling. Also, Google does not recommend noindex as a way to steer canonical selection. You can build the robots.txt file with the robots.txt generator and your URL list with the XML sitemap generator. For the wider technical picture, read my technical SEO tips.

How do you add the meta tag generator code to your site?

Paste the code into the head section of the page, before the closing head tag. Google expects meta tags inside the head and as valid HTML. On a hand coded site, that is the only step. On a CMS or site builder, check the existing tags first:

1. Open the page and view its source (Ctrl+U in Chrome).
2. Search the source for title, canonical and og:image.
3. If your theme or SEO plugin already writes these lines, do not add a second set. Instead, fill the plugin fields with the values from the tool.
4. Copy only the missing lines, then confirm that each tag appears once in the source.

Check one detail in particular: og:url and the canonical should hold the same clean address. Meta defines og:url as the undecorated URL without session variables or tracking parameters, and likes and shares aggregate at that URL. So even if you tag campaign links with the UTM builder, keep UTM parameters out of these two fields.

Building a new site? In our web design projects, we wire these tags into the template for each page type. That way, nobody writes head code by hand when a new page goes live.

Why does a share preview stay outdated, and how do you refresh it?

Platforms crawl a link the first time someone shares it and then cache the result. Even after you fix the tags, the old title or image may keep showing for a while. Meta also notes that it caches images by URL. So, to update an image after publishing, use a new URL.

This is the order I follow:

• Facebook: enter the link in the Sharing Debugger and ask it to scrape again. The debugger lists errors and re-crawls the page.
• X: paste the link into the post composer; the card preview appears without publishing. X removed the preview from the old Card Validator page.
• LinkedIn: enter the URL in Post Inspector so LinkedIn reads the page again.
• New image: upload the new file under a new name and put that address in the og:image field.

If the preview still looks old, the cause is often the page itself. For example, a redirect may send the crawler to a different address. The redirect checker shows every hop the link takes.