Meta tag generator and Open Graph preview

Two groups of tags do two jobs. The <title>, description, canonical and robots tags are for search engines. Open Graph (og:) and X (twitter:) tags control the card people see when a link is shared in a feed or a chat.

The Open Graph protocol lists four required properties: og:title, og:type, og:image and og:url. X reads its own twitter: tags first and falls back to the matching Open Graph tags, but it needs twitter:card to pick a layout. That is why the output above repeats the title and description in both sets.

Google does not publish a character limit. Its title link docs say there is no limit on the length of a <title>, and that the result is cut to fit the device width. Because the cut is by width, a title of wide letters (W, M) is cut sooner than one of narrow letters. The title field shows the width in pixels next to the character count, measured in the 20px Arial font of desktop results, and the Google preview cuts at the same width, so you see where your title ends.

• Title: put the main words first. The counter turns amber after 60 characters, a common target, and red after 70, where X cuts card titles.
• Description: one or two sentences on what the page gives the reader. Amber after 160, red after 200, where X cuts card descriptions.
• Google may rewrite both. It can pick a title from the page heading or og:title, and a snippet from the page text, when that matches the search better.

Use one image that works everywhere: 1200×630 pixels, PNG or JPG, at an absolute https:// URL. Meta recommends at least 1200×630 for link shares. X shows summary_large_image cards as a wide image and needs at least 300×157 pixels, up to 4096×4096 and 5 MB. The summary card shows a square thumbnail instead, so a wide image is cropped.

Paste the image URL and the tool reads its real size, fills in og:image:width and og:image:height, and warns about the ratio. Setting width and height lets Facebook show the image on the first share, before it has downloaded the file. Not ready to upload yet? Drop the image file into the preview box to see how it crops.

In plain HTML, the tags go in the <head> of every page. Turn on charset + viewport above if you are writing a new page and want those two tags as well:

<head>
  <meta charset="utf-8" />
  <title>Acme: deploy previews for every pull request</title>
  <meta name="description" content="Acme builds a preview URL for each pull request." />
  <link rel="canonical" href="https://acme.dev/" />
  <meta property="og:title" content="Acme: deploy previews for every pull request" />
  <meta property="og:image" content="https://acme.dev/og.png" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

In the Next.js App Router, export metadata from a page.tsx or layout.tsx, or generateMetadata for pages that load data. Set metadataBase once in the root layout, so relative image paths become absolute URLs. Next.js does not copy the top-level title into openGraph, so the generated code sets both.

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.summary,
    alternates: { canonical: `/blog/${post.slug}` },
    openGraph: { title: post.title, description: post.summary, images: [post.cover] },
    twitter: { card: 'summary_large_image' },
  };
}

In React 19 you can render <title> and <meta> inside any component, and React moves them into the document head. Most social crawlers do not run JavaScript, so a single-page app that sets tags only in the browser shows the same preview for every URL. Render the tags on the server, or prerender each page.

• Old title or image after a change: the site cached its first scrape. Re-scrape with the Facebook Sharing Debugger or the LinkedIn Post Inspector. Changing the image file name also forces a new download.
• No image: the URL is relative, behind a login, blocked by robots.txt, or not an image. Open it in a private window to check.
• Wrong page in the card: og:url or the canonical link points to another page, often the home page copied into every template.
• Check what is live: view the page source and paste the <head> into Import from HTML above. The checks list what is missing.

More free tools for web pages: the robots.txt generator, the slug generator for clean URLs, the image to Base64 converter and the HTML formatter. For full SEO products, see SEO tools on DevHunt.