Meta Tag & Open Graph Generator

Generate a page's title, meta description, canonical, Open Graph and Twitter Card tags, with a live Google-style preview.

Runs in your browserFree, no sign-up

Length check

Title length: 44 chars; Google typically shows up to ~60 characters.
Description length: 125 chars; Aim for roughly 140-160 characters.

Google search preview

Meta tags

<title>Free Online Invoice Generator — PlainToolbox</title>
<meta name="description" content="Create a professional invoice with line items, tax and totals in seconds — free, no sign-up, and nothing leaves your browser.">
<link rel="canonical" href="https://example.com/invoice-generator">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:title" content="Free Online Invoice Generator — PlainToolbox">
<meta property="og:description" content="Create a professional invoice with line items, tax and totals in seconds — free, no sign-up, and nothing leaves your browser.">
<meta property="og:url" content="https://example.com/invoice-generator">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="Example Site">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Online Invoice Generator — PlainToolbox">
<meta name="twitter:description" content="Create a professional invoice with line items, tax and totals in seconds — free, no sign-up, and nothing leaves your browser.">
<meta name="twitter:image" content="https://example.com/og-image.jpg">
<meta name="twitter:site" content="@example">

What Meta Tag & Open Graph Generator does

This tool builds the full set of HTML tags a page needs for search engines and social platforms to understand and display it correctly: the title and meta description search results show, a canonical link, a robots directive, and the Open Graph and Twitter Card tags that control how the page's link preview looks on Facebook, LinkedIn, Slack, WhatsApp and X. It also renders a live preview of how the title and description will actually appear in a Google search result, so you can check the length before it goes live rather than after.

Where this helps

Writing tags for a new page before it ships

Draft and check title and description length against real display limits before a developer pastes the final tags into the page template.

Fixing a page with no social preview

Add the missing Open Graph and Twitter Card tags that make a link show a proper title, description and image when shared, rather than a bare URL.

Auditing a page's existing tags

Generate what the tags should be and diff them against what's currently in the page source to spot a stale title, a missing canonical, or an accidental noindex.

How to use it

1
Enter the page title and meta description.
2
Add the page's canonical URL, site name and a share image.
3
Optionally add a Twitter/X handle and choose whether the page should be indexed.
4
Check the length warnings and the Google-style preview.
5
Copy or download the generated tags and paste them into the page's <head>.

Why the preview won't always match Google exactly

Google renders search snippets based on pixel width, not a fixed character count, so the same character count can wrap differently depending on which letters it contains — a title full of narrow letters like 'i' and 'l' fits more characters than one full of wide letters like 'm' and 'w'. Google also sometimes rewrites the displayed title or pulls a different passage of the page for the description if it judges that passage better answers the search query, regardless of what the meta tags specify. Treat the generated tags as what you control, and the live search result as Google's own editorial layer on top of that.

Open Graph, Twitter Cards and the fallback relationship between them

Open Graph is the protocol Facebook introduced that most link-preview systems — LinkedIn, Slack, Discord, WhatsApp — now read directly. Twitter/X has its own separate twitter:* tag namespace, but falls back to reading the equivalent og:* tag for anything a page doesn't set explicitly, which is why even a Twitter-focused page benefits from having both sets present.

Tips

Keep titles under roughly 60 characters and descriptions under roughly 160 to avoid truncation in most search results.
Use an absolute URL (starting with https://) for the share image — relative paths don't resolve correctly when a social platform's crawler fetches the page.
Only enable noindex for pages you deliberately want excluded from search results — it's one of the most common accidental de-indexing mistakes on real sites.

Common questions

Does a longer title or description actually hurt my ranking?

Not directly — length itself isn't a ranking factor. But Google truncates what it displays at roughly pixel-width limits (around 60 characters for titles, 155-160 for descriptions), so anything longer just gets cut off with an ellipsis in the search result rather than penalised.

What's the difference between Open Graph and Twitter Card tags?

Open Graph (og:*) is the standard Facebook originally created that most platforms — LinkedIn, WhatsApp, Discord, Slack — now read for link previews. Twitter/X uses its own twitter:* tags, though it falls back to Open Graph tags for anything a twitter:* tag doesn't cover, which is why this generator includes both.

Why does the preview not exactly match what I see on Google?

Google's real snippet rendering varies by device, query and experiment group, and can pull a different description than the one you specify if it decides another passage answers the query better. This preview shows the tags as written, which is what you control — the rest is Google's call.

Should I turn on noindex?

Only for pages you don't want appearing in search results at all — a staging page, an internal tool, a thank-you page. Leave it off for any page you want found; a stray noindex tag is one of the most common accidental de-indexing mistakes.