This generator produces ready-to-paste SEO, Open Graph and Twitter Card meta tags plus a canonical link, so your page looks right in search results and when shared on social media. It is for developers and marketers who want correct, escaped tags without hand-writing them.
How it works
You fill in the page title, description, URL, site name and image, and the tool assembles the standard tag set: a <title> and meta description for search, og: properties for Facebook/LinkedIn, twitter: tags for X/Twitter, and a rel="canonical" link. Every value is HTML-escaped (&, ", <, > are encoded) so special characters cannot break your markup, and a live counter keeps your description in range.
What each tag does
<title> and meta description
These are the classic search-engine snippet. Google and other search engines read the <title> as the clickable headline and the meta description as the summary text below it. While search engines sometimes rewrite both, providing them gives you the best chance of controlling the snippet.
- Title — aim for 50–60 characters. Longer titles are truncated with an ellipsis on most search result pages.
- Description — aim for 120–160 characters. Longer descriptions are cut off on mobile. Shorter ones leave white space and reduce clickthrough.
Open Graph tags (og:)
Open Graph is a protocol defined by Meta that controls how a URL previews when shared on Facebook, LinkedIn, Slack, and most other platforms. The key properties:
og:title— the headline shown in the link card (can differ from your SEO title)og:description— the summary in the card (can differ from your meta description)og:image— the image displayed in the card; use an absolutehttps://URLog:url— the canonical URL of the pageog:type— usuallywebsitefor regular pages,articlefor blog posts
Twitter Card tags (twitter:)
X/Twitter uses its own twitter: properties to build link previews, though it also falls back to Open Graph if twitter: tags are absent. The most useful card type is summary_large_image, which shows a full-width image above the description.
Canonical link (rel="canonical")
The canonical tag tells search engines which URL is the definitive version of the page. This prevents duplicate-content issues when the same page is reachable via multiple URLs — for example with and without a trailing slash, or with different query strings.
Worked example
For a page about hiking boots at https://example.com/hiking-boots/:
<title>Best Hiking Boots 2026 — Tested on the Trail</title>
<meta name="description" content="Our pick of the most durable, comfortable hiking boots after 200+ hours of trail testing. Waterproof and lightweight options included." />
<meta property="og:title" content="Best Hiking Boots 2026 — Tested on the Trail" />
<meta property="og:description" content="Our pick of the most durable hiking boots after 200 hours of trail testing." />
<meta property="og:image" content="https://example.com/images/hiking-boots-social.jpg" />
<meta property="og:url" content="https://example.com/hiking-boots/" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Best Hiking Boots 2026" />
<meta name="twitter:description" content="200+ hours of trail testing, in one guide." />
<meta name="twitter:image" content="https://example.com/images/hiking-boots-social.jpg" />
<link rel="canonical" href="https://example.com/hiking-boots/" />Quick reference: lengths and image specs
| Field | Recommended length / spec | Notes |
|---|---|---|
<title> | 50–60 characters | Truncated beyond ~60 in most SERPs |
meta description | 120–160 characters | Shorter on mobile (~120 ch) |
og:image | 1200 × 630 px minimum | Must be an absolute https:// URL |
twitter:image | 1200 × 628 px recommended | Same image as og:image usually works |
Everything runs in your browser, so nothing you enter is uploaded — just copy the tags into your page’s <head>.