---
title: "Meta Tag Generator: Open Graph & Twitter Card Preview"
description: "Free meta tag generator with live Google, Facebook, and Twitter previews. Generate Open Graph and Twitter Card markup, and copy it in one click."
url: https://frontendhelpers.com/meta-tag-generator
updated: 2026-10-12
---

# Meta tag generator

Write your title and description, watch how they render in Google, Facebook and Twitter, then copy complete Open Graph and Twitter Card markup.

## 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.

```javascript
// 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](https://nextjs.org/docs/app/api-reference/functions/generate-metadata).

## Frequently asked questions

### How long should a meta description be?

Around 150–160 characters. Google truncates longer descriptions in search results, and frequently rewrites them to match the specific query, so treat yours as a strong suggestion rather than a guarantee.

### What size should an Open Graph image be?

Use 1200 × 630 pixels, a 1.91:1 ratio. Keep important text away from the edges because platforms crop differently, and always reference the image with an absolute URL — relative paths are the most common reason a share card shows no image.

### Do meta tags improve my Google ranking?

The title tag carries some ranking weight; the meta description does not. Their real value is click-through rate — a compelling title and description win more clicks from the same position, which improves performance over time.

### Why is my share preview showing the old image?

Social platforms cache link previews aggressively. Force a refresh with Facebook’s Sharing Debugger or LinkedIn’s Post Inspector; X has no re-scrape tool, so wait for its cache to expire or share the URL with a harmless query string added. Also check the tags are in the server-rendered HTML — scrapers usually do not run JavaScript.

## Related tools

- [Schema Markup Generator](https://frontendhelpers.com/schema-markup-generator): Add structured data so Google can show rich results for your pages.
 
- [Robots.txt Generator](https://frontendhelpers.com/robots-txt-generator): Control what search engines crawl — and avoid deindexing yourself.
 
- [Aspect Ratio Calculator](https://frontendhelpers.com/aspect-ratio-calculator): Get your 1200×630 OG image dimensions right, and stop layout shift.

---

This page is a free interactive tool. Use it in your browser at https://frontendhelpers.com/meta-tag-generator