Skip to content

Meta tag and social preview generator

Runs on your device

Write title, description, Open Graph, X card and JSON-LD tags with live Google and social previews, and fix what would be cut off.

Page type
  • Add a title: it's the blue headline in search results and the bold line in link previews.
  • Add a description. Without one, search engines and apps pick some text from the page.
  • Add a share image. Links with a large image get far more clicks in social feeds; 1200 × 630 px works everywhere.

Google preview

example.com

Your page title

Your description appears here: one or two sentences that make someone want to click.

No share image

example.com

Your page title

Your description appears here: one or two sentences that make someone want to click.

How to use Meta tag and social preview generator

  1. Enter the page's title, description, address and share image.
  2. Watch the Google and social previews, and follow the checks until the title and description fit.
  3. Copy the tags into your page's <head>.

How your page looks before anyone clicks

When a page appears in Google results or is shared in WhatsApp, LinkedIn, Slack or X, people see a headline, a short description and often an image, taken from tags in the page's head. If they're missing, apps guess, often badly: a cookie notice as the description, a logo cropped into a square, or nothing at all. This tool writes the full set of tags and shows you, as you type, how the page will look in a Google result and in a social card, so you can fix it before you publish.

Measured the way Google measures

Google doesn't cut titles at a fixed number of characters: it cuts them by width, at about 600 pixels for titles and about 920 pixels for descriptions on desktop. A title full of wide letters like W and M runs out sooner than one with narrow letters like i and l. The tool measures your text in the same font and size Google uses and warns you when it would be cut off, and the preview shows exactly where the ellipsis would fall.

Other checks catch the common mistakes: a missing description, a share image given as a relative path that apps can't load, an http address instead of https, and missing alt text for the image.

What you get

The output is ready to paste into your page's head: the title and meta description, a canonical link, Open Graph tags for Facebook, LinkedIn, WhatsApp, Slack, Discord and iMessage, the X card tag, and JSON-LD structured data describing the page as a web page, an article with author and publication date, or a product. Values are escaped so quotes and ampersands in your text can't break the HTML, and the structured data can't end its script element early.

For the share image, 1200 by 630 pixels works everywhere: it's the size Facebook and LinkedIn recommend, and X shows it as a large card.

Private

Everything is generated in your browser, so drafts of unreleased pages stay private. The share image isn't fetched for the preview unless you choose to load it, because loading it contacts the site that hosts it.

Questions

How long should a title and description be?
Google cuts titles at about 600 pixels wide, roughly 50 to 60 characters, and descriptions at about 920 pixels on desktop, roughly 155 characters. Because the limit is in pixels, wide letters like W and M use it up faster; the tool measures the actual width.
Which tags do social apps read?
Facebook, LinkedIn, WhatsApp, Slack, Discord and iMessage read Open Graph tags (og:title, og:image and so on). X reads its own twitter:card tag and falls back to Open Graph for the rest, so the tags aren't duplicated.
What is the JSON-LD for?
It's structured data that tells search engines what the page is: a web page, an article with its author and date, or a product. It can make a page eligible for richer search results.