Meta Tag Generator – Title, Description & Open Graph

Q: How long should a title tag be?

Search results show roughly 580–600 pixels of title, which is about 50–60 characters depending on the letters used. Put the most important words first; longer titles aren't penalised, but the end may be cut off.

Q: Does the meta description affect rankings?

Not directly. It's used as the snippet under your title when it matches the search, so a clear, specific description improves click-through. Search engines may show different text from the page instead.

Q: What size should the Open Graph image be?

1200 × 630 pixels (1.91:1) works well across Facebook, LinkedIn, X and messaging apps. Keep important text away from the edges, because some apps crop to a square, and use an absolute https:// URL.

Q: Do I need both Open Graph and Twitter tags?

X reads Open Graph tags as a fallback, so you only need twitter:card (and optionally twitter:site). The generator adds just those and lets the og: tags provide the title, description and image.

Q: Do I need a meta keywords tag?

No. Google ignores meta keywords, and other major search engines give it little or no weight. Spend the time on a clear title and description instead.

How to use the meta tag generator

Write the title and description for the page. The counters show characters and estimated width.
Enter the canonical URL, the preferred address of the page, starting with https://.
Choose whether search engines should index it (usually yes).
Fill in the social fields: site name, content type, share image URL and its description, and locale.
Check the previews and the checks list, then copy the HTML into your page’s <head>.

What each tag does

<title>: the browser tab text and usually the clickable headline in search results.
meta description: the snippet candidate shown under the title.
link rel="canonical": tells search engines which URL to index when the same content is reachable at several addresses (with tracking parameters, www or not, HTTP or HTTPS).
meta robots: added only when you choose something other than the default, such as noindex.
theme-color: tints the browser interface on mobile.
Open Graph (og:) tags: title, description, image, URL, type, site name and locale for link previews. The image’s width and height are included for large cards, so platforms can render the preview before downloading the image.
twitter:card: chooses a large-image or small square card on X.

All values are HTML-escaped, so quotes and < in your title can’t break the markup.

How it works

You enter the page details once and the generator writes the matching tags: a title and meta description for search results, a canonical link, Open Graph tags for Facebook, LinkedIn and messaging apps, and Twitter card tags. Text is escaped so quotes and ampersands can’t break the HTML. The previews estimate how the snippet and share card will look, using typical display limits, so you can spot titles that will be cut off.

Worked examples

Example 1: a product category page

The sample shop page has a 43-character title with the product type first, a 124-character description that mentions what makes the products different and the shipping offer, a canonical URL and a 1200 × 630 share image with a description. Every check passes.

Example 2: a title that’s too long

Change the title to “Handmade Ceramic Mugs, Cups, Bowls and Plates – Small-Batch Pottery from Our Studio”. The counter shows over 80 characters and the search preview cuts it off with an ellipsis. Moving the most important words to the front keeps them visible.

Example 3: a staging page

Choose Don’t index, follow links for a page that shouldn’t appear in search yet. A warning reminds you to remove noindex before launch, which is one of the most common reasons new sites don’t show up in search results.

About the previews

The previews are neutral approximations, not exact copies of any search engine or social network. Title width is estimated from typical character widths, so check the live result after publishing. Each platform caches link previews. If you change the image, use the platform’s preview or debugging tool to refresh it.

Common mistakes

Relative URLs in og:image or canonical tags. Social networks and crawlers need absolute URLs.
The same title and description on every page, which makes results indistinguishable.
Keyword stuffing: repeating terms makes snippets less clickable and can be rewritten by search engines.
Forgetting the image description, which screen-reader users rely on in some apps.
Leaving noindex from staging on the live site.

Frequently asked questions

How long should a title tag be?

Search results show roughly 580–600 pixels of title, which is about 50–60 characters depending on the letters used. Put the most important words first; longer titles aren't penalised, but the end may be cut off.

Does the meta description affect rankings?

Not directly. It's used as the snippet under your title when it matches the search, so a clear, specific description improves click-through. Search engines may show different text from the page instead.

What size should the Open Graph image be?

1200 × 630 pixels (1.91:1) works well across Facebook, LinkedIn, X and messaging apps. Keep important text away from the edges, because some apps crop to a square, and use an absolute https:// URL.

Do I need both Open Graph and Twitter tags?