Tools

Meta tag generator and social preview

See how your page looks in Google results and when it is shared on X, LinkedIn, Facebook and Slack. Fix titles and descriptions that get cut off, then copy the meta tags as HTML or as Next.js metadata.

  • Free
  • No signup
  • Runs in your browser

Your page

69 chars · 662/600px
148 chars · 918/920px

Checks 2 to look at

  • CheckTitle 69 characters, 662 of 600px. Google will cut it off.
  • GoodDescription 148 characters, 918 of 920px. Fits.
  • GoodPage URL Absolute https address.
  • CheckShare image Missing. Links will share as plain text with no picture.

Preview

Inkwellexample.com › invoices
Inkwell: Invoices for Freelance Designers Who Want to Get ...

Send a polished invoice in two minutes, take card and bank payments, and let reminders chase late clients for you. Free for your first five clients.

Previews follow each site’s current layout and may differ slightly from the real thing.

Your meta tags

<!-- Primary meta tags -->
<title>Inkwell: Invoices for Freelance Designers Who Want to Get Paid Faster</title>
<meta name="description" content="Send a polished invoice in two minutes, take card and bank payments, and let reminders chase late clients for you. Free for your first five clients." />
<link rel="canonical" href="https://example.com/invoices" />

<!-- Open Graph: Facebook, LinkedIn, Slack, Discord, WhatsApp -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/invoices" />
<meta property="og:title" content="Inkwell: Invoices for Freelance Designers Who Want to Get Paid Faster" />
<meta property="og:description" content="Send a polished invoice in two minutes, take card and bank payments, and let reminders chase late clients for you. Free for your first five clients." />
<meta property="og:site_name" content="Inkwell" />

<!-- X (Twitter) -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@inkwell" />
<meta name="twitter:title" content="Inkwell: Invoices for Freelance Designers Who Want to Get Paid Faster" />
<meta name="twitter:description" content="Send a polished invoice in two minutes, take card and bank payments, and let reminders chase late clients for you. Free for your first five clients." />

Paste inside the <head> of your page.

How to use the meta tag generator

  1. Write the title and description you want people to see in search results and link previews.
  2. Add your page address and the address of a 1200 × 630 share image.
  3. Switch between Google, X, LinkedIn, Facebook and Slack to see how the link looks on each.
  4. Fix anything the checks flag, then copy the tags as HTML or as Next.js metadata.

Why titles are measured in pixels, not characters

Google does not cut titles at a fixed number of characters. It cuts them when they run out of room, at about 600 pixels on desktop. “Illicit Mill” and “WOMBAT MEMO” have the same number of letters but very different widths. This tool measures your title and description in the font Google uses, so the preview breaks where the real result will.

What each tag does

  • title and meta description: the headline and summary in search results. Write them for people, with your main keyword once and naturally.
  • canonical: tells search engines which address is the original, so tagged links and copies do not compete with it.
  • og: tags: Open Graph, read by Facebook, LinkedIn, Slack, Discord, WhatsApp and iMessage for link previews.
  • twitter: tags: X reads Open Graph too, but needs twitter:card to show the large image.

Sharing your launch on several channels? Tag each link with the UTM builder so you can see which one brought visitors, and put “check how your link looks” on your launch plan.

Frequently asked questions

How long should a title tag be?

Google cuts desktop titles at about 600 pixels, which is usually 50 to 60 characters. Wide letters such as W and M use the space faster than narrow ones, so this tool measures the title in pixels the way Google renders it rather than only counting characters.

How long should a meta description be?

Aim for 120 to 155 characters, about 920 pixels on desktop. Google may rewrite descriptions, but a clear one that matches the page is often shown as written and can lift click-through.

What size should an Open Graph image be?

Use 1200 × 630 pixels (a 1.91 to 1 ratio), as a PNG or JPG under 5 MB. X, LinkedIn, Facebook, Slack and Discord all crop to this shape, so keep text and logos away from the edges.

Do I need Twitter card tags if I already have Open Graph tags?

X falls back to Open Graph for the title, description and image, but it needs twitter:card to show a large image. This tool writes both sets, so the link looks the same everywhere.

Why does my old preview still show after I change the tags?

Social sites cache link previews. After you deploy, refresh the cache with the LinkedIn Post Inspector or the Facebook Sharing Debugger. X refreshes on its own within about a week, sooner if you add a query string to the link.

Is my content sent anywhere?

No. Everything runs in your browser. Your title, description and image address are never sent to LarkLaunch.