SEO Meta Tag Generator Write Titles, Descriptions, and Social Tags With a Live Preview

What this generator does

This tool takes five plain inputs, the page title, the meta description, the canonical URL, the site name, and an optional social image URL, and returns a block of ready-to-paste HTML tags that belong inside the head of a web page. It writes the title element, the description meta tag, the canonical link, the Open Graph tags used by most social platforms, and the Twitter Card tags used by X. It also draws a Google-style preview and a social card preview so you can see how the result might appear before you publish it.

Everything runs inside the browser. The tags are assembled locally from the fields you fill in, and nothing is transmitted anywhere. If the AI insight button is pressed, only an anonymous summary of the field lengths, the status labels, and boolean flags for whether a canonical URL, site name, and social image were provided is sent to a small serverless function that runs once and then stops. The actual title and description text is never included.

The generator is a starting point for a clean set of tags, not a replacement for the webmaster tools of each search engine. Use it to write a first draft, review the preview, copy the tags into your page template, and then verify the live result through the tools that Google, Bing, and the social platforms publish.

How meta tags shape a search result

When a search engine builds a result, it looks at three pieces of information from your page: the title, the URL that will be displayed, and a short piece of descriptive text. The title element and the description meta tag are the two that you can write directly. The URL is set by the page address, and the breadcrumb path above the title is chosen by the search engine from your site structure.

Google has published guidance that it uses the title element as the primary source for the displayed title link, but it will rewrite the title when the original is too long, repetitive, or unclear, or when another heading on the page better matches the search query. It treats the meta description in a similar way: the description is the starting point, but Google may pull a different sentence from the page if that sentence matches the query better. This is why writing a clean title and a clear description is worth doing, but also why no title or description can be guaranteed to display exactly as written.

Open Graph and Twitter Card tags serve a different purpose. They control how a page appears when it is shared as a link on a social platform, and they do not affect search results directly. Including them is a small piece of work that pays off whenever someone shares the page, because the card will show the title, description, and image you chose rather than whatever the platform guesses.

Writing a title that earns the click

A title that performs well on a search result does three things. It names the subject, it tells the searcher what the page offers, and it fits the visible width of a desktop snippet. The working range of about fifty to sixty characters is a practical ceiling rather than a hard rule, because the actual width depends on the letters used. A title full of narrow characters such as I and L fits more text into the same space than a title full of W and M.

The main subject should come first. If the page is a BMI calculator, the words BMI calculator belong in the first three words, not in the middle of the string. If the page is a guide to WASSCE registration, the words WASSCE registration belong at the front. The visitor is scanning a list of results, and the first few words are what they read before deciding whether to click.

The brand name belongs at the end. On most search engines the brand name is the first thing shortened when a title is too long, and putting it at the front of the title pushes the subject further down the string. Keeping the brand name at the end gives the subject room to breathe and lets the brand act as a signature rather than a headline.

Uniqueness matters more than keyword density. Every indexable page on a site should have a distinct title that names the specific subject of that page. A site with five pages that all share the title "Free Tools – Your Site" gives the search engine no way to tell them apart, and gives the visitor no reason to choose one over another.

Writing a description that matches the page

The meta description is not a ranking factor, but it does influence whether a searcher clicks. A description that answers the searcher's question in the first sentence, then adds one supporting detail, performs better than one that fills the space with keywords or adjectives. The working range of about one hundred and twenty to one hundred and sixty characters gives enough room for two short sentences that carry real information.

Put the value at the front. If the page is a savings goal calculator, the first sentence should say that the visitor can work out how much to save each month to hit a target on time. The second sentence can add a differentiator such as free, private, or running in the browser. That structure gives the searcher a clear reason to click and matches what they will find on the page.

Skip adjectives that do not carry information. Cutting-edge, world-class, best-in-class, and innovative consume space without telling the searcher anything. Replace them with something specific, such as free, no signup, in-browser, or step-by-step. The description is your one chance to write a sentence that persuades a stranger to click, and specific details are what persuade.

Use a distinct description on every indexable page. Even on a small site, the difference between pages is often just a sentence, and that sentence matters when a searcher is scanning results. Reusing the same description across the whole site wastes the opportunity and can look like a template that was never finished.

Open Graph and Twitter Cards

Open Graph tags were introduced by Facebook and have since been adopted by most social platforms as the standard way to describe a shared link. The core set includes og:title, og:description, og:image, og:url, og:type, and og:site_name. When a page is shared on a platform that supports Open Graph, the platform uses these tags to build the preview card.

Twitter Cards are a separate set of tags originally published by Twitter and now supported by X. The core set includes twitter:card, twitter:title, twitter:description, and twitter:image. The value summary_large_image tells the platform to display a wide image above the text. Including both tag sets is standard practice, because each platform falls back to the other when a tag is missing.

Use the final public URL for og:url and the canonical link. Use an absolute URL for og:image, not a relative path, because the social platform fetches the image from its own servers and cannot resolve relative paths. Test the tags with the debugging tools that each platform provides before you rely on them for an important launch.

Canonical URLs and duplicate content

A canonical URL tells search engines which version of a page is the preferred one when several similar URLs exist. That happens more often than most people realise. The same page can be reachable with and without a trailing slash, with and without a query string, on both the http and https versions of the domain, and on the www and non-www versions. Each of those URLs looks like a separate page to a search engine unless you tell it otherwise.

The canonical link in the head of the page points to the version you want indexed. When the tags are set up correctly, the search engine consolidates the ranking signals from the duplicate URLs onto the preferred one. When they are not, the search engine has to guess, and it may pick a version you did not intend, or split signals across several versions.

The canonical URL should be the final public URL of the page. Use the https version, include the trailing slash or omit it consistently across the site, and do not add tracking parameters. The canonical URL should return a successful response when fetched by a crawler, and it should not redirect to a different URL, because a canonical that redirects can confuse the search engine about which version is preferred.

A worked example

Suppose you are publishing a new page about a savings goal calculator on a small site. You open the generator, fill in the title field with "Savings Goal Calculator – Plan Monthly Targets – Your Site", and fill in the description field with "Work out how much to save each month to hit a target on time. Free, private, and running entirely in your browser."

The title is sixty-one characters, which sits just outside the working range. The generator flags it as long. You trim the brand name to a shorter form and the title becomes "Savings Goal Calculator – Plan Monthly Targets – Yours", which is fifty-six characters and lands inside the range. The description is one hundred and twenty characters, inside the range, and it answers the searcher's question in the first sentence.

You add the canonical URL "https://yoursite.com/savings-goal-calculator", the site name "Yours", and a social image URL "https://yoursite.com/og/savings.jpg". The generator assembles the tags, draws the Google-style preview with the trimmed title and the full description, and draws the social card with the site name in the top position and the description below. You copy the tags, paste them into the head of the page, and confirm the live result a few days later.

Now suppose you are publishing a set of five pages about student finance. Each page gets a distinct title and description that names the specific subject, and each canonical URL is the page's own URL. The five pages do not share tags, and they do not compete with each other in search results. That is the discipline the generator is designed to support.

Common mistakes

Reusing the same title across pages. Duplicate titles confuse the search engine and the visitor. Every indexable page needs a distinct title that names its specific subject.

Front-loading the brand name. The brand name at the start of the title consumes premium space. Put the subject first and the brand at the end, where it is the first thing shortened and the last thing the visitor needs to see.

Filling the description with keywords. The description is read by humans, not by a ranking algorithm. Keyword stuffing makes the result look spammy and reduces click-through rate.

Leaving the canonical URL blank. A missing canonical leaves the search engine to guess which version of the page should be indexed. Even if the page is the only one on the site, a canonical link removes the ambiguity.

Using a relative URL for the social image. Open Graph and Twitter Cards expect an absolute URL. A relative path does not resolve correctly when the platform fetches the image.

Adding a meta keywords tag. Google does not use meta keywords for web search and most engines stopped using them years ago. Adding a keyword list can even signal a low-quality page. Skip it.

Assuming Google will display the exact title or description you wrote. Google rewrites both. Write them clearly and put the important words first, but do not expect the display to match your draft character for character.

Not checking the live result. Tags inside the head of a page only take effect when the search engine recrawls the page. Verify the live result through the webmaster tools of each engine a few days after publishing.

Where this tool stops

This generator produces a clean set of HTML tags from the fields you fill in. It does not verify that the canonical URL returns a successful response, that the social image URL resolves to a real JPG or PNG, or that the tags are valid for the specific platform you intend to publish on. It does not check for duplicate titles across a site, and it does not model how Google, Bing, or any social platform will interpret the tags when they crawl or fetch the page. Those checks belong to the person publishing the page and to the debugging tools each platform provides.

It also does not write the visible page content, the internal links, the sitemap, or the structured data that a page needs in order to perform well. Meta tags are one piece of a larger picture, and they work best when the underlying page is clear, useful, and reachable. A perfect title on an empty page is not a strategy, and a plain title on an excellent page usually outperforms it.

What the tool does give you is a fast, transparent, private way to draft metadata, review it in a Google-style preview and a social card, and copy the resulting tags in one step. Used together with the webmaster tools of the search engines that matter, it is a practical starting point for anyone who wants clean, readable, and consistent tags across a site.