Webmaster Bench

Tools / Meta Tag & Open Graph Generator

Meta Tag & Open Graph Generator

Type a title, description and URL; get the HTML for the <head>, correctly escaped, with live previews of the search result and link cards.

Previews

How to use the output

Paste the generated lines inside your page's <head> element, replacing any existing title, description, canonical and social tags so that no tag appears twice. In a content management system, the same values usually go into the SEO fields of the page editor; the generated HTML shows exactly what those fields should produce.

All values are escaped: an ampersand becomes &amp; and a double quote becomes &quot; inside attributes. Unescaped quotes are a common reason a description is cut off halfway.

Writing a good title

  • Say what the page is, in the words a searcher would use, before anything else: "Blue Widgets for Small Workshops", not "Welcome to Acme".
  • Put the brand last, after a separator, or leave it out on long titles; Google often shows the site name separately anyway.
  • Make every title unique. Duplicate titles across pages make it hard for Google to choose which to show and hard for people to tell results apart.
  • Mind the width, not the character count: Google cuts desktop titles at roughly 600 pixels. The preview measures it.

Writing a good description

The description does not affect ranking. It is your pitch in the result: one or two sentences with the facts that make someone choose your page, such as price, scope, freshness or what they can do there. Google uses it when it matches the query and otherwise picks text from the page. Around 120-160 characters usually shows in full on desktop.

Open Graph and Twitter cards

When someone shares your URL, Facebook, LinkedIn, Slack, Discord, WhatsApp and iMessage read the Open Graph tags to build the preview; X reads its twitter: tags and falls back to Open Graph. You therefore do not need to duplicate title, description and image as twitter: tags: twitter:card alone is enough to choose the large-image layout.

  • Image: an absolute URL, at least 1200 × 630 pixels (ratio 1.91:1), under 5 MB, JPG or PNG. Keep important text away from the edges, which some apps crop.
  • og:url should equal the canonical URL so likes and shares are counted on one address.
  • og:type: website for most pages, article for posts. Other types add little in practice.

Worked example

The form starts filled in with a product page. With a share image added, the generator produces:

<title>Blue Widgets for Small Workshops | Acme</title>
<meta name="description" content="Hand-made blue widgets, tested for ten years...">
<link rel="canonical" href="https://acme.example/widgets/blue">

<meta property="og:type" content="website">
<meta property="og:title" content="Blue Widgets for Small Workshops | Acme">
...
<meta name="twitter:card" content="summary_large_image">

Sources

Last reviewed 2026-11-15. Your input is processed only in your browser and never sent to us.