Meta tag generator

How to use this tool

Meta tags don't appear on your page — they describe it to machines. The <title> and meta description shape your entry in search results; Open Graph tags control what Facebook, LinkedIn, Slack and WhatsApp display when someone shares your link; Twitter Card tags do the same for X.

The distinction that trips people up: meta tags don't directly improve your ranking. Google has said for years that the meta description is not a ranking factor. What it does affect is click-through rate — and a link that gets clicked more often, from a result that satisfies the searcher, absolutely does influence how you perform over time. Meta tags are a conversion problem dressed as an SEO problem.

Writing titles and descriptions that get clicked

Keep titles at roughly 50–60 characters. Google measures the rendered width in pixels rather than counting characters, so the limit is approximate, but 60 is a safe working ceiling. Lead with the distinctive words — if it truncates, you want the important part already read. Putting your brand name at the end, after a dash or pipe, is the conventional pattern for exactly this reason.

Descriptions have room for about 150–160 characters. Treat it as ad copy, not a summary: say what the visitor gets and why it's worth their click. Google frequently rewrites descriptions to match the specific query anyway, so a well-written one is a strong suggestion rather than a guarantee.

Open Graph: the tags that make links look good

Without Open Graph tags, a shared link is a bare URL with whatever text the platform can scrape. With them, it becomes a card with an image, headline and description — dramatically more clickable in a crowded feed.

The five that matter are og:title, og:description, og:image, og:url and og:type. The image does most of the work: use 1200 × 630 pixels (a 1.91:1 ratio) and keep essential text away from the edges, since platforms crop differently. Always use an absolute URL — relative paths silently fail, which is the single most common reason a share card shows no image.

Add og:site_name too. It's a small touch that puts your brand name on the card, and it costs one line.

Why your share preview looks wrong (and how to fix it)

Social platforms cache aggressively. If you share a link, then fix your tags, the old card will keep appearing — sometimes for weeks. The fix is to force a re-scrape: Facebook's Sharing Debugger and LinkedIn's Post Inspector both re-fetch on demand. X no longer offers a preview or re-scrape tool, so for X either wait for its cache to expire or share the URL with a harmless query string added, which it treats as a new link.

The other frequent culprit is JavaScript. Meta tags injected client-side are often missed entirely, because most scrapers read the raw HTML without executing scripts. Meta tags belong in the server-rendered <head>, always.

Per-page metadata in the Next.js App Router

On the Next.js App Router you don't write these tags by hand: you return them from generateMetadata and Next.js renders the <meta> elements. Three details catch people out. First, since Next.js 15 params is a Promise and must be awaited; reading params.slug directly was only a deprecated stopgap in 15 and no longer works in 16. Second, metadata from layouts and pages is merged shallowly, so a page that sets openGraph replaces the layout's entire openGraph object, default image included, rather than adding to it. Third, Open Graph URLs must be absolute; set metadataBase once in the root layout and relative paths such as /blog/my-post are resolved against it.

// app/blog/[slug]/page.js
// (app/layout.js sets metadataBase: new URL('https://example.com')
//  and title: { template: '%s | Example', default: 'Example' })
import { cache } from 'react';
import { db } from '@/lib/db';

// One memoised loader shared by generateMetadata and the page
const getPost = cache(async (slug) => db.post.findUnique({ where: { slug } }));

export async function generateMetadata({ params }) {
  const { slug } = await params;            // a Promise since Next.js 15
  const post = await getPost(slug);

  return {
    title: post.title,                      // becomes "… | Example"
    description: post.excerpt,
    alternates: { canonical: `/blog/${post.slug}` },
    openGraph: {                            // replaces the layout's openGraph
      type: 'article',
      url: `/blog/${post.slug}`,            // made absolute via metadataBase
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.ogImage, width: 1200, height: 630 }],
    },
  };
}

// e.g. { slug: 'layered-shadows' } → og:url https://example.com/blog/layered-shadows

Wrapping the loader in React's cache() lets the page component call getPost(slug) too without a second database query; requests made with fetch are memoised automatically. One behaviour changed in Next.js 15.2: when generateMetadata waits on dynamic data, the tags can be streamed and appended to the <body> for clients that run JavaScript, while HTML-only scrapers such as Facebook's are detected by user agent and still get them in the <head>. So test share cards with the platforms' own debuggers rather than by viewing source in your browser. Every supported field is listed in the generateMetadata reference.