Skip to content

Runs entirely in your browser. Nothing you paste leaves this page.

Free / No sign-up

Meta tag generator with live previews.

Write your title, description and social tags once and see how they look in Google, on Facebook and LinkedIn, on X and in Slack, with pixel-width warnings. Or paste a page's HTML to audit what it already has.

Input
63 chars · 0/600px desktop
127 chars · 0/920px 2 lines
<title>Core Web Vitals in 2026: LCP, INP and CLS explained | Acme Labs</title>
<meta name="description" content="What LCP, INP and CLS measure, the thresholds Google uses, and the fixes that move each metric, with before-and-after examples.">
<link rel="canonical" href="https://acme.example/blog/core-web-vitals">

<!-- Open Graph: Facebook, LinkedIn, Slack, WhatsApp, Discord -->
<meta property="og:type" content="article">
<meta property="og:site_name" content="Acme Labs">
<meta property="og:title" content="Core Web Vitals in 2026: LCP, INP and CLS explained | Acme Labs">
<meta property="og:description" content="What LCP, INP and CLS measure, the thresholds Google uses, and the fixes that move each metric, with before-and-after examples.">
<meta property="og:url" content="https://acme.example/blog/core-web-vitals">
<meta property="og:image:alt" content="Chart of LCP, INP and CLS thresholds">

<!-- X uses the og: title, description and image when twitter: ones are absent -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@acmelabs">

Google search, desktop

AAcme Labsacme.example › blog › core-web-vitals

Core Web Vitals in 2026: LCP, INP and CLS explained | Acme Labs

What LCP, INP and CLS measure, the thresholds Google uses, and the fixes that move each metric, with before-and-after examples.

Facebook and LinkedIn

No og:image

acme.example

Core Web Vitals in 2026: LCP, INP and CLS explained | Acme Labs

What LCP, INP and CLS measure, the thresholds Google uses, and the fixes that move each metric, with before-and-after examples.

X (Twitter)

No og:image
Core Web Vitals in 2026: LCP, INP and CLS explained | Acme Labs

From acme.example

Slack

Acme Labs

Core Web Vitals in 2026: LCP, INP and CLS explained | Acme Labs

What LCP, INP and CLS measure, the thresholds Google uses, and the fixes that move each metric, with before-and-after examples.

No og:image

Looks good. Widths are measured in Arial at the sizes Google uses; real cut-offs vary by device, and Google may rewrite titles and snippets. Networks cache cards, so re-scrape after changes.

How to use it.

  1. 01

    Edit the title, description, URL and image, or switch to Analyse HTML and paste a page's head to load and audit its current tags.

  2. 02

    Watch the Google, Facebook and LinkedIn, X and Slack previews and the width meters; shorten anything that turns red.

  3. 03

    Copy the HTML into your page's head, deploy, then re-scrape the URL in each network's debugger so cached cards update.

What it does.

Everything this tool handles, all of it inside your browser tab.

  • Live Google desktop result preview with your site name and breadcrumb URL
  • Facebook and LinkedIn, X (large and summary cards) and Slack previews
  • Title and description widths measured in pixels in Google's fonts
  • Warnings for long titles, short or long descriptions, relative URLs and image size
  • Reads the actual og:image dimensions and checks the 1.91:1 ratio
  • Analyse mode: paste HTML to load existing tags and list duplicates and gaps
  • Clean HTML output with title, description, canonical, Open Graph and X tags
  • Runs in your browser; pasted HTML is never sent anywhere

Worked examples.

  • A complete head for a blog post

    <title>Core Web Vitals in 2026: LCP, INP and CLS explained | Acme Labs</title>
    <meta name="description" content="What LCP, INP and CLS measure, the thresholds Google uses, and the fixes that move each metric.">
    <link rel="canonical" href="https://acme.example/blog/core-web-vitals">
    <meta property="og:type" content="article">
    <meta property="og:title" content="Core Web Vitals in 2026: LCP, INP and CLS explained | Acme Labs">
    <meta property="og:image" content="https://acme.example/og/core-web-vitals.png">
    <meta name="twitter:card" content="summary_large_image">

    Title, description and canonical for search; Open Graph for every network; one twitter:card line for X.

  • Same length, different width

    WOMEN'S MERINO WOOL WINTER WEAR | MOUNTAINWORKS   47 chars   595 px
    Women's Merino Wool Winter Wear | MountainWorks   47 chars   471 px
    little tips: fill tiny jobs with light tools in julia, it is fit   64 chars   437 px

    Measured in 20px Arial. The all-caps title is at the edge of the cut-off with 47 characters, while 64 narrow characters fit easily.

  • Audit finding: duplicate description

    <meta name="description" content="Plans for every team.">
    <meta name="description" content="Simple pricing for teams of every size.">
    
    > 2 meta descriptions; keep one.

    Usually caused by a theme and an SEO plugin both writing tags. Search engines pick one unpredictably.

  • Relative og:image

    <meta property="og:image" content="/img/pricing.png">
    
    > og:image must be an absolute URL.
    
    Fixed:
    <meta property="og:image" content="https://acme.example/img/pricing.png">

    Scrapers do not resolve relative paths, so the card shows no image.

Which meta tags still matter

Only a handful of head tags affect how a page appears when it is found or shared. The title element is the strongest on-page signal of what the page is about and usually becomes the blue headline in Google. The meta description is often used as the snippet beneath it. The canonical link tells search engines which URL is the main version when the same content is reachable in several ways.

Open Graph tags (og:title, og:description, og:image, og:url, og:type, og:site_name) control the preview card on Facebook, LinkedIn, Slack, WhatsApp, Discord, iMessage and most other apps that unfurl links. X reads its own twitter:card tag and falls back to the Open Graph values for title, description and image, so twitter:card is usually the only X-specific tag you need.

The meta keywords tag is ignored by Google and has been for many years, so this generator leaves it out. For the bigger picture of what search engines look at, see our explainers on SEO and technical SEO.

Title length: pixels, not characters

Google does not truncate titles at a fixed number of characters. It cuts them when they run out of horizontal space, which on desktop is roughly 600 pixels of 20px Arial. A title full of wide letters such as W and M runs out sooner than one with i, l and t, so a 60-character rule of thumb is only an approximation. This tool measures your title in that font and shows where it would be cut.

Google also rewrites titles it considers unhelpful, for example when they are stuffed with keywords, identical across many pages, or do not match the page. Write a specific, accurate title, put the important words first, and keep the brand at the end so truncation removes the least useful part.

Meta descriptions that get used

There is no length limit for meta descriptions, but Google shows about two lines on desktop, which is roughly 920 pixels of 14px Arial, and often less on mobile. The meter tracks that width. Treat the first 120 or so characters as the part that must work on its own.

Google often writes its own snippet from the page text when it thinks that matches the search better than your description, especially for long-tail queries. You cannot force it, but a description that accurately summarises the page, written for people rather than as a keyword list, is used far more often. Each page should have its own.

Open Graph images that look right everywhere

Use an image of 1200×630 pixels, a ratio of 1.91:1. Facebook, LinkedIn, Slack and X's large card all display that shape well. Keep important text and faces away from the edges, since some apps crop to a slightly different ratio, and keep the file well under 5 MB; a compressed JPEG or PNG of a few hundred kilobytes is ideal. The image compressor can get it there.

og:image must be an absolute URL that crawlers can fetch without logging in, preferably over HTTPS. Relative paths, images behind authentication and URLs blocked in robots.txt all produce cards without a picture. Add og:image:alt to describe the image for people using screen readers.

Why your preview still shows the old card

Social networks cache what they scraped the first time someone shared your URL, sometimes for weeks. After changing tags, ask each network to fetch the page again: Facebook's Sharing Debugger and LinkedIn's Post Inspector both have a re-scrape button. For X, preview the link in a new post draft. Slack refreshes unfurls on its own schedule, so test with a URL that has a harmless query string appended.

If a card never appears, check that the tags are in the server-rendered HTML. Most scrapers do not run JavaScript, so tags injected only on the client by a single-page app are invisible to them. Server-side rendering or static generation solves that.

Auditing an existing page

Switch to Analyse HTML, open the page in your browser, view the source, and paste the head or the whole document. The tool reads the title, description, canonical, Open Graph and X tags, loads them into the editor so the previews show the current state, and lists problems: missing tags, duplicate titles or descriptions, relative image URLs, a noindex robots tag and an og:title that differs from the title.

The analysis runs on the text you paste, so it works for staging sites and pages behind a login too. Pair it with the schema markup generator for structured data and the robots.txt generator to confirm crawlers can reach the page at all.

Titles and descriptions across a whole site

On sites with hundreds of pages, titles and descriptions usually come from templates. That is fine as long as each page's version is unique and specific. A product template such as "{product name}: {key attribute} | {brand}" works; "{brand} | Shop" on every product page produces thousands of duplicate titles that Google will rewrite and that tell searchers nothing.

Put the most distinctive information first, because truncation removes the end. For category and listing pages, include what is listed and where; for articles, the topic and the angle; for local pages, the service and the place. Descriptions should add something the title does not, such as a price range, a delivery promise or what the reader will learn.

Audit periodically. A crawler or Search Console will show duplicate and missing titles, and the Analyse HTML mode here is a quick way to check any single page, including pages behind a login or on staging. Our SEO services team runs the same checks at scale during site migrations, where tags most often go missing.

Questions, answered

Something else on your mind? Ask a consultant and get a reply within one business day.

How long should a title tag be?

Short enough to fit about 600 pixels on desktop, which is often 50 to 60 characters. Wide letters use more space, so check the pixel meter rather than counting characters.

How long should a meta description be?

Aim for roughly 120 to 160 characters, about two lines on desktop. Google cuts by width, not count, and may write its own snippet anyway.

Does Google use the meta keywords tag?

No. Google has ignored meta keywords for ranking for many years, so it is not included here.

What size should an Open Graph image be?

1200×630 pixels (1.91:1), as an absolute HTTPS URL, under a few hundred kilobytes if possible. Keep text away from the edges.

Do I need twitter:title and twitter:description?

Usually not. X falls back to og:title, og:description and og:image. You do need twitter:card to choose the large image card.

Why does LinkedIn or Facebook show an old preview?

They cache the first scrape. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to fetch the page again after changing your tags.

Why does Google show a different title than mine?

Google rewrites titles that are too long, keyword-stuffed, duplicated across pages or that do not match the content. Make each title specific and accurate.

Why do my tags not appear when I share a link?

Most scrapers do not run JavaScript. If your tags are added on the client, they are invisible. Render them on the server or at build time.

Does Slack use Open Graph tags?

Yes. Slack unfurls links using oEmbed when available and otherwise Open Graph and X card tags, showing the site name, title, description and image.

Is the HTML I paste sent to a server?

No. Parsing happens in your browser with the built-in DOMParser, and the previews are drawn locally.

More free tools.

All tools

Need tooling like this inside your product?

We build internal tools, developer platforms and APIs. Tell us what your team keeps doing by hand.